UI and UX design
Also called product design, interaction design, user experience design
A model will draw you a finished-looking screen in seconds. It will not tell you the screen is wrong — and that judgement is the skill.
The claim Producing an interface got cheap; deciding whether an interface is right did not, so that decision is now the whole of what you are learning.
Design has always had two halves that beginners cannot tell apart: making the thing, and knowing what the thing should be. For thirty years the first half was how you bought the second — you pushed rectangles around for two years, and somewhere in those two years you accumulated the judgement. The first half is now nearly free, which means the apprenticeship that used to smuggle in the judgement no longer runs by itself. You have to run it deliberately.
This is not a claim that the tools are bad. Nielsen Norman Group ran the same realistic design briefs through AI prototyping tools and summarised the results in a title worth memorising: good from afar, but far from good. The output is high-fidelity in seconds, and its failures are not the crude ones you can spot in a thumbnail — they are the tradeoffs a designer would have argued about, silently resolved toward whatever pattern was most common in the training data. A learner cannot see a tradeoff that was never surfaced.
The gap shows up hardest in the part of the job that was never visual. A generated screen carries a generated assumption about who is using it and why, and the industry's answer to that — synthetic users, AI personas — is the one place NN/g is unambiguous: the simulated participants were optimistic where real ones were not, listed every need without ranking any, and could not produce behaviour, because they never used anything. The unknown unknown is the entire product of user research, and it is exactly what a model trained on what is already written cannot give you.
And there is a measurable floor falling out from under the generated output. WebAIM tests the top million home pages every year; in 2026, 95.9% had detectable WCAG failures, up from 94.8%, at an average of 56 errors per page — the first reversal after six years of small improvements, which WebAIM attributes partly to rising complexity from frameworks and AI-assisted coding. A generator reproduces the median of what exists, and the median is inaccessible.
So the learning path below inverts the old one. You do not start by making things look right and hope taste arrives. You start by learning to see, you buy real evidence from real users early and cheaply, and you let the model near your work only at the stages where you can already grade its answer.
What actually changed
-
WasA first screen cost a day in Figma, and the cost forced a conversation about what it was for.
NowA first screen costs one prompt and arrives looking finished, which is the worst possible moment to be asked whether it is right.
-
WasJuniors bought judgement with production work — hundreds of screens, critiqued by someone senior.
NowThe production work is automated, so the judgement has to be bought some other way, and nobody hands it to you as a task.
-
WasPersonas were a summary of research someone actually did, and were only as good as it.
NowPersonas are generated on demand, sound plausible, and are wrong in a specific direction: too optimistic, too agreeable, unable to be surprising.
-
WasVisual polish was a signal of effort, and effort correlated loosely with thought.
NowPolish is free, so it signals nothing. NN/g now writes about the opposite — a visibly handmade aesthetic as the trust signal, because it is the thing that cannot be generated in a minute.
-
WasAccessibility mistakes were made one page at a time, by a person who could be taught.
NowThey are reproduced at generation speed from a training set where 96% of pages fail, so the check has to be yours and it has to be automatic.
The path
In order. Each stage names what the model may and may not do while you are in it — that rule is the difference between the two arms of every study at the bottom of this page.
-
1 Learn to see
Acquire the vocabulary to say what is wrong with a screen in terms someone else can act on.
- Take three interfaces you use every day and redraw one screen of each by hand, on paper, at speed. You are not making art; you are finding out how much of it you never actually looked at.
- Read Nielsen Norman Group's ten usability heuristics and then spend a week finding one real violation of each, in the wild, screenshotted.
- Write a 150-word critique of a screen you dislike that never uses the words clean, modern or intuitive.
- Learn the four mechanics everything else sits on: hierarchy, spacing, contrast, alignment.
What AI may do here Ask it to explain something you have already looked at; never ask it to produce the artefact you are studying. A generated critique read before your own is an answer you will not be able to unsee — the effect is the same one that makes worked examples fail when they arrive before the attempt.
You are done when You can hand your written critique to a developer and they know what to change. If they ask what you mean, you are still describing feelings.
-
2 Watch five people
Get the one thing a model cannot give you — a real person doing something you did not predict.
- Run five think-aloud sessions on any live product, yours or somebody else's. Steve Krug's Rocket Surgery Made Easy is a whole method in a short book and needs no budget.
- Write down your predictions before each session and score yourself afterwards. The gap is your actual finding.
- Do it again after you change something. A test that only ever happens once is a demo.
What AI may do here No synthetic participants — not as a warm-up, not as a pilot. Use the model to draft your task script and to cluster your own transcripts, then reread the transcripts and check every cluster, because the summariser drops the outlier and the outlier is the finding.
You are done when You have three written observations that contradict something you believed before the session. If everything confirmed your design, you were demoing, not testing.
-
3 Build visual craft on purpose
Make the thing look right for reasons you can name, and make it work in the states nobody screenshots.
- Rebuild one screen you admire, from memory, then diff it against the original. This is retrieval practice applied to interfaces and it is brutally effective.
- Adopt one type scale and one spacing scale, and stop making per-element decisions.
- Design the four states that get skipped: empty, loading, error, and too-much-data.
- Check every colour pair against WCAG contrast before you show anyone. Make it a keystroke, not a virtue.
What AI may do here This is where generation earns its place: ask for ten variations of a layout you have already specified, then pick one and write down why. You must be able to grade the ten. If you cannot, you are at the previous stage and the variations are noise.
You are done when Your screen passes AA contrast, holds together at 320px wide, and you can justify every spacing value by naming the scale it came from.
-
4 Ship it and be measured
Close the loop that turns opinions into knowledge — a prediction, a release, a number.
- Ship something small to real users. A portfolio piece nobody used teaches nothing that the making of it did not already teach.
- Write the number you expect to move, and by how much, before you ship.
- Instrument the flow, then read the result even when it is boring.
- Run the accessibility pass on the built page, not the mockup — the gap between them is where most failures live.
What AI may do here Let it write the instrumentation and the boring copy variants; never let it interpret the result for you. Reading a result you predicted wrongly is the single highest-value minute in the whole loop, and delegating it removes the only feedback the loop exists to deliver.
You are done when You have one change where you predicted the direction of the number in advance and were right, and one where you were wrong and know why.
-
5 Direct the machine
Use generation at the scale it is actually good at, with a rubric that stops it deciding for you.
- Take a brief you have already solved and generate twelve alternatives in an hour. Score them against a rubric you wrote before you looked.
- Keep a running list of the model's defaults for your domain — the patterns it reaches for regardless of context. That list is your competitive advantage, because everyone else is shipping them.
- Use it to attack your own work: ask for the strongest case against a decision you have made, then check the case against your test transcripts.
What AI may do here The rubric is written first, by you, or the exercise is just taste-laundering. The model may propose; it may not select.
You are done when You can name five things the tool reliably gets wrong for the product you work on, with a screenshot of each.
Keep these unaided
The gap between what you can do with the tool and what you can do without it is the only honest measure of whether you learned anything. Check it occasionally, on purpose.
- Sketch a flow on paper, end to end, before opening any tool — including the error paths.
- Run a usability session and synthesise it from your own notes.
- Judge type, spacing and contrast well enough to catch a violation before the checker does.
- State the problem the design solves in one sentence that a stranger could disagree with.
- Kill a design you love because five people could not use it.
Where the model genuinely helps you learn
- As a critique partner AFTER your own pass: ask for heuristic violations, then verify each one — it will invent a few, and catching the invented ones is itself a good test of whether you know the heuristics.
- As a variation engine once you can grade the output: twelve layouts in an hour widens the option set you choose from, which is the one part of design where volume genuinely helps.
- As an explainer of the constraint on the other side of the wall — why the engineer says the list cannot be virtualised, what the platform guideline actually says.
- As a stakeholder to rehearse against: have it argue for the feature you think is wrong, and defend your position out loud. That is retrieval practice, not delegation.
- As a first-pass copy editor for microcopy you have already written, which is the fastest quality win in most interfaces.
Traps
- The portfolio of beautiful screens nobody used. It was already a weak signal; now that anyone can generate it in an afternoon it is no signal at all.
- Synthetic users. They answer, they sound reasonable, and they are systematically optimistic — NN/g found simulated participants claiming they finished online courses that real participants admitted abandoning.
- Fidelity arriving before decisions. A polished mockup ends the argument about direction by making it socially awkward to reopen, and the model hands you polish for free at the exact moment the argument matters most.
- Learning the median. Generated designs converge on the most common pattern in the training data, so a learner who studies the output is calibrating on the average of the internet rather than on what is good.
- The illusion of competence. Producing quickly feels like improving; it is the feeling that novice programmers reported in the ICER study right before they underperformed, and design has no equivalent of a failing test to correct you.
- Accessibility drift. The generated default fails contrast and structure more often than not, and it fails identically every time, so nobody notices it as a mistake.
What counts as proof now
The artefact stopped being evidence — anyone can generate one. These are the things that still say something about you.
- Three case studies where the interesting page is the one showing what testing changed — the before, the finding, and the design you abandoned.
- A recorded usability session with your own synthesis next to the transcript.
- A shipped change with the prediction you made beforehand and the number that followed.
- A component or pattern that survived contact with a real codebase, including its empty and error states.
Where to learn it
Courses
-
The broadest structured curriculum at a low monthly price, with the discipline of deadlines. The value is the structure; the courses vary, and none of them substitute for testing with real people.
-
A complete beginner path with portfolio projects, auditable free. It is common enough that its portfolio pieces are recognisable to recruiters as its portfolio pieces — do the course, then do something of your own.
Books
-
Why doors and stoves are badly designed, and therefore why software is. The vocabulary — affordance, signifier, mapping, feedback — is the one this whole field argues in. Almost no screens in it, which is the point.
-
Three hours, and it changes how you look at every page afterwards. Its companion, Rocket Surgery Made Easy, is the cheapest usable method for running your own tests.
- Refactoring UI Paid
The fastest route from I can build it to it looks deliberate, aimed squarely at engineers. Tactical rather than theoretical: it will not teach you research or interaction design.
Free reading and references
-
Thousands of free applied-research articles, and the closest thing this field has to a standard reference. Start with the ten usability heuristics. Weakness: written for practitioners, so it assumes you already have a product to apply it to.
-
Ten sentences from 1994 that still catch most of what is wrong with most interfaces. Learn them as a checklist you run, not as trivia.
- Laws of UX Free
Twenty-odd psychological principles applied to interfaces, one card each. Excellent as vocabulary and as a memory aid; treat the underlying claims with the caution any pop-psychology summary deserves and read the source when a decision rests on one.
- Material Design 3 Free
A complete, opinionated design system with the reasoning written down — useful as a worked example even if you never ship Material. Read it as one system's answers, not as the rules.
-
The platform conventions your users already have in their hands. Skim the platform pages; read the components you are about to reinvent.
-
The actual success criteria, filterable by level. Dry, and non-negotiable: it is the part of the craft with a legal floor under it in most of the world.
-
What actually comes out of AI prototyping tools on two realistic briefs, and where it breaks. Read it before you decide how much of your process to hand over.
Tools
-
Ten seconds per colour pair. Make it a habit before the palette is locked rather than an audit after.
The evidence
What each source measured, and what kind of source it is. A practitioner study and a randomised trial are both worth reading and are not the same claim.
- Rosala and Moran, NN/g (2024) Practitioner study
Compared AI-generated research participants against real ones: synthetic users were systematically optimistic (claiming course completions real participants admitted abandoning), listed needs without prioritising them, and could produce no behavioural data at all.
- Wang, Brown and Zhang, NN/g (2025) Practitioner study
Ran realistic design briefs through AI design, vibe-coding and chatbot tools: high-fidelity output fast, but pattern-matched to the most common solution rather than the contextually right one — good from afar, far from good.
- Chan, NN/g (2026) Practitioner study
Argues that a visibly handmade aesthetic has become a trust signal precisely because generated polish is free: when anyone can produce a sleek image in minutes, polish stops carrying information about effort or care.
- WebAIM Million (2026) Industry report
95.9% of the top million home pages had detectable WCAG 2 failures, up from 94.8% in 2025, averaging 56.1 errors per page — the first increase after six years of small improvements, which WebAIM links partly to rising complexity and AI-assisted coding.
- Dell'Acqua et al. (2023/2025), Organization Science Peer-reviewed
758 BCG consultants: on tasks inside the model's capability, GPT-4 users finished 12.2% more tasks 25.1% faster at 40.2% higher rated quality — and on a task just outside it they were 19 percentage points MORE likely to be wrong than consultants working alone.
- Bastani et al. (2025), PNAS Peer-reviewed
Nearly 1,000 high-school students: unrestricted GPT-4 raised performance 48% while it was available and left them 17% WORSE than the control group once it was taken away. A version constrained to teacher-designed hints erased the harm.
The learning science underneath
None of the advice above is original to this skill. It is the general findings on how humans learn, applied to one job — and each of these pages sets out the evidence for the principle itself.