Self-taught UI/UX design — an open-course route

v0.1

Toolbelt

weeks 1–2 · ~20 h

Learn one design tool properly and set up the habits — naming, versioning, components — that stop files from rotting three weeks in.

CourseTimeWhy it's here

Figma Learn — help centreFigma ~10 h Frames, auto layout, components, variants, styles. Auto layout is the one to over-learn; everything later depends on it.

Figma CommunityFigma ~6 h Open other people's files and take them apart. Reading real files teaches structure faster than any tutorial.

Figma resource libraryFigma ~4 h Short, plain-language explainers on design process and vocabulary. Useful for the words, not the tool.

Build

chore: set up a design-log

A public Figma file called design-log, one page per week. Every exercise, teardown and experiment lands here. This becomes the evidence of how you think — which matters more than polish in a junior portfolio.

Done when

You can build a responsive card component with auto layout and variants without looking it up
Your file has named layers, text styles and colour styles — no “Rectangle 47”
You have taken apart at least three community files and written down what you learned

v0.2

Foundations of UX

weeks 3–10 · ~90 h

Understand what the discipline actually claims: that usability is measurable, that users are not you, and that most design failures are research failures.

CourseTimeWhy it's here

Google UX Design CertificateCoursera · audit free ~60 h Seven courses covering the whole process, end to end. Audit each course free; pay only if you want the certificate. The best single structured on-ramp that exists.

Introduction to User Experience DesignGeorgia Tech · audit free ~15 h A university treatment of the same ground — shorter, more rigorous, better on why the methods work.

Nielsen Norman Group articlesNN/g ~15 h The field's research arm, publishing free for thirty years. Start with the ten usability heuristics and the articles on usability testing.

Build

feat: heuristic evaluation of something real

Pick an app you use and dislike. Run a full heuristic evaluation against Nielsen's ten heuristics, documented with screenshots, severity ratings, and a specific fix per issue.

Done when

You can name and apply the ten usability heuristics from memory
You produced a written evaluation a stranger could act on without you explaining it
You can articulate the difference between UX, UI, and interaction design without hand-waving

v0.3

Research and framing

weeks 11–18 · ~90 h

The part beginners skip and employers test for. Learning to find the real problem is worth more than any amount of visual polish applied to the wrong one.

CourseTimeWhy it's here

Google UX Certificate — research coursesCoursera · audit free ~35 h Courses 2 and 3 specifically: conducting research, interviews, surveys, and turning findings into personas and journey maps.

Nielsen Norman Group articlesNN/g ~30 h Search their archive for user interviews, usability testing, and card sorting. The methodological detail here is what separates real research from asking friends.

Interaction Design Foundation — literatureIxDF ~25 h A large free library of encyclopedia chapters and articles. Good for breadth on methods you have only heard named.

Build

feat: research that changed your mind

Run five real usability tests on your v0.2 evaluation subject — recruited strangers, a script, a task list, silence while they work. Write findings that contradict at least one of your original assumptions.

Done when

You ran five sessions with people you did not know
You have a written test script and task list you could hand to someone else
Your findings changed your mind about something — and you wrote down what and why
You can explain why five users is the usual number, and when it is not enough

v0.4

Visual craft

weeks 19–28 · ~110 h

Typography, colour, spacing and hierarchy. This is the slowest skill to acquire and the fastest to be judged on, so it gets the longest block.

CourseTimeWhy it's here

Butterick's Practical Typographyfree to read ~30 h Opinionated, correct, and short. If you read only the summary of key rules, your work improves the same week.

Google Fonts KnowledgeGoogle ~25 h Type anatomy, pairing, and choosing typefaces for a purpose — written by typographers rather than marketers.

Learn Responsive Designweb.dev · Google ~25 h Layout that survives every screen size. Written for developers, which is exactly why designers should read it.

A List Apartarchive ~15 h Two decades of essays on layout, type and craft on the web. The old articles have aged remarkably well.

Material Design 3 — stylesGoogle ~15 h Colour systems, type scales and elevation, worked out in public with the reasoning attached.

Build

feat: the same screen, five ways

Redesign one screen five times under five constraints: type-only, two colours, dense, spacious, and dark mode. Same content, same purpose. Write a paragraph on what each version costs and buys.

Done when

You can set a readable type scale from scratch and justify each step
You can explain why a layout feels unbalanced and fix it deliberately, not by nudging
Your five versions are genuinely different, not recolours of one idea
You have a dark-mode version whose contrast you actually measured

v0.5

Interaction and platform patterns

weeks 29–36 · ~80 h

Users arrive with expectations built by every other app they use. Learn the conventions before you decide which to break.

CourseTimeWhy it's here

Laws of UXJon Yablonski ~15 h Fitts, Hick, Jakob, Miller, Von Restorff — the psychology behind interface decisions, one page each with sources.

Apple Human Interface GuidelinesApple ~25 h The most carefully argued design guidance any platform publishes. Read the patterns and components sections even if you never ship on Apple platforms.

Material Design 3Google ~25 h The Android counterpart, and a complete worked example of a design system with its reasoning exposed.

