What is a wireframe in UX design?

A wireframe is a low-detail layout of a screen or page that shows the structure, content hierarchy, and key interactions without any visual design. It focuses on what goes where and how the user moves through the interface, not how it looks. Wireframes are typically produced in greyscale with placeholder text and simple shapes.

What is the difference between a wireframe and a mockup?

A wireframe shows structure without visual design — layout, hierarchy, and content placement in greyscale. A mockup applies visual design to that structure: colour, typography, imagery, and brand elements. Wireframes come first, mockups come after the structure has been validated. Jumping to mockups before wireframing often means redesigning expensive visual work when the layout turns out to be wrong.

What is the difference between a wireframe and a prototype?

A wireframe is static — it shows a single screen or state. A prototype is interactive — it simulates the flow between screens so a user can navigate through a task. You typically wireframe to get the layout right, then connect those wireframes into a prototype for usability testing. Both can be lo-fi or hi-fi depending on what you need to learn.

Do UX designers need to know how to wireframe?

Yes. Wireframing is a core UX skill, not an optional specialisation. It is the point in the process where research insights and user needs get translated into a concrete interface structure. A UX designer who can not wireframe well is skipping the most important decision-making stage and going straight to visual polish — which produces work that looks good but does not work.

What tools do UX designers use for wireframing?

Figma is the standard tool for both lo-fi and hi-fi wireframes — it handles the full range from rough grey-box sketches to polished interactive layouts. Balsamiq is popular for deliberately rough lo-fi wireframes because it produces sketchy visuals that signal 'this is not final'. Many designers start on paper before moving to a digital tool. The right tool is whichever one gets out of the way fastest.

What Is a Wireframe? A Practical Guide for UX Designers

A wireframe is a low-detail layout of a screen -- the structural skeleton of a design, showing what content goes where and how users navigate, without any visual design. It is one of the most useful things a UX designer produces, and also one of the most misunderstood, often confused with mockups, prototypes, or finished designs.

This guide explains what wireframes actually are, where they fit in the UX design process, and how to create one that does its job. If you are learning UX design or preparing for your first role, getting comfortable with wireframing early is one of the best things you can do.

Want to practise wireframing on a real client project? UX Academy (myuxacademy.com)'s Beginner UX Design course teaches wireframing hands-on with working professionals. Cohort 1 starts 5 Sep 2026 -- reserve your place with a £99 deposit.

What a wireframe is

A wireframe is a low-detail layout of a screen or page. It shows:

What content exists on the screen (headings, body text, images, buttons, form fields)
Where that content sits relative to everything else
How a user navigates through the interface (which buttons go where, what links to what)

What it does not show: colour, typography, imagery, brand style, or anything else that belongs to visual design. Wireframes are typically produced in greyscale with placeholder text and simple boxes in place of images.

The purpose is to make layout and structural decisions fast, before anyone has invested time in visual design. A wireframe that turns out to be wrong costs almost nothing to fix. A finished visual design that turns out to be structurally wrong is expensive.

Lo-fi vs hi-fi wireframes

Not all wireframes are the same level of detail. The right level depends on what question you are trying to answer.

Lo-fi wireframes

Lo-fi wireframes are rough. Boxes stand in for images. Headings are labelled "H1", "H2". Text areas say "body copy goes here". The visual roughness is deliberate — it signals clearly to everyone reviewing the work that this is a structural conversation, not a design review.

Lo-fi wireframes are right when:

The overall layout and information hierarchy is still being worked out
You want stakeholder input on structure before committing to design
You are moving quickly through multiple layout options
You want usability test participants to give honest feedback rather than commenting on visual style

Hi-fi wireframes

Hi-fi wireframes are more detailed. They use real copy (or near-final copy), correct spacing, real component sizes, and occasionally simple greyscale styling. They look closer to a finished design but still carry no colour or brand treatment.

Hi-fi wireframes are right when:

The structure is settled and you are testing specific interactions or content decisions
You are handing off to a UI designer who needs accurate layout specs
The team needs to communicate detailed interaction behaviour to engineering before visual design is finalised

Most UX designers start lo-fi and move to hi-fi as decisions get made. Jumping straight to hi-fi before the structure is clear wastes time.

Where wireframes fit in the design process

Wireframing sits between synthesis and prototyping. By the time you are wireframing, you should have:

Done research to understand user needs (interviews, observations, surveys)
Defined the problem you are solving and who you are solving it for (often documented as user personas)
Done ideation to generate layout directions

What wireframing does is take the best ideas from ideation and give them enough structure to be evaluated and tested. Once wireframes are validated, they get connected into a prototype for usability testing.

Skipping wireframing and going straight to visual design is one of the most common mistakes in UX. It produces work that gets redesigned after testing because the structure was never validated — only the appearance was.

What to include in a wireframe

A wireframe should contain enough information to answer structural questions and no more. The practical checklist:

Content and hierarchy

