Do you know how to ensure visitors to your website view the information that you want them to you on your website? Oftentimes, the first things a visitor will see on a company’s website include that company’s name or logo and the headline for the particular page the visitor is on. These elements will typically be larger, be a different colour, or be isolated from everything else on the webpage, and draws a person’s eye to it first. Without strategically planning the way that you want visitors to consume the information that you’re providing, your webpage can end up appearing unorganized and users won’t know where to look first.
That’s where visual hierarchy comes in.
Visual hierarchy is how you can communicate the information that you want your viewers to receive. It tells people what the most important elements of each page are. It is the way that elements are arranged and presented to showcase the importance of each element. These elements are given more prominence through a set of techniques to make the eye drawn to it first. It’s a really important technique to master, as it helps to communicate a message faster to people visiting your webpage.
This is something that you should take into consideration for each and every page on your website. Going into the creation of a webpage specifically looking at what you want viewers to take away from it can greatly improve the effectiveness of that page. But how can you create the visual hierarchy of a webpage?
When I’m working on a specific webpage, I create a visual hierarchy using these four steps.
1. Determine the Objective of the Page
The first step is the most important, as you need to complete this in order to move on to the second step. You want to determine what the purpose is each page – mainly, what you want a user to do when they are on that particular page. Is it a lead generation page? What about a page that is going to educate visitors on your products and services? Or maybe the objective is to purchase a product from you, or to create brand awareness. All of these objectives will help you in the next step determine what the most important elements on your page are.
2. Determine the 3 Most Important Elements on the Page
Once you know the objective of the page, you can determine what the important elements on the page are. Oftentimes, the first element should tell the visitor immediately why they are on your page and what information they might find there – this is typically your page’s headline.
Other elements that you may want to consider for inclusion in this list include:
- a sub header
- a contact form
- a video
- a “buy now” button or another call to action
3. Draw Attention to These Important Elements
Now that you know what the most important elements on your page should be, you need to draw attention to these elements. In order to do this, you want to create contrast between this element and the other elements on your page. You can use some of the following techniques to do this:
- size – for example, a headline that is twice the size of the regular body copy
- colour – for example, use a colour that contrasts with the the rest of your site
- spacing – for example, double the spacing above and below an element
- texture – for example, choose a different typeface for just the element that you wan to emphasize
There are of course, additional ways that you can draw attention to an element, but I find these ones extremely effective.
4. Test your Hierarchy
Testing is a step that often gets overlooked, but is definitely important to ensure that the visual hierarchy and messaging that you want to get across is what people actually see. A great way to test this is to take a screenshot of your web page, open it in your favourite photo editing software, and applying a blur filter to it. The three elements that you listed in step 2 as the most important elements on your page should still be the ones that draw your eyes to them. (Alternately, if you wear glasses while using your computer, you can always take your glasses off like I do to see what still draws my attention to it first.) If your 3 most important elements aren’t distinguishable during this, you should go back to step 3 to better emphasize these 3 elements.
Creating visual hierarchy can take some time to master. You may find that after time you need to go back and tweak page because they aren’t providing you with the results that you expected. But don’t get discouraged. Mastering this technique can help you in the long run with creating web pages that are effective at communicating with your visitors.
