A Non-Designer’s Guide to Visual Hierarchy [Best Practices + Examples]
Ever click on a website, take a look at it and say “Hmm, this will be a no” while looking for the exit button?
For me, this usually has three reasons: the website looks outdated, crowded, or difficult to navigate.
Bad design can keep your target audience from generating interest in your brand.
Because of this, it’s important to understand the key design principles that will help you target your audience, keep them on the page, and generate conversions.
Here’s a simple guide to one particular principle of design: visual hierarchy. We’ll cover all of the elements that contribute to the visual hierarchy and look at good and bad examples.
What is visual hierarchy?
Visual hierarchy is the method of arranging graphic elements in order of importance. By relying on principles related to size, color, contrast, white, and more, you can influence how users interact with your designs, from images to websites.
The visual hierarchy affects what you look at in a design and what you focus on, whether it’s an image, graphic design, or web design. It plays a key role in ct (i.e., how information is organized and displayed to make it easy to understand and navigate) and can have a significant impact on the user experience (UX).
When thinking about visual hierarchies, you want to ask yourself a few questions:
- What do we want to draw your attention to?
- What action should our users take?
- Where does the eye naturally go and where do they land?
When asking these questions, you can use the principles described below to create a clear visual hierarchy.
What Makes a Bad Visual Hierarchy?
When it comes to visual hierarchy, there is a golden rule: if every element seems important, nothing seems important.
The visual hierarchy is used to organize the information you consume. If there is no way to differentiate between the elements, it is considered a bad hierarchy.
Take this example:
There are links much busy. The two main elements are the same size, there are many different colors. It makes it hard to know where to look. Your eyes glaze over everything, causing discomfort and disorientation.
On the right, your eye is automatically drawn to the blue main box on the left and then naturally moves on to the items on the right before landing on the orange call to action (CTA).
Bad visual hierarchy:
- Confuses the user.
- Makes it unclear where to look.
- Creates a boring design.
Instead, create a visual structure that is easy to understand and guide the user.
Web design principles for visual hierarchy
- Look at reading patterns.
- Users notice larger elements more easily.
- Color and contrast attract the eye.
- White space creates emphasis.
- Proximity and repetition create unity.
1. Consider reading patterns.
When designing, you want to consider the natural eye patterns of your target audience.
In all cultures we read from top to bottom. However, there are some differences in the way we read horizontally. Western cultures tend to read from left to right, while some Semitic and Indo-Aryan languages like Arabic, Hebrew, and Urdu are read from right to left.
In that sense, it affects how we scan and understand designs. For example, western users usually follow an F or Z reading pattern.
Knowing this information can help you design projects that will convert, especially on landing pages.
2. Users notice larger items more easily.
Size plays an important role in the visual hierarchy. This is one of the most important ways to evaluate elements in a design.
Take this example from Netflix.
Image source
The first thing you will read while looking at this picture is “Unlimited movies, TV shows, and more.“”
Then read the next line and then the next before examining the other elements on the page.
Size means importance. The larger an element, the more attention it will draw and the more likely it is to be looked at first.
As you design your website, think about what your audience should look for first and use this as a guide in your strategy.
3. Color and contrast are eye-catching.
The second principle to keep in mind is color.
We know that color can evoke emotions and have certain cultural and social connotations. Just look at the industry logos and you will notice a trend. Grocery stamps are usually red and yellow, while financial institutions are usually blue.
Color draws attention in design.
In the example above, you can see that the elements that stand out the most are orange. Only after looking at them do you scan the other items on the page.
On a website, you can use this to get focus on your CTAs.
In the example below, the most noticeable CTA is in the middle. The brand likely wants users to choose this option. The other CTAs are still visible but muted compared to the orange.
Use it sparingly for the most visual impact possible with color. This will make the elements more prominent, as shown in the example above.
4. White space creates emphasis.
White space refers to the empty space within a design.
Image source
Sometimes there is a desire to fill the room with as many elements as possible. However, this goes back to the concept of importance: if they all seem equally important, none of them will be perceived as important.
This is why adding spaces to your web design is key to attracting your visitors.
Apple is also known for using spaces.
Image source
The brand offers a simple user interface that puts more emphasis on the elements on the page. Apple’s use of spaces also reflects a brand’s identity.
5. Proximity and repetition create unity.
When you put multiple elements together, it tells the user that the concepts are related.
Image source
This design offers many examples of closeness.
Take the items under “Master The Basics”. When these fields are all grouped closely together, the visitor can understand that they fall into the same category.
The same applies to the symbols under “Follow Us”. If the icons were all randomly distributed around the page, it would be difficult for users to understand their purpose.
If you are unsure of how to group certain items, you can use certain UX research strategies like map sorting to group items based on your audience’s expectations.
Examples of good visual hierarchy
1. Visme.co
Image source
Visme.co has an eye-catching popup that encourages users to sign up for their newsletter.
The brand successfully uses spaces, color, size, and contrast to highlight key elements. You will also find that the elements are designed in a Z pattern which increases the likelihood of users converting.
2. Studio 8AD
When designing their website, this brand uses spaces to draw users’ attention to three key elements: the image and the two CTAs at the bottom left.
Image source
3. Predominantly black
This brand provides a great example of closeness to visual hierarchy creation. 
Image source
By organizing all products under the main title and the small distance between them, visitors quickly realize that these products fall into the same category.
The visual hierarchy is about organizing your items in order of importance. Once you’ve narrowed down what to focus on and taking into account the needs of your audience, you can create designs that create the impact you want.
