No. 112
Product Design
Wireframe
A wireframe is a low-detail visual outline of a screen, showing structure and layout without colors, styling, or final content.
Why it matters
Wireframes let teams agree on layout and priorities quickly and cheaply, before investing in visual design or code.
In depth
Wireframes focus attention on structure, content hierarchy, and flow rather than aesthetics. They are intentionally rough so feedback stays on the big decisions. They sit early in the process, often before higher-fidelity mockups and prototypes.
Real-world example
A sketch using gray boxes for images and placeholder lines for text maps out where a page's header, content, and buttons will go.
Low-fi