1. Unity! coherence! emphasis!

Good design depends on these principles as surely as good writing does.

• Unity: It should be apparent what whole any element belongs to.
• Coherence: Each element should bear some recognizable relation to the others.
• Emphasis: Elements should be subordinated in a deliberate way. If everything is important, nothing is.

2. First ask how you want your design to look, then find the tools to create that look.

Many new Web designers learn a set of basic HTML tags and design within those limits. It's better to conceive your pages to be as effective as possible, and then see what you can do to approach that ideal with the techniques you can find. Begin by asking, for example,

• Should I set a fixed line length for body copy? If so, how long?
• Should the blocks of body text start at the left margin or be indented?
• Should headings be centered or at the left margin?
• How large and dark should the type be for headings?
• Should I position graphics above or beside adjacent text?

and so on. A grid (see below) may help answer these questions. Some effects can be achieved only by HTML "tricks" or HTML extensions specific to one browser (usually Netscape). For example, aligning a small graphic (using the Netscape extension "IMG ALIGN=left") beside a block of text tagged as a "BLOCKQUOTE" element can force the left margin rightward and produce a shorter line length for easier on-screen reading. Use your browser to view the "source" HTML code of Web pages that feature creative effects to see how they're done.

Note: Netscape extensions or prohibited HTML sequences may work fine for your audience. They will be rejected, however, by online HTML validation services as illegal code--so if you use them, be prepared to wade though a lot of flags in the validation report. Also consider the life expectancy of documents when deciding how much nonstandard code to use. HTML standards and browsers evolve quickly. If you expect to revise your document within a year or so, you can be adventurous. If you are publishing archival or reference information that you don't want to update again, be conservative in your coding.

3. Try a grid on for size (and consistency).

In book and magazine design a traditional aid is the "grid"--an imaginary structure of horizontal and vertical lines that organizes the pages into consistent zones into which text and graphics can be fit. The underlying grid gives a sense of unity and coherence to what the reader sees, and speeds the design of long sets of pages. The same technique can be applied to Web design. Grids can apply to a single document, a set of related documents, all documents by a single source, or an entire site.

To create a grid, simply plan in advance what sizes and positions the various elements on your page will typically have. Take a sample of your body text, graphics, titles, headings, and so on, and sketch out a kind of map. The grid should help you think through issues such as line length, indentation, heading type and location, typical position for graphics, etc.

For a good survey of traditional design grids see Editing by Design and Design for Magazines by Jan V. White.

4. Match the strictness of your grid to the nature of the material.

How detailed your grid is and how strictly you adhere to it should be determined by your content and audience. Where consistency and predictability are paramount, as in long documents or reference materials, a strict grid is indispensable. On the other hand, if attracting and holding the attention of casual viewers is a goal, then serendipity and variety have their uses. For things like event notices, interactive experiences, and some online newsletters, a more flexible layout approach may be appropriate.

5. Use contrast to create emphasis.

Contrasts are the tools of emphasis. Even in a purely textual page, the patterns of blank space, gray body text, darker headings, and rules are used by viewers to see the page's organization before they begin to read. Use these seven tools(1) to create emphasis and visual dynamism on your pages:

1. VALUE contrasts light and dark, negative and positive, solid and tint, colors with black and white.
2. WEIGHT contrasts bold with light, mass with line, thick with thin.
3. FORM contrasts caps/lowercase, roman/italic, elaborate/simple, square/round.
4. PLACEMENT contrasts high and low, centered versus left or right, together or apart.
5. QUANTITY contrasts many with few, single elements with groupings, often with seldom.
6. TEXTURE contrasts tight with loose, airy with dense, smooth with rough, shiny with matte (graphic effects).
7. SCALE contrasts large with small, tall with short, broad with narrow.

Remember that computer screens are a low-resolution medium. A simpler, cleaner look may be more powerful than a cluttered one. Use judgment in applying new formatting capabilities. Just because an effect is possible doesn't mean it's effective on a specific page.

6. Don't make viewers guess about resizing their browser windows.

To reach the broadest audience, the text and graphics of a Web page should fit within the default window widths of most browsers. Banner graphics and other inline images would therefore be limited to about 472 pixels in width, so that a browser window can open on a 640x480 monitor without truncating the images.

Specialized content for specific audiences may benefit from a wider page. It's nice in such cases to provide an unobtrusive guide, like a horizontal line, with a message in small type instructing viewers to open their browser windows to the width of the line. Wide pages with content arbitrarily chopped off by the right edge of the window may exclude or alienate many viewers.

7. Organize in three dimensions.

Some pages use depth illusions to create emphasis or define navigation tools according to machine and button metaphors. For example, a soft-edged drop shadow behind sharp-edged type in a bitmapped graphic can "pop" the type out toward the viewer. Buttons or windows may be created with shaded "beveled" edges to make them visually recede or protrude in low relief. Embossed or textured effects may be employed on backgrounds, making type seem to float in a transparent layer above it.

Take care when using depth illusions to avoid disorienting the viewer. Be aware of the various "planes" your shadows create and see that their relationships are coherent. Don't have shadows that imply light coming from different directions. And think, when playing with depth in menu or display graphics, about how well they harmonize with the following documents, which may be mostly text on a single flat plane.

Emerging standards like Virtual Reality Markup Language (VRML) and Apple's Quickdraw VR bring the ability to render 3-D objects and allow the viewer to do walkthroughs of Web sites arranged as virtual rooms. The potential for exciting experiences is great--as is the risk of viewers becoming literally lost in space. Start thinking now about how you use depth in your pages.

(1) Lamar, Laura, "How to make the most of contrast," Before & After, Vol.2 No.4, 1992.