In design, visual hierarchy is the arrangement of elements in a way that establishes a pecking order. This is what determines what the viewer looks at first, second, third, and so on.

By manipulating five different concepts-scale, color contrast, white space, format, and position-you can create visual hierarchy in your design compositions.

In this blog post, we will discuss what visual hierarchy is and how you can use it to direct the viewer's attention to the most important elements of your design. We will also look at some common mistakes people make with visual hierarchy and why it's important to get it right in web design particularly.

What is visual hierarchy in design?

As mentioned in the introduction, visual hierarchy is the order in which people view the elements in your design composition. Elements at the top of the hierarchy are noticed first while elements at the bottom of the hierarchy are seen later on. These elements, in order, tell a story, communicate a message, and may even convey a mood or feeling.

in short, visual hierarchy lets viewers know where to focus their attention.

This is why it's so important to have a well-designed visual hierarchy - if your visual hierarchy is off, then your viewers will likely miss important information or be confused by your overall message. Having an unambiguous and intentional visual hierarchy ensures that your ideas are conveyed loud and clear.

How do you create visual hierarchy?

There are essentially 5 core concepts you can manipulate to create visual hierarchy:

1. Scale
2. Color contrast
3. White space
4. Format
5. Position

Whether used individually or in unison, these concepts can help you create a clear visual hierarchy in your design composition. Let’s go over each one in detail:

Scale

Scale is important because it determines the relative size of each element in your design. You can use scale to draw attention to certain elements. Typically, the larger elements are noticed first.

So, it’s quite simple: if you want to emphasize a particular element, just make it bigger than the other elements in the composition. This will help it stand out and catch the viewer's attention.

Visual hierarchy aside, if you want to create a sense of order, you can use scale to make all of the elements in the composition the same size. The visual consistency will help viewers scan through your design more easily and understand your message quickly (the human brain loves consistency).

By using scale appropriately, you can control how people view your composition and ensure that they absorb your message correctly.

Color contrast

Color contrast is another viable and impactful tool at your disposal.

Contrast creates hierarchy by juxtaposing strikingly different elements (Example: A deeply saturated royal blue illustration on top of a white background). That striking difference brings visibility to the element that is in the foreground.

The more pronounced the difference in luminance (this can be quantified with the contrast ratio), the higher the visibility of the element in the foreground.

The simplest way of using contrast to draw attention to an element is by making text bold and black while making the background white. This creates a stark contrast between the two elements (the text and background) which gives the text a ton of visual weight and thus, visibility. Great visibility means it’ll be high in the visual hierarchy.

When talking about color contrast and its utility in visual hierarchy, it is important not to fall prey to simplistic misinformation such as "bright colors usually draw greater attention than duller hues".

What we really care about is color contrast, meaning the difference in luminance between foreground and background colors. Ensure that the brightness difference is dramatic enough to create hierarchy.

White space

White space creates hierarchy by framing an element in negative space (blank space) which in turn draws attention to it. How does that work? Well, less clutter in a spacial region means less cognitive load on our brains (less thinking – we hate thinking) which means we can give something more attention.

So, the more negative space around an element the more easily it draws and keeps attention (as this is easier on our brains) and thus the higher it will be in the composition’s hierarchy.

Is an element very important or needing to be high in the visual hierarchy? Add a significant amount of white space around it. This will help “highlight” that element and make it stand out from the surrounding content.

The amount of negative space you surround an element with will determine the degree to which that element is important and thus visible. Again, its degree of visibility will then define its "ranking" within a composition's hierarchy.

Like with contrast and scale, one can use white space to effectively control how people view a composition and ensure that the message is conveyed as was intended.

Format

Content format is underrated because 1) It’s rarely talked about and 2) It’s heavily involved and impactful in visual hierarchy.

The 6 main content formats in descending order of visibility (Reminder: When we say visibility, we’re referring to the visual prominence or ranking in the visual hierarchy):

• Text
• Shapes/lines
• Icons
• Images
• Images with faces
• Videos & GIFs.

Say you've got a landing page and in the hero section you've got the following content:

• Auto-playing video
• Some text
• Button

Viewers will notice the video first as motion will always draw attention first. "A moving element will carry greater visual weight in a group of stagnant elements" -Miklos Philips for Toptal.

Then, if the text and button are the same color and size the button will be noticed second (shapes & lines are noticed before text) and the text will be seen last.

Position

Finally, we have position. As humans we’ve been accustomed to consuming layouts (such as books) from top to bottom, and in the west more specifically, it’s top-left to bottom.

That acclimatization has led to any elements in the top-left and top of any composition getting visually prioritized. The visual prominence decreases as you descend the layout.

Here's a little chart that sums up everything we've just discussed:

The two most common visual hierarchy mistakes

If you ignore any of these concepts, your design will likely be confusing or ineffective. In this section, I'll discuss the 10 most common visual hierarchy mistakes in design.

1. Not making the differences obvious enough

We'll discuss this mistake by using the concept of scale. Creating a size difference between two elements is the easiest and most effective way of creating visual hierarchy. However, if that size difference isn't significant enough then the hierarchy becomes unclear and the composition as a whole becomes harder to navigate. Our brain and eyes aren't exactly sure where to look first and where to carry on from there.

2. Using too many contrasting colors

Color contrast is also an important tool for creating visual hierarchy, but if it's overused. as in there's a multitude of different contrasting colors, then this can create visual overwhelm for the viewer. Contrast is great for creating a clear ranking system within a composition but too many contrasting elements leads to visual noise and cognitive load. We hate thinking. Don't make us think.

This is one of those instances where too much of anything is bad.

Visual hierarchy examples

Scale

Color contrast

White space

Content format

Position

Visual hierarchy in web design

Before wrapping up, I wanted to point out that visual hierarchy is especially important in the world of web design. Here's why:

• An e-commerce store with product pages that lack a clear visual hierarchy can mean lost sales (Example: viewers don't notice an offer or pertinent product features means they may not buy)
• A blog with poor hierarchy can lead to low time-on-site which can mean fewer opt-ins
• A portfolio website with an unclear hierarchy can lead to clients not finding what they're looking for and subsequently not hiring you
• An app landing page with poor hierarchy can mean fewer downloads and revenue

To prove its importance, Eyequant ran a visual hierarchy study on 50 of the most popular e-commerce websites on Earth. A staggering 70% of these e-commerce giants failed the test. Check out some of the results below.

Wrapping up

Design is all about creating a distinction. Distinguishing between what's important and what's not, what to focus on and what to ignore. And while there are many ways to create this distinction, visual hierarchy is one of the most effective and common. In this article, we've talked about the different aspects of visual hierarchy- scale, color contrast, white space, format, position- and why they're so important in design. We also discussed some of the most common mistakes people make when it comes to creating visual hierarchy and how to avoid them. Finally, we looked at why visual hierarchy is so essential in web design and some examples of good and bad use cases. By understanding these concepts and using them correctly in your own designs, you'll be able to create compositions that are both visually appealing and easy for viewers to understand. So what are you waiting for? Get out there and start experimenting!