Wireframing, user flows, and information architecture (IA) are the three deliverables that carry a digital product from a research insight to a structure a team can actually build against, the work that happens after user research wraps and before a single pixel of visual design gets touched. Skipping straight to polished screens without them is expensive: a confusing nav label or a checkout flow with a missing step is far cheaper to fix as a gray box than as shipped code. What trips up newer designers is that these three deliverables constantly feed each other: the IA and sitemap decide what pages exist, user flows decide how someone moves between them, and wireframes give each stop on that journey a concrete shape, so revisiting one almost always means revisiting the others. Card sorting and tree testing exist precisely because guessing at structure is unreliable; both trade a designer's assumptions for evidence about how real users actually think.
What This Cheat Sheet Covers
This topic spans 12 focused tables and 77 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Wireframing Fundamentals, Fidelity & Formats
Before touching a tool, it helps to know exactly what a wireframe is for and how it differs from the mockups and prototypes that come after it, since mixing these up is the single most common source of confused stakeholder feedback.
| Concept | Example | Description |
|---|---|---|
A boxes-and-labels layout of a checkout screen showing where the cart summary, address form, and "Place order" button sit, with no color or copy | A structural blueprint of a screen's layout and content placement, deliberately stripped of color, imagery, and type styling so the team debates structure, not decoration. | |
Grayscale boxes and grey bars stand in for a hero image and headline while the team debates whether the search bar belongs above or below the nav | Rough, fast layout sketches used early to explore many structural ideas before investing in detail; images and text are simple placeholders. | |
Exact button sizes, real menu labels, and near-final spacing, still in grayscale with no brand colors | A near-final-layout wireframe used for developer handoff or usability testing once the structure is locked, still without full visual design. | |
The same screen shown three ways: gray boxes (wireframe) → full-color static comp (mockup) → a clickable version that opens a menu on tap (prototype) | •Wireframe = structure only •Mockup = visual design, static •Prototype = simulates interaction and flow |