Visual hierarchy is a description of the organisation of graphics and text on a page that assist the audience in digesting content. Understanding what this is, and why it’s necessary, is key to creating designs that communicate effectively. This is most especially true today on the web, with the literal seconds we have to capture attention, communicating effectively is more important than ever.
How do we process information?
Human brains are funny things, we tend to create links between everything we see. Size, shape, and colour, similarities and differences, contrast and harmony, our brains process these things automatically, and can do so without us even knowing. It’s these relationships that allow those versed in the language of visual communication to manipulate the reader’s attention and draw them into the right paths for content. Sounds devious? As always, with great power, comes great responsibility!
Take the following example:
When looking at this image, you don’t see two boxes. You see a big box, and a smaller box. We automatically look for differences in objects, it’s just the way our minds categorise the world around us. While different, the shape, alignment and proximity of the boxes tie them together visually. This creates a relationship between those elements: even though we know they are different, they suddenly become linked. These could be pieces of text, or images, or both, but we will know just from this simple layout that they are related information.
Colour can also be used in a similar way. Consider this example:
Even though the small red box and the circle aren’t related spatially or physically, the use of colour still informs us that they are related. Were colour not in the picture, you would be forgiven for relating that small box with its larger brothers, it’s shape and alignment tell us as much. Colour can also be used to denote importance, even though the grey boxes are larger, the use of a strong red colour sets these elements apart and draws the eye. It gives them personality that the dark grey elements lack, we understand immediately that thematically these things are different.
And these aren’t the only tools in your hierarchical toolbox. Size, colour, style, contrast/harmony, repetition, position, alignment, and whitespace, can all be used to create an effective visual language for your work. Understanding how these basic principles fit together is the essence of good design. For a more thorough grounding in these, check out this great illustrative video:
The Fundamental Elements of Design from Erica Gorochow on Vimeo.
Why is this important?
The speed at which people view and discard web pages (generally speaking, users will spend less than a minute on your site) gives us limited time to capture interest. If we want people to see our content, we have to not only grab their attention, but also hold it. This makes hierarchy even more important in web design than it ever has been; making sure users don’t get distracted and wander off is of paramount necessity.
It’s important to not clog your page with ads, callouts etc. This will distract from the purpose of the page, by disrupting your beautiful hierarchy. “Content is king” should always be your mantra, ensuring that your site has a defined point, and not to deviate too much from it. Everything else, should be of less importance than the content you’re trying to sell. Too much competition, and your audience will leave sooner and may not get your message.
For some great tutorials on creating hierarchy for the web, check out these pages:
https://aestheticio.com/web-design-101-creating-visual-hierarchy-type-whitespace/ (resource not available)
https://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design–webdesign-84