All content elements that will appear on the screen (do not leave things out "until later")
A clear visual hierarchy showing which content is primary, secondary, and tertiary
Real headings where the wording matters for the user's understanding; placeholders everywhere else

Navigation and interaction

All buttons, links, and interactive elements — labelled with what they do
Clear indication of what happens when a user takes an action (which screen follows)
Any states that matter: empty states, error states, loaded vs loading

Annotations

Notes explaining decisions that are not obvious from the layout alone
Interaction descriptions for anything more complex than a simple link
Questions or open decisions flagged for discussion

What you leave out:

Colour, typography choices, iconography, imagery
Brand styling of any kind
Anything that could distract reviewers into debating aesthetics instead of structure

How to create a wireframe

Start with the user goal. Before you touch a tool, be clear on what the user is trying to accomplish on this screen and what they need to achieve it. Everything in the wireframe exists to serve that goal.

Sketch on paper first. Even two minutes with a pen generates more layout options than opening Figma. Paper forces quick decisions. Figma invites fiddling. Get four or five rough layout ideas down before committing to one.

Open in Figma and build grey boxes. Set up an artboard at the right dimensions for your target device. Place rectangles for the major content areas. Do not touch the component library or styles yet — stay in grey boxes until the structure is right.

Add real headings and placeholder text. Write the actual heading copy where it matters. Use "Lorem ipsum" or a content label everywhere else. If you do not know what the heading says, you do not know what the section is for.

Add interaction labels. Every button and link should be labelled with its destination or action. If you find yourself labelling a button "Button", the design is not clear enough yet.

Annotate anything non-obvious. A sticky note in Figma is faster than a meeting. Write annotations as you go rather than trying to reconstruct your thinking later.

Share and discuss before moving forward. Wireframes exist to be challenged. A wireframe that no one has commented on has not done its job. Share it with a colleague, a stakeholder, or a potential user before treating it as settled.

Wireframes vs mockups vs prototypes

These three terms are often used interchangeably. They are not the same thing.

| | What it is | What it answers | |---|---|---| | Wireframe | Static layout, no visual design | Is the structure right? | | Mockup | Visual design applied to the structure | Does it look right? | | Prototype | Interactive flow connecting multiple screens | Does it work? |

The three are additive — you typically produce them in this order. The common mistake is jumping to mockups or prototypes before the wireframe has been validated, which means the visual design or interaction work gets thrown away when the structure turns out to be wrong.

Tools for wireframing

Figma is the industry standard. It handles lo-fi wireframes (grey boxes, basic shapes) through to hi-fi wireframes with the same tool, which means no file conversion when you move between levels of fidelity. Most UX teams use Figma from wireframe through to final handoff. If you are learning UX design, learning Figma is not optional. See our beginner's guide to Figma for where to start.

Balsamiq produces deliberately sketchy-looking wireframes. The rough visual style is a feature, not a limitation — it makes clear to everyone viewing the work that structure, not visual design, is what's being discussed. Useful when stakeholders have a habit of derailing wireframe reviews by commenting on aesthetics.

Paper and pen still produces the fastest first iteration of any layout. Many experienced UX designers sketch on paper every day, even after years of Figma use. Paper is right for generating options; Figma is right for refining them.

Common wireframing mistakes

Making it too detailed too soon. If your first wireframe looks like a finished screen, you have skipped the exploratory stage where the best structural ideas tend to emerge. Start rougher.

Using placeholder text where real copy matters. "Lorem ipsum" in a call-to-action button or a key heading is useless for evaluating whether the design communicates the right thing. Use real copy anywhere the wording affects the user's decision.

Wireframing without researching first. A wireframe made without user research is a guess at what users need. It might be a good guess. Research is how you find out.

Treating the wireframe as done before it has been challenged. Wireframes are for discussion. If you are showing a wireframe to a stakeholder or colleague for the first time in a full review meeting, you have missed the earlier feedback loop that would have caught structural problems cheaply.

Skipping annotations. Every non-obvious decision in a wireframe should be annotated. Three weeks later, neither you nor anyone else will remember why the navigation was structured that way.

Wireframing as a career skill

In a UX job interview or portfolio review, your wireframes are evidence of how you think. A hiring manager looking at your case study is not just checking that you can use Figma — they are looking at whether you made good structural decisions, whether you iterated based on feedback, and whether you can explain the reasoning behind your layout choices.

Wireframes produced for tutorial briefs where the "right answer" was provided are much less useful for this than wireframes produced for a real problem where you had to make real decisions under real constraints.

On the Beginner UX Design course at UX Academy, you wireframe as part of a real client brief — working through discovery, research, and synthesis first, so your wireframes are grounded in what users actually need rather than what seemed like a reasonable guess. If you want to see what live UX training feels like before committing, the free UX masterclass at UX Academy (myuxacademy.com) is the place to start. Lead instructor Natalia Veretenyk and her team run the process with you, drawing on professional experience at organisations including Adobe, Google, and Canva. If you are switching careers into UX design, that supervised practice on a real project is what builds the confidence to wireframe well on your own.