←  All terms
W
Design Systems

Wireframe

A wireframe is a simplified schematic of page structure, content hierarchy, and key interactions.

A wireframe provides a low-detail blueprint for organizing page structure, content hierarchy, and essential interactions before visual design or development begins. It helps teams align on layout, priorities, and user flows early, making it easier to identify structural issues before more detailed work starts. The concept is closely related to Prototype and Information Architecture.

Read more

Prototype

Information Architecture

UX Design

FAQ

Wireframe

Which mistakes are common when creating a wireframe?
Typical ones are too much detail, placeholder text instead of real content, and ignoring small screens. A wireframe filled with dummy text hides whether headlines and copy actually fit. Realistic content and a mobile perspective make the result dependable. A quick review with stakeholders exposes gaps before design starts.
When is a wireframe worthwhile, and when can it be skipped?
It is worthwhile for complex pages, several stakeholders, or unclear priorities. For small adjustments or established design systems, going straight to a design in Figma is often enough. The test: if the structure is disputed, a wireframe creates clarity before design effort is spent.
How do wireframes, mockups, and prototypes differ?
A wireframe shows structure and priority without visual detail, a mockup adds color, typography, and imagery, and a prototype makes flows clickable. The order follows the level of detail. Discussing visuals too early costs time on structural questions, which is why the wireframe stays deliberately rough.