A test of my ability to understand visual hierarchy
Visual hierarchy is the ability of a designer to draw a viewer’s attention through a design in a meaningful and digestible way. It is the arrangement of elements in a way that suggests importance, hence, it helps to direct the order in which the human eye perceives what it sees.
This concept suggests that there is a proper way to view content visually. Some contents should be viewed first, some second and so on- depending on the order of importance. In essence, hierarchy is used to tell a story and provide context. Many things can be used to establish visual hierarchy. They include Size, Colour, Alignment, Contrast, Space and Gestalt.
In this article, I will use the Novartis website to display my knowledge of visual hierarchy.
Novartis is a global healthcare company based in Switzerland that provides solutions to address the evolving needs of patients worldwide.
A look at their website shows how organised and well placed the elements used to pass information to the viewers are. Below is my dissection of the visual hierarchy of the company’s website using Figma- a design tool.
Size: All writings at the top are the same size and arranged on the same level. This guides the viewer’s eye across all the inscriptions at once, thereby grouping every word on that level under the same umbrella in the mind of the viewer. The tabs at the top include: ‘Our company’, ‘Our Focus’, ‘Our Science’ and ‘Join us’. These tabs share a common thing which is the type of information that they display.
Contrast: Contrast places focus on a particular thing. The little box showing a contrasting colour points the viewer’s eye in that direction and makes the reader to know that the inscription in that box is of high importance or is trying to pass an apt message. The inscription tells us what the company is all about- ‘at Novartis, we are reimagining medicine’.
Parallelism: ‘Elements that are parallel to each other appear more related than elements not parallel to each other’. The middle section in the picture above shows how parallel lines are used to enclose certain words and guide the user’s eyes across a parallel grid. This is another way of grouping elements together.
Space: Space is a tool used to distinguish between elements. Later in this article, you will see that space is the opposite of Proximity. In the image above, space was used to distinguish between the wordings and the picture. I also like to think that space is used to separate ideas; this means that the idea communicated by the wordings at the bottom left in the picture above, is seperate from the idea communicated by the picture on the far right at the bottom.
Another instance of space on Novartis’ website is shown on the last image.
Colour: The colours in the top image are very catchy and automatically draws the viewer’s eye to the image. The eye then moves from the image to the inscription in the little blue box which is on the image but has a contrasting background.
Size and Space: Different rules of visual hierarchy can be used at once to distinguish between elements. The middle section of this picture shows words with a small font below and words with big fonts above. This differentiation has placed the various sentences on different levels in the viewer’s mind.
Area: Area is an aspect of figure and ground in Gestalt principle. ‘The smaller of 2 overlapping objects is seen as figure. The larger is seen as ground’. An object is seen as a figure/ground depending on the area.
We perceive the smaller square to be a shape on top of the other figure, as opposed to a hole in the larger shape. In the picture above, the blue rectangle is within a bigger rectangle. Hence, it is perceived to be a shape on top of the other figure.
Similarity: ‘ Things that are similar are perceived to be more related than things that are dissimilar’. The little pictures at the top are similar in size, hence they can be grouped under the same category. However, there are words under them going in a particular direction, which may make the viewer to assimilate the pictures in a different way.
Focal point: ‘A point of interest, emphasis, or difference will capture and hold the viewer’s attention’. The centre part of this picture is a place of focus. The space in between the top and the bottom part of this picture places the focus on the centre. Also, the centre is designed in a different way from the top and bottom parts making shows that it is emphasizing a point.
Continuity: ‘Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve’. In the picture above, a series of words at the bottom have been arranged downwards on a line. This shows continuity. The viewer will tend to read the words downwards till he/she reaches and ending point.
Common Region: ‘Elements tend to be grouped together if they are located within the same closed region’. The little rectangle that has been highlighted in the picture above shows words that have been enclosed within a boundary. That shows that the words are within a common region. A quick look down the picture to the bottom right shows a similar rectangle. This sends the idea to the viewer that it bears the same kind of idea with the rectangle above.
Proximity: ‘ Things that are close to one another are perceived to be more related than things that are spaced farther apart’. Objects that are close to each other are put under the same group. The social media icons are close to each other, hence we can see that they are grouped together. From this, the viewer knows that all the social media contacts are in one place.
I hope this article has given you a little understanding of how visual hierarchy works. For further reading, you can refer to:
Design Principles: Visual Perception And The Principles Of Gestalt by Steven Bradley
Visual Weight by Joshua Brewer
Creating Exciting And Unusual Visual Hierarchies by Carolyn Knight and Jessica Glaser and
Gestalt Principles: How Are Your Designs Perceived? by Steven Bradley
Cheers!
