 |
|
Design with Color
Color is a wonderful tool in the Web design tool box. It can add navigational meaning, understanding, and mood and tone.
|
|
|
olor is one of your best toolsand one that needs to be used thoughtfully. Just because color is "free" doesn't mean you should randomly throw it around. Color has a lot of meaning attached to itand you can easily find yourself "saying" things you really don't mean.
A good principle is to design a layout that works in black and white, then add color sparingly to reinforce the message or to communicate ideas and concepts, or to set an overall mood and tone.
| Navigation. Use a splash of color to highlight a navigation choicefor example, making an onhover effect that turns a menu option gold when the reader puts his or her cursor atop of it. (If you are using a CSS1-compliant browser, when you mouse on the example to your right, you'll see that the option turns yellow and is underlined.) |
Breakfast Menu
Lunch Menu
Dinner Menu |
| Wayfinding. Color can help the wayfinding messagefor example, the current path into the site might be charted in red across the top of the screen. Or the currently-selected section might appear in lime green in the navigation bar. Color can help you mark the idea that "you are here" in the reader's mental map. |
 |
| Legibility. Use of background and foreground color can enhance the readability of your text. For example, we find creating a slightly lower amount of contrast by using an off-white background improves readability over a bright white background. |
| Once upon a time there was a hungry lizard. He was an Iguana so he ate vegetables for breakfast, lunch, and dinner. |
| Once upon a time there was a hungry lizard. He was an Iguana so he ate vegetables for breakfast, lunch, and dinner. | |
| Tone, Mood, and Implied Meaning.Color has many psychological and cultural meanings and the most common use of color is to set mood and tone. When we use a specific color, we tap into those layers of understanding. Color can also be attached to a company or an imagewhen you read the words "Big Blue" a certain color and company pop into your mind. Which of the color combinations to the right impart extra meaning? |
| Happy Halloween! |
Happy Halloween! |
| Our New Baby Boy... |
Our New Baby Boy... |
| Spring Is Here |
Spring Is Here | |
|
|
|
|
|