Academy Xi Blog

Visual hierarchy in design

By Academy Xi

What is visual hierarchy

When you set out to create a design for any medium, it’s likely that you’ll want it to effectively and clearly communicate whatever message you’re putting out into the world. Read on to discover the important role of hierarchy principles of design.

What is visual hierarchy?

The order in which various elements of an overall design are engaged with by a viewer is what is referred to as the visual hierarchy. Generally a designer will want to guide the attention of whoever is engaging with their work to the most important details first, with the rest of the elements in a logical sequence flowing on from that.

By considering a visual hierarchy, a designer can create a work that intentionally steers the viewer’s focus and takes them on a more cohesive journey, hopefully with an effective outcome.

How humans process visual information

Generally speaking, when humans view images we are most likely to process the information in a specific sequence. The overall composition tends to be the first intake, and then we move to the details. We are naturally drawn to contrast, patterns and areas of focus such as the centre of the design or image, or sections of the work that are brightly coloured.

When it comes to websites, people scan the screen, often quickly, trying to take in what they came looking for in the most efficient way possible (ie. without having to do much work!).

In 2006, World Leaders in Research-Based User Experience, Nielsen Norman Group (NNG), discovered with eye tracking research that people scan mobile screens and website pages in a range of patterns. Four main patterns were revealed, called: F-pattern, spotted pattern, layer-cake pattern and commitment pattern.

visual hierarchy, how humans process visual information

  • F Pattern

While the F-pattern is commonly cited in articles on this topic, NNG found it to be the least effective for quality understanding. When there aren’t any sub headings or bullet points to attract a reader’s attention, people will tend to gravitate toward the words at the start of lines of text and nearer the top of the page, which generally forms a F pattern. 

  • Spotted pattern

With this scanning approach, people generally jump over large sections of text and it appears they are searching for something specific such as a link, or maybe a certain word or an address.

  • Layer-cake pattern

Heat maps of this viewing behaviour show scanning of main headings and subheadings, but skipping over the body text under them. Like a cake with layers of icing and cake, the map shows horizontal lines with gaps between each ‘layer’. 

  • Commitment pattern

At the other end of the spectrum is the commitment pattern, which reflects less scanning and more actual reading of the content. This approach is more common when the reader is keen to engage and very interested in the topic area. This, unsurprisingly, leads to a higher level of understanding of the content.

With all written content, particularly on websites, it is important to note that it’s best for it to be broken into smaller chunks of text with clear subheadings, or into bulleted lists.

How to use visual hierarchy in your designs

There are a range of approaches to creating visual hierarchy, including the following commonly used principles:

  • Colour and contrast draw attention

By creating or selecting elements that are significantly different from each other, or being strategic with your colour choices, you can draw the viewer’s eye to particular aspects of your design.

  • Use size to draw visibility

Generally speaking, the larger the element, the more important it is deemed to be. Consider the sizing of each design element within your work against its measure of consequence to your overall message.

  • Typographic hierarchy

It mainly comes down to size with typography hierarchy. Your best bet is to define three levels of typography for main headers, and two levels down for subheaders, with the largest font commanding the most attention. Using these headers with graded sizing will give your design structure and guide the focus to the most important information, which is usually carried within the largest font of the main text.

  • Perspective creates an illusion

An illusion of depth and distance (three-dimensional objects) can be created using perspective and colour in your designs, often on a two-dimensional surface. This principle can create hierarchy using linear perspective, where elements are positioned to appear as though they are receding into the distance, or size and scale, amongst other approaches.

  • Repetition

Repeating an element within a design can foster a sense of unity and continuity. Those elements that are repeated can also be seen as being more important in comparison to the rest of the design.

  • Proximity suggests relationships

When you group elements in closer range to each other within a design, it’s suggested that there’s a likeness or relationship shared between them. 

  • Rule of odds

Using an odd number of elements within a design can be more visually appealing than an even number, as odd numbers can create a sense of tension with their asymmetry. This principle could be applied if you want to draw focus to one element, by arranging an odd numbered group of elements and the one you want attention to be placed in the centre.

  • Alignment directs eyes

As mentioned previously with how humans process visual information, we tend to scan the overall work to arrive at the quickest assessment or understanding. The top of the page is a hot spot for where people’s eyes will gravitate to for details.

  • Lines suggest movement

There are a number of ways lines can be used to create a more dynamic design and suggest movement, for instance, a curved line can give a sense of flow, or lines that overlap or intersect could point to elements interacting. Using directional lines can lead the viewer’s attention in a set direction.

  • Negative space emphasises

By providing clarity around elements in the form of negative space, you can draw attention to specific aspects of your design.

How to start your career in graphic design

Want to learn more about the hierarchy principles of design? At Academy Xi, we offer flexible study options in Graphic Design that will suit your lifestyle and training needs, providing you with the perfect foundation for your future as a Graphic Designer. 

Whether you’re looking to upskill or entirely transform your career path, we have industry-approved training to provide you with the practical skills and experience needed.

Are you after a career change? Take a look at our Transform courses:

Are you upskilling? Our Elevate courses are for you:

If you have any questions, our experienced team is here to discuss your training options. Speak to a course advisor and take the first steps in your Graphic Design journey.