Understanding Visual Hierarchy Helps Your Customers Understand You

When customers visit your website or look at your brochure or ad, what’s the first thing they see? Where do their eyes go first and then where do they go next? Are you intentionally guiding them through a journey to the message you want them to receive or the product you want them to buy? You only have .05 seconds to capture the attention of your consumers, so make it shocking, astonishing, breathtaking. Whatever you make it, get your viewers’ attention.

Now that you have your customers attention — whether they are on your website, reading your brochure or driving past your billboard — it’s your job to lead them where you want them to go. You can do this with visual hierarchy.

It’s all about strategically laying out the different features of your content to help viewers understand how their eyes should proceed and in which order as they view the content. In other words, visual hierarchy is used to create a hierarchy of importance for the components of your design.

Here are five tips you can use to achieve a successful visual hierarchy:

1. Position, position, position

Just like the English language, we read left to right, top to bottom. For example, think about a book spine. The vertical type should always start at the top and read down. All of them do this because it’s the way English people were taught to read.

This element of positioning is crucial when designing your website and advertising materials. The components or graphics in the top left corner are given more importance than what follows. This is why you must always make the top 1/3 of your page the most appealing This is also why brand logos are often seen in the top left corner of a website.

Because the location of graphics are given a level of importance, your brand has to decide what the most valuable piece of information for your audience is.

2. Size matters

Size is important in visual hierarchy. By varying the size of your design elements, such as font and images, you will be able to direct your viewers eyes to what is important to see first.

Bigger design elements will always stand out in the eyes of a viewer. Therefore, you should have a bigger size for what you want your user to see first, followed by smaller sizes for what you want the user to look at next. For example, the Pet Alliance of Greater Orlando billboard our team created used visual hierarchy to call out the word playful. Not only did we use size, but we also used color to draw attention, which you’ll learn about next!

3. Color counts

A picture is worth a thousand words and the imagery you place on your website or ad materials should be too. This graphic visual, whether it be a true photograph or video, should be attention grabbing. One way to do this is with color.

Color is a very useful tool that can be used in the visual hierarchy of your content. For example, having a primarily black and white design is an easy way you can create contrast. If you were to design a black and white poster with a singular element in color, the colorful element will be what the viewers’ eyes go to first.

Also, keep in mind that bright colors stand out to viewers. When advertising to mass consumers, you can use brighter colors against a more muted background to grab attention. Think of an ad. More specifically, think of this ad below we created for TBS Factoring Service’s 50^th anniversary. The first thing we wanted consumers to see was the “F-word,” which is why it’s red, a color that stands out.

Finally, another important feature of color to consider is whether you’re using a warm or cool color palette. Warm colors (ex: yellow, orange) are perceived as closer to the eye on a muted background and cooler colors (ex: blue, purple) are perceived as closer on a bright background.

4. F or Z Pattern

Depending on what type of content you’re creating, consider which pattern the text will be read in. There are primarily two different reading patterns that the user will follow: F-pattern or Z-Pattern.

The Z-pattern is how the viewers’ eyes will likely proceed if they are viewing content that is comprised of less text-heavy information. In this case, the viewers’ eyes will quite literally follow the shape of letter Z. Their eyes will first glance from the top left corner of the content to the right corner of the content in a horizontal line, then proceed in a diagonal fashion from the upper right of the content to the bottom left, and then finally, continue in a horizontal line from the bottom left to the bottom right of the content.

On the other hand, the F-Pattern is how the viewers’ eyes will proceed if they are viewing content that is concentrated with text-heavy information. In this scenario, the viewers’ eyes also follow a F-pattern. They will first scan their eyes in a vertical line from the top of the page to the bottom of the page and then if they see something that looks interesting, they will start reading on the right. A good way to use this pattern to your advantage is by placing calls to action that stand out on the left side of text-heavy information.

5. Pace your space

Negative space is the empty space that surrounds an element in your design. The blank space that’s been created is used to focus in on the message. Negative space can also be used to illustrate a message in a unique, inventive way, like this Barnie’s Coffee and Tea magazine piece.

Here, the negative space is used to draw viewer’s attention to the hot and steamy cup and then catchy headline.

Proximity refers to how close the objects on the page are to each other. If they are close, they are seen as being related. If two objects are apart, the consumer will deem them as separates.

In addition, proximity helps separating items that you don’t necessarily want users to look at first. When you put multiple objects in one page, like icons, copy, photos and calls-to-action, you want your viewers to understand what elements are related and which are not.

There you have it, five tips to create the perfect visual hierarchy in any of your content. Whether you decide to use these tips for your website, billboards, ads, poster, it’s a great idea to have a professional advertising agency assist you. Appleton is an award-winning, full-service Orlando advertising agency that works with local, national and international clients to deliver impressive ad campaigns, branding, print, web, public relations, social media and video services — all in-house. At Appleton, we want to learn about your business, empower your marketing team and be your creative resource. Your advertising goals are worth a conversation: contact us at 407-246-0092 or info@appletoncreative.com.