Online Course Design for eLearning: 6 Graphic Design Principles

Before we plunge into online course design, let’s imagine that we are at a zoo or a museum where there are classes of small children on field trips from their school. It’s chaos in a lot of ways, isn’t it? Although the kids are supposed to be with their teacher or leader, there are always a couple of them lagging behind, packed tightly together, or floating around with everyone else. If someone said, find the kid with the blue jacket and fair hair, could you? Yes, after your brain recovered from the overload! Now imagine that someone said, “Okay, go get all those kids to stand in a line and follow you to the dinosaur exhibit.” How would you do that?

Instructional designers get information that resembles those small children every day and are tasked with the job of getting that information to line up and move in a specific direction so that everyone benefits. They work with concepts and words, images, and media to accomplish this.

As important as the content is, the visual presentation of that content strongly affects how easily learners will be able to learn and apply new information. In this article, we are going to review six basic principles of graphic design that will help you build a compelling online course. The principles and examples follow those presented in a webinar hosted by iSpring and led by Llamasoft instructional designers Meg Fairchild and Sam deGeus (link at the end of the article).

Why Use Visual Design Principles

First, let’s take a look at the illustration from the popular puzzle book, “Where’s Waldo?” created by English illustrator Martin Handford.

So this is Waldo:

Can you find him in this image?

An image from the book “Where’s Waldo?” by Martin Handford

Probably not! The creators of the Where’s Waldo book puzzle series specifically and carefully increase the cognitive load in order to make it more difficult for you to find Waldo in this puzzle.

Our brains cannot function well in cognitive overload. As they take in all kinds of information, our brains try to bring order, sense, and direction to what they are experiencing. The more chaos there is, the less likely the brain is going to remember and recall the information being presented. This is important to keep in mind when designing an eLearning course.

According to Sam and Meg, there are six principles of good graphic design – contrast, similarity, proximity, alignment, symmetry, and repetition – that should be applied when building a course. They allow you to create a narrative that is restful, shows the learner a direction to take their attention, gives them confidence in viewing and interacting with new content, and allows them enough practice with the content that they store it in their long-term memory successfully.

Online Course Design Principles

Now let’s look at these principles in greater detail. We will explain what each principle is about, provide examples of good and bad slides, and share best practices on how to apply these principles in course design.

1. Contrast

Have you ever tried to find your seat in a movie theater after being in the lobby for a while? All the people and all the seating in the darkened theater are so uniform that it takes a little while for you to find your seat. Even if you went with someone and they were wearing a yellow jacket, the darkness puts everything in the same shadow, so it is difficult to distinguish the yellow jacket of your friend from someone else wearing a white shirt.

As with the Waldo illustration, a lack of contrast will not give the learner a location to focus their attention on so they know how to start an activity. There is no way to distinguish the most important thing on the page.

Here is an example of how contrasting colors can actually add context or additional meaning to a diagram.

In the image below on the left, all of the items look more or less the same with equal importance and the same type of information because they are numbered together and have the same level of intensity to the eye. In fact, if you were color blind, you might not be able to distinguish them from each other very easily. The ‘Dos’ and the ‘Don’ts’ look the same.

With the image on the right, you know that the items are different because the tips are grouped together and separated by a line and image, making it easier for your brain to group and contrast the information. Additionally, to support a color-blind person, the hues of the red and green are on the same level as in the words (dos on top with a green ‘o’ and don’ts on the bottom with a red ‘o’). The boxes are also not numbered together, which further contrasts them as list items.

So how can you tell where the most important part of the page is when you’re building it? You could try the ‘squint test’ as described in the webinar. To do this:

Step back from your screen or graphic
Look at your design
Squint your eyes so you aren’t looking at the picture clearly.

What stands out to you? That contrast is what the learner will immediately be drawn to when they first see the page.

Try it out on these images:

Do you see how the message has changed?

2. Similarity

If contrast enhances differences and shows the learner what is important and what to do next (think bright arrow buttons to advance the screen), then similarity serves to group elements together and shows how elements on the page are linked or related. In cognitive load theory, things that the mind can recall easily and link or group together based on memory, reduce the amount of processing and allow the learner to spend more time learning novel information.

Your mind makes these types of assumptions and groupings all the time, and usually without your awareness. According to the presenters, Malcolm Gladwell, in his book ‘Blink’ (link to a summary here), says that people can make an assumption within 2 seconds and group things together. This similarity of the elements on your page can be tested by doing a blink test. Here’s how you do it.

Close your eyes for 10 seconds
Open your eyes and look at your screen for 2 seconds and then close them again
Recall what stood out to you

Would you like to try this test? Then take a look at the image below; can you find the ‘odd men’ out?

If nothing stands out, then your elements are similar and will be grouped as a single thing in your processing memory. If this is what you want, great! If not, you will have to add something more distinguishing and amplify the contrast in order to make that most important element stand out.

3. Proximity

In the webinar, Fairchild and deGeus use an interesting slide to illustrate how proximity allows your mind’s eye to build associations between elements or show distinction from a group.

Here is a slide from the presentation showing a bunch of stickers on the back of a van. It illustrates the type of family that owns or travels in the van. When you look at the picture on the left, what’s the first question that pops into your head? For the presenters it was, “Why don’t they like the cat?”

If we were to draw a line connecting the cat though (as in the picture on the right), you would make the lack of proximity into a different story: “Oh, the cat is on a leash and doesn’t like them; I see!”

Drawing elements together by putting frames around them, bringing them closer together on the screen, or aligning them so they look like they are associated helps the learner to understand that the items which are put together are ‘one,’ which reduces cognitive load. They are processing one idea, not several, and this is more restful.

4. Alignment

