Wireframe
A low-fidelity visual representation of a product screen that shows layout and structure without visual design — used to communicate information architecture and user flows early in the design process.
What is a Wireframe?
A wireframe is a schematic or blueprint of a UI screen. It shows the placement of elements — navigation, content areas, buttons, forms — without colours, images, or final typography. Think of it as a rough sketch that communicates *what goes where* before investing in how it looks.
Fidelity spectrum
| Type | Description | Tools |
|---|---|---|
| Lo-fi wireframe | Hand sketch or basic boxes | Paper, Balsamiq |
| Mid-fi wireframe | Greyscale, real layout | Figma, Sketch |
| Hi-fi mockup | Full colour, real typography | Figma |
| Prototype | Clickable interactions | Figma, Framer |
When wireframes are most valuable
- Early in discovery, before investing design time
- When aligning PM and engineering on information architecture
- When testing flow and layout with users before visual polish
- When communicating scope to engineering (what screens exist, what actions are available)
What to review in a wireframe
- Does the layout match the user's mental model?
- Is the primary action obvious?
- Are all edge cases represented (empty state, error state, loading)?
- Does the navigation reflect the information architecture?
Free templates for Wireframe
Frequently asked questions
Should PMs create wireframes?
PMs can sketch rough wireframes to communicate intent — especially for simple layouts. But wireframes for complex flows should be created by designers. A PM wireframe that goes directly to engineering without designer review often misses usability issues.
When should you skip wireframes and go straight to high-fidelity?
When iterating on an existing pattern (adding a field to a known form, new item in an existing list). Skip wireframes when the information architecture is already established and only the content is changing.
Apply Wireframe to your real product data
PMRead ingests customer feedback, interviews, and Slack threads — and generates PRDs grounded in real evidence.
Related terms
UX (User Experience)
The overall quality of a user's interaction with a product — encompassing usability, accessibility, performance, and emotional response — not just visual design.
Prototype
A simulated version of a product or feature — ranging from paper sketches to clickable Figma flows — used to test ideas with users before engineering investment.