Ask five people on a product team what a wireframe is and you get five answers that agree on one thing: it is the drawing you make before the real thing exists. A wireframe is a low-fidelity sketch of an interface that pins down structure, hierarchy, and flow while deliberately ignoring color, typography, and polish. Boxes for images. Lines for text. Grey on white.
That deliberate plainness is the entire point. When a screen looks finished, people critique the font. When it is grey boxes, people critique the thing that matters at this stage: whether the layout serves the task at all.
This pillar collects our guides to wireframing as it works now, on canvases where the sketch and the working screen live side by side:
How to wireframe
A practical walkthrough: from a blank canvas to a structure the whole team can argue with, in under an hour.
Wireframe vs mockup vs prototype
The three artifacts everyone confuses, what each is for, and when to skip one entirely.
Low-fidelity vs high-fidelity wireframes
Why fidelity is a dial, not a ladder, and how to pick the right setting for the decision in front of you.
AI wireframing
What changes when an agent draws the boxes: describing structure in a sentence and steering by pointing.
What a wireframe is for
A wireframe answers three questions and refuses to answer any others:
- What is on this screen? The inventory: navigation, content, actions.
- Where does it sit? Hierarchy and layout: what a person sees first, what is one tap away, what is buried.
- How do you move through it? Flow: which box leads to which screen.
Everything else, from the exact blue of the button to the wording of the headline, is out of scope on purpose. Answering those questions later is cheap. Answering them after a team has built the wrong structure is not.
The classic process, and what changed
For twenty years the wireframing workflow was stable: sketch on paper or in a dedicated tool, review, redraw at higher fidelity, hand off to design, hand off again to engineering. Each handoff redrew the same screens in a new tool, and each redraw lost information.
Two things changed that. First, canvas tools made wireframes multiplayer, so the sketch became a conversation instead of a deliverable. Second, and more recently, agents made the distance from wireframe to working screen almost zero. On a canvas where an AI agent writes real code, you can sketch a checkout flow in grey boxes, point at it, and ask for the working version. The wireframe stops being a phase you leave behind and becomes the first frame of the actual product.
That shift does not make low fidelity obsolete. It makes it precious: thinking in boxes is still the fastest way to decide structure, and now the boxes compile.
Where to start
If you are new to wireframing, start with how to wireframe and keep the fidelity guide next to it. If your team argues about vocabulary, settle it with wireframe vs mockup vs prototype. And if you want to see what the agent-drawn version of this workflow looks like, AI wireframing covers it, or you can skip the reading and generate a wireframe from a sentence on the canvas itself.