Topic
Visual design
Before anyone reads a word, your layout has already spoken - what matters, what belongs together, where to look first. Visual design is the work of arranging emphasis and space so the eye is led rather than left to wander, and so a screen feels considered instead of crowded.
This cluster is about that silent layer: the hierarchy that ranks a page for you, the whitespace that does far more than fill the gaps. Get it right and people find what they need without thinking; get it wrong and even good content feels like hard work.
Each entry lets you push the levers yourself - tighten the space, flatten the hierarchy - and watch how quickly the page stops guiding you.
The visual design entries 7
-
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo
Know these already? Take the visual design quiz, or revise the terms with flashcards.