Courses / Visual hierarchy for developers
Visual hierarchy for developers
Turn a busy page into a clear one. Move content, edit typography and spacing, balance actions, and make your decisions work on mobile.
Learn visual hierarchy through practical design decisions. Start here before exploring colour and motion.
Interactive labs require a laptop or desktop. You can browse the outline on any device.
The entire course is free: every lab and the completion certificate. Start without signing in. A free account saves your progress across devices and lets you issue your certificate. No purchase required.
thing feel important.
Same words. Same typeface.
A much clearer place to start.
The curriculum
6 practical labs.
Decisions you can use.
Every lesson starts with a short principle and a page that needs work. You make the changes. The feedback tells you which relationships work and what to try next.
By the end, you can
- Build a useful reading order
- Establish a readable type scale
- Group information with space
- Create one clear primary action
- Adapt hierarchy to a narrow screen
Basic HTML and CSS familiarity helps. No GSAP experience or design software needed. Use a laptop or desktop with a browser window at least 1024px wide. Work at your own pace; there is no timer.
- 01Order before decoration5 min
A page is a sequence of decisions. Before choosing a font size, decide what a visitor needs to understand, and in what order.
- 02Give type a job5 min
When every line has the same size and weight, the reader has to work out the hierarchy from the words alone. Type can make that structure visible.
- 03Make space mean something5 min
Space tells us which things belong together. Equal gaps everywhere can make a date, a location and a new section all feel equally unrelated.
- 04Choose what matters5 min
Hierarchy asks you to make a choice. If every action gets the strongest treatment, the visitor still has to decide where you want them to go.
- 05Keep the hierarchy on mobile5 min
A desktop hierarchy is a starting point. On a narrow screen, a large heading and two side-by-side actions can push the explanation out of view.
- 06A fresh brief10 min
Now transfer the principles to a different page. You have all the controls, but no finished design to copy.
Proper interaction.
Move content, change type sizes and weights, edit spacing and resize the preview. Compare your changes and inspect the CSS. Every drag action has keyboard controls.
A completion record.
Pass the practical checks in each lab to create an optional certificate with your name and a verification link. This records course completion; it is not an accredited qualification.
For you, or your team.
This course is free for individuals and teams. Start in your browser, then use a free account for saved progress and a certificate in your name.
