Topic
Visual design
Before you read a word, your layout has already spoken - what matters, what belongs together, where to look first. Visual design arranges emphasis and space so the eye is led, not lost, and a screen feels considered, not 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 16
-
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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".
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
Try the demo -
visual design
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.
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 rely on it - a dialog must stand out, not fade into the page.
Try the demo
Know these already? Take the visual design quiz, or revise the terms with flashcards.