“If everything is bold, nothing is bold” – Art Webb

Above is a quote that has always resonated with me and a principle that I think about constantly in design. It is a message that quite succinctly conveys the concept of visual hierarchy.

What is visual hierarchy?

Visual hierarchy refers to the arrangement and presentation of elements by level of importance. From a creative standpoint, visual hierarchy is one of the core elements in design, as it is used to influence the order in which we perceive what we see.

According to a study by Princeton Neuroscience Institute (PNI), the human brain looks to shift focus 4 times per second. “You won’t necessarily shift your focus to a new subject, but your brain has a chance to re-examine your priorities and decide if it wants to.”  [https://www.eurekalert.org/pub_releases/2018-08/pu-tso081718.php]

With only a fraction of a second to engage an audience, and in a saturated landscape where so many brands are shouting across different mediums, brand communications have to be really tight – visual hierarchy is queen.

Using a variety of tools and techniques, we apply hierarchy in design to:

  • Add structure
  • Create visual organisation
  • Create direction
  • Add emphasis
  • Help a consumer navigate and digest information easily

The first issue of The New York Times in 1851, in contrast to an issue from 2020 with increased visual hierarchy.

Visual hierarchy tools

Art Webb’s quote reduces visual hierarchy to boldness, but there are loads of tools and techniques (some more obvious than others) that, when used effectively, can make a complex message simple.

Colour & contrast

Colour choices and combinations are an important part of creating visual hierarchy. We as humans are drawn to contrast (a big red button on a black box), so using colour can be a really effective tool to highlight important information.

(Left) For the Stones Gin neck collar we used a contrasting colour to the bottle for standout that was also reflective of the ginger. (Right) We developed a colourful pattern to feature on the Limited Edition Kumala Reserve bottle. The colour palettes were used to reflect the varietal, but also stand out against the mostly monotone designs on shelf.

Size & scale

Size and scale can be used to add emphasis and a focal point. Larger elements will typically be more prominent in a design, especially when compared to smaller elements nearby. Size does matter.

(Left) Our Babylonstoren advert for the RHS magazine uses the principles of size and scale to highlight and align the brand/product with “Summer”. (Right) “No.1” is the largest element on the Hardys Christmas neck tag and therefore the most prominent.

Space & proximity

Another way of adding emphasis is to give content room to breathe. Substantial negative space around an element makes it more noticeable and more readable. This empty space, known as ‘white space’ (even though it isn’t necessarily white) is nothing to be afraid of and when used properly is an incredibly effective tool.

(Left) We incorporated negative space into the designs of the Made For Drink packaging to create a premium and stylised packaging. (Right) The Hardys creative leverages white space to reinforce their campaign theme “Certainty”.

Balance & alignment

Elements that are aligned similarly will have similar priority (all other things being equal). We always design within a grid structure to create a visual balance, but by occasionally breaking the grid, you can add emphasis to certain elements.

To increase the standout of “New” we offset it from the grid and misaligned it with other elements.

Typography

Typography can be used in a number of ways to create visual hierarchy. Using different fonts, sizes, and weights (e.g. bold!) can make more important items stand out, and having variation helps to create a composition that is much easier to absorb.

To make a busy Gloucestershire Cricket Club bus back/6 sheet more digestible, we leveraged typography to add visual hierarchy.

And one last thing

Certain words have a subconscious effect that warrant them being pushed up our visual hierarchy scale. FREE, NEW and WIN are the three keywords that, if relevant, we always look to highlight in marketing communications, as they succinctly emphasise value and benefit. By highlighting benefits, we play to our audiences extrinsic values, and increase the likelihood that they’re going to stop and pay attention. 

Free, New and Win used in shopper marketing examples for Echo Falls and Mud House wines.

Choosing hierarchy: Not all messages are created equal

When deciding on visual hierarchy, we have to determine which information is the most important for the audience to read first. This decision is a compromise between what is most important to the brand, and what will create the most impact with the audience. 

  • What will capture my audience’s attention? 
  • What information do they then need? 
  • What action would I like them to take?
  • If my audience were to take 1 thing away from a brand communication, what should it be?

As a creative team, we might interpret bits of information as less important, but in the process of working with our clients, discover hidden importance, completely changing the hierarchy established in the beginning. In the same way, we often identify pieces of information that our clients aren’t shouting about that their audiences will engage with, and work together to shift the hierarchy in favour of this.

 

At Grand Central we can help you be selective and find your differentiating factor, and when we do, yes, we’ll make it bold.

For help with planning, designing and building your campaign requirements please contact us at

hello@grandc.co.uk / 020 8546 0150