Nielsen Norman Group articlesNN/g ~15 h Search for forms, navigation, and error messages — the three places most products lose users.

Build

feat: a flow, not a screen

Design a complete multi-step flow — onboarding, checkout, or booking — as an interactive prototype. Every error state, empty state, loading state and success state included. States are the work; screens are the easy part.

Done when

Your prototype is clickable end to end, including the paths where things go wrong
You designed every empty, loading, error and success state
You can point to three specific platform conventions you followed and one you deliberately broke, with a reason

v0.6

Accessibility

weeks 37–44 · ~80 h

Not a compliance checkbox at the end — a design constraint from the start. It is also the fastest way to separate yourself from a field where most portfolios ignore it entirely.

CourseTimeWhy it's here

W3C WAI tutorialsW3C ~25 h Page structure, menus, images, tables and forms done accessibly, from the body that writes the standard.

Learn Accessibilityweb.dev · Google ~25 h A full course on accessible interfaces — focus, colour, ARIA, keyboard behaviour — with runnable examples.

Inclusive ComponentsHeydon Pickering ~20 h Common components rebuilt accessibly, one long essay each. The best writing on the subject anywhere.

WCAG 2.2 quick referenceW3C ref The actual success criteria. Use as a checklist, not a reading list.

The A11Y Projectcommunity ~10 h Practical checklists and short posts. Good for the everyday questions the standard answers too formally.

Build

feat: accessible by construction

Rebuild your v0.5 flow to WCAG 2.2 AA — contrast verified with a tool, full keyboard operation, visible focus order, proper labels, and annotations telling the developer what each element must announce.

Done when

Every colour pair in your design passes AA contrast, measured rather than eyeballed
The whole flow is operable by keyboard alone, and you tested it that way
Your handoff file annotates roles, labels and focus order
You can explain why colour alone must never carry meaning

v0.7

Design systems

weeks 45–52 · ~80 h

Where design stops being a series of pictures and becomes an asset a team can build on. This is what senior designers spend their time on.

CourseTimeWhy it's here

IBM Carbon Design SystemIBM ~20 h A mature, fully documented public system. Read how components are specified, not just how they look.

Shopify PolarisShopify ~20 h Strong on content and voice guidance, which most systems neglect and every product needs.

U.S. Web Design SystemUSWDS ~20 h Built for the widest possible audience under legal accessibility requirements. Excellent on rationale and evidence.

Material Design 3 — foundationsGoogle ~20 h Design tokens, theming and adaptive layout, worked through at scale.

Build

feat: a small system, documented

Build a real design system for your capstone product: tokens for colour, type and spacing; ten to fifteen components with variants and states; and written usage guidance saying when not to use each one.

Done when

Your components are token-driven — changing one token restyles the system coherently
Every component documents its states, its variants, and when not to use it
A developer could implement three of your components from the documentation alone, without asking you a question

v0.9

Build what you design

weeks 37–62 · alongside · ~50 h

Runs in parallel from v0.6 onward. You do not need to become an engineer, but designers who understand the material produce work that survives implementation — and are trusted more.

CourseTimeWhy it's here

Learn CSSweb.dev · Google ~25 h The box model, flexbox, grid, and why your spacing decisions behave the way they do in a browser.

CS50W — Web ProgrammingHarvard ~25 h HTML, CSS and enough JavaScript to build and deploy the interfaces you design. Take the front-end weeks; the rest is optional.

W3C WAI tutorialsW3C ref Revisit these while writing markup — accessibility is much easier to see in code than in a mockup.

Build

chore: ship one design yourself

Take one screen you designed and build it as a real, responsive, accessible web page. Deploy it. The gap between your mockup and the built result is the most instructive thing in this whole route.

Done when

One of your designs exists as a live URL you built yourself
It is responsive and keyboard-accessible
You can list three things you would design differently now that you have built one

v1.0

Capstone and portfolio

weeks 53–62 · ~100 h

Three case studies that show thinking, not screenshots. Portfolios are read for reasoning; the pretty pictures only get you the first thirty seconds.

CourseTimeWhy it's here

Nielsen Norman Group articlesNN/g ~15 h Search for portfolio and case study guidance. The advice here is evidence-based rather than fashionable.

Google UX Certificate — portfolio coursesCoursera · audit free ~25 h The certificate ends on portfolio construction. Take that part even if you skipped the rest.

Figma CommunityFigma ref Publish your design system publicly. A system others can duplicate is a stronger signal than any single screen.

Build

release: portfolio v1.0

Three case studies, each structured as problem, research, what you tried, what failed, what shipped, what you would change. Include the work that did not survive testing — it is the most convincing part.

Done when

Three case studies show the reasoning, not just the final screens
At least one documents something that failed and what you did about it
Every case study states the constraint you were designing within
A stranger reading it can tell how you think, not just what you can draw

Design that survives contact with users.

The road, to scale

Ground rules that make this work

Toolbelt

Foundations of UX

Research and framing

Visual craft

Interaction and platform patterns

Accessibility

Design systems

Build what you design

Capstone and portfolio

Reference shelf