Design Better with CRAP

The power and ease-of-use of today’s computer applications has raised the bar drastically on the quality of design expected in the documents we produce. As recently as ten years ago, it was typical to produce business letters, memos, and other documents using a courier-like, monospaced typeface, often with only underlining available for emphasis of key passages or section headings. The only options for correcting typos and other mistakes were white-out, pencilled-in marks, or re-typing. Our documents looked boring, but they were expected to look boring.

Today that’s all changed. Word processing and desktop publishing software are everywhere, and offer dozens (if not hundreds) of fonts ranging from the simple and elegant to the downright bizarre. Style sheets on the web and easily accessible styling options in our desktop software allow us to easily create section headings, pull-quotes, bulleted lists, and text columns — giving us the potential to greatly enhance the layout and delivery of information.

The result, of course, is more likely to be a mish-mash of difficult-to-read fonts, seemingly random italics and boldfaced text, extraneous sidebars, and awkward layouts. In unskilled hands, the tools available to us can very quickly produce messy, over-designed documents that are far less readable than the plain typewritten documents of old.

Applying a few basic design skills can help avoid those mistakes, instead allowing the features we often regard as “extras” to take their rightful places as means of enhancing the readability and impact of our work. While design is a skill — equal parts art and science — that can take years to develop to a professional level, the core ideas are quite simple, and applying them can produce a marked improvement on your day-to-day work.

All design starts from four basic principles, abbreviated as CRAP (they come in no particular order, so the more squeamish can rearrange them to form “CARP”, if you like. I’d advise against “PCRA”, though…). These are Contrast, Repetition, Alignment, and Proximity.

• Contrast: Contrast refers to any difference of size, shape, or color used to distinguish text (or other elements, though here we’re focusing on text) from other pieces of 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. Increasing the size of headers and titles, or using ALL CAPS or smallcaps are other ways of distinguishing text. These techniques only work if used sparingly; a document typed in all capital letters has less contrast than one typed normally, so is harder, not easier, to read.
• 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 second-level headers, for instance, all second-level headers should look the same. For most documents, 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 bullets should be used on every bulleted list. Information that appears on every page should appear in the same place on every page. Design elements — like horizontal rules between sections or corporate logos — should appear the same whenever they are used throughout the document. Repetition of design elements pulls the document together into a cohesive whole, and also improves readability as the reader comes to expect text that looks a certain way to indicate certain qualities (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. Unaligned text floats mysteriously, forcing the reader to figure out its relation to the rest of the document. Centered text is particularly bad (and is a novice’s favorite design trick). One immediate step you can take to vastly improve the appearance of your documents is to remove the “center” button from your software’s toolbar (or, less drastically, just ignore it). It is rarely self-evident what centering is meant to communicate, and too much centered text creates a sloppy, undisciplined look.
• Proximity: Pieces of information that are meant to complement each other should be near each other. One great offender here is business cards and ads in local newspapers, where the name, address, and phone number are all scattered around the ad or card (for example, in the corners). Your reader shouldn’t have to seek out the next logical piece of information; rather, use proximity to make sure that the next piece of information a reader sees is the next piece of information they should see.

None of these principles stands alone. Repetition and alignment together create the “normal” state that allows changing the shape or position of a piece of text to produce contrast; repetition and proximity go hand-in-hand to create useful formats like bulleted lists — the repetition of the bullet adds force to the proximity of the points. In fact, the bulleted list above uses all four of these principles to work: it contrasts with the body of this article by being aligned to a different baseline than the rest of the paragraphs; each principle is in boldface, providing contrast, and is also directly followed by its explanation, providing proximity; the bullets, the boldfaced text, and the alignment are repeated in each new point on the list.

Almost all design builds on the foundation laid out above. Asking yourself how well each element of your layout satisfies these basic principles is a good way to make sure your work remains readable to your audience while also communicating a bit of your organization’s or business’ character. You may already unconsciously use these principles in your work, but knowing the principles and recognizing their use will help you make better, more conscious decisions in the future.

Ultimately, the goal is for the work you put in to designing a document to disappear, to become invisible, leaving your reader or viewer with unfettered access to the points you are trying to convey — both directly in your text and, ever-so-subtly, in your choice of design elements. In this respect, it’s a thankless job, because only rarely will anyone comment on (or even notice) the quality of design — but they will notice, and act on, the message. And that’s what’s important, isn’t it?

NOTE: The principles outlined above are developed in full in Robin Williams’ excellent book The Non-Designer’s Design Book, which I recommend to anyone who wants to further develop a solid sense of design to improve their day-to-day written work. This post is intended as an introduction to Williams’ concepts and deeper explanation of their use.