Homepage / Design / Visual Hierarchy: How to Use It in Your Design Projects
Design, Web Design

Visual Hierarchy: How to Use It in Your Design Projects

What is visual hierarchy? Use this design principle to make the key elements of your projects pop.

Posted 21 Sep 2022

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.

What is Visual Hierarchy?

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:

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:

Better visual hierarchy

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:

10 Ways to Use Visual Hierarchy to Level Up Your Designs

1. Use Color

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.

Jetstar email using color to convey visual hierarchy

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.

2. Use Shading 

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. 

3. Use Size 

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. 

An image of coffee shop social media templates that uses size to convey visual hierarchy

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.

4. Use Patterns

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

The F pattern is useful for web design and graphic design

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.

Patterns for web design

5. Use Alignment

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.

An image of pens on a white surface showing alignment

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).

6. Use Repetition

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

Mostly AI's homepage using repetition

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. 

7. Use White Space

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. 

20 Valentine Line Multicolor Icons by IconBunny

8. Use Proximity

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. 

Metal can collection mockups

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.

9. Use Texture and Style

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.

A book cover design showing clever use of negative space

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.

10. Use Blurring

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. 

Ad from CocaCola

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

Is Visual Hierarchy the Secret to Making your Designs More Engaging?

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.

Guest Author: Pam Neely

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

Do you find this article useful?
Related Posts
logo
Envato Elements: Millions of creative assets, unlimited downloads – free for 7 days.*Get 7 days for free