Visual Hierarchy: How to Use It in Your Design Projects

Everybody wants to stand out. But there’s a lot of information flying around the internet – maybe too much information. The average person sees between 5,000 to 10,000 marketing messages daily.

Even on a single web page, in newsletters, or even in an ad, there’s often more information than we can immediately take in. So our brains pick and choose what to notice — or they may tune out the entire design. 

Visual hierarchy is a design principle that solves this sense of overwhelm. If your designs have ever been called “busy” or “cluttered,” this article might be for you.

Visual hierarchy is a design principle of prioritizing some design elements over others. It is a design element that indirectly tells a viewer about its importance.

Here’s an example of a lack of visual hierarchy:

All the words are treated with equal importance. As a result, if we’re busy, don’t want to read, or aren’t all that interested in the topic, we might tune the whole thing out. There’s no one element to pull us in.

But by emphasizing a few key elements, the text becomes easier to read:

Even in this simplistic example, you can see how suddenly different “elements” (different words) start to pop. We immediately know the headline is the most important piece of information. The bolded words are more important than the unbolded words. And we’re more likely to read the bullet points than that last paragraph. 

Here’s another example of visual hierarchy, but done purely with design elements. 

This example has no visual hierarchy:

While this example has a clear visual hierarchy:

As you can see in the example above, bright colors command more attention than muted colors or grayscale. So if you want something to pop, make it colorful! If you want to show that an element is less important, make it fainter.

This email from Jetstar uses a cool blue color for the background but highlights the essential elements of the design with a bright orange – the brand’s signature color.

You can also convey visual hierarchy by making the primary design element solid, and all the less critical design elements shaded. 

This Instagram pack from Envato Elements uses a shaded background behind the featured images, creating contrast so the templates pop. 

Headlines are usually larger for a reason, and “hero shots” (primary images) are larger than surrounding images or social media icons. This is because size conveys importance. 

Here’s a layout that features a bunch of visual elements on the right, but one of them is just a bit larger than the others. Most viewers will look at the more prominent feature first as it immediately draws the eye in.

The classic patterns used for design are the “F-pattern” and “Z-pattern.” These are based on eye-tracking studies which show where viewers tend to look. While they can help to organize information, they’re based on aggregate data and are primarily created for optimizing website layouts or landing pages. 

There are many other patterns, and while these are used mainly for web design, they don’t have to be used for that purpose exclusively – they can also be useful for other design projects.

Alignment implies similarity. If rows of similar-looking objects exist, we assume those objects are the same. And so, if one of those objects is out of alignment, we’re more likely to notice it — and we’ll assume it’s different or noteworthy.

This one pen cap is out of alignment with the others. As a result, our eyes focus on almost nothing else (except maybe the point of the pen).

Repetition implies sameness. So, if you repeat a series of design elements, viewers will assume they are similar to each other. 

You can flip this principle and call attention to something by breaking a series of repetitions. Notice how the navigation elements on this web page are the same until the call to action on the far right. This example of visual hierarchy uses a break in repetition to call attention to one element. 

When we put a lot of white space around something, we assume it’s taking up space for a reason — it’s important. So add a little whitespace around items you want to call attention to. You can also use negative space to influence where viewers’ eyes go.

This example of white space doesn’t even use “white” space – it’s grey – but the effect of the blank space around the design is pretty powerful. The eye doesn’t have a lot of places to go, so the minimalistic design keeps the viewer focused on what’s important. 

Proximity is a counterpoint to whitespace. But if whitespace can affect visual hierarchy, reducing whitespace can affect it, too. 

Usually, moving things closer either means they belong together or aren’t as important as elements with lots of white space. That’s okay – we want to give viewers visual cues about what’s less important. It helps them focus on what is more important. 

Take a look at this layout. Most of the mockup images are visually busy. But, the mockups featuring just one item have more weight than the images with three or four.

Texture is similar to patterns. Think of italics for text or a patterned background for similar items: it all affects how much attention the image will draw.

This book cover is a wonderful example of how to use almost nothing but texture (and some color) to make one design element stand out. It’s especially effective because the essential element of the design – the girl in the dress – is relatively small. But the red of her dress and the yellow leaves draw attention. She stands out against the dark swirling leaves.

If you want the reader to focus on one thing in particular, blur the rest out. Designers use blurred backgrounds to enhance the atmosphere of an image and help the viewer understand what they’re seeing. You can recede certain elements using blurring to indicate that it’s a visual cue that’s not as important. 

This ad from Coca-Cola shows the couple in the background, but make no mistake — Coke is hinting at what’s most important here.

Now that you understand the basics of visual hierarchy, you’ll better understand how to set different levels of priority in your designs. As a result, viewers will immediately understand what’s most important. Even if they’re scanning your work, they’ll still understand the critical points of your design and be able to find their way around it with ease.

Pam Neely is the Content Marketing Manager at AWeber, where she helps small business owners and creators send better emails.