Lead With Color

by Zack on July 23, 2009

Leading With Color

The human brain was genetically engineered to pick raspberries. Peer into that field of green leaves and the red berries just leap out. It is hard wired for almost everyone: red means good and interesting.

Municipalities have taken advantage of this for years. In Boston colors its airport terminals blue, red, green, and purple. Subway routes are red, green, silver, and orange. The color helps people find their way through a potentially confusing landscape.

Computer software is a similarly confusing landscape that you can help by adding color. Use colors in your applications to help users feel more comfortable. Help them see where they are and how to get where they want to go. Start by making a color plan part of your design process.

Create a color plan

Creating a color plan is one of the first steps in designing a new application. Categorizing the actions your users will perform in your application and assigning them a color helps you create a well organized UI. Envision the standard paths your users take through your application and the action categories you’ll have.

The color plan for this site is simple: blue for help, green for navigation, and yellow for optional extras. That is all it takes. Just an outline of the major areas and how you will set them apart.

The color plan is best used as a guideline instead of dogma. You don’t have to make everything in navigation the same shade of green. Using different shades along the same theme can create a pleasing visual effect.

Your color plan is just one facet of your UI, color alone is never enough. Your application must be descriptive and make it easy to understand each option. Most of your users will see the color on a subconscious level. Just use the changes to help them feel a little more at home.

Color choosing tips

Leading with colors works best with a small number of distinct colors. Don’t expect your users to tell the difference between burnt umber and sienna. There is a lot you can do with variations of green, blue, yellow, purple, and orange.

Be careful with red. Those red raspberries grab our attention more than any other color. Red can make some elements appear more important than the others.

Avoid brown and beige, they make your application look drab.

Test green with men and women. Women can see a few shades of green that men can’t and most greens look different between the sexes. Always test greens with male and female users.

Check with different monitors. Colors looks surprisingly different on different monitors. At least one color value is green on my laptop and blue on my desktop.

Color is another tool for making your applications feel better and meeting your user’s expectations. It guides them through and helps them get to where they need to go.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: