Wireframe
Also known as: lo-fi wireframe, structural mockup
What Is a Wireframe?
A wireframe is a low-fidelity visual representation of a screen or interface layout. It maps out where content, navigation, and interactive elements will sit (without color, typography choices, or imagery involved).
The purpose is to establish structure and hierarchy early, before visual design decisions are made.
What Are the Types of Wireframes?
Low-fidelity wireframes are rough and intentionally simple — boxes, lines, and placeholder text. They're quick to produce and easy to discard, making them useful for exploring layout options before any commitment is made.
High-fidelity wireframes are more detailed, incorporating closer-to-final content, specific component placement, and sometimes basic interaction notes. They sit between a structural sketch and a finished visual design.
The right level of fidelity depends on the audience. For example, internal alignment on structure calls for low-fidelity. Developer handoffs or stakeholder presentations often benefit from more detail.
What Are the Benefits?
Speed — layout decisions can be communicated and tested quickly, before visual design work begins.
Focus on structure — removing color and style keeps conversations centered on how the layout and hierarchy serve user needs, not how it looks.
Low cost of change — adjusting a wireframe takes minutes; making the same change in a finished design takes considerably longer.
Early alignment — teams, stakeholders, and developers can agree on structure before visual design introduces its own layer of opinions.
What Are the Limitations?
Interpretation gap — stakeholders without design experience sometimes struggle to visualize the finished product from a basic wireframe, which can lead to approving a structure that doesn't match expectations once it's built.
Incomplete interaction documentation — static wireframes don't capture motion, transitions, or conditional states, leaving important behavioral decisions undocumented.
Scope creep — high-fidelity wireframing can drift toward full design work without delivering the speed advantage that made it useful in the first place.
Where Does Wireframing Fit in the Design Process?
A wireframe is most useful after information architecture is defined and before visual design begins. It bridges the gap between structural decisions (what goes where and why) and the detailed visual execution that follows.
In UX/UI design, wireframes are a standard deliverable during the foundation-building phase, used to align stakeholders on layout and user flows before any visual decisions are made.