Skip to main contentSkip to section navigation
Web Style Guide

General design considerations

Understand the medium

Readers experience Web pages in two ways: as a direct medium where pages are read online and as a delivery medium to access information that is downloaded into text files or printed onto paper. Your expectations about how readers will typically use your site should govern your page design decisions. Documents to be read online should be concise, with the amount of graphics carefully "tuned" to the bandwidth available to your mainstream audience. Documents that will most likely be printed and read offline should appear on one page, and the page width should be narrow enough to print easily on standard paper sizes.

Include fixed page elements

Each page should contain a title, an author, an institutional affiliation, a revision date, copyright information, and a link to the "home page" of your site. Web pages are often printed or saved to disk, and without this information there is no easy way to determine where the document originated. Think of each page in your site as a newspaper clipping, and make sure that the information required to determine its provenance is included.

Don't impose style

Don't set out to develop a "style" for your site, and be careful about simply importing the graphic elements of another Web site or print publication to "decorate" your pages. The graphic and editorial style of your Web site should evolve as a natural consequence of consistent and appropriate handling of your content and page layout.

Maximize prime real estate

In page layout the top of the page is always the most dominant location, but on Web pages the upper page is especially important, because the top four inches of the page are all that is visible on the typical display screen. Use this space efficiently and effectively.

Use subtle colors

Subtle pastel shades of colors typically found in nature make the best choices for background or minor elements. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously.

Beware of graphic embellishments

Horizontal rules, graphic bullets, icons, and other visual markers have their occasional uses, but apply each sparingly (if at all) to avoid a patchy and confusing layout. The same consideration applies to the larger sizes of type on Web pages. One reason professional graphic designers are so impatient with plain HTML is that the H1 and H2 header tags display in grotesquely large type on most Web browsers. The tools of graphic emphasis are powerful and should be used only in small doses for maximum effect. Overuse of graphic emphasis leads to a "clown's pants" effect in which everything is garish and nothing is emphasized.