No items found.
No items found.
Wall of Love

What is visual hierarchy in design? (Explained with examples)

Key points


  • Visual hierarchy determines what the viewer looks at first, second, third, and so on when looking at a design composition
  • That intentional viewing order tells a story, communicates a message, and may even convey a mood or feeling
  • Visual hierarchy can be created by manipulating 5 key concepts (either individually or in combination): Scale, color contrast, white space, format, and position
  • Typically: the following gets higher visibility (relatively-speaking of course): Larger elements, higher contrast ratios, more negative space, videos & imagery, elements at the top of the layout.
  • Visual hierarchy is particularly important in web design because unclear hierarchy can lead to lost sales

Visual hierarchy is the arrangement of elements in a design to create a clear order of importance. This can be done with scale, color contrast, white space, format, and position. Let's dive deep into each concept and go over some mistakes & examples.

Creatorfuel helps you master high-value skills of the digital era. Learn more.

weekly creatorfuel
Actionable tips & tools for creative minds.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

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.

Using varying sizes of text to demonstrate visual hierarchy

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

Varying sizes of circles demonstrate scale hierarchy
You’ll notice the circles in descending order of size
Web design for a British museum showing great typographic scale hierarchy
Beautifully executed scale hierarchy using type. Note sufficient size differences to ensure the hierarchy is clear and obvious. Via Viktor Gajlovic on Dribbble

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.

Demonstrating color contrast hierarchy with circles that vary in brightness relative to the background
The difference in luminance between the pure black circle and the grey background is greater than the difference in luminance between the dark grey circles and grey background. Thus, the black circle will be noticed first.These differences can be quantified with the contrast ratio.
Demonstrating color contrast hierarchy with a red button and a grey button on a white background
The contrast ratio between the red button and white background is higher than that of the grey butt

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.

Demonstrating white space hierarchy using circles
You might notice the group of circles first but the first individual circle you’ll notice will most likely be the one on the lone right circle
Demonstrating white space hierarchy using a web design layout gallery
You’ll notice the image on the right first as it’s surrounded by more white space


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.

The order of visual prominence of content formats


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.

Demonstrating position hierarchy with circles
The top-left circle gets noticed first before our eyes work their way down to the bottom circle
Demonstrating position hierarchy with a poster design
Position hierarchy is being used here to facilitate the reading of the words “Demos not memos”. Work by Nicolas Solerieu

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

The visual hierarchy table
Everything you need to know about visual hierarchy

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.

Good vs bad scale hierarchy demonstrated using circles
Good vs bad color contrast hierarchy using circles

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.

Using too many contrasting colors creates visual noise and disorientation

Visual hierarchy examples


An album cover demonstrating good scale hierarchy
The Strokes’ album cover for Comedown Machine shows fantastic use of typography scale hierarchy
A poster design demonstrating a poor mixture of scale and position hierarchy
This poster design for John Hiatt & The Goners is an example of a relatively poor mixture of scale and position hierarchy. The type size differences combined with the positioning of the elements forces our eyes to jump up and down repeatedly. It’s a little disorienting.

Color contrast

Color contrast hierarchy in packaging design
Which packaging color application does a better job of highlighting the coconut? The left one of course! All thanks to a higher contrast ratio between the orange coconut and light blue background.
Color contrast hierarchy in book cover design
Of the two head silhouettes on this book cover, which one seems closer and more prominent to us?If you answered the dark one facing the right side, then you’d be correct.The silhouette facing the left side doesn’t contrast as starkly with the light green background, lowering its visual prominence. Via Ashley Armour Kittrell

White space

Yellow poster showing how white space is used to make a bird the focal point of the composition
Want to make an element the focal point? Surround it with abundant white space like this bird

Content format

A web design layout for a musician with multiple content formats
In this web layout viewers will likely notice shapes the imagery and blue shapes before looking at anything else. Via Themeforest
Web design layout showing the visual weight of imagery with faces compared to large text
Even though the headline text “UNCOVER” is enormous, you still notice the smiling face first. Imagery with faces carry a ton of visual weight. Via Themeforest


Position hierarchy in print
Where do your eyes travel after spotting the image? Probably right at the words “Als Neil Young...” at the top-left. Via Humana

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.

“Target’s site draws in user’s eyes towards the left side of the screen. The price and CTAs remain in the background.” Via EyeQuant
“Due to the sharp contrast of OfficeDepot’s headline, the discounted price does not stand out as much as it should.” Via EyeQuant

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!

weekly creatorfuel
I share tips & tools every creator should know.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

Fresh Youtube videos



Have you forgotten about the fundamentals?

I’ve learned that no amount of coaching, fancy apps, “creativity hacks & tips” etc, will make up for:

  • Subpar sleep
  • Low vitamin D3 (lack of direct sunlight exposure)
  • Lack of movement (sports, resistance training, cardio)
  • Poor diet (macro and micronutrients)
  • Nonexistent stress management

Get these right first.

They are the highest impact things you can do.

Ignoring these is like a student ignoring the fundamental concepts needed to ace an exam and instead focusing on color-coding their notes, using fancy study apps, and organizing their study space with intricate decorations.

Master the basics. Everything else falls into place. full post
Aug 15, 2023

Nonfiction books are too long

Most nonfiction books should've been 1000-word articles.

I find myself abandoning a lot of books right around the 25-30% mark.

Not because they're bad, but because I fully get the gist by that point and it's right around when the repetition of examples and ideas begins.

I'm okay with abandoning a book midway now. Just a couple years ago, I would power through the whole thing in fear of missing out on some crucial ideas in the later chapters.

Now, I just have fun with it. If it piques my interest, great – I'll buy it, read the chapters that seem interesting, get what I came for and move onto the next one.

I think a lot of these authors are just trying to meet some sort of quota. I dunno.

There's elegance in brevity. full post
Aug 14, 2023

A note on this weird cold plunge trend

So many of these "gurus" telling us to take cold showers and cold plunges 😂 😂

If you’re tired all the time:

  • Go get your bloodwork done and see what you’re deficient in
  • Get outside. Get some damn sun
  • Sleep well
  • Use your mind to build something – It'll energize you

Stick to high-impact basics. These little micro-optimizations aren't going to change anything.

Enjoy your hot showers 🔥🚿 full post
Jul 21, 2023