UI Design Fundamentals
Hierarchy, spacing, type and colour — the decisions behind an interface that reads well
Created by Lena Fischer
What you will learn
- Build a spacing and type scale, and hold to it
- Establish visual hierarchy with size, weight and contrast rather than decoration
- Choose and apply a colour palette that meets contrast requirements
- Design layouts on a grid that adapts to screen size
- Design the states everyone forgets: empty, loading, error, too much data
- Critique your own work against something other than taste
Course content
13 sections · 102 lectures · 15h total length
- What this course covers, and what it does notPreview03:00
- How to get the most out of itPreview04:00
- Setting up and downloading the exercise files06:00
- Visual hierarchyPreview06:00
- Visual hierarchy in detail10:00
- A closer look at visual hierarchy15:00
- Worked example: visual hierarchy07:00
- Where visual hierarchy goes wrong11:00
- Exercise: visual hierarchy03:00
- Visual hierarchy in practice08:00
- Two approaches to visual hierarchy12:00
- Visual hierarchy — questions from previous students04:00
Topics covered
Requirements
- No design background needed
- Access to Figma — the free tier is enough
Description
Interfaces that feel professional are rarely more creative than the ones that do not — they are more consistent. This course teaches the underlying systems: a spacing scale, a type scale, a restrained palette, and a hierarchy that survives being squinted at.
Your instructor
Product designer and design-systems lead
Lena has built three design systems and thrown away two of them. She teaches the parts that survived: naming, tokens, and the unglamorous governance that keeps a system from rotting.
Learner reviews
- 5 star82%
- 4 star16%
- 3 star2%
- 2 star1%
- 1 star1%
- PFPetra F.14 November 2025
The pacing is right. Nothing is padded out, and the exercises are short enough that I actually did them.
- KEKemi E.29 November 2025
The instructor answers questions properly rather than pointing you at the documentation.
- EZElena Z.1 October 2025
Very practical. I applied something from module four at work the same week.
- AMAisha M.22 January 2026
Exactly what I needed. It assumes you are an adult and does not over-explain.
- TFTariq F.24 November 2025
Good balance between theory and doing. I would have liked a couple more exercises, but that is a small complaint.
- TETariq E.25 March 2026
Worth it for the section on common mistakes alone — I recognised two things I have been doing wrong for years.
- GSGrace S.26 February 2026
Very practical. I applied something from module four at work the same week.
- KMKemi M.10 October 2025
Genuinely well structured. I have started three courses on this topic and this is the first one I finished.
- ABAisha B.7 May 2026
Good balance between theory and doing. I would have liked a couple more exercises, but that is a small complaint.
Showing 9 of 5,140 reviews.
Learners also looked at
More from Design and beyond.
Modern JavaScript From the Ground Up
Amara Osei
