UI/UX Design
User research, wireframing, Figma, prototyping, and design systems
- 8 lessons
- 4 hours
- Beginner
- Graded labs: 1
What you will learn
- Critique a screen using hierarchy, contrast, alignment and proximity, and propose specific fixes.
- Build a type scale and a colour palette whose text meets WCAG AA contrast (4.5:1).
- Design flows in Figma with frames, auto layout and reusable components.
- Plan and run user interviews, then synthesize findings into insights.
- Create low-fidelity wireframes and an information architecture validated with a card sort.
- Build a clickable prototype and test it with five users to find the top usability problems.
- Document tokens and components in a design system developers can implement.
- Audit a design for accessibility: keyboard, screen reader and colour contrast.
How you are assessed
Design quality can be measured: quizzes check your reasoning, in-lesson exercises render real HTML and CSS you can inspect, and the contrast lab proves you can calculate accessibility instead of eyeballing it.
- Complete every Foundations lesson
- Average on first-try quizzes: at least 70%
- Graded lab exercises to pass: 1
- Challenges to solve: 1
- Lessons
Learn the craft
Complete design principles, typography and colour, Figma and user research.
- Quizzes
Defend design decisions
Average at least 70% on first-try quizzes about hierarchy, research methods and usability.
- Lab exercises
Calculate accessibility
Pass the WCAG contrast-ratio lab: compute the ratio and the AA verdict for colour pairs.
- Challenges
Spot the accessibility bug
Solve one web or accessibility-flavoured challenge.
Curriculum
Design foundations
Principles, typography, colour, Figma and user research.
- 1.Design Principles — Why Some Things Just Work
Visual hierarchy, alignment, contrast, repetition, and proximity (CARP). Gestalt principles and how the human eye processes visual information. These fundamentals underpin every good design decision.
35 min 2 exercises 1 quiz - 2.Typography & Color — The Feel of Design
Font pairing, type scale, line height, color theory, color palettes, accessibility contrast ratios (WCAG AA/AAA). Color and type set the tone for every interface.
35 min 2 exercises 1 quiz - 3.Figma — The Designer's Workshop
The industry-standard design tool. Components, variants, auto-layout, prototyping, design tokens, and collaboration. Figma is used by design teams at Google, Airbnb, Stripe, and thousands of companies.
30 min 1 quiz - 4.User Research — Design for Real People
User interviews, surveys, usability testing, competitive analysis, and creating personas. Design without research is just guessing. Research turns assumptions into evidence.
30 min 1 quiz
From idea to prototype
Wireframes, flows and testable prototypes.
- 5.Wireframing & IA — The Blueprint
Information architecture, user flows, low-fidelity wireframes, and sitemaps. Plan before you design. Wireframes answer 'what goes where' before asking 'what does it look like.'
25 min 1 quiz - 6.Prototyping — Test Before You Build
High-fidelity interactive prototypes in Figma, micro-interactions, transitions, and user testing your prototypes. Prototypes let you validate ideas before writing a single line of code.
25 min 1 quiz
Scale and inclusion
Design systems and accessibility.
- 7.Design Systems — Consistency at Scale
Component libraries, design tokens, documentation, and maintaining consistency across products. Design systems are how companies like Airbnb and IBM design at scale.
30 min 1 exercise 1 quiz - 8.Accessibility — Design for Everyone
WCAG 2.1 guidelines, color contrast, screen readers, keyboard navigation, and inclusive design patterns. Accessible design is both a legal requirement and the right thing to do.
30 min 2 exercises 1 quiz Graded labs: 1
Run a real example
This is the kind of code you will write. Run it, then change it and run it again.
JavaScript (Node.js)Light grey text looks elegant and fails millions of readers. Swap in your brand colours and check them before they ship.
Recommended challenges
Put the skills to work against a puzzle with a flag or a test suite.
Badges
Earned automatically from your progress on this device.
First Frame
LockedFinish your first lesson.
0 / 1
Design Foundations
LockedComplete every foundations lesson.
0 / 4
Contrast Checker
LockedPass a graded lab exercise.
0 / 1
User Advocate
LockedScore 80% or more on the first try in 4 lesson quizzes.
0 / 4
Product Designer
LockedComplete every lesson in the track.
0 / 8
Certificate of completion
Lessons completed: 0 / 8
Complete every lesson to unlock your certificate.