colors and uniformity

providing information through colors

main page

• back to articles
• colors and uniformity
  • colors
  • color and information
  • similar design elements
  • site uniformity

colors

Color is a big topic on the Web. Mostly it's the technical issues of colors that command ink; Web-safe colors, card-safe colors, how to generate colors, WebTV and colors, and so on. There's less material about design and color.

Now, I'm no design expert, but a few things about colors and design stand right out.

color and information

Colors tell us about things. They help reinforce the internal logic of design elements. Think of stop signs. For as long as anyone can remember, they are primarily red (once they were yellow). Red is associated with danger. But more to the point, all stop signs are red. No matter where you go in America, the stops are red. And further, so is the stop color in stoplights.

Why is that? Stoplights and signs serve approximately the same purpose - to warn you to stop. So, they both get the same color. The same is true with yellow and road signs. Yellow means caution. It is used in stoplights, yield signs, and on signs suggesting a slower speed limit.

Color should always impart information. I know that there are reams of material that suggest which colors for which cultures are associated with what. That surely is important in certain Web applications. But, more importantly, colors should reinforce the function of design elements. And, this is key, the color for each design element is totally arbitrary.

similar design elements

Let's say you have a small box that gives the last time a page was updated and a small box that gives the creation date of the document. You can pick any color you want for each of these boxes, but the colors, as well as the font and box sizes, must be same throughout the site to reinforce the design element. Each time a person sees a red box with white fonts, they will be able, perhaps unconsciously, to recognize that this is the creation date of the document.

See what I mean about the internal logic of a site? Coloring creation date information a certain way is a design consideration. There is no correct look for this information. We are not bound to color and shape elements, as in the stop sign example, by some authority. But once a look for an element is achieved, you must adhere to the look.

What about other creation dates? Why not use the red with white font scheme again? If it's related to creation dates, or something like creation dates, use the same color scheme to reinforce the design element. Once users see the same colors for roughly the same idea, they will more easily navigate the site and more easily discern the meanings of similar design elements.

Think of our stop sign again. When you see a stop sign, you don't need to analyze it. You simply recognize its meaning. By using colored elements to reinforce the internal logic of a site, you can aid the users in simply recognizing the meaning of the design element without having to apply too much analysis.

site uniformity

Keeping design elements the same from page to page, and extending the look of one element to similar elements, will bring uniformity to the site. This lets a user know, as she maneuvers through the site, that she is still on the site. Have you ever been to a site that had a different look for each page? Eventually you lose your connection to the site, which makes it less sticky (per the current parlance). Users should enter a site and feel like the are physically moving through a real, coherent place.

Look at all you can achieve by sticking with one color scheme for a design element. You get a professional look, you get the reader to easily recognize the kind of information they are looking at, and you give the reader the sense of being within a place, making it more likely they will stay.

So keep to a color scheme, and assign color combinations to functions to help visitors understand the site via both the text and the design elements.