Unveil users’ learning journeys visually with our Learning paths widget. This widget showcases completed and pending courses for each user in a visually engaging manner, akin to a pathway rather than a conventional list. Administrators can craft these paths using uploaded vector graphs (SVG files), with courses automatically distributed along the path. The creative possibilities are boundless, from simple lines to vibrant, thematic designs that narrate a story.
Moreover, administrators can tailor learning paths for desktop, tablet, and mobile devices, ensuring an optimized experience across all viewports.
Additional configuration options allow administrators to include an info area, adjust the size of course images within the learning path, and define the display of start and finish elements or a details area. They can also dictate the order and limit the number of courses shown. Furthermore, each learning path can contain courses from one or multiple course categories.
By default, the widget presents a pattern of hexagons representing courses, adding visual appeal to the learning journey.
We have set up a course for this widget on our demo page.
We provide lots of free design packages to create different learning paths.
Instructions for creating your own learning paths
What size format should the files have?
The format always depends on the design and how the learning path will be used later (number and size of course icons etc.).
You can use these formats as a guide:
- desktop: 1200x800px
- tablet: 834x1000px
- mobile: 400x1000px
However, the values are only guidelines and should be checked with the respective design ideas.
Which software should be used to create the paths?
Paths can be created in any graphics programme such as Adobe Illustrator or Figma. It is important that the final file has the SVG format.
What needs to be considered when designing the path?
First consider the direction in which the path should run, as your courses will be arranged from start to finish.
A path needs a clear beginning and an end and should not be interrupted. It can also cause problems if anchor points are subsequently deleted or added. It is advisable to use a simple path and to redraw it again if a change is required. Shapes do not work well either, as the start and end points of a circle or square fall on the same anchor point.
Make sure that there is always enough distance from the path to the edge, especially at the start and end points.
Note that the length of the path must be approximately the same for all viewport versions. Otherwise, for example, 15 course icons will fit on the path in the desktop version, but it will look squashed on mobile.
What styling options can be used for the path?
First of all: The styling of the path must be the same for each viewport. In other words, whether on desktop, tablet or mobile – the path must have the same thickness, colour, etc. Otherwise, the settings of the mobile variant apply to all variants.
We have tested various styling options and noticed that something may work when exporting from one graphics programme and not from another. So it’s best to try out whether your idea works as a learning path.
Basically, we noticed the following if you work in Adobe Illustrator:
- Angular paths or completely straight lines are problematic and should therefore be avoided. However, this works in Figma, so you should test it in your graphics programme. In Adobe Illustrator, you can make do with minimal curves that are hardly noticeable visually.
- If you use a dashed path, then do without the corner compensation.
- The end of the path must be rounded, angular does not work properly.
Paths can basically be any colour, dashed, dotted or have a shadow. A colour gradient also usually works, although we sometimes had problems with this in Adobe Illustrator. Files exported from Figma are somewhat more stable in combination with Dash Learning Paths; we had no problems with colour gradients here.
How to integrate background images?
To add a background image to the path, this can either be inserted afterwards in the Dash settings or integrated into the SVG itself.
We recommend integrating the image into the SVG if the path interacts visually with the background image (e.g. a road passing a tree). In this case, it is important that the path remains in a specific position, which can only be guaranteed if the image is integrated in the learning path.
Please note: Background images must always be created as pixel graphics. If you create background graphics from vectors, convert them to pixels before exporting the SVG. The only vector path should be the learning path. Otherwise Dash will not know where to place the course icons.
Do I need to take anything into account when exporting the file?
Export the file as SVG, there should only be one vector path in the SVG, the Learning Path. When exporting to Adobe Illustrator, always set the SVG settings to presentation attributes.
Track learning journeys through a visual learning path, illustrating which courses remain pending and which are already completed.
See also: Curved design
Enhance your learning path by adding background images that weave a narrative.
See also: Mountain design
Additionally, customize the path itself to seamlessly blend with the background and storytelling elements.
See also: Race design
Include photos and use spotlights to highlight the overall topic of your course series.
See also: Surfer design
Create entire compositions and incorporate the path as part of them.
See also: Landscape design
Integrate your own icons or logos alongside the learning path.
See also: Runner design
It is not necessary to upload a SVG file to use the learning path widget. Per default, courses are represented by a pattern of hexagons.
If the details area is activated, users can click on one of the course images and a course modal will open containing further information.
