Visual design quiz

The visual design entries in the glossary, in brief. Open any one for the interactive demo behind it.

Visual hierarchy

The order your eye follows across a layout, shaped by size, weight, colour and space. It tells you what grabs attention first - and what slips by.

Whitespace

Whitespace (or negative space) is the empty area between and around elements. It is not wasted room: it groups what belongs together, guides the eye, and makes a layout legible.

Colour schemes

A colour scheme is a set of hues chosen by their positions on the colour wheel so they work together. The common recipes - complementary (opposite), analogous (neighbouring), triadic (evenly spaced) - are just rules for picking angles, giving you palettes that feel harmonious instead of arbitrary, from one base colour.

Colour contrast

Colour contrast is the measurable difference in relative luminance between text and its background, expressed as a ratio from 1:1 to 21:1. It determines whether words are comfortable to read or quietly exclude people.

Alignment

Alignment is lining elements up to shared edges and a common grid, so the eye reads invisible straight lines connecting them. It is the cheapest way to make a layout feel considered - and its absence is the first thing that reads as amateur.

Typography hierarchy

Typographic hierarchy is using size, weight, spacing and colour to rank text, so the eye knows what to read first, what's a heading, what's an aside. It is visual hierarchy done with type alone - the structure you feel before you read a word.

Figure-ground

Figure-ground is how our eyes distinguish what’s in front (the figure) from what’s behind (the ground). Interfaces use it constantly - a dialog must appear on top of the page, not blend into it.