Document Design: CRAP Principles

In her popular design guide, The Non-Designer’s Design Book Links to an external site., Robin Williams provides writers and designers of any documents for public consumption—from menus to brochures to posters–with an easy-to-remember acronym for the key design principles of

Contrast
Repetition
Alignment
Proximity

Did you catch that? If you can remember CRAP, then you will remember the four main elements of good design. These different principles don't work alone, however; instead, they work together to help a document succeed.

 

Contrast

Contrast refers to the differences between elements of your design, and the best contrasts are strikingly different ones. (Otherwise, they will simply look like mistakes!) For our purposes, when you think of contrast in your document, look at heading styles and figure-ground.

Heading Styles

Headings should look strikingly different from each other and from the surrounding text. Your main heading should be the largest; your first body heading, a bit smaller; second body, a bit smaller yet; and so on.

None of them should look like the actual body text. Use capitalization, bold, bold italic, and/or color to differentiate them.

Here’s just one example of a set of headings, with text:

Main Heading (Title)
First-Level Body Heading
Second-Level Heading
Primary Body Text
Illustration Caption

Notice how the main heading (title) is the largest and how all subheadings grow smaller in size, but that none are the same size as the primary body text. The caption text is smallest of all.

These rules are good to keep in mind for documents like proposals, user documents, and reports, where you might use multiple levels of headings.

Figure-Ground

Figure-ground refers to the ability of a viewer to perceive something in the foreground of a design as distinguishable from the background.

In order to use your document, your reader must be able to read what’s written on it; in other words, the words and images (figure) must stand out from the background (ground). That means however much you like the idea of using watermarks or semi-transparent images as your background, you should think twice about it.

Basically, the text (all of it) should look strikingly different from the background. Your best bet is to choose a traditional dark-on-light color scheme.

 

Repetition

While repetition in writing is not good, in design it’s excellent.

Repetition of key components of a design -- colors, fonts, headings styles, and visual elements like logos, for example -- help unify a document for the user, even if that document is just a single page in length. Example #2 above repeats a number of things: font styles, colors, indenting. These repeated styles create a pattern for your reader to follow.

Notice how in the design below, which was created for the Pamplin College of Business, the key colors of orange, light blue, gray, and white are repeated throughout. The result is a unified design.

 

Repetition is especially important in longer documents, such as a report. If you make sure to repeat heading sizes and styles, for example, your reader will be able to tell at a glance "This is a subsection" or "This is a main section."

 

Alignment

In general, the different components of a design -- headings, images, text -- should be arranged in a straight line both horizontally and vertically. That is, the left edges should align, the tops should align, etc. In addition to making the layout seem clean and “neat,” alignment also helps readers use a document effectively: bulleted lists are set off from surrounding text and aligned within themselves, blocks of text indented together suggest a hierarchy of value, etc.

The same image that shows good repetition of color (above) also shows how good alignment makes for a clean, easy-to-scan design. Another VT design, this one for the Peer Career Advisor Program, shows how poor alignment can weaken a design and make reading difficult.

In this design, notice how neither the headings "Qualifications" and "Responsibilities" nor the bullet lists align with each other along the left. The result is not pretty.

Here is another example of poor alignment:

Interestingly, in her book, Williams suggests that one of the most boring and unfriendly methods of alignment is one we actually use quite often: centering text. Why is it bad? If you center all of the text on a poster or a page, you’re making the eyes of the reader bounce back and forth quickly from line to line; there is no hard line on the left or right to provide direction. Centering text also de-emphasizes hierarchy, which makes the reader’s job of distinguishing key material very difficult.

If you are going to “misalign” something, do it deliberately and do it in a really obvious way (so your viewer knows you didn’t just mess up). Many good designs play with the concept of alignment, but in general they will do so with only one or two key elements, like titles. If you misalign everything for the sake of “design,” you’re totally doing it wrong.

Proximity

When you follow the rule of proximity, you’re simply putting material closely together -- grouping it -- because it belongs together. Each grouping of material suggests a relationship within the document.

Look for distinct groups of material within your text and make sure that you are leaving enough space above and below each group. Check out the Peer Career Advisor Program poster. How many distinct groups of text do you see? There are four: (1) an intro paragraph, (2) a Qualifications section, (3) A Responsibilities section, and (4) a deadline section. However, they are crammed so closely together that it's not easy to differentiate between them. Use white space -- even something as simple as a line break -- to distinguish groups for your reader.

Proximity also comes into play with placement of headings, which should be closer to their text and farther away from preceding sections. Check out, for example, how the headings on this page are closer to the text beneath them and a bit farther away from the end of the preceding section. That's proximity in action.

Visuals, too, should be placed as close as possible to their in-text references. If you are producing a report about the VT Duck Pond, for example, and in your text you refer to the fact that Canada geese can often be found at the pond, you'd want to place a photo of those geese close to where you mention them.

Contrast, repetition, alignment, and proximity form the foundation of all good designs. However, there are more things to consider, like color, typography, and formatting.