- Wireframe meaning: the blueprint of a page
- Low-fidelity vs high-fidelity wireframes
- Wireframe vs mockup vs prototype
- What to include in a website wireframe
- How to make a wireframe step by step
- Wireframing tools, from paper to software
- Who uses wireframes and why
- Common wireframe mistakes
- Sharing your wireframing process
- Frequently asked questions
A wireframe is a simple visual blueprint of a web page or app screen that shows the layout, content areas and navigation without colours, images or styling. Teams use wireframes early in a project to agree structure and user flow before moving on to mockups, prototypes and building the page.
Before anyone designs the colours or writes a line of code, most websites and apps start life as a wireframe. It's a simple sketch of a page that shows where things go and how people move around, and it's one of the quickest ways to get a team, or a client, to agree on what's being built.
I've put this guide together from how the design tools themselves explain wireframing, mainly Figma and Balsamiq, along with the standard reference definitions. Whether you're planning a new website for your business or starting out in UX design, here's what you need to know.
Wireframe meaning: the blueprint of a page
A website wireframe is a visual guide that represents the skeletal framework of a site. It's also called a page schematic or screen blueprint. It shows the layout, the interface elements and the navigation, and it focuses on what a screen does rather than what it looks like.
Figma describes wireframes as basic blueprints that help teams align on requirements, and Balsamiq calls a wireframe the skeleton of your digital project. Wireframes usually leave out typographic style, colour and graphics on purpose, so people discuss structure and priorities rather than whether they like the shade of blue.
Low-fidelity vs high-fidelity wireframes
Not every wireframe has the same level of detail. Designers call that level fidelity, and there are three broad stages:
- Low fidelity. Rough and quick: boxes, lines and labels, often with placeholder text such as lorem ipsum. Figma says these focus on layout, navigation and information architecture. They're ideal early on, when ideas are still changing.
- Mid fidelity. Figma describes a middle stage that adds notes and content so teams can test user flows and key interactions before visual design begins.
- High fidelity. Closer to the final page, with more realistic content and accurate spacing. Figma notes that high-fidelity wireframes look like early product mockups, but they still lack the functionality of a prototype.
A useful tip from Figma: if stakeholders keep commenting on looks rather than structure, that might be a sign you should lower the fidelity.
Wireframe vs mockup vs prototype
These three get mixed up all the time. Balsamiq explains that wireframes focus on structure and functionality, while mockups show what the final design will look like, and prototypes are realistic, interactive versions of the final product.
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Purpose | Agree structure and layout | Show the final look | Test how it works |
| Detail | Low, usually greyscale | High, with colours, fonts and images | High, often with real content |
| Interactive? | Usually not | No, it's static | Yes, you can click through |
| When | First | After the wireframe's agreed | Before building, for testing |
| Quick to change? | Very | Less so | Slowest |
Balsamiq's advice is that wireframes should always come before prototypes, because they're much faster to change.
What to include in a website wireframe
Balsamiq lists core structural elements such as headers, calls to action, search bars and menus, plus content areas and navigation. Figma's checklist adds that a finished wireframe should show:
Want AI doing the heavy lifting in your marketing?
I build the systems that handle the boring 80 percent, so you get your week back. Done properly, with the human kept in.
- Which screens are essential to what users need.
- How users flow through the site, including the route to sign up or buy.
- Navigation and usability considerations.
- The goal of each screen.
- Key interface elements, content and interactive features.
- How components combine into reusable page templates.
How to make a wireframe step by step
- Define the goals. Work out what users are trying to do on each screen and what you want them to do next.
- Pick your screen sizes. Figma suggests matching frames to your audience, such as mobile, tablet and desktop.
- Sketch the layout. Use boxes, lines and simple shapes. Balsamiq says it's okay to start rough.
- Map the navigation. Plan how people move from one screen to the next.
- Add the key elements. Place headers, calls to action and menus where users will look for them, and use real headlines where you can rather than placeholder text.
- Keep it simple and consistent. Stick to greyscale and a limited set of fonts, and reuse the same components so they're easy to understand and build.
- Test and refine. Share early, ask people to try tasks without instructions and adjust based on what you learn.
Wireframing tools, from paper to software
- Pen and paper: Balsamiq calls it great for quick sketches, and it's still how many designers start.
- Whiteboards: handy for group sessions where everyone's sketching ideas together.
- Balsamiq: dedicated wireframing software with a deliberately sketchy, low-fidelity look.
- Figma: a design tool where wireframes can be shared, saved and developed into mockups and prototypes.
- Website builders: some teams test layouts using templates and drag-and-drop editors before publishing.
Who uses wireframes and why
A wireframe works as a shared language. Developers use them to understand how a page should work, designers use them to move the interface forward, UX designers map navigation paths with them and business stakeholders review them to check the plan meets their goals. Once a wireframe's agreed, it becomes the brief for the people who build the page; if you're curious who does what at that stage, I've explained the front end and back end of a website.
Common wireframe mistakes
- Adding colours, photos and fonts too early, which pulls feedback towards looks rather than structure.
- Using lorem ipsum everywhere when real headlines would show whether the layout works.
- Wireframing only the desktop version and forgetting how the page works on a phone.
- Treating the wireframe as final. Figma's advice is to stay flexible until developers and other team members are involved.
- Trying to show hover effects or carousels in a static sketch, which wireframes struggle to do. Add a short note instead.
Sharing your wireframing process
Wireframing is a skill that improves with practice, and the best way to learn is to sketch real pages and test them on real people. If you've built a process that works, writing it up can help other designers and the teams they work with.
UX designers with a process worth sharing can find UX publications looking for contributor articles.
Frequently asked questions
Is a wireframe the same as a mockup?
No. A wireframe shows structure and layout, usually in greyscale, while a mockup shows what the final design will look like, with colours, fonts and images.
Do wireframes need to be digital?
No. Pen and paper or a whiteboard work well for early sketches. Digital tools make it easier to share, save and develop the design later.
How detailed should a wireframe be?
Start with low fidelity to agree the layout, then add detail as decisions are made. If people focus on looks, you've probably added too much too soon.
Who makes wireframes?
Usually UX or product designers, but developers, business analysts and business owners can all sketch them. They're meant to be quick and easy to change.
What comes after a wireframe?
Typically a mockup to show the visual design, then a prototype to test how it works before the page is built.
