3 case studies on Using Color for Organization

---

Tips about Web Page Colors and How They Affect the Look and Feel of a Website

Most young website designers find it a challenge using colors that work on an Internet page design but this web design lesson will show you how to enhance your web pages with color combos like an expert.

One of the aspects of web design that fascinates me the most is color. Colour is a very useful tool that can be used with powerful effects in a website. It's particularly useful in organizing elements effectively and in creating well-designed page layouts. Since examples always help make general principles more tangible, let's take a look at three different examples of how color usage affects page organization.

1. WEBEX - (http://www.webex.com)

Most of Webex's home page is filled up with color of some sort. In fact, the only parts of the design that reside on a white background are the header and the bottom right corner. Generally, when everything is colored, it makes it hard to use color effectively for organizational purposes. But Webex has done a pretty good job. From a purely graphical standpoint, the use of color in this page is effective. Let's examine why it works:

The horizontal blue bar at the top provides good definition to separate the logo and tagline from the main content of the page. Besides providing a backdrop for the main navigation buttons, the clean lines of this bar provide a nice, colorful frame for the site.

The center of the page is clearly divided by background colors into two separate sections. The gray background behind the links on the right clearly defines the area and groups that set of five links together nicely.

The blue buttons toward the bottom of the design are a medium blue. Since they are brighter than the surrounding greasy, these blue headers stand out nicely, clearly labeling the gray boxes directly underneath them. These visual cues can help visitors understand the organization of the page at a glance.

Notice the action that Webex is attempting to elicit from their visitors--getting them to join a demo. So what color is the "Join a demo" button? Orange--a very bright, vivid color designed to draw attention. In fact, it's the brightest spot on the page. Smart.

Overall, Webex's use of color on their home page has helped them define specific areas of the page, provide overall organization, and draw attention to key pieces of information.

One can certainly debate whether or not Webex.com is effective from other standpoints. After all, just because a page does well in one area doesn't mean it is effective in other areas. Nevertheless, the designers of this site understood the usefulness of color, and they were able to use it effectively in laying out the page.

2. HP - (http://welcome.hp.com/country/us/en/prodserv/desktops.html)

This page (which is an inside page on HP's site) is very simple from a color perspective. The design is mostly comprised of greasy with only a few splashes of green. But the very minimalist nature of the page shows how helpful color can be in organization.

The greasy in the page definitely don't grab attention. They are used for very subtle coloring. Nevertheless, they play an important role. Although the greasy are light, they help to provide definition for the page. The crisp clean lines and background colors sort the page into four distinct areas very quickly - header, left sidebar, right sidebar, and center column.

Although gray is a fairly mundane color, it works to make the page more visually interesting that if it had a completely white background. By the fact that the coloring is so unobtrusive, the edges of the page don't distract from the center content--a good thing when you're trying to focus attention on something in particular.

The overall subtlety of the page lets the green dividers in the middle stand out very clearly. This is one of the advantages of a minimalist approach to color--a little shot of color goes a long way when there's nothing else to distract from it.

Because the green bars are the only color on the page, visitors can very easily figure out at a glance which category they are looking for. This saves visitors time in searching for a particular product.

The simplicity of this page definitely wouldn't win any creativity awards. Nevertheless, it still holds some important color lessons for organization.

3. LOWE'S - (http://www.lowes.com)

Lowe's doesn't do quite as well in the area of organizing with color. On their home page, there are spurts of color everywhere, so nothing in particular stands out. This means that color cannot be used as an effective organizational tool. That's a consequence of using color randomly, instead of allocating it in a more focused manner.

Lowe's would be better off avoiding the attempt to emphasize everything using color. This way, they could move away from the "color war" currently taking place on their home page. Instead, they could harness color to help sort the wealth of information available on their site into meaningful categories.

More About How to Use Color in Web Design

Here is another quick tutorial for how to use web design colors for enhancing your website and intriguing your Internet page visitors. Hope you take these lessons and use them today!

Color and Web Design

Color is one of the most important but least understood elements of web design today. Whether they know it or not, visitors to a site respond to colors and other visual elements on the site on a psychological level.

Color affects the emotion of the audience, and emotion drives decision-making. An intrigued visitor is more likely to engage in the goal of your site -- whether it is meant to inform, entertain, or to sell products or services. If the colors are unsuitable, the eye will reject the site and your product may be rejected too, no matter how good it is.

A well-considered color scheme is frequently the difference between an okay web site and a great web site. It can also make a site unusable if the scheme used is too outrageous and hard on the eye.

Keep it Simple.

A color palette that uses three or fewer overall colors contributes to the clarity of a web page. The reader will be able to find information quicker on a simple site versus a complex site that may make them feel frustrated and lost.

Use White Space!

This relates to the previous point of keeping it simple. There are a lot of sites with too much information cluttering up the screen. Your audience will have trouble searching for navigation and the information they need amongst a bunch of clutter. White space balances colors, lets the design breathe and can make a large site feel less complex. If a customer is not overwhelmed, they will stay at your site longer.

Be consistent. Color each element (i.e. links, menu items, instructions etc.) the same on each page so that your audience will instinctively know where to look for information.

Know Your Audience

Designers need to know who the target audience before choosing a color scheme. Before you begin your design, you should ask yourself what colors the audience would find compelling and right for your product.

Different colors evoke different emotions in different cultures. This is important to keep in mind on the web if your site has an international audience. For example, in China red symbolizes happiness and good luck, in India it symbolizes purity and in South Africa it symbolizes mourning.

To complicate matters further, many colors have both positive and negative associations in the same culture. In North America, for example, black can symbolize death in some instances and formality in others.

Web Designers should also use different colors if their target audience is a specific gender or age. For example, bright, primary colors like red yellow and blue are great for kid’s sites, but if you are designing a site for an audience over fifty you may want to use de-saturated, softer colors. Younger audiences also tolerate a black or dark background with lighter text better than an older audience.

In general terms, here are the meanings of a few basic colors:

• Red Energy, strength, passion, risk, fame, love, -top, take notice
• Blue Wisdom, protection, spiritual inspiration, calm, reassurance, gentleness, water, creativity,-Depth quality; large companies often use it for their logos.
• Yellow Sun, intelligence, logical imagination, social energy, cooperation, sunshine, joy, happiness, intellect, energy, cheerfulness
• Green Healing, monetary success, fertility, growth, personal goals, resurrection, renewal, youth, stability, freshness, nature-Plants and environmental awareness
• Grey Security, reliability, intelligence, dignity, maturity, conservative, practical

Temperatures of Colors

Yes, colors have perceived temperatures! The perception of your site will be affected by your choice of warm or cool colors. Cool colors are water and sky colors like blue and purple; warm colors are on the opposite end of the color wheel: red, orange and yellow.

The temperature of a color can affect how your message is perceived. Red text for the word SALE will be perceived as more vibrant and urgent than soft purple text.

If you have a calm and reassuring message you want to get across, (i.e. for a spa) color can affect the tone and mood. For this message, soft browns or deep green would be more calming than an orange or red.

The Importance of Contrast

Contrast between colors on a web page can help draw attention to certain elements.

Contrast between text and its background is a necessity for legibility. Dark text on a white background is more igible than orange text on a red background.

Different elements on your web page (i.e. the menu and body of the page) should also contrast or they will start to blend together. Contrast helps your audience distinguish between the different points on your site and therefore helps them feel less frustrated and gives them a more enjoyable experience when they visit your site.

Color Design Links

· Here is a link to a great primer on the color wheel and how colors combine http://www.colormatters.com

· Colorscemer at http://www.colorschemer.com is a great color tool. It helps you create color schemes, match colors and determine the color used in graphics.

· Colorimpact (http://www.colorimpact.com) a similar tool to colorschemer. Very useful!

Color is a powerful design tool. Strong reactions to color from the audience of a site can assist in such things as brand confidence, sales growth, and readership. The web designer must match the colors they choose to the message and image they want to get across to the web site's customer.

Learn more about how to design a web site for beginning students here. Get lots of tips and announcements for new website design articles.

Colleen Happ designs effective and affordable websites and graphics. Her portfolio can be viewed at http://www.happconsulting.com. She offers free one hour consultations to show how an effective website can benefit your business.

Web Design Courses