creating a color system

Designing for the web means you're not just choosing colors, you're creating a color system. Your hues have to work together to help the user understand your brand and your site.

"Designing for the web is more complex than print," says designer Jim Frew. "Color isn't just color it's color systems. Once you have your corporate ID colors chosen, you need to think about colors for your navigation system."

You have to choose a color for your links and perhaps different colors for followed links and "active" links (the color links turn at the moment the user clicks them).

Visitors will take cues about what to do based on your links and other elements on the page. So you have to think through the "action-related color implications," Frew says. "Certain colors have action-related associations: Green means go, red means stop, blue means a link, and purple is recognized as a visited-link color."

Your color system should include

  • Brand colors. These are the colors you've chosen to represent your brand (See choosing the right colors, p. 146). They'll often include 1 3 complementary hues, which probably appear in your logo and may or may not be integrated throughout the rest of your site.

  • Background color. The site's background is frequently left white particularly on commerce sites, where product pictures must blend into the page. But colored backgrounds are common on other kinds of sites, and they play a major role in the emotional impact of your site.

  • Text. Most sites leave their text a basic black. But you can change it up a little, so long as you choose colors with sufficient contrast to be read.

  • Headline colors. Will they be the same as the text or a different shade?

  • Link colors. You'll need a color for regular links (which will be blue, unless you specify something different). But you'll probably want to choose a visited-link (vlink) color and an active-link (alink) color as well. "Your link, alink, and vlink all need to play nicely together," says Jim Frew. "The link should pop forward, and the followed link should sit back."

  • Section navigation colors (optional). You may choose to color-code your sections, which adds another layer of complexity to the design. "If you really want to make it hard on yourself, you'll have a color-based organization to your site where section a is blue, section b is green, section c is pink, section d is lime," says Jim Frew. Note, however, that it's not wise to rely on color for site navigation. Users tend not to notice it.

Buy these books!

graphics/buy.gif

<designing web graphics.4>

By Lynda Weinman

If you want to learn about web color, make better decisions about color combinations, or ensure that your colors of choice appear correctly on the web, this is the best resource out there. Serves both the novice and professional designer (New Riders, $55).

Color Harmony for the Web

Cailin Boyle

Need inspiration? This book offers an excellent selection of color combinations, both bold and subtle. Includes colors' RGB and hex equivalents (Rockport Publishers. $30).


RGB vs. CMYK color

Colors are created differently on screen than they are for print. So every color can be described two ways: Its CMYK value describes how it's created for print, and its RGB value describes how it's created for the screen.

CMYK stands for Cyan Magenta Yellow blacK the colors that are added to the printed page to produce a full range of colors.

RGB stands for Red Green Blue the colors that are removed from light-based media (like computer screens) to create a full range of colors.




The Unusually Useful Web Book
The Unusually Useful Web Book
ISBN: 0735712069
EAN: 2147483647
Year: 2006
Pages: 195
Authors: June Cohen

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net