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 later
downloaded into text files or printed onto paper. Your expectations about
how readers will typically use your site should govern your design decisions.
Documents to be read online must be concise, with the amount of graphics
carefully "tuned" to the bandwidth available to the mainstream of your audience.
But don't patronize your readers or insult their intelligence. The common
advice that the Web is dominated by semi-literate "screenagers" who won't
read more than two sentences in a row is grossly exaggerated, and probably
irrelevant to you and your audience anyway. You do not need to "dumb down" your
content or shave it to a meaningless skeleton. Just be aware that readers
will typically want to print longer pages or more complex presentations to
read "offline" from paper.
Establish a visual hierarchy
The primary task of graphic design is to create a strong, consistent visual
hierarchy, where important elements are emphasized, and content is organized
logically and predictably.
Graphic design is visual information management using the tools of layout,
typography, and illustration to lead the reader's eye through the page. Readers
see pages first as large masses of shape and color (see below), with foreground
elements contrasted against the background field. Only secondarily to they
begin to pick out specific information, first from graphics if they are present,
and only afterward do they start parsing the "harder" medium of text and begin
to read individual words and phrases:
Thus the overall graphic balance and organization of the page is crucial to drawing the reader into your content. A dull page of solid text will repel the eye as a mass of undifferentiated gray, but a page dominated by poorly designed or overly bold graphics or type will also repel sophisticated users looking for substantive content. What you want is an appropriate balance that attracts the eye with visual contrast:
Proportion and "appropriateness" are the keys to successful design decisions, but those things can only be determined within the context of your overall purpose in developing a Web site, by the nature of your content, and most importantly, by the expectations of your audience.
Direct the reader's eye
In the West readers of English read from left to right, and from the top of
the page to the bottom. This fundamental visual axis dominates most design
decisions, and is the basis for most conventional graphic design of print
publications. 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 is all that is visible on the typical 14
to 16 inch office computer monitor.
Subtle pastel shades of colors typically found in nature make the best choices
for background or minor elements, especially if you are new to graphic design
and color selection. Avoid bold, highly saturated primary colors except in
regions of maximum emphasis, and even there use them cautiously. Type must
always contrast sharply with any background color. If you have a dramatic or
complex graphic scheme in mind, hire a professional graphic designer to execute
it. If you are not a designer and must do things yourself, keep everything
conservative, conventional, and simple.
Graphic distractions
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 applies for
the larger sizes of type on Web pages. One reason professional graphic designers
are so impatient with HTML is the grotesquely large type sizes displayed
by most Web browsers when using the "H1" and "H2" header tags. 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
where everything is garish and nothing is really emphasized:
Be consistent
Establish a layout grid and a style for handling your text and graphics, then
stick with it to build a consistent rhythm and unity across all the pages
of your site. Repetition is not boring; it gives your site a consistent graphic
identity that reinforces a distinct sense of "place," and that makes your
site more memorable. A consistent approach to layout and navigation allows
readers to quickly adapt to your design, and to confidently predict the location
of information and navigation controls across the pages of your site.
If you choose a graphic theme, use it throughout your site. Metadesign's home page banner (below) sets the graphic theme for the site, and introduces distinctive typography and a set of navigation icons:
This is a banner at the top of an interior page in Metadesign's site. Note how the typography and icon theme is carried through to all interior banners. There is no confusion about whose site you are navigating through:
"Style"
Don't set out to develop a "style" for your site, and be very 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.
More Web Design Basics: 
