Visual Design for Digital Learning: C.R.A.P. Principles

Learning the main principles for visual design and knowing how to apply them to digital learning design is an important part of designing a final product that is both aesthetically appealing and cohesive for students.

With visual design, we engage learners, motivate them and appeal to their feelings. As digital learning designers, we need to know some main principles of visual design that can help our design process. ​

A simple and easy-to-follow method was introduced by Robin Williams in his book: The Non-Designer’s Design Book. This method is a series of 4 principles: Contrast, Repetition, Alignment and Proximity (and yes, this means that the abbreviation is C.R.A.P. and no, not that Robin Williams!).

Let’s explore each one of these principles a little further:

Contrasting elements on screen can add to the learning experience, reduce cognitive overload and even increase accessibility. Contrast refers to having two or more screen elements being in opposition.

You can apply contrast to the following elements on screen: ​

• Fonts: Use different fonts for different parts of your design e.g. use bold fonts to highlight the importance of content on screen. It’s also possible to mix different categories of fonts to create contrast, such as sans serif and serif fonts.

• Colours: Colour contrast can make something stand out but is also needed for accessibility, as it can help organize information and make learners focus on what you want them to focus on. The basic colours contrast is of course dark colours vs. light ones. With colour contrast, it’s possible to create a visual hierarchy to display the least to the most important elements. ​

• Lines and their thickness: These can be also used for cutting off things and or underlying content to highlight their importance  ​

• Shapes: Use of contrasting shapes for squares for boxes with text and oval shapes for decorative purposes only

Repetition and consistency create unique pieces of learning, which can be achieved by: ​

• Ensuring that the same fonts, colours and shapes are used throughout your learning materials or courses ​

• Having a specific layout being repeated for specific screens ​

• Using the same button design for navigation and the same terminology (both written and spoken) ​

When designing for in-house training you might encounter brand colours that could guide you. If you do not have these, always choose one template or colour palette and stick to it.

Do not be afraid to use the ready-made templates or create your own company’s as they bring consistency and standardization.

Every graphic and text added on the screen should be forming a uniform visual flow. The most common alignment would be to the left of the screen or its centre. If you have more than 1 element on screen always try to find a strong line and align objects to it.​

Watch out for spaces between elements on screen as these should also align. If you are using icons, images and text make sure that the distance between all elements is even. Do not be afraid to use alignment tools built into some tools or grids that can assist you in making your final products harmonious. ​​

We use on-screen many elements and if you group these elements together they form uniformed units as opposed to just on-screen elements. These groups can carry also information and that is why grouping elements might be effective too. ​

For example, if you use the same colours for shapes and use them in a certain context, then they might bring consistency and add educational value too. ​

Interested in learning more about visual design or becoming an instructional designer? Discover our programmes below.