<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1373947175984693&amp;ev=PageView&amp;noscript=1">

Learning & Development Blog

Implementing C.R.A.P. into your eLearning Design

Flashback to one of my very first Graphic Design courses in college. Professor Bill introduced an important methodology for assessing effective visual design.

“What are the key ingredients to a great design?” he asked.
Projected on the wall were four giant letters: C.R.A.P.
Contrast. Repetition. Alignment. Proximity.1

You might look at a design and know, or at least feel, that it is either “good” or “bad.” But the principles of C.R.A.P. will help you to express and define why those feelings and impressions arise. If you consider yourself a novice in eLearning design or non-designer, consider these terms a starting point for thinking about the effectiveness of a particular visual layout or design.

 

Contrast:

Contrast in eLearning Design

The principle of Contrast involves changing elements like type, color, size, shape, or space that are already different to be very visually different to minimize confusion. When designing eLearning courses, there are inevitably going to be sections of content that need to be text-heavy. Strong contrast in text treatment will make the content easily digestible. When there is a lot of content on a page, (i.e. web page design or a quick reference guide), it becomes even more important to utilize contrast to prevent everything from blending together.

Check out the site exposure.co. It's a beautiful website that uses very high contrast.

Repetition:

Repetition in eLearning Design

Aesthetic repetition and consistency enhances recognition, establishes unity, and sets user expectations. Repeating visual elements like headlines or similarly shaped or colored icons can be a helpful aid to the user in understanding the organization of information. Imagine if this subhead above (Repetition:)were a different font size or color than the other subheads. That would add confusion and be a distraction. Repetition is very helpful in making content quickly digestible.

Check out Line25.com to see a how repetition aides in the user's ability to skim the page and understand the hierarchy of content and actionable items.

 

Alignment:

Alignment in eLearning Design

With alignment, nothing is placed randomly on the page or slide layout. It is essential to consider how to scale and align the image to create balance and order on the page.There is nothing fancy or elaborate about this layout below from Khan Academy, but as a user, I immediately feel comfortable when landing on this page. With the intentional use of contrast, repetition, and alignment, the user can quickly understand how the page is organized.

 

Proximity:

Proximity in eLearning Design

The rule of Proximity states that moving objects closer together or farther apart will help achieve a more organized whole. There is an underlying rule to keep in mind: objects grouped together belong together. Grouping elements together implies association or relatedness. This sounds very obvious, but it is amazing how often this is mishandled. The user should not have to work to figure out the relationship of elements on a page.

 

In summary, good design is not about decoration or ornamentation; it is about communication. Many non-designers think about and speak of good design as picking the right colors or choosing the right images and graphics. Though those choices can be important, it all starts with C.R.A.P. Paying careful attention to the principles of contrast, repetition, alignment, and proximity will help your e-Learning layout communicate with effectiveness and elegance.

So next time you time you see a great design, slap your designer on the back at tell them, “that’s C.R.A.P.”!

 


1Term coined by Robin Williams in her fantastic foundational book for novice designers: Non-Designers Design book

 

elearning style guide checklist