Wireframe
Also called low fidelity mockup, lo-fi wireframe.
A simple, usually grey, sketch of a screen showing layout, content and actions, without final styling.
Last updated
What it is.
A wireframe shows what is on a screen and where: the heading, the list, the filters, the main button. It leaves out colour, images and final copy on purpose, so people focus on structure and flow.
Wireframes come before a high fidelity prototype. Linking several of them together gives a low fidelity clickable prototype that is enough to test the flow.
Why it matters
Structure problems are cheapest to fix in wireframes. Moving a section takes minutes, and nobody has grown attached to the visuals yet. They also let stakeholders and engineers agree on what each screen must do before design time is spent on polish.
In a product build
Wireframes are usually the first design output in a product build. They feed the clickable prototype, which is the first step of an OceanLab build before production code.
Common mistakes.
- 01
Making them so polished that people review colours instead of layout.
- 02
Using lorem ipsum everywhere. Real labels and sample data show whether things fit.
- 03
Wireframing only the main screen and skipping the flows between screens.
Work it out with a tool.
Related terms.
- High fidelity prototypeA prototype that looks almost exactly like the finished product, with final styling, real content and realistic interactions.
- Clickable prototypeA set of linked screens you can click through, built to test a design before the real software exists.
- Design systemA shared set of reusable components, styles and usage rules that designers and engineers both build screens from.
- Usability testingWatching real people try to complete real tasks with a product, to find where they get stuck.
Guides and pages
Browse the full glossary or read answers to common questions.
