UI Patterns and Techniques

Color-Coded Divisions

From http://johncoltrane.com
Use when:	You're building a large UI with many pages or windows, which can be organized into divisions (chapters, sections, sub-applications, etc.). You might be using a Visual Framework to unify them visually. But you also want each division to have a distinctive look.
Why:	This is an example of a "signpost" -- something that gives the user a clue where they are. It does so with some subtlety; colors work visually instead of verbally, and it's not even something that users will necessarily notice immediately (though it's hard to miss in the vivid Coltrane example above). But once users are attuned to the color schemes, they can use them. Even before then, they'll know when they've left one section for another, if they notice that the color scheme just changed. So color-coding works to distinguish one section from another; it makes the boundaries clear. It's easier for users to mentally map out smaller chunks of a navigational space, e.g. one division, than the whole space at once -- you should do this with a large UI in any case, whether you use color-coding or not. Creative uses of different colors could also make your UI look nicer and less boring. It might even contribute to the branding of the UI -- see the Apple example below.
How:	Pick one of the UI colors and change it from division to division. Usually, the background color is too much -- the Coltrane example only works because the visual framework is so strong and distinctive. Most designs work better with a trim color, like a border, or the background of a small amount of text.
Examples:
From http://apple.com Apple provides us with a more typical example of color-coding. Look at the top of each screenshot. The tab and the bar below it change color (and texture!) to match the content -- teal for QuickTime, leopard spots for OS X "Jaguar," etc. The effect is subdued but noticeable. It contributes to both usability and branding, while not detracting from the unity of the overall site. (Note that the tabs are the Toplevel Navigation in this Web site, while the secondary navigation links live on the colored bar.)