UX glossary
Wireframe
A wireframe is a schematic floor plan of a page or screen. It shows which content and controls go where, deliberately without colors, fonts or images.
Imagine a small carpentry business that wants a new website. At the first meeting, the design agency presents a polished draft right away, complete with photos, wood tones and a stylish typeface. The next hour is spent debating the exact shade of brown in the background. Nobody asks whether customers can quickly find the phone number and the services on offer.
A wireframe would have changed that conversation. It shows only boxes, lines and placeholders, which pulls everyone’s attention to what needs settling first: what goes where, and how do people get to the next step?
Explained simply
A wireframe is the floor plan of a page or app screen. Just as an architect’s plan shows where the kitchen, bathroom and doors go before anyone talks about tiles, a wireframe shows where navigation, headings, text, images and buttons belong. It deliberately leaves out colors, fonts and photos. Images are often just a box with a cross through it.
The name refers to a frame made of wire: a skeleton that shows shape and structure but has no surface yet. A wireframe captures the structure that was defined earlier in the information architecture. If you want to know how to organize content before it ends up in a wireframe, read An Introduction to Information Architecture.
Wireframe, mockup, prototype: what’s the difference?
These three terms get mixed up a lot. A wireframe shows structure. A mockup shows appearance, with real colors, fonts and images, but it’s usually static. A prototype simulates interaction: you can click and try out flows. Link a few wireframes together so they’re clickable, and you’ve got a simple prototype.
Wireframes come in different levels of detail. Low-fidelity wireframes are rough sketches, often on paper or a whiteboard. Mid-fidelity wireframes are usually digital, for example in Figma, using shades of gray to show emphasis and including some real copy. The Nielsen Norman Group points out that classic wireframes are good at showing page layout but poor at showing interactions and changing states in apps. That’s what wireflows are for: wireframes connected by arrows that show which click leads to which screen.
An example
Back to the carpentry business. Before: an attractive draft, lots of talk about colors, and the contact details buried at the bottom of the footer.
After: the team starts with three quick wireframes of the homepage. In version B, the phone number and a “Request a quote” button sit right at the top, with the services below as three boxes. Talking it through with the business owner, it becomes clear right away that a section for past projects is missing. Adding it takes ten minutes. Only then does the team move on to colors and photos, and the visual design builds on a structure that has already been checked.
In practice
- Use real content. Replace “lorem ipsum” early with real headings and button labels. Only then can you tell whether the space and order actually work.
- Sketch several versions. Three rough drafts in half an hour teach you more than one draft you polish for a whole day.
- Ask for the right feedback. Ask about structure and flow, not taste. There’s time for questions about look and feel later.
Related terms
Prototype, Information Architecture, Design System