Natural Depth Contrast for Better UI Navigation

A deep dive into subtle design details

Every UI navigation has a set of states. These states indicate which menu items are active and which are inactive. In other words, they represent what the user has clicked, what the user hasn't clicked, and what the user can click.

Representing navigation states is a challenge for most designers. They often make the mistake of designing states that don't look or feel natural. The result is a navigation that's either confusing to understand or jarring to look at.

The last thing you want to do is distract users when they're trying to navigate a long list. To keep them focused on their task, you need to apply natural depth contrast to your states. Natural depth contrast isn't merely color contrast but rather color contrast applied strategically and effectively to the interface.