Design & UX · master area

Wireframing & Prototyping

Enough fidelity to amigos. Not pixels. Not polish. The layout, the labels, the named states — drawn until the trio can argue about them.

Owners: Designer Phase it lives in: What We Build (Volume III) The corpus principle this enacts: Resolution, not maximum.

Where it lives in the chain

• What We Build · Fidelity grows with understanding — the canon
• What We Build · Design Shaping · cross-referencing — where the wireframe references the system

How to do this

• Principle — Chain-level thinking
• Practice — Holding amigos — the wireframe is the reading material
• Template — Feature Brief — the brief that this wireframe serves
• Clinic — A story without a state

What an artefact looks like

Greyscale frames with the labels written, the states named (empty, partial, submitting, success, error/network, error/validation), and one prototype path clicked through end-to-end. No micro-interactions, no exact colour, no final copy. The fidelity is enough to amigos: when the developer reads the wireframe and the QA reads the wireframe and the PO reads the wireframe, all three see the same flow. If they don't, the wireframe is not yet done. Over-fidelity at this stage is as expensive as under-fidelity — pixels drawn for a story not pulled for two months get redone after the first release teaches the team what they didn't know.

Related crafts

• User Flow Design — the order this fills in
• Interaction Design — the within-node behaviour
• Figma Organization — where these frames live
• Storybook — the next-fidelity surface