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 screen shots below provide interesting examples of contrast used in document design. You can double-click the screen shot to enlarge it or visit the document by double-clicking the document title in the right column.
In 10 IT Goals, notice the right column. The contrast between the longer middle column attracts your eye.
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. When you first come on to a site, a Macromedia Flash introduction can be a fun way to learn about the site, but as a general principle, you should value brevity and simplicity over sophisticated, animated, image-rich introductions that require software plug-ins.
Today, the field of Web design is seen much more as a craft than an art, where function takes precedence over form and content is king. Innovative designs using fancy navigational icons are generally seen as an annoyance standing between the user and what he or she seeks. Large graphic eye-candy, no matter how pleasing, is simply wasted bandwidth. Today’s Web designers are also information architects and usability engineers, and a user-centered design approach is the key to a successful Web site. Instead of constantly requiring users to relearn the Web, sites are beginning to look more alike and to employ the same metaphors and conventions. The Web has now become an everyday thing whose design should not make users think. Preface, Web Style Guide, 2nd Edition
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.
In Lost Boys, by Amy Benfer, notice the playful use of the image to fuel the author’s argument: Girl power has utterly overwhelmed boy power.
In this example from the EPA’s Explorer Club, a large image map attempts to track the interest of younger readers. As the user scrolls over the various images, text pops up, revealing to users that selecting the image will take them to a different part of the site, such as the game room, the science room, or the art room.