Color strategy
Wait—don’t click away just yet—it’s not what you think—I'm not going to talk about color “theory”—the stuff that experts speculate about but can’t quite prove. Theory that states, for example, that one color represents anger and another represents happiness is interesting, but I've never figured out how to translate that information into action.
Color research takes us a step closer to the practical. When Roper/Pantone reports, for example, that based on nationwide interviews of over 2,000 men and women 18 years and older, blue is the country's most popular color—you begin to appreciate how valid research might be applied.
But what I mean by color strategy is even more specific. I'm going to share some common sense strategies you can use to focus your reader's attention, improve site navigation, turn down a site's visual volume, and attract attention—in short, ways to use color that will help you improve results.
Strategy one: Use color to direct the focus
If you only come away with one thing from this tutorial, make it this: A neutral palette directs the focus to your product or service.
Everyone who’s been to an art gallery understands the value of a neutral setting. The prevalence of white walls, muted colors, and clean, simple design is not coincidence—galleries focus attention on the product, not the surroundings.
A palette of neutral colors does the same for your Web. Pastels and other muted colors allow illustrations and photographs to take center stage.
At first glance these palettes (figure 1) might look a bit drab. Would it surprise you to know that they the primary colors used on three of the most diversified commercial sites on the World Wide Web? They are no less than the primary background, border, and text colors for Apple Computers, The New York Times, and Yahoo. Why are they so similar? Because a good designers understand that if you’re going to show what you sell, you do it in a way that makes the product or service the focus.
Strategy two: Use color to organize
There is far more to design than creating something that is pleasing to the eye—its primary purpose is to transmit ideas. Though you might not notice it if you were simply paging through the site, the major sections of the two sites here (figure 2) are color coded. I may sound elementary, but too few sites employ this simple technique. When you use color to organize, you give each level a sense of place and provide your visitors with the subtle cues that make the site easier to navigate.
Your use of color need not be this obvious. You might simply assign the same color to all the headlines in a particular section of your site, color-code the menu, or use a graphic element that changes color in each section.
Strategy three: Use color to simplify
The message is king. Too many words, images, and colors can result in visual noise. If your site is too busy, one way to turn down the visual volume and return the focus to the message, is to simplify the color palette. For example, changing full color photographs to two-tone photographs, or duotones, eliminates some of the noise (figure 3). Plus, reducing the number of colors reduces the size of the files you create and allows your pages to load faster.
Looking for a truly minimalist palette (figure 4)? Designer Roger Black considers the palette for rogerblack.com the ultimate. “White, black, and red…They’re the best colors—striking, readable, in perfect contrast,” he says. Doubt the veracity of the claim? The second variation belongs to Time Magazine at time.com.
Strategy four: Create a one-of-a-kind color palette
It is likely that within reach of where you are now sitting there are hundreds if not thousands of color palette ideas—in magazines, marketing materials, and the hundreds of thousands of sites on the World Wide Web. The best way to design a unique palette is to “deconstruct” the color strategies of the materials you most admire. Deconstructing is a fancy word for analyzing what is happening—determining the colors used and how they are applied.
Along the way, you will no doubt, find a combination of colors that speaks to your needs. The palette above (figure 5), pastel versions of natural colors representing the earth, the sky, the sun, the forest, and such, works particularly well for this custom home builder.
If you want to identify the RGB value of colors you find in print, you might want to invest in a Pantone Digital Color Guide. It shows over 700 colors in print and provides the corresponding ink color, RGB value, and HTML code. Want an absolutely accurate copy? Surf to the site and use PrintScreen to capture the screen and paste it into Photoshop. You can then sample colors using the Eyedropper tool to get an exact match.