Before&After Design Tip: Signify Hierarchy With Color
Here’s a quick tip on color usage in web design from issue 42 of Before&After Magazine.
Here’s a quick tip on color usage in web design from issue 42 of Before&After Magazine.
Help your viewer stay oriented as they drill deeper into your site by using tints of the menu color to convey successive levels; the lighter the tint, the deeper you are. A scale of tints makes it obvious at a glance that you’re moving deeper into the site. Dark base colors—any regular color with a lot of black—are the most versatile. Unless you’re selling Barbies, avoid bright red, which when tinted turns pink.

CreativePro members can download original content from Before&After Magazine, a beloved resource that taught a generation of newly minted digital designers how to design and communicate effectively with the written word. See our archive here.
© John McWade/Before&After Magazine, courtesy of Gaye Anne McWade.
This article was last modified on January 3, 2026
This article was first published on April 4, 2025
Commenting is easier and faster when you're logged in!
Recommended for you
Before&After: Optima: The Typeface of 9/11
How Optima brings dignity and humanity to the National September 11th Memorial.
Before&After: Use a Simple Grid With Endless Variety
Snap-together modules make this format for ads and promotions easy—but get the s...
Understanding Mobile First Web Design
As technology evolves, so do the ways we experience information and media. With...