Have you ever been in a museum or at someone’s house where a picture in a frame on the wall was crooked? Perhaps not extremely crooked, but just enough for you to notice. Did you remember what was in the frame? Many people would say no because the lack of symmetry caused their brain to process the straightening and not look at the actual image too much! (Think about the squint test here.) The same can be said for designing eLearning. There are two rules of graphic design you need to follow so your learners won’t be distracted by the layout but will focus on the content: alignment and white space.

According to the presenters, “Alignment creates a sense of unity and harmony and consistency.” It also allows your brain to build associations without your having to tell it to. Here’s a slide about the Burj Khalifa, one of the tallest buildings in the world.

Both images include the same elements: an image of the building, and a text about the building. But, in the picture on the left, the two are not connected. There is no emotion or imagination linking these two on the page.

In the image on the right, the text is aligned close to the top of the image itself. Now your imagination can think about what it would be like to be in a swaying building! Alignment of the objects draws relationships to those objects and causes a reduction in cognitive load because you’re making the connection for the learner on the page.

5. Symmetry

Whereas alignment is the rule of putting things so they line up, symmetry, which obeys the rule of thirds, means using the space on the page in thirds or on a grid to make elements on the screen look more natural. The best way to describe this is to demonstrate.

Look at the images below. One has the screen elements placed equidistantly; the other has the elements placed so that the text is in the larger space (taking up two-thirds of the space). The text in the image on the left appears to have been an afterthought, while the text in the picture on the right allows your eye to rest on the text after you acknowledge the flowers in the most prominent spot.

The rule of thirds says that the object or the focal point of what you want your learner to see should be on one of the axis points where the X and Y lines meet in a 9×9 grid.

Your eye will always focus this way when trying to process an image, so make sure you put your more important element (the focal point) in the most important place. This doesn’t always mean putting the core content in the top left corner if you want someone to explore the entire image.

6. Repetition

When designing eLearning, repeating key points helps the learner to remember and associate these points and the new information presented together. This principle is called ‘scaffolding.’ This is also an important element of graphic design within eLearning because it allows the learner to anchor key information together.

Always using the same icons for similar information, repeating buttons that perform the same action, or creating memory pegs from maps or callout blocks of contrasting text on different pages helps the learner focus on the content because they don’t have to think about the design. As deGeus and Fairchild mention in their presentation, “Good design is obvious but great design is transparent.”

Repetition also means that all of your slides or pages in your online learning design have a similar font, layout pattern, imagery style, buttons, and other markers that make a unified and cohesive presentation.

Some Other Tips for Designing an Online Course Better

There are other things that you have probably learned by working with graphic designers or others who work with combinations of images and texts. The difference between a polished professional-looking course or presentation is to focus on the elements above (consistency, repetition, alignment, and proximity) and keep the following ideas in mind.

Less is more!

Fonts

Never choose more than 1 main and 1 highlight font and try not to put more than 3 fonts in a single slide or presentation.
Use italics or bold, but not together and particularly not with underlining (it makes your text look messy and hard to read)

Colors

Choose no more than three main colors for your boxes, highlights, fonts, and other elements on the page. You might also consider using a color wheel to help you pick the colors.
3 colors should be equidistant from each other on the wheel
3 colors could also be side by side (called a monochromatic color scheme)
2 colors could also be complementary, meaning at opposite sides of the color wheel

Good design is accessible design

Try to pick Sans Serif fonts in order to increase readability in your pages for those who have difficulty reading or who don’t use your language as their first language.
Try to use full contrast in your text on a page if the text is laid over an image (you can achieve this by using a translucent background matte under the text or shading the text box to make the text more visible).

Use captions and alt tags to help learners who can’t see well understand your images or media.
Don’t lock your pages (meaning don’t force your learners to go to every single page) if you can to allow the learner the autonomy to discover and review content as they see fit.

Useful Resources on Course Design

Do you want to know more about how to add great design principles to your eLearning creation? You can start with some great books, online resources, and people to follow!

Blogs

The iSpring Blog has a wealth of information about creating great eLearning!

Bianca Woods at Clever Raptor (you may know her as the program manager at the Learning Guild) has a fantastic blog and a series of presentations you’ll love!

Also, to expand your knowledge in course development, check out some of these eLearning websites.

Twitter

You will find amazing helpful resources by following these designers:

Books

Here’s a short list of books you may find useful to read:

Online tutorials

Here’s an online course designed to help you learn more about eLearning design.

Also, take this simulation to enhance your visual prowess!

To Sum Up

We hope this article will help you organize and present information in your eLearning courses effectively and make them appealing for your learners. However, if you’re not ready to plunge deeper into visual design but want to start creating professional-looking courses right away, try the iSpring Suite Max authoring tool. This is an eLearning toolkit that allows you to build courses by using ready-made templates created by professional designers. The only thing you need to do is to fill the slides with the texts and images, and your course is ready to go. So what are you waiting for? Download the iSpring Suite Max free trial to get started today.

Those who are interested in viewing the webinar that this article was based on can do so here

We would like to express our gratitude to the following eLearning expert for sharing their knowledge:

Sam deGeus,

Training Manager at LLamasoft

Sam has 11 years of instructional design and development experience. A bachelor’s degree in art and graphic design has enabled her to create content that not only meets the business need, but also has a professional and well-branded visual design. Having successfully served in a variety of roles, Sam’s wide range of experience has allowed her to develop a keen eye for big-picture thinking and relating change to actionable items.

Meg Fairchild,

Instructional Technologist at LLamasoft

Meg has been a course developer, instructional designer, software and platforms team lead, and learning experience creator for more than nine years. She has a Certificate in Graphic Design and loves to practice her photography skills by taking photos of nature and her two young kids.