How to use Visual Hierarchy

Introduction

One of the most important tasks of a designer is to create a hierarchy. Visual hierarchy helps describe importance and the sequence of elements. Good design can attract the viewer to the “whole” and lead them through it's “parts” by creating different levels of priority.

What is hierarchy

Visual hierarchy refers to the arrangement or presentation of elements in a way that shows importance. In other words, it influences the order in which the human eye observes content. Hierarchy is the way that information is structured and prioritized in a design -  some elements need to be emphasized, while others recede.

In this example, you can see two blocks of text. The first is the text by itself, with no formatting except the standard use of punctuation. The second has been designed with a visual hierarchy.

The example showing the proper use of hierarchy is easier to understand at a glance. The viewer is able to know what information is more important than other information; therefore, they know what to read first.

How to use hierarchy

Hierarchy in design is not limited to text. Look at any well-designed website and you will see that visual hierarchy is used in structuring the page—from the size of the navigation banner to the hero image, buttons, blurbs and icons. All of these, their size, their color, their placement—affect the visual hierarchy.

A good rule of thumb is that your most important elements should be the most prominent. In general, good design leads the eye in a specific order through a page. You can use contrast, balance, emphasis, and/or scale to guide the eye. These principles act as a foundation that can help you draw attention to or away from page content. 

Texture and style

Texture is the feel, appearance, or consistency of a surface. Adding texture or design style to your work can influence hierarchy by drawing in the viewer’s attention. Textures create depth and interesting shapes, but can be overused. An over-textured design can be distracting and make it difficult to understand.

Size and scale

Scale is the sizing of elements. It can be used with other design principles, like emphasis, to draw the viewer into a focal point. 

Balance

Objects in design can carry weight, just like in the physical world. Balance refers to the distribution of that weight. The alignment of an object in relation to other objects can change its weight. If the object is by itself or aligned to the left, that element will draw a user’s eye in; at first glance, the other objects will blend together. The visual weight of a design needs to have balance. Balance can be implied by size, shape, or even contrast.

Color and contrast

The difference between two or more objects in a design is referred to as contrast. The difference in objects could be light and dark, thin and thick, small and large, bright and dull, colorful and desatured; the list is endless. With the use of bold or contrasting colors, you can create a design where your elements not only stand out, but are accessible as well.

Negative space

Negative space, also known as white space, is a great way to establish an effective hierarchy. If elements are given enough breathing room, it allows the user to read and digest them more easily. Large areas of space can also make objects appear more dramatic and feel more important.

While you may think adding more elements to your page will make it look better, the opposite is true; your page becomes cluttered and full of information that’s hard to separate by importance. If you want to draw attention to a specific piece of content, try to give it some breathing room. 

Fonts

Taking advantage of font weights, sizes, and styles is what can move information higher or lower on the visual hierarchy scale. These can be used individually or together to make words more apparent and powerful than others.

A single typeface can be used throughout a design, but a variety of fonts within that typeface still have the power to arrange the textual elements by their importance. Think about what a newspaper or magazine layout looks like: heading, subheading, copy - each of these are typically styled using various fonts within the same typeface. 

Reading patterns

Across all cultures, humans read from top to bottom. This is the most predictable way in which our eyes read, but what if we only have time to scan? There are two patterns that the human eye may follow when gathering information quickly - the F-pattern and the Z-pattern.

The F-pattern typically applies to how viewers read text-heavy pages, like the one you’re on now. A reader will scan the page in the shape of an “F” (or “E”): first, across the top of the page to read the headlines, then down the left side of the page to look for numbers or bullet points, and finally across the page to look for underlined or bolded terms.

Designs with more imagery and fewer blocks of text are typically put together in a Z-pattern. In this pattern, a reader will scan across the top of the page from left to right. This is where the most important information is found on websites. The reader’s eyes then move down and diagonally to the opposite corner and scan the lower part of the page in the same way they scanned the top, thus forming the shape of a “Z”.

Testing the hierarchy

There’s an easy way to test the effectiveness of your hierarchy that you can do at any time without using any special tools. This is the “squint test”:

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, you may need to rethink the structure or content of your page.

Many of the techniques we’ve covered here are great tools to add emphasis to select parts of your design. Just remember: 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. Remember to emphasize your most important elements and recede the rest.