Having a visual hierarchy is make-or-break for your website. Without one, you're scaring away potential customers. It's that simple. It's. So today I'm going to show you what a visual hierarchy is and teach you how to build one.

What is visual hierarchy?

In design, visual hierarchy refers to how some elements of your site draws more attention than others because of their size, contrast or positioning. A better word would be attention hierarchy, because that's what it really is. Having a clear visual hierarchy, where your most important elements draws the most attention helps, your visitors focus on the most important elements of your site.

Example of a bad (non-existent) visual hierarchy

The easiest way to understand visual hierarchy is through examples. So let's start with a site with a bad visual hierarchy:

What is the first thing you notice? The first thing that draws your attention? It's more or less everything, right? Maybe you noticed the big logo first. Maybe the rectangles with bold text. But there's not anything that really stands out. It's all green and more or less the same size. It all blends together, so you don't know where to look. In other words, there's no visual hierarchy.

Example of a great visual hierarchy

To show you the opposite end of the spectrum, look at this design from Webflow. It's immediately clear what Webflow wants you to see first: their value proposition in big, white text. Then they direct your attention toward the image, which features their product, and the two blue call-to-action buttons in the middle and the top-right corner to get you started.

Why is it important to have a visual hierarchy?

You're going to lose a lot of customers without a visual hierarchy. It's that simple.

Think about it. What do you think you would do if you landed on the green site looking for ? I'll bet my hat that you'll get overwhelmed and leave. It's simply too much work to understand what they do and whether they can help you or not. It's like being forced to read a whole book to find the one chapter you're looking for. So you'd rather leave and find another company than do the work of figuring out whether they can help you.

At the other end of the spectrum, Webflow’s visual hierarchy quickly figure out:

• What's their offering— how can they help you? (The headline)

• How do they do it? (The subheading + the image)

• How do I get it? (The call-to-action buttons)

If you're an online store, your visual hierarchy could also nudge visitors towards browsing your bestsellers, reading more about you, or seeing what others says about you in reviews.

How to create a visual hierarchy

Luckily, you have multiple levers to create a visual hierarchy: size, contrast/color, positioning, and motion.

Size

Size is simple: the bigger it is relative to the rest of your site, the more focus it draws. Just look at this simple illustration. What's the first thing you notice— even though it's not the first thing in the image?

Now go back to the Webflow example. What's the big element on the site? The headline. This tells us that this is what Webflow wants you to see first.

Contrast and colors

Another way to draw attention is with contrast. This includes using colors as colors essentially just creates contrast to other colors. Just look at these examples:

Position

Another trick is to use positioning to make an element stand out. This works because our brain automatically groups things that are positioned together, so anything odd stands out. Just look at this example. They're all the same, boring color. Which one immediately stands out?

Combined

One of the best examples of using size, contrast, and positioning to nudge you is pricing tables. Which subscription do you think the designer wants you to take?

A note on white space

It's important to note that none of the above will work without white space. White space is quiet areas of visual rest on your site. Back to the Webflow example, it's all the empty space around the big headline.

White space is important to make your important elements standout. Without white space, it's like the "Where's Wally?" books. You know he's there, but he's impossible to find among all the other elements things in the image.

(He's next to the second tent from the left).

Motion

The final piece to the puzzle is motion. I'm not going to show you can example because it's so obvious. Anything that moves draws your attention. That makes GIFs and short, auto-playing videos powerfull tools to draw attention to like a GIF.

How to evaluate your visual hiearchy

I recently stumbled on a great tip to evaluate your visual hierarchy. The tip was to blur your site. By blurring it, you can easily see which parts attract your attention without focusing on the content itself. Just look at these blurry version of the above examples:

That’s it! A primer to using size, contrast, position, and motion to create a visual hierarchy.

I hope you learned something!
Mathias

Stop wasting money on marketing because your site is a bottleneck

Your site is important. It’s the final destination for all your marketing traffic.

Unfortunately, most themes are designed to be pretty, not to sell. This means you’re leaving a lot of money on the table because your site is the bottleneck of all your marketing.

But it doesn’t have to be like that. With my Online Store Blueprint, you learn how to make your online store sell the most, not just be pretty.

“This is an absolute game-changer for online store owners. I've experienced tangible results from implementing the strategies and would highly recommend it to other Online Store owners.“
- Tommy F., Verified Buyer 
★★★★★