Try this visual hierarchy exercise
Picture this! (See what I did there 🙂 ) You’ve landed on a web page and your eyes dart hither and thither.
You’re not sure where you should start the story as there are images all over the place.
Umm… so in the end you leave the site. Such a shame.
What is Visual Hierarchy
Definition: It’s the order in which the human eye perceives what it sees.
Alternatively: It’s the organization and prioritization of content as a means to communicate a message.
Visual Hierarchy is one of the most important principles of good graphic design whether you’re talking about Blog images, printed flyers, Web design…
Question: Rank these stars in order of importance
Answer: I’m guessing that even though you didn’t know anything about these stars you were able to rank them in order of importance. Grey, beige, orange and black. Right?
Based on the largest to the smallest. And this is visual hierarchy.
Let’s face it. Certain aspects of your design/visual/flyer/website are more important than others – example special offers, calls to actions, dates, forms – and you want those to get more attention than the less important parts.
And if your flyer has 6 important points all in the same font size, what should the reader focus on?
You have to guide the reader and one of the ways to do this is to make important links more prominent.
Size is one way to do this, but so is using colour.
An example of using colour to prioritise a Call to Action
Here’s a good example of a site that’s using colour to prioritise a call to action.
In this example it’s quite clear where should I click.
Design of the button (and how it contrasts with the page) is what helps attract people’s attention. It stands out from the rest of the page, and acts as a visual cue to answer the question Where should I click?
So start with the objective of the visual
Rank the elements in the visual based on it’s objective.
* a flyer could be to get people to attend a concert
* a Social Media graphic could be to get more shares.
* a website could be to sell more product.
Let’s look at another example.
This is a screenshot of a page on Williams Sonoma website. On this page they want to sell food ingredients.
The biggest image is the colourful bottles of sauces 1 ( = make the offering enticing).
This is followed by a headline 2 ( = saying what this is) followed by a Call to Action button 3 (here’s where you get it). 4 – a line of text above the headline and 5 is the Special offers banner.
Yet another example
In a previous post – Using fonts to spotlight your irresistible messages – we talk about using fonts in images to create this visual hierarchy and here’s a company using this in their email campaign.
In fact they’re placing equal importance on a particular item of clothing and the fact that it’s on special offer.
Your own exercise
Whilst you’re surfing the web keep your eyes out for this visual hierarchy.
And then revisit your own posts. Are there any key points that your readers are likely seeking out which aren’t high enough up in the hierarchy?
If so change it.