Wireframe
A low-fidelity visual blueprint of a screen or interface that shows layout, structure, and element placement without colors, fonts, or real content.
What it is
A wireframe is a schematic used early in the design process to map out the structural layout of a page or screen. It deliberately omits visual styling — no colors, no typography, no final assets — so that feedback can focus purely on structure, flow, and content hierarchy. Wireframes range from hand-drawn sketches to simple digital diagrams.
When you would use it
You create a wireframe when you need to think through or communicate the structure of a UI without committing to any visual design decisions.
Common operations
- Mapping out a new feature's UI before any code is written.
- Getting stakeholder feedback on layout without visual distractions.
- Communicating screen flow to a developer before a full design is ready.
Related terms
Dashed terms are named in the source but do not have a page here yet.
Where this is taught
No learning path uses this term yet. Browse the Learning Atlas for guided sequences through related ideas.