Establishing a clear visual hierarchy is key to creating a well-optimized web page. But how do you achieve the right balance? In this article,I’ll look at nine visual “toggles” you can use, with examples of their effects.

I’ll start by saying that every designer I’ve ever met despises the word “pop.” It’s one of those squishy, non-technical terms clients use when they’re unhappy with a design. It can mean almost anything, including and not limited to:

Just make it red, already

Could we get more cleavage in that photo?

It doesn’t look enough like [insert name of another web site]

Where’s the animation? I thought there would be animation.

I hate gradients.

In other words, as actionable feedback, the word “pop” has no use. But as a conversion design concept, it can be very powerful, helping you improve your page’s visual hierarchy, message clarity, and conversion rate.

Things That Make You Go “Pop”

Luckily for designers, the qualities that affect “pop” are predictable, because of the way our visual systems are wired. We tend to quickly scan and analyze many bits of visual information such as edges, contrast, sizes, and motion in order to assess and understand our surroundings. This is true whether we’re looking at a field or a web page.

Here’s a quick visual (of course) reference of nine characteristics that have a strong influence on visual hierarchy: