Discuss a project

Direction · 01

UX/UI & Product Design

Research, audits, Figma, prototypes, design systems, grids, typography, accessibility and motion.

18 materials

UX Fundamentals

✓UX vs UI: what’s the difference and why a product needs bothFundamentals · Beginner · 7 min

UX Research

✓UX research: finding out what users need without a big budgetFundamentals · Beginner · 10 min

UX Audit

✓UX audit: a step-by-step review of a user flowHow-to · Intermediate · 9 min · practice 1–2 h

Layout & Grid

✓Visual hierarchy, grids and spacing: how an interface guides the eyeFundamentals · Beginner · 7 min

Typography & Color

✓Typography and colour in interfaces: readability, contrast, accessibilityFundamentals · Beginner · 6 min

UI Components

✓Anatomy of a UI component: button, input, card and their statesFundamentals · Beginner · 11 min

Figma

✓Figma from scratch: frames, Auto Layout and componentsTutorial · Beginner · 14 min · practice 1.5–3 h

Prototyping

✓Prototyping: from sketch to clickable prototypeHow-to · Beginner · 10 min · practice 30–60 min

Design Systems

✓A design system in practice: tokens, components, rulesTutorial · Intermediate · 10 min · practice 1.5–3 h

UX Patterns

✓Loading, empty, error: the interface states everyone forgetsHow-to · Intermediate · 6 min · practice 30–60 min ✓Painless forms: design decisions that bring in more leadsHow-to · Intermediate · 6 min · practice 30–60 min ✓Designing a dashboard: from user questions to the screenTutorial · Intermediate · 11 min · practice 1.5–3 h

Responsive Design

✓Responsive design: how a website adapts to phonesFundamentals · Beginner · 6 min

Accessibility

✓Interface accessibility: WCAG for designers and product managersFundamentals · Intermediate · 8 min

Motion Design

✓Microinteractions and motion: where they help and where they hurtFundamentals · Beginner · 6 min ✓Easing and duration: why one animation feels premium and another feels cheapDeep dive · Intermediate · 8 min ✓Scroll animations: revealing blocks, parallax and video driven by scrollingDeep dive · Intermediate · 9 min ✓Transitions between screens and states: how motion explains where you've landedDeep dive · Intermediate · 10 min

Learning paths with this direction

UX/UI design: from research to a design system · 9 steps →Motion and animation · 4 steps →Markup and layout: HTML and CSS · 7 steps →

← All directions