Design Better with CRAP

31 Jul 2007 - 11:47am
650 reads
Jeffrey D. Gimzek
2007

http://www.lifehack.org/articles/communication/design-better-with-
crap.html

--

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?

--

Jeffrey D. Gimzek
Digital Experience Designer

www.jdgimzek.com
thundercougarfalconbird.blogspot.com

Syndicate content Get the feed