Studies have shown that information overload is real: more information is not always helpful when making a purchasing decision. The key is to highlight crucial information effectively. Understanding visual hierarchy in web design, marketing, and beyond can help you do this.
Visual hierarchy is about guiding a viewer’s eye in a strategic way, and then allowing users to have a seamless learning experience as they digest your message. Read on to discover how to attract attention using the elements and principles of visual hierarchy, along with real-world examples and practical tips to guide customers.
What is visual hierarchy?
Visual hierarchy is the strategic placement of elements to draw attention to key information in order of importance. By using visual cues like layout, size, color, contrast, typography, and perspective, it’s possible to guide a viewer’s focus to important elements.
Consider the homepage of supplement brand Huel, which prominently features the words “fast” and “nutritious,” along with product photos. Because these elements are large or in bold type, viewers tend to notice them first, helping them quickly understand what Huel is: a convenient food brand in the wellness niche. The “Shop Huel” call-to-action (CTA) button’s black fill stands out and draws the user to browse.
The text highlighting “4M+ satisfied customers” is in smaller type, and the Take the Quiz CTA button is in a lighter weight than the product descriptors, making visitors likely to notice these second.
By using visual hierarchy principles in your marketing materials, you can prioritize the most important elements for your brand and limit visual clutter. This way, you can increase a user’s cognitive ease, encouraging them to spend more time engaging with your brand and making for a more seamless shopping experience.
These principles are especially valuable in today’s overwhelming commercial landscape, where competing marketing messages bombard consumers. By encouraging users to notice elements in a particular order, you can make your website and marketing content more approachable, digestible, and inviting. This has the potential to not only differentiate you from competitors but increase key performance metrics like engagement and conversion.
The main elements of visual hierarchy
Graphic design choices for marketing collateral are all about attracting users’ attention. To that end, there are several visual elements you can manipulate to create hierarchy. Keep in mind, a good visual hierarchy doesn’t require choosing between function (getting the message across) and form (looking pretty)—it can accomplish both.
Here are the main elements of visual hierarchy, plus how to use each one to attract and capture a lead’s attention:
Layout
The most fundamental building block of visual hierarchy is the entire layout—in other words, where you place the visual elements in relation to each other. There are two tried-and-true design patterns that mimic the movement of the human eye: the F pattern and the Z pattern. The shape of each letter reflects the direction of a person’s eye movements.
The F pattern
An F-pattern layout begins with the left side of the page. Information branches off from an invisible left-hand vertical axis so the eye moves horizontally across the page, then back to the left side again.
On this product page by clothing retailer Rhone, the large image serves as the left-hand axis on which the product information hangs on the right. The image is the most important information, so it appears first and most prominently. It also guides the user to the more granular information on the right that will help them make a purchasing decision.
The Z pattern
In a Z-pattern layout, you break information into separate groups and place these groups in a triangular arrangement so that a user’s eye moves diagonally downward across the layout.
In this example of a landing page from shoe brand Rothy’s, three blocks of text are accompanied by images and arranged in a Z formation, likely prioritized in order of importance, and revealed as a user scrolls.
Size and scale
Size refers to the dimensions of an element, while scale refers to the element’s size in relation to others. In terms of visual hierarchy, larger elements are typically of greater importance, and smaller elements are of less importance.
Using size and scale simultaneously can create contrast. When a very small thing is in tension with a very large thing, the larger element draws people in, and the smaller element invites them to stay.
In these two social media posts from clothing retailers Alo Yoga and Bombas, the dramatic differences in font size create a pleasing contrast. The larger type grabs your attention, and the smaller type makes you stick around to see what the poster is all about.
Color and contrast
Color combinations and the contrast they create can inform hierarchy. For example, elements in bright colors will stand apart from those in neutral shades. To really call attention to something, render it in bright yellow, green, or orange and place it against a dark background. Similarly, a heavy, dark typeface against a light background—like on the homepage of cooking oil maker Graza—can say, “Hey, look here!”
You can also use strategic color combinations to play down certain elements and make them feel secondary or tertiary. Using a light gray rather than white against a black background, for example, can make text blend into the background more—a technique perfect for captions or explanations that are less important than your page’s headlines or descriptive text.
Typography
Typography often needs a clear visual hierarchy, because a big wall of text can be intimidating to readers. Here are ways to create visual hierarchy with typography:
-
Break up body text. More than a few sentences can overwhelm a user, so break body text into short paragraphs or modules.
-
Play with weight. A typeface’s weight influences what catches a user’s eye. A fat, juicy, bold typeface commands attention, while a lighter one tends to blend into the background.
-
Adjust the kerning. Increased kerning (the space between individual letters) makes type feel decorative or secondary. It can work well on navigation bar labels, eyebrows (the small word above a headline), and breadcrumbs (navigation links that denote the path from the homepage to the current webpage).
-
Pair fonts. Be strategic when pairing fonts in a module to prioritize certain words over others. On the Huel homepage, you’ll notice the word “complete” appears in a different typeface. As a result, a user’s eye may skip it initially and then return to it.
Perspective
In photography, especially lifestyle photography and product photography, giving visual weight to an image’s focal points can subtly guide viewers toward your message.
These Instagram posts by chili sauce brand Fly by Jing showcase two different strategies. The one on the left puts us at eye level with the brand’s Sichuan Chili Sauce. Although we see a hand, a shirt, and a pair of chopsticks, the image is focused on the product and the way its luscious, oily texture drips from a dumpling. This creates intimacy and makes the viewer feel almost as if they are experiencing the product firsthand.
In the Instagram post on the right, the brand uses a comical effect to make the model’s hands (and the food items they hold) enormous compared to her body. Fly by Jing isn’t just inviting the viewer to see its ketchup product; it’s practically shoving it in the viewer’s face. This perspective makes users stop in their tracks. They can’t help but notice what the brand is drawing their attention to.
Applications of visual hierarchy
The world is full of good design. Once you know why it’s good, even your daily commute or a trip to the grocery store can become inspiration for your business. Here are some places you might be able to spot great visual hierarchy in the wild.
Web design
Web designers experienced at building effective marketing landing pages and web pages already understand how arranging elements on the page according to visual hierarchy principles can facilitate an enjoyable user experience.
On the website of sustainable makeup brand Fluff, an enormous image of the brand’s signature Cloud compact invites consumers to focus on the product. Meanwhile, a small block of text accompanies the photo. The difference in sizes creates contrast and tension between the image and the text, inviting you to look at both.
“Our content really lands with consumers in that it sort of catches their eye,” Fluff’s founder Erika Geraerts says on the Shopify Masters podcast. “The product is so beautiful, and the Cloud compact itself is very eye-catching.”
Calls to action (CTAs)
Strong visual hierarchy is especially important for calls to action. A CTA’s visual design should command even more attention than other elements because its entire purpose is to get a user to convert.
Consider this marketing graphic in promotion of a sale at button-down shirt brand UNTUCKit. The prices are appropriately the largest design elements, while the secondary information includes the value proposition (“wrinkle-free”). The CTA on the button prompts the user to shop. The negative space is helpful here, drawing a viewer’s attention to the button.
Product packaging
If you offer a physical product that’s sold in stores, it may have to compete alongside similar items on a shelf. Your product packaging, therefore, must accomplish a lot. It has to not only capture a consumer’s attention and answer their unspoken questions but also convince them to trade their dollars for what’s inside.
Applying visual hierarchy principles can emphasize certain information on your packaging and downplay others. For example, you may also need to include regulatory details, depending on your industry. While such information is important, it may not constitute your main selling points. One solution? Use a bold, prominent font for your value propositions, and leave the obligatory details in fine print.
Dessert company Elavi’s packaging for its chocolate Protein Brownie illustrates how to effectively direct a consumer’s focus. An image of a gooey brownie draws the viewer in, while a Z-pattern layout provides more details related to the product’s nutritional makeup.
“A huge thing for me to learn was hierarchy,” says Michelle Razavi, co-founder of Elavi, discussing brand packaging on an episode of Shopify Masters. “Prioritizing what’s important between your brand name, the flavor name, and all the different visual elements that you have.”
Michelle says this journey included learning how to use the brand’s packaging to highlight the deeper benefits to the consumer.
“We completely shifted our marketing from ad copy to packaging,” she explains, “to really educate the consumer of how our products can help benefit them versus just listing out attributes.”
Social media
With barely a second to capture a scroller’s attention, social media posts often have to get straight to the point. This places a premium on a brand’s ability to apply visual hierarchy principles effectively.
In these social media posts from e-bike brand Cowboy and meal replacement brand Soylent, both designs employ one large focal point as the primary element, with lines of smaller text as secondary elements. The effect in both instances is a balanced design with a clear message that piques a viewer’s interest—and does so quickly.
Out-of-home marketing
Billboards, posters, and transit advertisements are examples of what marketers call out-of-home marketing. Commuters digest these billboards while whizzing past them in a car, bus, or train, so the pressure is on to ensure consumers see what’s most essential first.
When shoe brand Allbirds selected a background color for one of its New York digital billboard campaigns, it chose a vivid yellow to ensure it drew people’s attention. Using minimal text, the first slide announced the M0.0nshot Zero and touted it as “the world’s first net zero carbon shoe.” In the second slide, the digital billboard displayed an image of the shoe.
By displaying the brightly colored slide just before the image of the product, Allbirds aimed to capture the attention of passersby so that more people would catch a glimpse of its latest shoe.
Tips for crafting a strong visual hierarchy
Now that you know what visual hierarchy is and where you can implement it, here’s how you can make sure your visual hierarchy is working according to your strategy.
Know when to pivot
When Erika at Fluff first launched the brand’s website, she wanted to do something aesthetically different. There was just one problem—users found it difficult to navigate. To negate this issue, Fluff pivoted to a more straightforward template.
“We’ve really relied on Shopify as a foundational platform that is well -known, easy to use, and understandable for the consumer,” she says. “And we haven’t tried to mess with it too much."
Seek feedback constantly
Michelle says another thing she learned after launching Elavi was that her customers’ advice is gold.
“Your consumers are your single best ally,” she says. “I recommend launching to a smaller subgroup so that you feel safe and comfortable to really get their feedback. People actually like to see the iteration process.”
Try testing a new web page, package design, or even just a pop-up experience with a beta group. Ask them what they looked at first, second, and third—or ask them to summarize what they think the business wants them to notice. This will give you real-time information about how your hierarchy is landing.
Analyze user behavior
If you’re unsure whether your hierarchy is working for or against you, consider conducting user testing. You can track users’ eyes as they scan your website’s pages and create a heat map to visualize where their eyes are lingering. You can also generate a heat map from most analytics platforms that track where users are clicking to understand what’s capturing their attention.
Heat maps provide concrete data on whether or not users are digesting the information in the intended order. That will help you determine what, if any, improvements you should make.
Visual hierarchy FAQ
What are the main elements of visual hierarchy?
The best levers to play with when creating visual hierarchy are size, scale, contrast, color, perspective, typography, and layout.
How can a strong visual hierarchy improve your website?
Strong visual hierarchy can improve your website by helping visitors see the most important information first and preventing them from getting overwhelmed. An overwhelmed user might leave the page because they’re not sure where to look first, costing you a sale.
How can I build a stronger visual hierarchy?
To create visual hierarchy, start by chunking text, then highlighting which text is most important by making it bigger, bolder, or brighter. Then play down other elements by making them smaller, lighter, or subtler.
