What Is Visual Hierarchy
When everything is bold, nothing is bold.
As a designer, how do you guide the user through the UI (User Interface) the way you intended them to use it?
Our human brains are rather simple in how we process patterns. Before we see words, we see shapes. We can use this to our advantage by making some shapes look more important than others.
These are the three main ways to create visual hierarchy:
- Contrast
Contrast can be created by changing the colour of an object so that it stands out from the rest of the objects in that group. Font and shape can also be used to create visual contrast.
- Scale
The size of an object forces the user to look at the bigger object first and then at the smaller one
- Proximity
Objects that are grouped together are perceived to be related to each other.
The above image portrays how we subconsciously are drawn to the larger text first. This can be used in interesting and creative ways to draw attention to certain aspects of a design; not only in text.
In the first image, SALAD is the main text you are drawn to, with VEGETAL next, and THE CRONCH following that. However, in the second image, VEGETAL has the same weighting as SALAD due to the white block around it. In the final image, the proximity of WHO IS to SALAD groups them together, so that even though WHO IS technically has a lower importance, that chunk is seen as the most important text.
Whilst these guidelines are the tried and trusted way of creating visual hierarchy, they are just guidelines. Play around, get a feel for how people read and understand objects.
