If you completed the Grid and arrangement module, you already know that you can give more prominence to some elements in publication or in a visualisation, simply by putting it in the top left corner of the design. This is an example of creating visual hierarchy: telling the reader what to look at first, what to look at after that, and what to look at in the end.
But there are many other ways of creating visual hierarchy. This module shows what design variables you can use to create visual hierarchy and how you can create meaningful visual hierarchy in data visualisation design.
The simplest and easiest way to create visual hierarchy is choosing where to place elements in a design. Elements positioned at the top of a publication will be looked at before elements further down the page, and elements on the left of a line or row will be looked at before elements with the same visual weight positioned on the right (for readers with left to right languages, this is reversed for right to left languages).
Illustration of the reading order, Maplestrip, CC0
The hierarchy for the position of elements on a design is
top left > top right > bottom left > bottom right
The importance of the elements positioned at these locations should reflect this hierarchy/reading sequence.
But there is more than just positioning elements in the xy space. Although paper and screen publications are by nature two dimensional displays, techniques exist to simulate depth and a third dimension in the z direction.
The first technique is layering. Many visual design software (like GIMP, Adobe Photoshop and Illustrator) use the metaphor of layers for the management of different elements of a design. The main idea is that elements live in layers, and when a layer is placed on top of another layer in the interface, the elements of that layer will be drawn on top of the elements in the underlying layers.
Layers in an Adobe Illustrator document. Source: Maarten Lambrechts, CC BY 4.0
The layers metaphor is also used in geographical information systems, software used to produce maps. Maps have base map layers (like satellite imagery), thematic layers (like roads and administrative boundaries) and text (like labels for city and street names). These layers should be nicely stacked, so that more important layers are covering the underlying less important layers.
Illustration of the the layers of a map. Source: Raphael H. M. Periera
Not all data visualisation tools give you control over how the elements of the chart anatomy and data points are stacked on top of each other. But some basic rules are
Notice how the text of the title and subtitle are positioned on top of the lines breaking out or their frames in this Financial Times chart. Source: twitter.com/jburnmurdoch/status/1478340575053197313
Source: The Guardian
