Page Design
We seek clarity, order, and trustworthiness in information
sources, whether traditional paper documents or Web pages.
Effective page design can provide this confidence. The
spatial organization of graphics and text on the Web page
can engage readers with graphic impact, direct their attention,
prioritize the information they see, and make their interactions
with your Web site more enjoyable and efficient.
Graphic Design 101
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.
Direct the reader's eye
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. The tools of graphic emphasis are powerful,
and should be used only in small doses for maximum effect.
Typography...
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.
Use a template...
Graphics and system responsiveness
As Web systems evolve from informal novelties into widespread
organizational, educational, and corporate use the expectations
for system performance are increasing. This is especially
true when many users are accessing your Web site via modems,
such as home-office telecommuters, distance-learning students,
your sales force, or your field personnel. Most studies on
user response to computing system delays suggest that waiting
times longer than about 10 seconds are intolerable in routine,
repetitive computing tasks. For the past few years the (very
slow) Web has gotten a free pass due to its novelty, but it
seems unlikely that users will be any more tolerant of Web
systems than they are of any other networked service or computing
task.
Balanced pages
The most efficient designs for general (mostly modem-based)
Internet audiences tend to use careful layouts of text and links
with relatively small graphics. These pages load into viewers
quickly, even when accessed from 28.8 kbps modems over SLIP
or PPP lines, yet these pages still achieve a substantial graphic
impact.
Graphic dimensions for web pages
The following size recommendations are based on the typical
dimension of a Web browser on a 15-inch or 17-inch Macintosh
or Windows OS screen with a screen reolution of 800 x 600
pixels:
A Web page can be almost any length, but you've only got
about 30 square inches at the top of your Web pages to capture
the average reader, because that is all they will see as your
page loads. If all you offer is a big, slow-to-load graphic,
many casual readers will leave before they ever see the rest
of your Web site.
Design grids for Web
pages
Analyzing page grids
The first edition of the Web Style Guide used a basic page
grid that incorporates an image map menu at the top and bottom
of every page incorporating paging buttons. A "scan column"
along the left of the page does two jobs: it provides space
for local links to related material, and also gives visual
relief by narrowing the right text column to about 60 - 70
characters per line. This diagram shows the major repeating
components of the style manual pages:
Here is the same page showing the "invisible" table (BORDER="0")
that underlies the column structure of the page. For illustrative
purposes we set the table border to "1" so you can see the
edges of the table:
Sources html document
We chose 535 pixels as the maximum dimension for the page
layout because that was considered the widest table that will
print on standard letter size or A4 paper (although, given
variations in Web broswers, fonts, and laserprinters, some
slight cropping may occur).
Example
My current
course Web site
|
