Visual hierarchy in design

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.