• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Designing a website

Step 2 - Designing your site

Color on the web

In most areas of design, the web is deeply constraining: You don't have a lot to work with in terms of fonts or formatting techniques. And the need for speed puts a serious limit on the images you use. But color is the one arena where you often have more options than you would in print.


Color's expensive in print, but free on the web, where sites can incorporate millions of colors at no additional cost. But abundance, too, has its price. It's difficult to use a full spectrum of colors well. And it introduces more complexity into the design.


3 key issues in web color:

  1. Choosing the right colors. Pick the right colors for your site and your brand, and make sure you know what those colors say about you.

  2. Creating a color system. Your hues should work together to send the right messages.

  3. Making color work on the web. Screen colors are different from print colors, so matching can be a challenge. Also, web colors may be seen differently by users with different computers.

Choosing the right colors

The colors you use on your site will say a lot about your organization. But what, exactly, will they say?


Different colors have different associations for different people, based on all kinds of cultural factors. So the wider spread of your audience, the more meanings you'll need to consider in choosing a color palette.


As Network Design Director for Terra-Lycos, a Spanish company that operates portals throughout Europe and the Americas, Doug Bowman confronted more than his share of color conundrums. Often, they'd have to choose colors that would work for users in a dozen different countries, speaking three different languages.


The many meanings of color

Everyone agrees that color is meaningful, but there's no consensus on what each color means. Colors have different implications—strong implications—for different people around the world:

  • Color can mean action. On the web, you have to think about what the user does, and "certain colors have action-related associations," says designer Jim Frew. "In the real world, green means go, red means stop. Online, blue means a link, and purple is recognized as a visited-link color."

  • Color can mean emotion. Color can alter users' moods and conjure up color-specific emotions. Red is passionate, blue is tranquil, yellow is cheerful, and black is angry.

  • Color can mean brand. Certain colors are associated with the brand that's claimed them. Yellow & red might mean McDonalds. Red & white might mean Coca-Cola.

  • Color can mean nationality. Some colors conjure up national identity. Red, white, & blue might mean the USA. Or it might mean the UK, depending who you ask.

  • Color can mean sports teams. Some people identify as strongly with their sports teams as they do with their nations. So specific colors can mean the home team—or the enemy.

  • Color can mean religion. Blue & white might mean Judaism, red & green might mean Christmas, and red might mean Tibetan Buddhism.

  • Color can mean historical eras. Thanks to changing fashions, certain colors are linked with specific time periods. Brown & orange may mean the 70s. Teal & mauve may mean the 80s.

"We had a lot of debates with international designers over the connotations of color, because it's different for different cultures," Bowman says. "For example, here, if we think of a finance site, we think green. But green doesn't inherently mean money. It's just the color of our dollar bills. In other countries, their bills are different colors."


Cultural connotations aside, it's always a challenge to choose colors, because they need to communicate about your brand, while also setting the mood for your site.


So the first thing to think about when choosing colors is the impression you're trying to make with them. What do you want them to say about you or your brand? What feelings do you want them to conjure up? How do you want your users to feel when they're looking at them?


Criteria for choosing brand colors:

  • What should the colors say about you? Do you want to appear serious and sophisticated? Approachable and fun?

  • Who should the colors appeal to? Are you reaching out to rugged outdoorsy types? Urban hipsters? Suburban moms?

  • How should visitors feel on your site? Serious and reflective? Upbeat and energized? Outraged and ready for a fight?

Although these criteria are all subjective and emotional, they can provide concrete guidelines for a choice that might otherwise seem arbitrary.


6 Tips on choosing colors

If you're in the position to choose colors for your site—and you're not in the position to hire a designer to help you—here are a few good methods for faking it:

  1. Get ideas from other sites. By looking at other sites in your industry, you get a sense of what your customers expect. And by looking at sites with a similar personality, you can get specific ideas to work from.

  2. Get ideas from other sources. Paintings, magazines, products—even nature—can provide inspiration for your choices. Find an artist, magazine, or brand you like, and borrow from them.

  3. Get ideas from a color book. Idea books like Color Harmony for the Web (see subsequent listing) are great when you need inspiration, lack confidence, or both. The specific color combinations all work. You can just choose one that resonates with you.

  4. Limit your choices. More isn't always better. Many people—including professional designers—feel overwhelmed by the choice of colors on the web. To limit your options, stick to the 216 colors in the web-safe palette.

  5. Start with a single color. Once you've chosen a single shade that works, you can match others with it. The best way to find appropriate matches is by choosing colors with the same "value" (or darkness). Lynda Weinman shows you how in her book <designing web graphics.4> (listed later in this chapter).

  6. Learn a little theory. By reading just a little bit about colors and color combinations, you can build your confidence and improve your chances of making a good choice. Again, Lynda Weinman's <designing web graphics.4> is a great place to start.


to Top