Ever stare at a learning experience and think, "Something's... off?" We've all been there! Knowing what to fix is half the battle, right? Thanks to an influential book by Robin Williams (no, the other Robin Williams) The Non-Designer’s Design Book (1994), we have a memorable acronym to guide us.
Here’s my take on the CRAP rule - four design principles that you can use to identify gaps in your e-learning designs and fix them!
When you look at the screen, can you tell what is the most important thing to focus on? Where the most important words are, the clickable items? Or is your design starting to feel a little monotonous and everything is speaking with the same visual voice? Time for contrast!
Interestingly, this design principle aligns perfectly with Mayer’s Signalling Principle in multimedia learning.
Mayer (2009) found that highlighting key information significantly boosts how well people remember it. Contrast acts as that highlighter in your design. By making important elements visibly different, they naturally stand out, guiding the learner's focus. This visual difference is essential for creating a clear hierarchy, making text easier to read and improving overall usability.
Ways to create contrast:
Let’s apply the principle of contrast to an example:
Here is the home page of a fictional life coaching company’s learning management system.
Looks quite boring, right? There is a lot of similar text in a small space and it feels difficult to make sense of the information. Let’s fix that with some contrast.
Yes, now we can see some hierarchy coming through. Simply by making the size, colour and weight of the text different we can distinguish between the heading, subheading and body text. Note how the most important text information (the heading) has the most contrast with the other text.
When you want things to stand out, you will use a high amount of contrast. But be careful with this; you also don’t want the entire design to shout at the viewer.
Carefully examine the content and decide the order of importance each element carries. Balancing different intensities of contrast is the key to maintaining this order.
Another important function that contrast fulfills is legibility. Adequate contrast in colour ensures that your designs are accessible to your audience. You can use this contrast checker to test your colours.
At this point the design has a good sense of hierarchy, but does it have visual impact? Can we use any additional visuals to convey the information more effectively? We’ve adjusted the styling of the text, but all of the text elements are still presented in paragraph form.
Perhaps it’s time to reconsider the layout and see if we can differentiate the format of any information to make it more impactful? It’s also important to assess whether the overall design is visually interesting and distinctive in terms of branding.
In the updated design above we’ve discarded some of the paragraph text and opted for a three-point benefit list. It reduces the density of the information and highlights key points. The addition of icons draws the reader’s eye and eases the digestion of information. By placing the benefits on a different background and adding icons, we are using contrast to draw attention to something important we want the learner to remember.
Other than highlighting textual information, we can use contrasting elements to add visual interest and brand distinction.
Adding decorative elements such as imagery, illustrations, patterns or stylised text can support the concept of your design, add character, and engage the viewer’s eyes. In our example we’ve added hand-drawn, organic illustrations and the company slogan “Dream, Shape, Guide, Thrive” in a decorative style unique from the informational text.
Contrast can produce stunning results. While its application can range from strikingly simple to intricately layered, mastering balance is key. Our next principle, repetition, will help with that!
Tips on using contrast:
Ever notice how repetition makes things easier to grasp? That's because it builds familiarity and comfort.
In design, repetition of key elements—fonts, colours, patterns—creates a unified experience, allowing learners to focus on the content, not the inconsistencies.
For example, in Learning Experience Design we use repetition to present similar types of content (such as processes) in similar ways, so that the learner already has an idea of the type of cognitive process they are about to perform and feel mentally prepared. In a similar vein, to improve the usability of your learning experience, clickable elements should consistently remain the same colour throughout and be positioned in similar areas on the screen. In these small ways, repetition of core design patterns goes a long way to reducing cognitive load.
Of course too much of anything is always bad, so be careful! Too much repetition of any design element can undo the work you put into creating contrast. Think of them as partners: contrast and repetition need to work together in harmony to truly elevate your design.
Want to see repetition gone wrong? Check this out. Can you identify some of the problems with this design?
You can see here how the use of green and highlighted text have gotten entirely out of control. While it might seem like a good idea to highlight text to help the learner know where to focus most of their attention, the overuse of highlighting ends up doing the opposite and overwhelming the learner.
Tips on repetition:
Simply put, alignment is the strategic placement of elements in relation to each other, creating visual order and balance.
Always aim to align text, images, and elements so learners’ eyes follow a clear path.
Here are two key ways to think about alignment.
Alignment through placement.
When the edges of elements align, they create a line that guides the eye, establishing a sense of order. Your margin space, the empty space surrounding the design, serves as a primary guide for placement. Aim to align elements by their top, center, or bottom edges to maintain consistency, otherwise your learner will get distracted by the disorder.
Alignment through distribution.
Want to create that feeling of balance? Evenly distribute your elements! Design grids are your go-to for getting this right. In the example, we used a simple three-column grid to space out the icons. By lining up the center of each icon with its column, we made sure they all feel equally weighted.
Tips for alignment:
When elements are close, learners make connections faster!
The rule of proximity suggests that the closer objects are to each other, the more related they appear.
This concept aligns with Mayer's Spatial Contiguity Principle, which states that by minimizing the distance between related elements, you reduce the cognitive effort required for learners to process information, allowing them to focus on understanding the content itself (Mayer 2009).
In this website header, you'll notice how both repetition and proximity organise the content. But look closer at the heading, subheading, and body copy – they show how proximity alone can create clear groupings between different types of information.
Tips for proximity:
I hope you found these tips helpful. Remember, it's all about making your designs clear and effective. So, next time you're working on a project, keep contrast, repetition, alignment, and proximity in mind – you'll be amazed at the difference they make!
Mayer, R. E. (2009). Multimedia learning (2nd ed.). Cambridge University Press.
Williams, R. (1994). The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice. Peachpit Press.
