The design was fine. It’s what happened on the way to shipping that wasn’t.
The last crimes happen after the file is ‘done.’ Handoff turns decisions into guesses, feedback turns into a poll of feelings, ‘simple’ accretes a hundred small yeses, and ‘responsive’ breaks at the one width everybody uses. These are process crimes — and process is exactly where a good design quietly degrades between your screen and the user’s.
Concept 05 · Process
The Dev Handoff
The intent: hand off the system, not the screenshot. Tokens, components, real specs — so the build inherits the decisions instead of re-guessing them.
How it dies — in three acts
How you claw it back — the method
Tokenise first. Colour, spacing, type as named tokens both sides use. One source.
Hand off components. Give the real component + every state, not a picture of it.
Spec the edges. Document hover, focus, disabled, error, empty — the parts screenshots hide.
Review together. Walk the build against the system, fix drift early, before it compounds.
Step 1 · what got approximated
Why this works — a screenshot hands over the output; a system hands over the decisions. When the build inherits tokens and components, ‘pixel-perfect’ stops being a fight and becomes the default. Drift isn’t a dev problem — it’s what happens when you hand over pictures instead of rules.
Concept 05 · Process
Feedback Rounds
The intent: decide the focal point first, then feedback is about execution. Without a north star, every round is just preferences — and preferences never converge.
How it dies — in three acts
v1v2v3v4v5v6v7v8v9v10v11v12v13v14🎯 the goal
How you claw it back — the method
Agree the goal. Before any pixels, write the one thing this design must achieve. Get it signed.
Name the decider. One person breaks ties. Feedback is input; they make the call.
Filter every note. Each note: does it serve the goal? If not, it’s a preference — park it.
Show the trade. When asks conflict, make the cost visible: ‘add this and we lose that.’
Step 1 · the conflicting notes
Why this works — feedback without a shared goal is a poll of feelings, and feelings don’t converge — they spiral. The fix isn’t more rounds, it’s a north star agreed before the work. Then ‘make it pop’ becomes a question you can answer: pop, in service of what?
Concept 05 · Scope
The ‘Simple’ Request
The intent: ‘simple’ is a discipline, not a starting size. The hard part isn’t leaving things out at the start — it’s saying no to the twenty things that want back in.
How it dies — in three acts
How you claw it back — the method
Re-state the core. What is the one job? Write it on a sticky and put it on the monitor.
Audit the adds. List everything that crept in. Each: does it serve the core job, today?
Cut or tier. Remove what you can; move ‘power’ features behind an advanced view or menu.
Make ‘no’ the default. New asks earn their way in, not slide in because they’re small.
Step 1 · what crept in
Why this works — simplicity isn’t how much you leave out at the start — anyone can draw a clean v1. It’s the hundred small noes after launch, each turning down something individually reasonable. ‘Just one more thing,’ twenty times, is exactly how every simple product becomes a complicated one.
Concept 05 · Layout
Responsive
The intent: design the in-between, not just the two ends. The layout has to survive every width between phone and desktop — and it always breaks in the middle.
How it dies — in three acts
How you claw it back — the method
Pick the seams. List the awkward in-between widths — ~768, ~834, ~1024 — and design them.
Constrain children. minmax(0,1fr) for grids, max-width on text and media, so nothing escapes.
Drag-test. Slowly resize from 320 to 1440 and watch for the width where it snaps.
Lock the rules. Container queries / sensible breakpoints so the next component inherits the behaviour.
Step 1 · where it breaks
Why this works — a site isn’t two layouts, it’s every width between them — and the middle is where real users are. Two perfect artboards with a guessed gap is how ‘responsive’ breaks at 768px. Design the seams, constrain the children, drag-test.
The Crime Scene
Four process crimes between design and ship — tap the one that wastes the most time.
handoff
feedback
v1v2v3v4v5v6v7v8v9v10v11v12v13v14
simple
responsive
Spot the crime — The Telephone Game
11 quick ones. You’ve made at least half of these. No judgement.
Confession booth · Where does your design die?
The confession booth — deal yourself a sin
“
—
— anonymous designer (probably you)
You’ve learned the tells
You can defend the work now — hand over the system not the screenshot, anchor feedback to a goal, make ‘no’ the default after launch, and design the in-between widths. The design that ships is finally the design you made.
The Hall of Shame
The crimes that happen after the design leaves your hands. Tap to convict.
The Screenshot Handoff
‘It’s basically the same.’
tap to flip →
The Screenshot Handoff
the crime
Pictures handed to the build instead of rules, so the result drifts and ‘pixel-perfect’ becomes a fight.
the fix
Hand over tokens, components and states. When the build inherits the decisions, accuracy is the default.
Feedback Round 14
‘Just one more pass.’
tap to flip →
Feedback Round 14
the crime
Notes with no shared goal — a poll of feelings that never converges, spiralling past round 14.
the fix
One signed sentence and one decider before pixels. Then feedback is execution, not a vote.
The ‘One More Thing’
‘It’s only a small add.’
tap to flip →
The ‘One More Thing’
the crime
Twenty individually-reasonable additions whose sum is exactly how simple dies.
the fix
Make ‘no’ the default; each ask earns its place against the screen’s one job, or goes behind a menu.
The 768px Snap
‘Works on my screen.’
tap to flip →
The 768px Snap
the crime
Two perfect artboards with a guessed gap that breaks at the most common width there is — the tablet middle.
the fix
Design the in-between. Constrain children with minmax(0,1fr) and max-width so nothing escapes.
The Pushback Playbook
The questions you actually get about handoff, feedback and scope — the playbook for the room.
How do I stop feedback round 14?
You can’t fix it at round 14 — you prevent it at round 0. Get one sentence signed before any pixels: the single thing this design must achieve. Name one decider for ties. After that, every note gets filtered: does it serve the goal, or is it a preference? Preferences get parked.
How do I push back on ‘just one more thing’?
Make ‘no’ the default and ‘yes’ earn its place. Keep the one job of the screen visible. Each ask: does it serve that job today? If not, it goes behind an advanced view or a menu — not on the wall. Twenty reasonable yeses are how simple becomes complicated.
The dev says it’s ‘basically the same.’ How do I get pixel-accuracy?
Stop handing over pictures. Hand over tokens (colour, spacing, type) and the real component with every state. When the build inherits the decisions instead of re-guessing them, ‘pixel-perfect’ stops being a fight and becomes the default. Drift is a handoff problem, not a dev problem.
The CEO doesn’t like it but can’t say why. Now what?
‘Don’t love it’ is usually an unaligned goal, not a design flaw. Re-surface the one thing you agreed this design must do, and ask: is it failing that, or is this a preference? Often the discomfort is a missing north star, and naming it dissolves the vague ‘no.’
How do I handle two stakeholders giving opposite feedback?
Don’t average them — that pleases no one and breaks the design. Name one decider, put both asks in front of them with the trade-off made visible (‘add this and we lose that’), and let them choose. Your job is to show the cost clearly, not to split the difference.
The site breaks at tablet width. How do I prevent it?
Because nobody designed the in-between. A site isn’t two layouts, it’s every width between them — and the middle is where real users are. Design the awkward seams (~768, ~834), constrain children (minmax(0,1fr), max-width on text/media), and slowly drag-resize to find where it snaps.
They want every feature on one screen. How do I argue for simple?
Simple isn’t how little you start with — anyone can draw a clean v1. It’s the discipline of a hundred small noes afterwards. Reframe the ask: power features live behind one door (an advanced view), not on the wall. A screen that does one thing well beats one that does ten things badly.
My PM wants it shipped Friday and it’s not ready. What do I cut?
Cut scope, never quality. Ship a smaller thing that’s right rather than a big thing that’s broken — because ‘fix it later’ is how the broken version becomes permanent and breeds forty more shortcuts. Decide the one must-work flow and make that flawless.
How do I get sign-off before round 1, not after round 14?
Make the goal a deliverable, not an assumption. Before you design, write the one outcome this must achieve and the one decider who breaks ties, and get both agreed in writing. It feels slow; it saves the three weeks that ‘actually, go back to v1’ costs.
🎭
Up next · Part 6
The Hall of Shame
The villains behind every crime, and the playbook for the meeting — the finale of the series.