Have you ever clicked on a website, took a look and said “Hm, that’s gonna be a no” while looking for the exit button?
To me, this is usually for three reasons: the site seems outdated, cluttered, or difficult to navigate.
Poor design can prevent your target audience from being interested in your brand.
That’s why it’s important to understand the key design principles that will help you attract your audience, keep them on the page, and drive conversions.
Here’s a simple guide to a specific design principle: the visual hierarchy. We’ll cover all of the elements that contribute to the visual hierarchy and look at the good and bad examples.
What is the visual hierarchy?
Visual hierarchy is the method of organizing graphic elements in order of importance. By drawing on principles of size, color, contrast, white, and more, you can influence the way people interact with your designs, from images to websites.
Visual hierarchy affects what you look at and what you focus on in a design, whether it’s an image, graphic design, or web design. It is a key player in ct (i.e. how information is organized and displayed for easy understanding and navigation) and can have a huge impact on the user experience (UX).
When you think of the visual hierarchy, you want to ask yourself a few questions:
- What do we want to draw attention to?
- What actions do we want our users to take?
- Where do the eyes go naturally and where do they land?
Asking these questions will help you use the principles described below to create a clear visual hierarchy.
What constitutes a bad visual hierarchy?
When it comes to visual hierarchy, there is a golden rule: if every element seems important, nothing will seem important.
The visual hierarchy is used to classify the information you consume. If there is no way to differentiate the items, it is considered a bad hierarchy.
Take this example:
To the left there is a lot there is a lot going on. The two main elements are the same size, there are many different colors. It’s hard to know where to look. Your eyes shine on everything, creating a certain uneasiness and a lack of direction.
On the right, your gaze is automatically drawn to the main blue frame on the left, then naturally moves towards the elements on the right before settling on the orange call to action (CTA).
Poor visual hierarchy:
- Confuses the user.
- Don’t know where to look.
- Creates a bland design.
Instead, create a visual structure that makes it easier to understand and guides the user.
Web Design Principles for the Visual Hierarchy
- Consider reading patterns.
- It is easier for users to notice larger items.
- The color and contrast are eye-catching.
- White space creates emphasis.
- Proximity and repetition create unity.
1. Consider reading patterns.
When designing, you want to note the natural eye patterns of your target audience.
In all cultures, we read from top to bottom. However, there is some variation in the way we read horizontally. Western cultures tend to read left to right, while some Semitic and Indo-Aryan languages, such as Arabic, Hebrew, and Urdu are read right to left.
With that in mind, it impacts the way we digitize and understand designs. For example, Western users typically follow an F or Z reading pattern.
Knowing this information will help you design transformative projects, especially in landing pages.
2. Larger items are more easily noticed by users.
Size plays an important role in the visual hierarchy. This is one of the main ways to categorize the elements in a design.
Take this example on Netflix.
The first thing you will read when looking at this image is “Unlimited Movies, TV Shows and more.“
Then you’ll read the next line, then the next one before exploring the other elements on the page.
Size means importance. The bigger an item, the more attention it attracts, and the more likely you’ll see it first.
When designing your webpage, think about what you want your audience to look at first and use that to guide 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 can have certain cultural and social connotations. Just look logo by industry, and you’ll notice a trend. Food brands tend to have red and yellow, while financial institutions tend to be blue.
In the design, the color is great for attracting attention.
In the example above, you will see that the items that stand out the most are in orange. Only after examining them will you scan the other elements of the page.
On a website, you can use it to draw attention to your CTAs.
In the example above, the CTA that stands out the most is in the middle. The brand probably wants users to choose this option. The other CTAs are still visible but muted compared to orange.
To create the most visual impact with color, less is often more.
4. White space creates emphasis.
White space refers to empty space in a drawing.
Sometimes there is a desire to fill the space with as many items as possible. However, this goes back to the concept of importance: while they all seem equally important, none of them are seen as important.
This is why adding white space to your web design is essential in attracting your visitors.
Apple is also well known for its use of white space.
The brand offers a simple user interface, which puts more emphasis on the elements of the page. Apple’s use of white space also reflects a brand identity.
5. Proximity and repetition create unity.
When you put multiple items together, it tells the user that the concepts are related.
This design offers many examples of proximity.
Take the items under “Mastering the Basics”. By grouping these boxes tightly, the visitor can understand that they belong to the same category.
The same goes for the icons under “Follow us”. If the icons were all randomly distributed across the page, it would be difficult for users to understand their purpose.
If you don’t know how to group certain items, you can use some UX search strategies, such as sorting cards, to group the elements according to the expectations of your audience.
Examples of good visual hierarchy
Visme.co has a striking pop-up that encourages users to sign up for their newsletter.
The brand successfully uses white space, color, size and contrast to bring out key elements. You will also notice that the items are designed according to the Z pattern which increases the chances of users converting.
2. Studio 8AD
In the design of its website, this brand uses white space to focus users’ attention on three key elements: the image and the two CTAs located at the bottom left.
3. Mostly black
This brand offers a good example of proximity to create a visual hierarchy.
By organizing all the products under the main title and leaving little space in between, visitors quickly understand that these products belong to the same category.
Visual hierarchy is all about ranking your items in order of importance. Once you’ve figured out what you want to focus on and considered your audience’s needs, you can create designs that produce the impact you want.