Template
Research plan
Agree what you need to learn, from whom and how, before you start talking to anyone.
Resources
Templates, references and tools.
Copyable templates for every stage of a project, videos that accompany the lessons, plus a curated list of trustworthy external sources. External links are third-party content; costs are shown only where they were checked.
Video library
One companion video per written lesson, chosen from established design channels. Each one opens on the lesson it belongs to, so the video and the written work sit together.
- What UI design is and what UX design is
- UI, UX, product, interaction and visual design
- What product designers actually do
- The design process from problem to solution
- Design thinking and its limitations
- Common myths about becoming a designer
- Designers, product managers, developers and researchers
- Set up a learning plan and organise your design files
- Principles of visual hierarchy
- Contrast, balance, alignment, proximity and repetition
- Gestalt principles and perception
- Typography, type scales, readability and font pairing
- Colour theory, palettes, contrast and semantic colour
- Spacing systems, grids and layout
- Composition and responsive layouts
- Images, icons, illustration and visual consistency
- Visual accessibility
- How to critique and improve an existing interface
Templates
Each template opens as a print-friendly page. Copy it as Markdown, download a .md file, or print it.
Template
Interview guide
A semi-structured script with neutral, open questions and prompts for following up.
Template
Competitor analysis matrix
Compare how others solve the same problem, so you can learn patterns and spot gaps.
Template
Persona (evidence-based)
A one-page summary of a user group, built from research, with the evidence cited.
Template
User journey map
Map one user's experience across stages, with actions, thoughts, feelings, pain points and opportunities.
Template
Problem and opportunity statements
Turn research into an agreed problem, a "How might we" question and measures of success.
Template
User flow checklist
Check that a flow covers entry points, decisions, errors and exits, not only the happy path.
Template
Wireframe review checklist
Review structure, content and states before moving to visual design.
Template
Usability test plan
Goals, participants, scenarios, tasks and success criteria for a moderated test.
Template
Usability findings report
Report issues with evidence, severity and recommendations people can act on.
Template
Accessibility audit checklist
A manual review based on common WCAG 2.2 requirements, to use alongside automated tools.
Template
Design critique worksheet
Structure feedback around goals and evidence, for giving or receiving critique.
Template
Design system inventory
Audit the colours, type, spacing and components a product actually uses before systematising them.
Template
Portfolio case study outline
A skimmable structure for a 5 to 10 minute case study that shows your reasoning.
External resources
Figma and design toolsThird-party
Figma Help Center (opens in a new tab)
Figma
Official documentation for every Figma feature. The most reliable place to check current menu names and behaviour.
Figma and design toolsThird-party
Get started with Figma (opens in a new tab)
Figma
Official beginner guides to the interface, files and basic tools.
Figma and design toolsThird-party
Guide to auto layout (opens in a new tab)
Figma
Official explanation of auto layout settings and resizing.
Figma and design toolsThird-party
Guide to components in Figma (opens in a new tab)
Figma
Components, instances, properties and variants.
Figma and design toolsThird-party
Guide to variables in Figma (opens in a new tab)
Figma
Variables for colours, numbers and modes, the basis of design tokens in Figma.
Figma and design toolsThird-party
Guide to prototyping in Figma (opens in a new tab)
Figma
Connections, interactions, overlays and smart animate.
Figma and design toolsThird-party
Figma on YouTube (opens in a new tab)
Figma
Official video tutorials and talks. Interfaces change; check dates.
Figma and design toolsOpen sourceThird-party
Penpot (opens in a new tab)
Kaleidos
An open-source design and prototyping tool that runs in the browser and can be self-hosted.
UX research methodsThird-party
UX Research Cheat Sheet (opens in a new tab)
Nielsen Norman Group
Which research methods suit each stage of a project.
UX research methodsThird-party
When to Use Which User-Experience Research Methods (opens in a new tab)
Nielsen Norman Group
A framework for choosing methods by the kind of question you have.
UX research methodsThird-party
User Interviews 101 (opens in a new tab)
Nielsen Norman Group
Planning and running interviews, with common mistakes.
UX research methodsThird-party
Affinity Diagramming (opens in a new tab)
Nielsen Norman Group
A step-by-step guide to clustering research findings.
UX research methodsThird-party
Journey Mapping 101 (opens in a new tab)
Nielsen Norman Group
What journey maps are and how to make useful ones.
UX research methodsThird-party
Empathy Mapping (opens in a new tab)
Nielsen Norman Group
Says, thinks, does and feels, and how to base each on research.
UX research methodsThird-party
Personas: Study Guide (opens in a new tab)
Nielsen Norman Group
Links to articles on creating and using research-based personas.
UX research methodsThird-party
Card Sorting: Uncover Users' Mental Models (opens in a new tab)
Nielsen Norman Group
Open, closed and hybrid card sorts and how to analyse them.
UX research methodsThird-party
Tree Testing (opens in a new tab)
Nielsen Norman Group
Testing navigation structure before visual design.
UX research methodsFreeThird-party
User research in the GOV.UK Service Manual (opens in a new tab)
GOV.UK Service Manual
Practical, public guidance on planning research, recruiting and analysing findings, including with people with access needs.
AccessibilityFreeThird-party
Introduction to Web Accessibility (opens in a new tab)
W3C WAI
What accessibility is, who it affects and why it matters.
AccessibilityFreeThird-party
WCAG 2 Overview (opens in a new tab)
W3C WAI
The official overview of the Web Content Accessibility Guidelines and their versions.
AccessibilityFreeThird-party
How to Meet WCAG 2.2 (Quick Reference) (opens in a new tab)
W3C WAI
Every success criterion with techniques and filters by level.
AccessibilityFreeThird-party
Designing for Web Accessibility (opens in a new tab)
W3C WAI
Short, practical tips written for designers.
AccessibilityFreeThird-party
How People with Disabilities Use the Web (opens in a new tab)
W3C WAI
Stories and descriptions of assistive technologies and adaptive strategies.
AccessibilityFreeThird-party
Easy Checks: A First Review of Web Accessibility (opens in a new tab)
W3C WAI
Simple manual checks anyone can do in a browser.
AccessibilityFreeThird-party
ARIA Authoring Practices Guide (opens in a new tab)
W3C WAI
Accessible patterns for menus, tabs, dialogs and other widgets, with keyboard expectations.
AccessibilityFreeThird-party
Web Accessibility Evaluation Tools List (opens in a new tab)
W3C WAI
A searchable list of checkers and testing tools.
AccessibilityThird-party
WebAIM Contrast Checker (opens in a new tab)
WebAIM
Check text and background colour pairs against WCAG.
AccessibilityThird-party
Alternative Text (opens in a new tab)
WebAIM
How to write alt text for different kinds of images.
AccessibilityThird-party
The WebAIM Million (opens in a new tab)
WebAIM
An annual automated analysis of the top million home pages, showing the most common detectable failures.
AccessibilityOpen sourceThird-party
NVDA screen reader (opens in a new tab)
NV Access
A widely used screen reader for Windows, useful for testing your own work.
AccessibilityOpen sourceThird-party
Accessibility Insights (opens in a new tab)
Microsoft
Browser and desktop tools for automated checks and guided manual assessments.
UI patterns and design systemsFreeThird-party
GOV.UK Design System (opens in a new tab)
Government Digital Service
Components and patterns tested with a very wide public audience, with research notes explaining decisions.
UI patterns and design systemsFreeThird-party
GOV.UK patterns (opens in a new tab)
Government Digital Service
Reusable solutions for common tasks such as asking for addresses, dates and names.
UI patterns and design systemsFreeThird-party
U.S. Web Design System (opens in a new tab)
U.S. General Services Administration
An accessible public design system with components and guidance.
UI patterns and design systemsThird-party
Material Design 3 (opens in a new tab)
Google's design system, with detailed component guidance for Android and the web.
UI patterns and design systemsThird-party
Human Interface Guidelines (opens in a new tab)
Apple
Apple's platform conventions for iOS, iPadOS, macOS, watchOS and visionOS.
UI patterns and design systemsThird-party
Fluent 2 (opens in a new tab)
Microsoft
Microsoft's design system across platforms.
UI patterns and design systemsOpen sourceThird-party
Carbon Design System (opens in a new tab)
IBM
An open-source design system strong on data-dense enterprise patterns.
UI patterns and design systemsThird-party
Atlassian Design System (opens in a new tab)
Atlassian
Foundations, components and content guidance for collaboration software.
UI patterns and design systemsThird-party
Design Systems 101 (opens in a new tab)
Nielsen Norman Group
What a design system is and what it contains.
UI patterns and design systemsThird-party
The Component Gallery (opens in a new tab)
Iain Bean
Compare how dozens of public design systems name and design the same component.
UI patterns and design systemsThird-party
Design Systems Repo (opens in a new tab)
Design Systems Repo
A directory of public design systems, articles and tools.
Typography and colourThird-party
Practical Typography (opens in a new tab)
Matthew Butterick
A readable, opinionated online book about typography rules.
Typography and colourThird-party
Google Fonts Knowledge (opens in a new tab)
Google Fonts
Articles on choosing, pairing and using type on screens.
Typography and colourFreeThird-party
Understanding SC 1.4.3: Contrast (Minimum) (opens in a new tab)
W3C WAI
The reasoning and exceptions behind text contrast requirements.
Typography and colourThird-party
ColorBrewer (opens in a new tab)
Cynthia Brewer, Mark Harrower and Penn State
Tested colour schemes for maps and charts, including colour-blind safe options.
Typography and colourThird-party
Datawrapper Academy (opens in a new tab)
Datawrapper
Guides on choosing charts and colours for data visualisation.
Usability testingThird-party
Usability Testing 101 (opens in a new tab)
Nielsen Norman Group
What usability testing is and the basic steps.
Usability testingThird-party
Why You Only Need to Test with 5 Users (opens in a new tab)
Nielsen Norman Group
The reasoning behind small, iterative tests and its limits.
Usability testingThird-party
10 Usability Heuristics for User Interface Design (opens in a new tab)
Nielsen Norman Group
The ten heuristics with examples.
Usability testingThird-party
How to Conduct a Heuristic Evaluation (opens in a new tab)
Nielsen Norman Group
Running an expert review and combining findings.
Usability testingThird-party
Remote Usability Tests: Moderated and Unmoderated (opens in a new tab)
Nielsen Norman Group
Trade-offs between remote formats.
Usability testingFreeThird-party
Using moderated usability testing (opens in a new tab)
GOV.UK Service Manual
Planning, running and analysing moderated sessions.
Usability testingThird-party
Error-Message Guidelines (opens in a new tab)
Nielsen Norman Group
How to write and display error messages people can act on.
Portfolio and careerThird-party
UX Design Portfolios (opens in a new tab)
Nielsen Norman Group
What hiring managers look for in portfolios and case studies.
Portfolio and careerFreeThird-party
Digital, data and technology roles and skills (opens in a new tab)
UK Government
Detailed public descriptions of design roles and the skills expected at each level, useful for planning your growth.
Portfolio and careerFreeThird-party
GOV.UK Design Notes (opens in a new tab)
Government Digital Service
Designers writing about real projects, decisions and mistakes. Good models for case study writing.
Books and referenceThird-party
Don't Make Me Think, Revisited (opens in a new tab)
Steve Krug
A short, practical classic on web usability. A book; check the publisher page for formats. (The author's site is offline; this is an archived copy.)
Books and referenceThird-party
Rocket Surgery Made Easy (opens in a new tab)
Steve Krug
A do-it-yourself guide to running simple usability tests. (The author's site is offline; this is an archived copy.)
Books and referenceThird-party
The Design of Everyday Things (opens in a new tab)
Don Norman
The origin of many core interaction design ideas, including affordances, signifiers and feedback.
Books and referenceThird-party
Refactoring UI (opens in a new tab)
Adam Wathan and Steve Schoger
Practical visual design tactics for interfaces, written for developers and designers.
Books and referenceThird-party
Laws of UX (opens in a new tab)
Jon Yablonski
Short summaries of psychology principles used in interface design.
Free and open toolsOpen sourceThird-party
Excalidraw (opens in a new tab)
Excalidraw
A whiteboard for quick sketches, flows and diagrams in the browser.
Free and open toolsThird-party
tldraw (opens in a new tab)
tldraw
A fast browser whiteboard for sketching flows and wireframes.
Free and open toolsThird-party
Figma Community (opens in a new tab)
Figma
Files, templates and plugins shared by the community. Quality varies; check licences before reusing.
Free and open toolsThird-party
Optimal Workshop learning hub (opens in a new tab)
Optimal Workshop
Guides on card sorting, tree testing and other IA research, from a research tool vendor.
Process and product thinkingThird-party
The Double Diamond (opens in a new tab)
Design Council (UK)
The origin and current version of the Double Diamond process model.
Process and product thinkingFreeThird-party
GOV.UK Service Manual (opens in a new tab)
GOV.UK
How to plan, build and run digital services in multidisciplinary teams.
Process and product thinkingFreeThird-party
How the discovery phase works (opens in a new tab)
GOV.UK Service Manual
What discovery is for and what it should produce.
Process and product thinkingThird-party
Design Thinking 101 (opens in a new tab)
Nielsen Norman Group
An overview of the design thinking framework.
Process and product thinkingThird-party
Deceptive Patterns: types (opens in a new tab)
Harry Brignull and contributors
A catalogue of manipulative design patterns, with examples and legal context.
Process and product thinkingThird-party
d.school tools (opens in a new tab)
Stanford d.school
Free activities and guides for design thinking workshops.
No resources match
Try a different word or set Category back to All.
Looking for a definition? Try the glossary.