What is a wireframe in UX?

What a wireframe shows, and what it leaves out

A wireframe answers questions about layout and priority. Where does the main call to action go? What sits above the fold? How is the navigation arranged? What content appears on the page, and in what order?

It purposely leaves out the visual layer. Typically you will see grayscale, simple shapes for images and generic type. Many wireframes use real headings and button labels, since actual words reveal layout problems that "Lorem ipsum" hides.

That restraint is the point. When a screen looks unfinished, people comment on structure and flow instead of arguing about whether the green is too bright.

Paper, digital and everything between

Wireframes range from napkin sketches to detailed digital files. Early on, hand-drawn versions are usually the best bet. You can produce a dozen in an hour, and nobody is precious about them.

Later, you might redraw the promising ones digitally in a design tool, link them together and make a clickable version to test a flow. Detailed wireframes with annotations help developers see how things should behave: what happens on hover, what the error states look like, which content is dynamic.

Where you land on this scale depends on the question you need to answer and who is looking, a topic closely tied to fidelity.

How to make a useful one

Good wireframing is more about decisions than drawing.

• Start with the user's goal for the screen and the content that serves it.
• Rank the content by importance, then let the layout reflect that ranking.
• Sketch several rough options before refining one.
• Use real or realistic content wherever you can.
• Annotate the non-obvious parts: states, rules, and links to other screens.
• Test the wireframe with a few people before you invest in visual design.

Resist polishing. If you find yourself nudging boxes by one pixel, you have probably gone past the useful stage.

Wireframes versus mockups and prototypes

These three get mixed up constantly. A wireframe shows structure. A mockup adds visual design, such as color, type and imagery, so it looks like the finished screen. A prototype adds interaction, so you can click through it.

The lines are blurry in practice, and a clickable wireframe is a perfectly respectable prototype. What matters is knowing which question you are asking at the moment.

Mistakes and when to skip them

A frequent mistake is treating the wireframe as the design. It is a thinking tool, and the result will change as research and visual design come in.

Another is making them in isolation, without input from developers who can flag what is expensive, or from users who will tell you what they expect.

You can skip formal wireframes for tiny changes, or when you work in a tight loop with a design system and can build directly in the tool. For anything involving new layouts or flows, a quick sketch is still worth the five minutes.