The ultimate guide to visual hierarchy

What is visual hierarchy?

Visual hierarchy is the order in which humans process information on a page. It’s a system to prioritize
elements so that they are easily understood. Without a visual hierarchy or design structure, users can be
overwhelmed and as a result, fail to take anything in. That’s why it’s important to organize elements in a
way the human eye can make sense of them.

How humans process visual information

When it comes to reading words, most cultures generally read top to button and left to right. Of course,
there are exceptions but if you’re reading this now, it’s a safe bet that you didn’t start at the bottom

Reading visual information works in a similar, yet a slightly different way, and thanks to eye tracking, we
know this to be true. Below are the two main ways—known as patterns—we process visual information.

F Patterns.
This is most common for text-heavy designs. It follows the shape of the ‘F’, starting at the top left and
moving horizontally across to the top right. Viewers then scan down the left-hand side of the page in
search of short headlines or subheads to quickly scan right.

Z Patterns.
Less dense designs follow a ‘Z’ shape. Viewers start at the top left and move horizontally across to the
top right, then cast their eye downward on a backward diagonal slope to the lower-left corner, and finally
across to the right-hand corner.

Depending on what you’re designing, these patterns give a good indication where your most important
elements should be placed

Establishing a visual flow

In web design, logos are almost always in the top left corner. This has been shown to increase brand
recognition and improve navigation. In print, logos usually sit at the bottom of the page along with a call
to action that tells viewers what to do before they turn the page.

Both are based on the concept of visual flow. As a designer, you’re in control of the flow, placing objects
in a way that will draw the eye to particular things.

When designing, ask yourself these three questions:

1. Where will the viewer’s eyes initially go (the focal point)?

2. Where’s the second place the eye will go?
3. Where does the viewer’s eye finally end up?
Thinking about your design in terms of flow is a great exercise. Even if you have more than three
elements, prioritizing the three above will indicate where those other elements should be placed. Establish
a visual flow to avoid eyes bouncing around the design.

How to use visual hierarchy in your designs

One of the most important functions of visual hierarchy is to help establish that all-important focal point,
giving viewers an entry point to start navigating your design and showing them where the most important
information is.

Let’s review some different ways we can give our design elements emphasis to create a clear visual
hierarchy with focus and flow:

1. Use Size to Enhance (or Reduce) Visibility

You’ve heard the phrase’ the squeaky wheel gets the grease’. Put differently, the biggest design element
gets the attention. Enlarging an object’s size (its dimensions) and scale (its size in relationship to other
objects) is one of the easiest and most effective ways to give it visual importance.

Here, Erin Lancaster’s upsized design elements — both off-the-page typography and a large photograph
— make the subject of the spread immediately clear.
On the other hand, design elements that aren’t as important or that you want to de-emphasize can be
reduced in size to make them less visible — and therefore lower in the visual hierarchy.
As with any design principle, balance and moderation are key. You can overwhelm a design with a focal
point that’s too large, or compromise usability with secondary information that’s too small.

2. Color and Contrast: Direct Viewers’ Attention

We’re visually drawn to color, especially when it’s used strategically to highlight important information
or imagery. A bright splash of color, like red or yellow, is hard to miss, whether on a traffic sign on the
side of the road, or a flyer hanging in your local coffee shop.
However, if you drench a design in all the colors of the rainbow, you negate any impact the color might
have had in creating a visual hierarchy. So using color sparingly and with purpose are key principles here.

Otherwise, there are many creative ways that color and contrast can be applied in a design to guide a
viewer’s gaze, including:

Temperature: Colors can be cool (like blue and green), warm (like red, orange, and yellow), or neutral
(like black, white, gray, and sometimes brown/beige). Mixing color temperatures — especially ones with
high contrast — can attract a lot of visual attention.

This theatre poster by design studio Zee combines a vivid, warm orange with a bright, cool blue for a very
striking color palette that creates visual interest and capitalizes on the contrast between color
temperatures.
St
icking to one temperature can also help a design look mor
e visually cohesive. For instance, Keith Johnson’s flyer and

Value: The lightness or darkness of a color is known as its value.

Like temperature, colors of different values can be contrasted
against each other to dramatic effect, while colors of similar values
tend to have more equal visual weight.

In the design below,

Brad Vetter’s
letterpress design for
a show poster features
two pastel hues of
similar light values in
the background. It’s
contrasted with a
deep navy blue to
emphasize the
headlining artist.

Saturation: A
color in its purest,
brightest form is
100% saturated. The
closer it is to gray, the
more desaturated it is.
Using bright or muted
colors (either by
themselves or
together) can be a
strategic way to
create places of high-
or low-contrast in a
design.
On Jason Booher’s book cover design, an
intense red highlights visuals that support
the book’s title. It stands out even more
because the background is a faded neutral
hue. This piece also features a contrast
between color temperatures (warm and
neutral).
3. Typographic Hierarchy: Start With 3 Levels to Organize Your
Design
For any design that involves text (which is most), typographic hierarchy is a component of visual
hierarchy that you can’t afford to neglect. To get a basic idea of typographic hierarchy, just picture a
newspaper or magazine article with a headline, subheadline, and body copy.
This basic, three-level approach can be applied to any type of design, from creating your own business
cards to websites. Let’s break down the levels and what they’re typically used for:

