by Chuck Green

Print design is two-dimensional—Web design is three-dimensional—a night-and-day difference. You page through a brochure in a straight line, but you navigate a Web site top to bottom, back and forth, and layer by layer. It is an immensely more complicated model. Our challenge as Web designers is not simply to communicate the message but to direct our readers through the message--to provide textual and visual signals that point the way.

Half of knowing where you're going is knowing where you are. So a fundamental part of creating a great Web site is to let your readers know where they are at all times. One way, of course, is to use tabs and menus that literally tell them where they are. Here, at eFuse, for example, you know where you are by looking at the top of the page—the tabs tell you you're in the "design" section and the "columns" subsection.

• The signals palette: Getting a sense of place from not only type, but illustrations, photographs and color.
• The typefaces: Consistent use of type throughout a Web site makes each page look as if it belongs to the whole.
• The illustrations: Symbols of varying sizes, although seemingly only decoration, actually draw the reader through the page.
• The photographs: Features such as filters make wildly different photographs seem to belong to the same family.
• The colors: Color can make the boldest statement, but pick colors that work well together.

One way to clearly define the sections of a Web site is to incorporate different visual signals for each. This month's palette demonstrates how to use type, illustrations, photographs, and color to give each page a sense of place.

Don't make the mistake of thinking that a color or typeface alone is enough of a visual signal. Study any good site and you'll see it directs you to information in lots of ways. And, notice, too, that most include redundant links. Redundant links. Redundant links. Two or three signals on a single page that point you to the next important link.

There are two elements that make each page of this Web site different. Most obvious is the color, but just as important is the main headline typeface. How you make things look different has a lot to do with how you make them look the same. Notice that all the navigation is set in the same typeface. The name of the organization (VCE), the section head (design center), and the menu choices--all are set in Formata Bold in neutral colors—black, white, and gray. For main headings on the page itself, I used Impact.

Notice, too, that I used a contrasting serif typeface for the body text (the normal text of the page)—Times New Roman or Georgia work well. And that I set the first three or four words of text in all caps to draw the reader into the first paragraph.

The third typeface, used for the "cover," "index," and "mail" menu are set in Trebuchet MS Bold—a face designed to be particularly easy to read on-line, large or small.

Why so plain? Because it's furniture--providing a neutral foundation makes the elements you want to focus on that much more prominent. Hence, when you change the main headline typeface from section to section, the change is pronounced.

Where to get it: Formata and Impact are published by Adobe Systems; 800-445-8787. Georgia, Times New Roman, Impact, and Trebuchet MS are free for downloading in the Microsoft Typography section of the Microsoft Web site.

I'm breaking one of my own rules here—I'm using little spot illustrations primarily for decoration. Normally, I shy away from including anything on the page that doesn't contribute in some way to telling the story or signaling a move. In this case, though, these simple symbols add to the idea that this page is a place of its own.

Repeating the same symbol in different sizes draws the reader's eye down the page and breaks up the monotony of long text.

Where to get it: The symbols are from Design Elements, published by Ultimate Symbol; 800-611-4761

This client, like many clients, had a lot of existing photographs it wanted to include on the site. The photos were shot by different photographers, at different times under different conditions. Many of the product photographs were provided by manufacturers. Still others were shot specifically for this site. Needless to say, the quality varied wildly.

Had the photographs been used as-is, it would have looked like a patchwork. The solution was to apply a filter to all of the photographs or to, in some way, make the photographs look as though they belong in the same place.

Filters are a feature of Photoshop that allow you to stylize and distort your images. The program includes many filters—such as those that simulate brushstrokes, pencil sketching, or various lighting techniques. Others are available from third-party developers as plug-ins.

In this case, I used the diffusion dither settings set in the process of saving the file to make all of the photographs equally as grainy. The process is particularly simple in Photoshop 5.5's Save For Web feature. You simply choose File > Save For Web > and select the settings GIF, Adaptive, and Diffusion in the left-hand column; then, in the right-hand column, increase or decrease the number of colors until you produce the grain effect you want.

When you move from the gold "who can buy?" page to the blue "about us" page of this Web site, you know you've arrived. Not only do the titles and menus change, the difference in color is hard to miss.

The color palette includes 16 Web-safe colors. Notice that I didn't choose the brightest yellow or the brightest blue, I chose richer, more muted, versions that don't take over the screen.

Why did I choose these colors? Because, aesthetically, I think they work well together. When it comes to color, in my view, there are no clear rights and wrongs. Color is another one of those difficult to define judgments one makes in the process of design.

I don't mean to imply that I invented anything new. I gather much of my inspiration for color schemes and other elements of design from the examples I see day to day. I call it my idea file. When a piece of direct mail, a newspaper insert, a package design, or a magazine layout catches my eye, I drop it in the box. When I need some inspiration, I look through the now hundreds of pieces to find ideas I can mix and match into something different.

A more direct way to choose colors is to use a book designed for just that purpose. One that I find particularly helpful is A Book of Colors, Matching Colors, Combining Colors, Color Design, Color Decorating compiled by Shigenobu Kobayashi and published by Kodansha America. It includes hundreds of color schemes cataloged under primary colors and descriptive titles, as well as lots of other basic color information.

Do you know what the modern consumer¥s favorite color is? Or the dissention among age groups about sulfuric slime and yellow-green? Click your blues away with a fascinating little piece of research published by Pantone Inc. and marketing consultants Roper Starch, Worldwide—the Consumer Color Preference Study. 

Looking for a palette for a particular type of project? Searching for an obscure typeface? Found a great source for royalty-free photographs? Send your questions and answers to me at chuckgreen@ideabook.com using the subject line: The Mix. I'll include the most interesting conversations in columns to come.

Chuck Green is the author of the Desktop Publisher's Idea Book, 2nd Edition (Random House), and the publisher of the design and marketing resource www.ideabook.com.

What is a design palette? A design palette is a combination of type, illustrations, photography, and color that, in my opinion, work well together. My hope is that some part of it will inspire your next Web site.

Remember the reason: The most important design ingredient is a great idea. An eye-catching design created with a keen understanding of current trends, the latest typefaces, and professional-qualit y images will not save a bad idea. In fact, a poor idea that is well presented will fail faster than one that is poorly designed—the better your audience understands the message, the faster they reject it. More than once, I have gotten so caught up in the process that I elevated the design above the idea. I don't want you to think I'm pushing appearance over substance—conte nt is king.