User Interface Design Principles for elearning Design

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 for eLearning Design

Why?

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:

‍

Text Alignment

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.

‍

Next, let's take a look at a layout example! 

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.

‍

Left Text Alignment

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

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 Text Alignment

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 :)