Stage 1 · Core · Beginner
Visual design fundamentals
Hierarchy, layout, typography, colour, spacing and accessibility: the craft that makes interfaces readable.
Progress is saved in this browser.
About this stage
Visual design is not decoration. It is how an interface tells people what matters, what belongs together and what to do next. Every principle in this stage exists to reduce the effort a person spends reading a screen.
You will learn the small set of principles behind most good layouts, how to set type and choose colour with reasons, and how to critique an interface without relying on taste.
Before this stage Stage 0: Orientation and design foundations
Learning outcomes
- Create a clear visual hierarchy using size, weight, colour, position and space.
- Apply contrast, alignment, proximity, repetition and grouping deliberately.
- Set up a type scale and a colour palette with semantic roles and accessible contrast.
- Lay out screens on a spacing system and a responsive grid.
- Critique an existing interface using principles rather than personal preference.
Lessons
-
Principles of visual hierarchy
How size, weight, colour, position and space decide what people see first.
-
Contrast, balance, alignment, proximity and repetition
Five principles that turn a pile of elements into an organised screen.
-
Gestalt principles and perception
Why the brain groups things, and how to use that on purpose.
-
Typography, type scales, readability and font pairing
Choosing type, building a scale and setting text people can actually read.
-
Colour theory, palettes, contrast and semantic colour
Building a functional palette with roles, states and accessible contrast.
-
Spacing systems, grids and layout
Using a spacing scale and a column grid to make layouts consistent and fast to build.
-
Composition and responsive layouts
Arranging a screen so it still works from a 320px phone to a wide monitor.
-
Images, icons, illustration and visual consistency
When imagery helps, when icons need labels, and how to keep a visual language consistent.
-
Visual accessibility
Contrast, colour independence, text size, zoom and focus: the visual side of accessible design.
-
How to critique and improve an existing interface
A repeatable method for reviewing a screen and turning observations into improvements.