A wireframe is a basic blueprint of a page or app screen. It shows where elements such as navigation, headings, text blocks, images, forms and buttons are placed, and how the content is prioritised, while deliberately leaving out colour, typography and polished visuals.
Why it matters
Because wireframes are quick and cheap to change, teams can discuss structure and flow before investing in visual design or code. Stakeholders focus on what the page must do instead of how it looks. Wireframes can be hand-drawn sketches, low-fidelity grey boxes or higher-fidelity mockups with realistic content, and they are often linked together into a clickable prototype.
Example
+------------------------------------+
| Logo Home Pricing Login |
+------------------------------------+
| [ Headline text ] |
| [ Subtext ] [ Sign up button ] |
+------------------------------------+
| [Feature] [Feature] [Feature] |
+------------------------------------+Common mistakes
- Adding colours and branding too early, which pulls feedback toward looks.
- Using lorem ipsum everywhere, which hides content problems.
- Designing only for desktop and forgetting how the layout behaves on mobile.
- Confusing a wireframe with a prototype; wireframes are static layouts, prototypes simulate interaction.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.