If you have been following me on social media channels such as Linkedin or Instagram, you probably have stumbled upon my latest posts on interface or visual design principles on elearning design series.
I love great learning content writing, but, I think content is more powerful when aided with great design.
Many of us, including myself, have struggled to articulate the basic principles of good design, let alone applying them.
Visual design principles have been utilised in the history of most design practices, including graphic design and photography. Understanding the fundamental principles can help you improve your elearning design.
Let’s get started!
Alignment helps to connect elements on a page to guide where the eye move. These elements can be image, text, icons, graphic, shape, or illustrations. Alignment improves readability and content flow.
There are three most common types of alignments; left, center, and right. Using on text, alignment helps learners to read content easily.
To be able to create a solid layout design, understanding Grid can be helpful. Grid system helps structure elements based on sequenced columns and rows.
Your grid systems are varied according to the screen sizes. If you would like to read more about Grid, go to this article on The Grid System: Building a Solid Design Layout .
Here’s an example of a grid system:
There are 3 different types of alignment; left, center, and right.
Text alignment helps learners to read content easily. It enables the composition of a text document using different text positioning on a section or a whole page.
Notice that multiple alignments are applied on the design elements below. They cause a chaotic sense of eye flow. Let’s improve the layout using different text alignments.
If you use the left text alignment on an elearning design, below is an example on how to do it. Moving all the group of texts to the left allows images occupy the right side of the design.
Right text alignment probably makes more sense for elearning content that use languages with right to left scripts. This alignment can feel unnatural on body text if we read English or other languages that are derived from Latin, or left to right scripts. However, this is great to use on titles, short sentence, or big letters to create a dynamic layout.
Center alignment can make elearning content look prominent or elegant, but it works best for headlines and short line of text. If you choose to use it on a paragraph, others may not agree, but my rule of thumb, not using it on more than 4 lines of text and word count on each line contains maximum of 10-12 words.
Like anything, once you you become familiar with these alignments, you can create dynamic elearning layout without compromising readability.
I hope that's helpful!
You can view the PDF version of the Alignment post here.
Or else, you can also go to my Instagram account @shirleenwong.digital and find the post :)
With my background in digital design, I have always prioritised optimising user interface and user experience design in my work. I believe the value of good interface design and user experience in e-learning. User interface design refers to the look and feel of e-learning and the interaction between the user and the interface. User experience refers to the psychological experience the learner has when interacting with the e-learning.
Send me a message about your project, then I'll set up a meeting for us to chat in details!