Dublin Library

The Publishing Project

CRAP in Design

  • 3 min. read

 

When working in Instructional and Presentation Design I remember the way we were taught basic design, to think CRAP.

CRAP is the not very polite acronym for these four basic design principles

  • Contrast
  • Repetition
  • Alignment
  • Proximity

Why am I interested in these principles?

Whenever working on a presentation it's important to keep people engaged and tell a good story that will engage the audience. It will also let you move the content between formats: PowerPoint to Captivate and self-paced learning and to web presentations.

The Principles #

Now that we've looked at what the principles are and why I think they are important, let's revisit them and talk about them in more detail.

Contrast #

In this context, contrast refers to any difference in size, shape, or color used to distinguish text.

The use of bold or italics is one common form of contrast; the difference in shape makes the bolded or italicized text stand out from the surrounding text.

Changing the size of our text or the font face we use for specific portions of the presentation (headings, subheadings, body text) is another way to create contrast.

One particular way to change the contrast is to change the foreground or text color and compare it with the background color. To be absolutely sure we have a good contrast ratio between the two colors we can use tools like Lea Verou's contrast-ratio.com or, if you're working on your browser, use Chrome DevTools color accessibility checker.

Font selection is another way to provide contrast for a slide or document. It can be through different fonts or it can be through different typefaces of the same font family.

Repetition #

Repetition: Repetition in your text is bad; repetition of your design elements is not only good but necessary. Once you’ve decided on a size and typeface for an element then all instances of that element should look the same.

For most documents use a few, two or maybe three, fonts — leaning heavily on one for all the body text, with the other two for headers and maybe sidebars — are enough.

The same idea of repetition applies to other elements in your pages/slides such as bullets in lits, placement of information that is repeated in multiple pages/slides of your document, and design elements — like horizontal rules between sections or corporate logos.

Repetition of design elements pulls the document together into a cohesive whole and also improves readability as it sets the reader's expectations about the text looks and what it does (e.g. the start of a new section, a major point, or a piece of code).

Alignment #

Alignment is crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented long quotes.

Your document should have a couple of vertical baselines and all text should be aligned to one of them.

Proximity #

Pieces of information that are meant to complement each other should be near each other. Readers should be given a logical way to get to the next piece of information they need to see next.

Edit on Github