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 shows what grabs attention first - and what slips by.

Whitespace

Whitespace (or negative space) is the empty area between and around elements. It’s not wasted space: it groups related items, guides the eye, and makes a layout easy to read.

Colour schemes

A colour scheme is a set of hues chosen by their positions on the colour wheel to work together. Common patterns - complementary (opposite), analogous (neighbouring), triadic (evenly spaced) - are just rules for picking angles, giving you palettes that feel harmonious rather than random, from one base colour.

Typographic scale

A typographic scale is a series of font sizes derived from one base size and a single ratio, with each step multiplying the base by that ratio. Using a consistent ratio instead of random sizes creates a hierarchy that feels harmonious rather than arbitrary.

Grid systems

A grid system is an invisible scaffold of columns and consistent gutters that elements align to. It turns 'where should this go?' Into 'which columns does this span?', so a layout reads as ordered and intentional - shared edges, even rhythm - rather than a scatter of boxes each placed by eye.

Consistency

Consistency means elements look and behave the same across a product - one button style, one set of colours and spacings, predictable patterns. It lets people learn an interface once and apply that knowledge everywhere, instead of re-reading every screen as if it were new.

Iconography

Iconography uses small symbols to represent actions or objects. But few icons have a single, universal meaning - most are guessed at, and guessed differently by different people - so an unlabelled icon is often a quiet little riddle rather than the instant shortcut it promises.

Responsive design

Responsive design is building one layout that adapts to any screen - fluid widths that stretch and shrink, plus breakpoints where the structure itself rearranges (a three-column grid becoming one column, a menu collapsing). One codebase, one URL, reshaping itself to fit the space rather than shipping a separate "mobile site".

F-pattern and Z-pattern

Common scanning heuristics, not universal eye paths. F-shaped scanning often emerges on dense or poorly structured text; the Z-pattern on sparse, poster-like layouts. Task, language, and visual hierarchy can yield very different patterns.

Above the fold

Above the fold is whatever you see before you scroll - borrowed from newspapers folded in half on the stand. It still matters because the first screenful gets the most attention and sets whether people stay. But the fold isn’t a wall: people do scroll, and the line shifts with every screen size.

Mobile-first

Mobile-first means designing for the small screen first, then enhancing for larger ones, rather than starting with desktop and forcing it down. Beginning with tight constraints pushes you to decide what truly matters - and what remains is a core that scales up gracefully, not a desktop layout squeezed until it breaks.

The 60-30-10 rule

The 60-30-10 rule is a simple guide for colour proportion: roughly 60% dominant (often neutral), 30% secondary, and 10% accent. It’s not about the hues you choose but how much of each you use - the balance that makes a palette feel calm rather than flat or overwhelming.

Colour contrast

Colour contrast is the ratio of the relative luminance between text and its background, ranging from 1:1 to 21:1. It determines whether text is readable or quietly excludes people.

Alignment

Alignment means lining elements up to shared edges and a common grid, so the eye perceives invisible straight lines connecting them. It’s the most cost-effective way to make a layout feel intentional - and its absence is often the first thing that looks amateurish, even when no one can explain why.

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 rely on it - a dialog must stand out, not fade into the page.