What is Wireframe?
Definition
A wireframe is a simplified, usually greyscale sketch of a page or screen that shows its structure: where content, navigation and actions go and in what order of priority, without final colours, imagery or styling. Teams use wireframes early in a project to agree on layout and content hierarchy before investing in visual design or code.
Also known as: wireframing, page schematic, screen blueprint
What goes in, and what stays out
A wireframe exists to steer the conversation to the right place. With colours and photos out of the picture, the team stops asking "should this be blue?" and starts asking "what should people see first on this page?"
- In: the order and relative size of sections, navigation, heading levels, primary calls to action, form fields, placeholders for images and video, and notes on behaviour where needed.
- Deliberately out: brand colours, final typefaces, photography, icon detail, shadows and animation.
Example: the skeleton of a service page
You can wireframe on paper, in a design tool or even in plain text. This sketch shows the structure of a service page with no colour or imagery at all:
+--------------------------------------------+
| Logo Services About [Contact] |
+--------------------------------------------+
| H1: Service name |
| One-sentence value proposition |
| [Request a quote] |
+--------------------------------------------+
| Benefit 1 | Benefit 2 | Benefit 3 |
+--------------------------------------------+
| Process: 1 - 2 - 3 - 4 |
+--------------------------------------------+
| FAQ (accordion) |
+--------------------------------------------+
| Footer: address, links |
+--------------------------------------------+Even a sketch this rough settles real decisions: the page has a single H1 and a heading structure that follows its sections, the main action is visible above the fold, and the FAQ comes last.
Wireframe, mockup and prototype
| Shows | Interaction | Visual detail | |
|---|---|---|---|
| Wireframe | Structure and priority | None or minimal | Low |
| Mockup | Final look | None (static) | High |
| Prototype | Flow and behaviour | Yes (clickable) | Low to high |
Low- vs high-fidelity prototypes
Low-fidelity prototypes are paper sketches or greyscale wireframe screens linked together. They are cheap to make and ideal for testing a flow: can people reach the right step, is anything missing? High-fidelity prototypes come close to the real product in visuals, copy and interaction; they are used to try out micro-interactions, get stakeholder sign-off and give developers an unambiguous reference. Bring in high fidelity too early and feedback drifts towards colours and images while structural problems slip through.
Making wireframes more useful
- Work with real content wherever you can. Lorem ipsum hides the headline that wraps onto two lines and the paragraph that runs far too long.
- Sketch the narrow screen first. Deciding the order on a phone also clarifies what sits side by side on a wide screen, which front-loads your responsive design decisions.
- Annotate behaviour: what does this button do, what appears when the form fails, what shows when a list is empty?
- Keep it rough on purpose; a polished draft looks finished and becomes harder to change.
- If the team has a design system, use boxes that stand for its components, so the next stage holds fewer surprises.
Wireframes are the cheapest place to experiment in the UX process: moving a box takes seconds, rebuilding a live page takes days.