Understand design principles that are important for both paper and web documents.
Contrast, repetition, alignment, proximity–these are the basic cornerstones of design according to Robin Williams, author of the frequently cited Non-Designers Design Book. Minimalism and visuals are equally fundamental design concerns. These design principles apply to both paper and online documents, as suggested by Edward Barrett, Deborah A. Levinson, and Suzana Lisanti, authors of The MIT Guide to Teaching Web Site Design:
“Other, more wired authors write panegyrics to digital media and the Web as if digital media were a new, miraculous life form. But in fact rhetorical principles that have defined communication over time apply equally well to the Web: a process of defining purpose, audience, and style to suit your objectives.”
Readers notice contrasting elements. Changes in font, color, and layout are examples of contrasting elements. To promote focus, contrast should be dramatic. Yet this doesn’t mean you should align garish, bright colors with soft pastels.
To develop your “design eye,” take a moment to analyze the design of documents you see each day. Look at newspapers and magazines, evaluating how they use contrasting colors and fonts to draw your eye to their advertisement or story.
The screenshots below provide interesting examples of contrast used in document design. You can double-click the screenshot to enlarge it or visit the document by double-clicking the document title in the right column.
In the Do Not Call Federal Registry, note the use of contrasting colors–blue, green, black, and white–to highlight and contrast information. The box below the black and then green line, the one that says “Do Not Call” is set off from the rest of the text, so users can quickly accomplish their goal: clicking the button necessary to begin the process of entering phone numbers in the do not call registry. The contrasting colors are used consistently throughout the site: blue and green are used to highlight hyperlinks. The left column is set aside from the text block on the right to also help with navigation. Even the visual–the phone over the house–uses all four colors.
Repetition refers to repeated visual elements, such as use of color, shape, columns, headers, and callout boxes. Repeated design elements help readers understand how you have organized the work. As they scan the document, they can anticipate content based on your design.Although readers dislike reading passages with words repeated incessantly, they enjoy repetition as a design element.
Note in this example from Greenpeace how the repeated green text blocks and green headers draw your attention.
In word processors, you can create helpful repetition by using a template. A template enables you to set the font type, size, and style for each heading. For example, by tagging a top header as “level 1” or tagging a passage “body text,” you can ensure continuity throughout your document. Then, if you decide to change a design element, such as the font of your footnotes, you just modify the footnote tag.
On Web sites, repetition is especially important because readers can easily develop vertigo–a sense of not knowing where they’ve been or where to go. Most Web editors provide templates or themes to enable you to repeat design elements easily.
Alignment refers to the positioning of elements. For example, texts can be left- center- or right-justified. Text columns, tables, or pictures can line up equally. Captions can be anchored next to images.
In this example from the Environmental Protection Agency’s Web site note the careful alignment of information. Three aligned images create interest at the top of the page, all carefully aligned. Below these pictures, green bars are used to separate the main page into categories of information: Current Initiatives, Key Issues, and Top Stories. To the left, using contrasting colors, the button bar presents major hyperlinks, while the right column provide links toCurrent Topics.
In Why Open Source? note the use of the level 2 heading, the left-justified text beneath the header, and then the alignment indent again for subpoint 1. As you might guess, the writer uses this left-alignment scheme throughout the document.
Proximity refers to chunking information together that belongs together–and, conversely, separating information that belongs elsewhere. Obviously, you don’t want your work to appear like a jigsaw puzzle. Instead, you can create focus and highlight your message by organizing similar elements together. By grouping related information, you can reduce clutter.
In this example of poor proximity, note how the jumbled annotated links create confusion. Your eye isn’t sure how the items are related.
In Minimalism in Web Design, note Veronica Martin’s use of horizontal lines to chunk information. Each section of Martin’s text is about a screenful and chunked by a horizontal bar.
“Every word and phrase should have to fight for its life.” -Crawford Kilian
Conciseness is a virtue in any printed document. On the Internet, brevity is a necessity. Image-rich introductions can be very impressive.
Impatience characterizes the behavior of most online readers. Many readers will bypass animated introductions. Today’s readers want a focus on the content; they want Web design to be invisible–i.e., not something you have to think about.
While it’s true that some people configure their Web browsers to view the Internet with graphics turned off, most people expect and appreciate extensive use of visuals on Web pages. Increasingly, this tendency to use visuals is altering the look and feel of traditional texts.