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 Design Tip: Use Cropping as a Design Tool
How to get the effect you want by changing the size, angle, and cropping of a ph...
Before&After: Design on a Centerline
An image, a typeface, and one line are all you need to set a classy scene on thi...
Before&After: Design a Flier That’s Its Own Return Envelope
On a budget? Need a response? This economical flier has it all.
