Visual signals palette

What is a design palette? Half of knowing where you're going is knowing where you are. So a fundamental part of creating a great Web is to let your reader's 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 ideabook.com, for example, you know where you are by looking at the top of the page—the tab tells you you're in the “TUTORIALS” section and the headline tells you the article title.

Sending Visual Signals

Another way to clearly define the sections of a Web is to incorporate different visual signals for each. This month's palette (figure 1) demonstrates how to use type, illustration, 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 different ways. And, notice too, that most include redundant links. Redundant links. Redundant links. Two or three signals on a single page that lead you to other key information.

There are two elements that make each page of this Web different. Most obvious is the color, but just as important is the headline typeface. How you make things look different has a lot to do with how you make them look the same. Notice that much of the text I use is set in the same typeface (figure 2)—the name of the organization (VCE), the white on black section head, “who can buy?” and the white on yellow menu choices. All are set in Formata Bold in neutral colors—black, white, and gray. The third typeface, used for the top menu (“cover” and “index” top right) are set in Trebuchet Bold—a face designed to be particularly easy to read online, large or small.

Notice too that I used a contrasting serif typeface for the running text—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.

Why so plain? Because providing a neutral foundation makes the elements you want to focus on that much more prominent. Hence, when you change the headline typeface from section to section (within the broken-line box), the change is pronounced (figure 3).

WHERE TO GET IT: Formata, and Times Roman are published by Adobe Systems, 800-445-8787, www.adobe.com www.adobe.com/type; Trebuchet from the Microsoft Typography section of the Microsoft Web, www.microsoft.com/typography

The Illustrations

I'm breaking one of my own rules here—I'm using a few spot illustrations (figure 4A, 4C) 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 several different sizes draws the reader's eye down the page and breaks up the monotony of long text.

But I also use the tried and true—maps for locating a sales area (figure 4B) and custom designed icons (figure 4D) that represent products and services.

WHERE TO GET IT: Symbol [3A] from Design Elements published by Ultimate Symbol, 800-611-4761, www.ultimatesymbol.com; Ornamental border from Olde World Borders published by Aridi Computer Graphics, 800-755-6441, aridi.com; map and icons are custom illustrations

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-quality 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—content is king.

The Photographs

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

Had the photographs been used as-is it would have looked like patchwork. The solution was to apply a filter to all the photographs that makes them look as though they belong in the same place (figure 5).

"Filters" is the feature of Photoshop that allows you to stylize and distort 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 (figure 5) I used the diffusion dither settings applied in the process of saving the file. The process is particularly simple in Photoshop's Save For Web feature. You simply choose File > Save For Web > and select the settings GIF, Adaptive, and Diffusion and increase or decrease the number of colors until you produce the grain effect you want.

WHERE TO GET IT: Photographs of people from Corporate Motion published by Rubberball Productions, 888-224-3472, www.rubberball.com

The Colors

The color palette for this Web includes 16 Web-safe colors (figure 6). 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 or wrongs. Color is another one of those difficult to define judgments one makes in the process of design.

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

I don't mean to imply that I have 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.