Visual Design Best Practices in Instructional Design

It is important to make conscious decisions when creating instructional content, whether it be text-based or graphic content. One of the most basic best practices for visual design is the acronym CRAP. CRAP stands for contrast, repetition, alignment, and proximity.

  • Contrast: Avoid using elements that are too similar, for example, the same size font, the same color shapes, or the same line widths. Contrast can help learners differentiate between different text and graphic elements. Contrast shows the learner the element that is clearly dominant.
  • Repetition: Be sure to repeat certain elements throughout the learning, to provide coherence. For example, if you are using yellow boxes to show learner tips, repeat the use of yellow boxes throughout the course; don't suddenly switch to green boxes. In the same way, using a color, shape, or font theme throughout the learning can help organization of your content. Learners will recognize that certain elements represent certain things, such as the yellow box representing tips.
  • Alignment: In both text and graphic placement, be sure that every element on your screen or page is intentionally placed. If text on one screen is left-justified and on the next screen it is centered, this can cause learner confusion.
  • Proximity: When placing similar items on a page, especially graphic items, group them together so that they become one unit. Proper proximity can help organize information for the student.
Author: Margaux Judge

Margaux Judge has worked as an e-learning editor and instructional designer for over ten years, writing and editing a wide variety of courses, from technical topics to soft skills. She has a Bachelor's degree in English and Textual Studies from Syracuse University and a Master's degree in Television Writing from Boston University.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.