The ultimate guide to visual hierarchy

To ensure your designs are communicating as effectively as possible, it helps to approach design strategically rather than just going with a gut feel of what looks good.

Think back to those forgotten art-class concepts like color theory and composition. These foundations are helpful in building, what we’ll call, your design toolbox.

Visual hierarchy is all about working with the resources in your design toolbox — color, contrast, typography, spacing, and other basic principles — to organize and prioritize your content. The good news is it’s much easier than it sounds, so to discover design zen, follow our guide to 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.

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

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.

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

Sticking to one temperature can also help a design look more visually cohesive. For instance, Keith Johnson’sflyer and website banner feature similar color temperatures to unify the design rather than create emphasis.

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.

The 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:

For more tips on creating dynamic compositions that give your designs an excellent flow, browse through Design Principles: Master Compositional Flow and Rhythm.

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!