Level One: Generally, your level-one typography will be the most important content. This should be the
most immediately visible typographic element in your design.
Level Two: Level-two elements usually help organize your design into sections or group related
information together. They shouldn’t stand out as much as your level-one type, but should clearly direct
viewers to the different parts of the design and help them navigate it easily.
Level Three: For a text-heavy layout, the level-three typography is generally the complete message,
purpose, or details of the design. It could be long or short — a whole article, a short note, a brief
description — but the primary concern for this level is that it’s highly readable since the font size will
likely be somewhat small.
For a more in-depth guide to typographic hierarchy, make sure to check out the article, Why Every
Design Needs Three Levels of Typographic Hierarchy.

4. Fonts: Choose Typeface Categories & Styles Carefully

Typographic hierarchy isn’t the only aspect to consider while typesetting. The look of your fonts
themselves—the category (sans-serif, serif, script, or decorative) and style (bold, italic, small caps, etc.)—
can make or break a design.

Think of typefaces as personality types. You know some that are loud and flamboyant, some that are quiet
but interesting, and others that are flexible and adapt depending on who they’re with.

Use these qualities appropriately (in a way that fits the context of your project) and strategically to
enhance your design. While a typographic hierarchy will organize your design and make it easy to
navigate, stylistic choices contribute to a design’s overall mood and are a natural way to create emphasis.
For example, Duane Smith has
included a mix of typefaces on his
business card (serif, sans-serif,
and a bit of script at the top),
using size, color, and boldness to
help certain elements (like his
name and phone number) stand
out.

It works because the font choices

complement each other. They
don’t clash, and they aren’t
fighting for attention thanks to its
clear hierarchy. Additionally, the
uppercase text helps improve
visibility for a smaller-sized
design like a business card.

Atomicdust’s book cover combines different typefaces for contrast rather than synchrony. The hand-
drawn style of one intentionally contradicts the traditional serif design of the other in a way that visually
illustrates the title of the book and creates A clear focal point.

5. Spacing: Give Your Layout Balance, Flow, and Focus

White (or blank) space and spacing in general is one of the most neglected design principles. But it’s also
one of the most important.

When you fail to plan for some blank space in a layout — perhaps in an effort to include as much
information as possible — you risk ending up with a jumbled, confusing design. That’s because white
space is essential for separating and organizing the elements in your design and helping it look orderly
and well balanced.
You’ve probably seen it before: a website or flyer design that’s so jam-packed with information, text, and
imagery that you don’t even
know where to start looking at it.
Don’t create one of those designs
that turn away visitors because
it’s impossible to navigate.

Always plan for unused space.

It’s essential for things like:

Giving the viewer’s eyes a place

to rest and a path to travel
through the design
Separating your layout into
sections (the flip side of this is
proximity — reducing space to
place related items closer
together — also an aspect of
good spacing)
David Salgado and Mariana
Perfeito’s editorial design does
both of the above, leaving plenty
of white space between and
around each section of the
layout, while grouping related
items together. The result is a
clean and balanced design.

Isolating focal points

This packaging by Design Womb surrounds the product’s brand name with white space to direct your
focus there and make it highly visible against colorful, patterned backgrounds.
6. Composition: Give Your Design Structure
You can guide viewers through your layout with some of the techniques we’ve already discussed, but
most designs will benefit from an overall structure or organizing principle — this is known as the
composition.

Artists have relied on compositional techniques for centuries, many of which are still in use today. Let’s
look at a few of the most common:

The Rule of Thirds: Following the rule of thirds is one way of creating a dynamic composition where
your focal point isn’t predictably placed at the center.

Instead, this rule divides a layout into a grid (three equally spaced horizontal lines and three vertical lines)
and places the focal point either on one of the lines, or ideally, on one of the four points where the lines
intersect.
 Th
e Rule of Odds: The rule of odds often involves threes as well. The idea behind this one is that an odd
number of objects (perhaps the focal point surrounded by two other items — or four, as below) is always
more interesting and pleasing to the eye than an even number.

Implied Movement: This can be a very effective technique when pointing towards important information
and providing an obvious path through the design. How to create this type of movement? Leading lines.

Leading lines don’t have to be actual lines (though they can be). They can also be objects or shapes,
repeated design elements, an interaction of positive and negative space, or anything else that creates a
sense of directional movement.

Some of the most common varieties are horizontal, vertical, and diagonal leading lines, as well as s-
curves and z-shapes. A z-shaped format capitalizes on left-to-right reading patterns and is a popular
foundation for website layouts.

Below, you can see some implied movement and leading lines in action:
How to Test the Effectiveness of Your Visual Hierarchy
We hope this guide has demonstrated the importance of establishing a clear visual hierarchy in your
design projects.

Many of the techniques we’ve covered here are great tools to add emphasis to select parts of your design.
However, a word of caution: too much emphasis is the easiest way to break down a visual hierarchy.

Visual importance can’t be applied to too many design elements, or else everything becomes equal. When
everything stands out, nothing stands out. The basic foundation of a hierarchy is that some elements need
to be emphasized, while others recede.

But what if you’re just not sure if your visual hierarchy is working the way you intend it to? There’s an
easy way to test its effectiveness that you can do at any time, no special tools required. It’s the trusty
“squint test”:

Just sit back from your computer screen a bit and squint at your design so all the details blur and you just
see general shapes. What still stands out? Is it what you would want viewers to look at first? If so, then
you’re in good shape — if not, then it may be time to go back and try something else.

Now you have some tools and techniques to start creating effective visual hierarchies. Go put them to
good use and, as always, happy designing!

Canva2020 https://www.canva.com/learn/visual-hierarchy/