The Easy Peasy Way to Understand Visual Hierarchy to Communicate a Clear Message

Visual Hierarchy using images and text

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

Visual Hierarchy exercise 1


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.

Visual Hierarchy using colour

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.

Visual Hierarchy using images and text


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.

Visual hierarchy in emails




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.


About The Author

Caroline Jones

I'm Caroline and I look to help small business owners create their own graphics by writing tutorials and tips on graphics editing software. I live in Wales , love Tartan and Coffee Ice Cream. You can read more about me here