Document Design Specifics: CRAP

CRAP is familiar to any graphic designer, and it should be familiar to writers as well. It originated with the influential designer and writer Robin Williams; she now regrets the acronym but not the ideas behind it.

C is for Contrast: Use Difference to Draw Readers’ Eyes to & Through the Document

You can see evidence of the most basic aspects of contrast in any web page or magazine. The headline text is always different from the body text. It’s often bigger and bolder; it can also be in a different typeface. Headlines make it easy to skip from one story to the next and get a cursory understanding of the news; news writers make it easy for people to read only the headlines in a newspaper or Web site.

Applying strong contrasting elements to your text is important because the human eye is drawn to difference, not necessarily size. When everything looks the same, it’s difficult to focus on anything—nothing stands out, and it’s hard for a reader to find information quickly. When things are different, they are more noticeable.

    

Contrast helps draw the reader’s eyes to certain elements in your text, and it also helps the reader follow the flow of the information and assess which items are most important and require immediate attention. Contrast creates readability, so you must pay attention to contrast in your documents. The following elements of a text can help you create a friendly, appealing sense of contrast:

Contrast Element 1: Size

Your eye moves toward things because they’re different, not because they’re large or small. Your eye is impressed by novelty more than sheer size or color or any other visual characteristic. There are all sorts of scientific theories about why this is so, but in short, it’s not so much that making something bigger makes it more noticeable. A person’s height, for example, isn’t so noticeable until the principle of contrast comes into effect.

There is such a thing as too much size contrast: think of those web sites with huge type or an overly enthusiastic use of the CAPS LOCK key. Less is more, but some size contrast is essential to draw the reader’s eye.

Contrast Element 2: Font Size/Style/Weight

There is a huge variety of typefaces, or font families, to choose from: Calibri, Arial, Times New Roman, and Bodoni are just a few. It’s important to choose a font (a particular size, style, and weight within a typeface) that fits your purpose. Some, like script and handwriting typefaces, are hard to read and not appropriate for technical documents. Many documents now use sans serif fonts, such as Calibri or Arial, which do not have the small extensions on the letters that serif fonts have (e.g., Times New Roman and Bodoni). Sans serif fonts are easier to read for those with visual or reading disabilities. Some fonts work well as headlines. Choose a font that’s easy to read and that fits the document’s purpose and audience.

Visit Purdue University’s Online Writing Lab page on Visual Rhetoric: Text Elements for a full and useful discussion of fonts.

Contrast Element 3: Direction (Vertical, Horizontal, Circular) / Position (Top, Bottom, Side)

You can create contrast by changing the direction or orientation of text, or of graphic elements such as lines, banners, or screens (smaller transparent or opaque boxes, often in a color that contrasts with the background).

In the sample, note that the image is on the diagonal, which contrasts with the horizontal, top-to-bottom direction of the text.

 

Contrast Element 4: Alignment (Center, Left, Right, Justified)

You should be familiar with the concept of alignment from having aligned type in Word. Note that a change in alignment can create visual interest. For example, headlines may be centered to make them noticeable. Images may be placed in a particular location on a page (or slide) to draw readers’ attention in one direction or another.

Contrast Element 5: Graphics, Banners, Quotes, Logos

Breaking up huge blocks of text with a variety of graphic elements can add visual appeal and interest. Remember, though, that less is more, so avoid using bold, underlined, and multicolored text all together. The poster for the play “One Third of a Nation” uses contrasting alignment, contrast in text, and a simple color contrast to create a dramatic effect.

Contrast Element 6: Color

Use color to make certain elements stand out. Create a sense of drama when you contrast one color with another. Make sure you don’t use too many colors and that your color combinations are easy to read.

Visit Purdue University’s Online Writing Lab page on Visual Rhetoric: Color for a full and useful discussion of color and contrast.

Contrast Element 7: White or “Negative” Space

Any area on a page that is not occupied by text or graphics is white or “negative” space. The absence of content eases a reader from being overwhelmed with information and draws the reader’s attention to the content itself. White space makes all kinds of documents more readable. Look at two examples to see how white space influences readability: example 1  and example 2. (If you’re interested, here’s a link to an article that investigates White Space as a rhetorical device that creates meaning in itself.)

R is for Repetition: Repeat Design Strategies to Create Coherence

The basic rule of repetition means that in any text, visual or textual elements that have similar functions should be formatted similarly in order to create continuity and show relationship between the elements. Repetition means that every heading should look like a heading, and headings with similar functions (section heading, subheading) should use the same format consistently throughout the document. The same principle applies to body text. Fonts should not change without a reason. Lines, logos, and other graphic/visual elements should be formatted consistently. This repetition provides a sense of order and continuity that makes your document more readable and professional looking. Note that there are many software programs that offer templates to ensure that basic design elements such as font size/style, color, or image size and alignment are consistent from page to page.

A is for Alignment: A Clear, Deliberate Arrangement of Items on a Page

Alignment can refer to text, but in document design it means much more; it refers to how the entire document is arranged. Most designers align all their content to some sort of a grid or pattern, creating a distinct, intentional arrangement of items on a page or screen. They use plenty of white space to cushion the items, which makes higher-contrast items stand out. Think of alignment in terms of hanging multiple pictures on a wall. You’d measure and equalize distances between them, or perhaps put similarly shaped or sized items together, to provide a sense of order through alignment. Many tools such as PowerPoint aid alignment—you may have seen lines appear on a slide when you’re placing an image on it.

P is for Proximity: Group Items with Similar Functions or Purposes

When design or text elements are placed next to each other in certain ways, readers or viewers can see that they are meant to be considered together and have some sort of relationship. The principle of proximity even affects white space: equal amounts of white space and equal line spacing indicate that items are related or should be considered parts of a whole. In this screenshot of a Technical Writing course, general functions are grouped vertically on the left, and then course functions are grouped vertically, before the text.