Using C.R.A.P Web Design For eLearning

From eLearning Industry b yLi Whybrow

This week we are looking at some C.R.A.P elearning. Yes, you read right. If you haven’t seen or heard of C.R.A.P before, it is a set of principles used in visual web design. If you’re not familiar with the principles of C.R.A.P design, this article is for you.

C.R.A.P Web Design For eLearning

Last week we began looking at some web design practices we could (and should) be borrowing from web design to help create exceptional elearning. Last week was scrolling and this week, we’ll be borrowing C.R.A.P principles from visual design, in other words, C.R.A.P web design for elearning. Robin Williams described these four visual design principles in her terrific book, The Non-Designer’s Design Book, and if you don’t have a copy on your bookshelf, change that now!

Rapid elearning tools have made it increasingly easy to design and build good elearning without having to know how to code. Tools like Elucidat have unleashed the creativity of instructional designers, allowing us to build stunning elearning rapidy. But what about design, we need to know how to do that, don’t we? And sometimes we need to take a step back and check that the results don’t end up as a mish-mash of fonts, random formats and awkward layouts. In unskilled hands, the tools available to us can very quickly produce messy, over-designed elearning that is far from perfect. Applying a few basic design skills can help avoid those mistakes.

What does C.R.A.P mean?

C.R.A.P stands for contrast, repetition, alignment and proximity and these are the four principles of design that graphic and visual designers use all the time for websites. Let’s dive straight in and get familiar with how you can apply these principles to elearning.

1. Contrast

Contrast is often the most important visual technique affecting what appears on screen. By applying a little contrast in the right places you can avoid elements on the page that are merely similar:

  • making different things different
  • making the important elements stand out
  • muting less important elements
  • creating a bit of dynamism on the screen.

Here are a some of the screen elements that you should look at providing  contrasting to:

  • Sizes
  • Colours
  • Fonts
  • Line thickness
  • Location of blocks or elements on the screen (e.g. text blocks)
  • Spacing between elements
  • Shapes

Titles, body text, bold text and underlining help to organise information, make it meaningful and memorable and provide direction or instruction for your learners. The use of bold or italic text is one common form of contrast — the difference in shape makes the bolded or italicized text stand out from the surrounding text. This is a great example from Utility Warehouse of strong visual design with bold contemporary contrasting colours.

2. Repetition

Web designers repeat visual elements of their design throughout the site. Elements such as colour, shape, texture, spatial relationships, line thicknesses, sizes, can all be repeated to help develop a sense of organisation, unity and consistency.

By repeating design elements on the screen such as titles, layout, colour schemes and so on, you provide visual cues to your leaner so that they’re able to follow the course content and understand how it all fits together.

Some elearning authoring tool allow you to build templates that you can reuse for various page types, making it quicker and easier to set up these designs once and then use them consistently over and over. Some authoring tools provide ready made ‘themes’ which have already been set up to adhere to the very best elearning and web design practices.

Templates and themes allow you to standardise repeated screen types such as:

  • Introductions
  • Scenarios
  • Screens with media (images, audio, video)
  • Interactions
  • Summaries
  • Quiz instructions
  • Quiz screens

3. Alignment

Nothing should be placed on screen in an arbitrary way. Every element should have some visual connection with another element. This creates a clean, clear and sophisticated took and feel. Aligning your screen elements creates a visual flow and visually connects the screen. This example from Make Sense Design of a one-page design demonstrates the principle of alignment well.

You should be asking yourself constantly: Does everything line up or have you got things centred, left aligned or out of place?

4. Proximity

Proximity on the screen provides a critical cue about whether items are or are not related. Elements that are related need to be grouped close together. When several elements are in close proximity to each other, they become one visual unit rather than several separate units. This helps you organise information, reduces clutter and gives your learner visual clues to help them understand the meaning of what’s being conveyed. You should be asking yourself constantly: Can you find everything you need on your page easily? What is it that your learners will take note of?


Almost all design builds on the principles we’ve looked at in this article. You may already unconsciously use these principles in your work, but knowing the principles and recognising their use will help you make better, more conscious decisions in the future. Better still, let tools such asElucidat help. Ready-made themes that you can choose and apply quickly to any elearning project are all built with sound web design principles underpinning their design. For some inspiration, try looking at Abduzeedo for websites and Elearning Superstars for elearning.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s