by Chuck Green

When you're selling products that have their own clear visual identity, the challenge is to design a setting that complements them. You choose colors that coordinate with the colors of the products, typefaces that fit the mood, photographs that show the products in their best light, and illustrations that build on a theme.

Be clear—complementary does not mean passive. Top catalog merchants such as Crate & Barrel, Lands' End, and the Vermont Country Store all struck gold organizing diverse lines of products using palettes with a powerful personality. Though they allow the visual identity of the products to shine,  each company built a distinctive, bankable style using a combination of ideas, copy, color, type, and illustration.

• The colors: Try sampling the colors in your photographs to create a complementary color palette.
• The photographs: When photographs are the focus of a Web site, close-ups can enhance their role.
• The illustrations: Simple, colored symbols can help maintain the color palette and won't compete with important photographs for attention.
• The typefaces: Two contrasting typefaces tie the site together.

My client for this project is a custom home builder – J.R. Walker & Company. Houses, obviously, have unique design identities; there are even names for the styles: colonial, modern, traditional, transitional, and so on. So my challenge was to create a palette that, above all else, allowed me to present photographs of the homes in a way that put the product at center stage.

This color palette invented itself. I found it by sampling areas of color from the product photographs. When I showed my client the splash page (above), the first thing he said was, "The colors are unusual, but I like them." I agree—at first, the palette does seem a bit unusual, but when you analyze it, it is a perfectly natural combination: shades of brown for earth, green for foliage, and blue for sky.

Sampling is a simple but powerful technique for creating a complementary color palette. When you use colors that are already present in your primary images, your palette and the images are automatically color coordinated. And even with this much color, because the colors match, the palette does not overwhelm the illustrations, photographs, or type.

Sampling colors in a program such as Photoshop is easy; you simply click the eyedropper tool on the color and read the result from the RGB window of the color palette. Once you know the RGB (Red, Green, Blue) mix of colors, you can use the color as-is or choose a close match from the 255-color, browser-safe palette.

This basic palette of 12 colors is used throughout the site with no more than five per page. That's actually a large number for a web site, but it works because each area features one dominent color. Each section employs a different combination of solid and striped backgrounds (below) to signal the change from one page to the next.

The objective of jrwalkerandcompany.com is twofold. First, when the site is fully functional, the homeowner will be able to follow a checklist of work in progress, see periodic photographs from the site, and exchange information with the builder and his crew. The second and equally important objective is to attract prospective clients by e-mail and phone. The photographs obviously play a key role in both.

The photographs of the homes are the focus of the site – they are the product shots. Considering the fact that they were taken at different times of the day under all types of conditions, they are remarkably consistent and stand on their own without embellishment. The photos and illustrations that surround the product shots are designed to build this client's brand--to give it, on a smaller scale, the same powerful personality developed by the catalogers.

I could have done it by showing the entire side of a building or a wide shot of a garden, but I chose, instead, to show close-ups of details. Close-ups  focus the visitor's attention right where you want it—in this case, on architectural features, snippets of gardens, and the fine points of construction.

Note, too, that all of the close-ups are posterized. Posterizing is a special effect in Photoshop that allows you to define the exact number of colors used in an image. As you decrease the number of colors used in a photograph, larger and larger areas default to the same color.

The effect gives the photograph a painting-like quality and, because it simplifies the image, it allows you to use different photographs from different sources that otherwise might look out of place side by side.

The illustrations are used to build a kind of "comfortable home" theme. To me, they take the edge off a palette that might appear too formal without them. They also provide an avenue for propagating the palette colors throughout the site and serve as accents on a page that might otherwise look bare.
 

I use lots of symbols because they are simple visual signals that don't require much study. Complex illustrations would compete with photographs for attention. In this case, a conflict would do nothing but diminish the impact of the pages.

Where to get it: Symbols from Design Elements published by Ultimate Symbol, 800-611-4761, ultimatesymbol.com.

This palette includes two very different typefaces. The face used for the J.R. Walker & Company logo is Minion, a beautifully simple serif face commissioned by Adobe Systems from type designer Robert Slimbach. Even though it is only used for the logo, it plays an important role because it appears on every page of the site.

The bold, sans-serif headline face is Franklin Gothic Condensed – a near opposite of Minion – sans-serif vs. serif, bold vs. light, condensed vs. extended. In this combination, the Minion logo is the game and the Franklin Gothic Condensed is the play-by-play.

Picture in your mind how different these pages would look if all of the headlines were created using Minion. The Franklin Gothic Condensed gives the site a much needed contemporary style element, an element that makes a night-and-day difference.

Where to get it: Minion and Franklin Gothic Condensed are published by Adobe Systems; 800-445-8787, adobe.com

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.