Wireframe
A wireframe is a low-detail, black-and-white blueprint of a screen or page that shows structure (where things go, what content appears, and how the layout is organized) while deliberately leaving out color, typography, and branding. It answers “what goes where and in what priority?” before anyone argues about how it should look.
Because wireframes are cheap and fast, they’re used early to agree on layout and flow without the distraction (or sunk cost) of visual polish.
Also known as
wires · lo-fi / low-fidelity · skeleton · “the blueprint”
Don't confuse with: the fidelity spectrum
These three are the trio everyone blurs together. They sit on a spectrum of increasing detail and interactivity:
- Wireframe: structure, low detail, no styling, static. (this article)
- Mockup: visual design, high detail, styled, still static.
- Prototype: behavior, interactive/clickable.
Mnemonic: wireframe = skeleton, mockup = skin, prototype = it moves.
In plain English
A rough sketch of a screen using boxes and placeholder text, like an architect’s floor plan, not the paint colors.
What a wireframe shows / omits
| Shows | Omits (on purpose) |
|---|---|
| Layout and spatial arrangement | Colors and brand |
| Content blocks and hierarchy | Real typography |
| Key controls (buttons, fields, nav) | Images (uses boxes/placeholders) |
| Rough user flow between screens | Pixel-perfect detail |
Where it fits
Wireframing happens in the design phase of the SDLC, after requirements are roughly known and before visual design and build. Common tools: Figma, Balsamiq, pen and paper.
See also
- Mockup · Prototype: the rest of the fidelity spectrum
- Software development life cycle: the design phase this belongs to
References
- Wikipedia, Website wireframe. https://en.wikipedia.org/wiki/Website_wireframe