February 18, 2016

Visual Hierarchy in Graphic Design: Helping Readers Digest Content

Visual Heirarchy: Helping Readers Digest Content

While you may not consciously think much about visual hierarchy in graphic design, it's actually a critically important part of your company's content. Visual hierarchy is all about arranging and prioritizing elements in a way that creates order and communicates a coherent message. Without it, everything is as important as everything else — which, put another way, means that nothing is important.  

Knowledge of this principle will help your audience digest information easily. In this blog post, I'll go over the basics of understanding the structure of a layout.

Comparision of Visual Hierarchy VS No Hierarchy

(Source: Vanseo Design)

In the above-left example, there's no visual hierarchy — each line is the same color, length, size and weight. There are no sidebars or supporting imagery to draw attention to the more important pieces of text. It’s a big block of uninviting text on a page.

Compared to the layout on the left, the design on the right is much more orderly and likely to help readers find what they’re looking for and complete the intended task.

The ‘Eyes' Have It

The first step in creating visual hierarchy is to remember that all written languages are read from top-down (and mostly from left-to-right). Research shows that most readers do a cursory scan of a page to determine whether or not they’re interested in delving deeper into the content. They’re looking for cues that this information is of value to them.

The Nielsen Norman Group’s eye tracking study shows that our eyes follow predictable patterns when confronted with certain layouts. For text-heavy pages like articles and blog posts, a person may read the initial headline/subheader across the top of the page, then scan from the top to bottom on the left side in search of information of interest.

Once that information is found, the eyes move horizontally to read more. This pattern of scanning is called an "F-pattern." The results of an eyetracking study show where the eyes are drawn while quickly digesting content:

Reading Patterns from Eyetracking

(Source: Nielsen Norman Group)

From this pattern, we can determine that the first couple of paragraphs are the most important since many readers are simply skimming for information. You can captivate your readers by making sure you use a succinct headline, a supportive subheader and other formatting methods.

Sizing

Larger elements will captivate a reader’s interest first. This is why headlines are set in the largest font size. Using properly sized typography and imagery will make your article easier to read.

Using Size to Establish Hierarchy

(Source: Canva Design School)

To get started, split your content into three or four levels of priority. Determine the weight and size of your headline (level one), subheads (level two) and body copy (level three). Stay consistent through out your design, making sure that elements are sized to complement rather than compete with each other.

Type Hierarchy Samples

(Source: Canva Design School)

Spacing

Another way to emphasize and organize your content is to use space so that important elements are more visible. Leave plenty of space in the margins of your design, between lines of texts and paragraphs, and so on. Rather than having many pieces of information floating around in space, align them to a grid. Using a consistent system for spacing and alignment will create order in your layout.

White Space in Design for Hierarchy

(Source: Shutterstock

Before you begin thinking about typefaces and colors, consider the layout of the information. What format will your content be presented in? Whether you’re designing a webpage or a direct mail flyer, take a moment to sketch out a “wireframe." Try to anticipate what would help your buyer persona find the information they’re looking for. By doing so, you help ensure that readers understand what's really important.

Sketching the Visual Hierarchy for Content

(Source: Stefan BarrettoNew Call-to-action

Whitney Holden

Whitney has considerable design experience, dating all the way back to the tender age of 13, when she sold her hand-designed coloring books to a local museum’s gift shop. Since then, she’s perfected her craft, doing everything from working at an interactive agency to branding and designing packaging for independent films and anime. She’s a standout at digital work — such as websites and tablet publications — as well as presentation design and branding/identity projects.