Timothy
Parker Consulting Incorporated
|
|
|
|
Designing an effective Web site part 2 We've started to design our e-commerce Web site using a code generation utility like FrontPage or ecBuilder. We have a list of the products or services we want to sell, we know our audience, and we need only present this information in an attractive, clear manner. That's where the problems come in. There are so many Web sites that are awfully designed and drive a customer away, that we need to really offer something effective to avoid lost sales. Time to look at what makes an effective Web site. Let's begin with a look at a designer's tools (this applies equally for paper and Web design!). Whitespace ( theabsence of text and graphics, not necessarily a white color background) is the most important universal design tool (and the one most misused). Whitespace gives a visitor's eyes "wiggle room" so they know where to go and can rest when they get there. Use space surrounding important text or graphics to attract a reader's eye like a magnet: too much space and the information floats out of site, too little space and text relationships are not clear, user's eyes get tired of attempting to make sense of the layout. In print media (like this fine magazine) we use whitespace all over the place: margins (top, bottom, left and right of the page); leading whitespace between lines of type (line spacing) to make reading headlines and text easier; space between paragraphs helps overall readability and appearance; space between letters affects appearance and readability; space between columns (called gutters) affect the overall look of the page; whitespace between text and graphics, pullquotes, and other items helps separate them from the body of the text. Online use of whitespace is much more restrictive than print: margin whitespace is limited to the left and right of headlines and text affects readability and appearance; space above, below and around headlines, pullquotes, graphics, visuals, provide areas to draw the eye; extra space between paragraphs and subheads help emphasis and readability. Adding whitespace to web documents is often easiest done through the use of tables to position text and graphics; most code generators provide the best whitespace usage through tables and you should learn how to use them to leverage the whitespace effect. Then there's my favorite pet peeves for Web pages: fonts and color. There are thousands of type fonts available but only a few are going to be on all visitor's machines. There's absolutely no point in choosing a fancy font for your Web site unless your customers have the same font on their machine. It'll just get converted to whatever is closest on their system, totally ruining the effect you wanted. Stick with the basic fonts or use a visual graphic for the fancy fonts. There is no way to force a font style using HTML tags, so save time and use boring common fonts. Color is much more powerful online than in print. Color operates on both conscious and subconscious levels. It also provides an emphasis for text and visuals. Color provide emotional clues based on cultural habits and physiology of the eye: warm colors (reds and oranges) increase excitement and stress levels while cool colors (greens and blues) are relaxing a reduce stress. Colors also carry emotional overtones: red means danger; yellow is a happy color; green means spring; purple is sophisticated and elegant. Use color sparingly and avoid overusing it. Visuals can add help add mood or image to a Web site. However, they also contribute to download time. Visuals should be used only where necessary to help draw the eye. Photos can communicate specifics (product or person, for example). Illustrations can help expand on photos to show hidden details. Charts and graphs show numerical relationships or trends. Flow charts can show sequence or cause-and-effect relationships. Use them wisely and your Web visitors will appreciate the effect, probably unconsciously, but they will appreciate it nevertheless. Some graphic tools from the print world help enhance the appearance of web sites: reverses emphasize text at the expense of readability (instead of black on white use white on black); gradients depend on a shaded background instead of a solid color background (foreground type may have to change color to suit); textured backgrounds help avoid homogeneity but make sure the repeats don't look awkward at different resolutions and color depths; rules and bars are lines of different thickness used to emphasize separation or draw the eye to a new topic; accents such as asterisks, bullets, end of text markers, and ornamentation all can enhance the style and image. When designing your Web site, just remember the old adage: "less is more". Simplicity involves a conscious elimination of text and visual elements. Try getting rid of rules, boxes, backgrounds, shadows, and so on to see if the page looks less distracting. Make every elements and mark on the page add something. Avoid changing type, size, and style unless necessary. With these guidelines, you'll end up with a much more attractive Web site. And we're not finished yet. Next issue, even more things you need to bear in mind when designing an effective Web site. |
|
Send mail to
tparker@tpci.com with
questions or comments about this web site.
|