In this article we have found some interesting insights into applying the principles of instructional design to digital projects.

How to apply design principles to online learning

1. Balance

Balance is the distribution of visual elements in an aesthetically pleasing way.

If we think of balance from a learning perspective, balancing the types of content we use in an experience is really important. We have to satisfy a variety of learners, using different modalities. This could mean using a balance of audio, images, gamification, video, animation, and text to create a more powerful learning experience.

From a more visual point of view, balance refers to the arrangement of the elements to create an impression of evenly distributed weight. Some simple ways to create balance in your course is to ensure that items that are in the same conceptual or functional category are presented in the same way. For example, you have three icons to show three different landmarks on a page, these icons should all have the same size and color palette and be evenly distributed to create a sense of balance.

Likewise, if you have a next and previous button, as well as a home and exit button, these should all be the same size and in a similar style . This will help create balance (and unity) unless you're trying to draw attention to one in particular.

2. Movement

Movement is a way to draw the student's eye to specific elements on the page or to create a sense of movement.

Movement has some functions in learning and design. Movement can help create visual interest , helping your experience feel less static and making certain elements animate on or off the page to create visual interest.

Motion can also mimic the real world, more like animation . For example, having a countdown timer that mimics the movement of the watch hands. Movement can also show the connections between ideas or draw attention to certain elements, such as having an animated key graphic or icons .

However, if abused, movement can also be a source of frustration or distraction. Imagine arriving on a screen and having to sit and wait for every single line of text to slowly fade before you can read it, or have multiple different elements fade, rotate, and grow as you try to figure out what to focus on.

3. Proportion / Scale

Proportion or scale simply refers to the relationship between objects relative to size .

An easy way to ensure consistency in scale is to set rules for text size , certain image sizes and button sizes , and most importantly, stick to them, avoiding distracting the user with too many variations.

4. Alignment

Alignment in design refers to how elements are placed on the page .

From a design standpoint, alignment simply means that everything on the page needs to be aligned with nearby elements, horizontally or vertically .

The elements should not only be aligned with each other, but also at the edges . Margins are simply invisible white spaces around a page that should always be kept clear. These should be kept consistent across all pages.

From a content perspective, we should consider whether the content and the type of development we are using are in line with the learning outcomes we are trying to achieve.

5. Contrast

The contrast uses two opposite elements to attract attention.

From a design standpoint, one would use white text on a black background to make it stand out, or pink and green together as they are contrasting colors on the color wheel. Contrast is a powerful tool for drawing attention to important elements on the screen and for guiding a student's attention. It is also very important for accessibility , ensuring that the content is readable for all learners.

From a content perspective, the use of contrast is really useful. Providing students with clearly contrasting examples and metaphors can grab their attention in overly boring educational settings.

6. Emphasis

Emphasis draws attention to a specific element , making it seem more important. This can be done using contrast, scale, color, movement and positioning.

However, if you use too much emphasis, drawing your student's eyes to everything on the page, this trick loses its effectiveness.

Just like emphasizing everything, emphasizing nothing can be very confusing and overwhelming for a student. Without knowing where to focus, a student may open your course and not know where to look or start, and feel overwhelmed by the amount of content in front of them. But if you create a visual hierarchy, guiding the student through the content by emphasizing what to enjoy when, the content appears much more manageable and interesting.

7. Repeat / Pattern

The repetition or the schema refers to the use of visual elements similar or related. This is a powerful way to reinforce a message, both in learning content and in design.

In terms of design and user interface, having repetitive elements helps create a consistent user experience. This means keeping the navigation buttons, menu items and logos in the same position on every page, ensuring that the user does not waste attention trying to understand how the course works.

In terms of images, the repetition of graphics or icons used to create visual associations with concepts can be a powerful learning tool. Repeating them throughout the learning content allows you to use visual elements to convey meaning without always having to use words. For example, you can associate the results with a trophy icon. This means that you would repeat this icon every time the content references the results to reinforce the message. Changing this icon to another image, such as a badge, will break the visual association.

Just as in using images, repetition in learning content is also very important for reinforcement . By repeating and recapping sections of the learning content throughout the learning experience, you help reinforce the key messages you want students to focus on. This can mean presenting or explaining the same content in various ways, asking multiple different questions about the content throughout the experience, or adding summary sections to draw attention to the main learning points .

8. Units

Ultimately, unity ties everything together, creating a sense of harmony and coherence in your design.

From a learning standpoint, unity would mean a common thread and cohesion in your experience. This means that any visual metaphor, theme or association must be conveyed across all of your projects.

The same goes for your design. Colors, fonts and interactions should be used consistently .

On a higher level, think about the unity of your experience as a whole, how information is structured, segmented and presented. Unity should be in everything: from time, to tone, to language and right through to visual design.