Visual hierarchy fully explained

Key points

A good layout is arranged such that it creates an intentional viewing sequence wherein elements are noticed one after the other
Visual weight is the force with which an element draws our attention
The relative visual weight of elements dictates hierarchy (the pecking order)
Visual weight can be increased or decreased by manipulating any of the following 5 parameters: scale, white space, content format, color contrast, position
Scale: Bigger elements are noticed first
White space: Elements with more white space surrounding them are noticed first
Format: Videos are noticed first, followed by images, icons, shapes, and text
Color contrast: The higher the luminance difference (higher contrast ratio) between a foreground element and its background the higher its visual weight
Position: Elements positioned high up are noticed first

Visual hierarchy is, in my opinion, the most important layout design strategy. It creates a viewing sequence which makes consuming a composition much much easier. It makes sense of the layout as a whole by producing a story (every story has a beginning, middle, and end) and relating elements via the pecking order it creates.

In a layout, what determines the order in which we notice elements? As in, what dictates which elements we notice first, second third, and so on?

The answer to that is visual weight.

Visual weight

An element's visual weight is the force with which it attracts our attention. The heaviest elements are noticed first while the lightest are seen last.

5 parameters can be manipulated to vary an element's visual weight (and thus its ranking in the visual hierarchy):

Scale
White space
Format
Color contrast
Position

We'll summarize and illustrate all 5 strategies.

1. Scale & size

Larger elements are noticed first. If you want to emphasize a particular element, just make it bigger than the others.

2. White space

Less content density around an element means less cognitive load (less distractions) and more attention given to that element.

3. Content format

Viewers notice videos first, then photos, followed by icons, shapes & lines, and text is seen last.

4. Color contrast

The more pronounced the difference in luminance (quantified by the contrast ratio), the higher the visibility.

5. Position

We’ve been accustomed to consuming layouts (such as books) from top to bottom. As a result, we visually prioritize elements at the top of a layout.

Visual hierarchy fully explained (& illustrated)