What Is a Wireframe? Definition, Types, Examples and How to Make One9 min read

A wireframe is a simple, low-detail blueprint of a screen or page. It shows the layout, content hierarchy, navigation and key interface elements before any colour, imagery or brand styling is added. Designers, product managers and developers use wireframes to agree on structure early, when changes are cheap. A prototype comes later: it is a clickable or working version that people can test.

Last updated: November 1, 2026

This guide explains what a wireframe is, what it includes, the three fidelity levels, how wireframes differ from mockups and prototypes, and how to make one step by step, by hand or with AI. If you only want to compare software, jump to our guide to the best wireframing tools and software.

What Is a Wireframe?

A wireframe is the skeleton of a digital product. It answers three questions for one screen: what goes on it, where it goes, and what happens when someone uses it. Wireframes are deliberately plain. They use boxes, lines and placeholder text so that the team argues about structure and user needs instead of fonts and colours.

Wireframing is useful because it:

• puts your proposed solution on the table early, so the team has something concrete to react to.
• is the fastest way to get feedback from collaborators and developers while the idea is still cheap to change.
• lets you compare layouts and flows before you invest in visual design or code.
• uses placeholders for imagery but real or draft copy, so you can see how people will move through the page.
• can be done on paper, on a whiteboard or in wireframing software.

A series of hand-drawn wireframes (source)

What Does a Wireframe Include?

Most wireframes, whatever the tool, contain the same building blocks:

• Page layout: where the header, main content, sidebars and footer sit.
• Content hierarchy: what is most important, from the headline to supporting text and secondary links.
• Navigation: menus, tabs, breadcrumbs and links that move people around.
• UI components: buttons, forms, cards, lists and other interface elements.
• Content placeholders: boxes for images and video, plus draft copy.
• Annotations: short notes that explain behaviour, such as “the button is disabled until all fields are filled”.

Types of Wireframes: Low, Mid and High Fidelity

Fidelity describes how much detail a wireframe carries. Teams usually move from low to high as the idea firms up.

A high-fidelity wireframe starts to look like a mockup. Once you make it clickable, it becomes a prototype.

Wireframe Example: A Product Page

Here is how a low-fidelity wireframe of an online shop product page might read, from top to bottom:

1. A header with the logo on the left, a search box in the middle and cart and account icons on the right.
2. A large image box on the left with four small thumbnails under it.
3. On the right: product name, price, a size selector, a quantity field and one primary “Add to cart” button, with a note that the button stays disabled until a size is chosen.
4. Below, tabs for Description, Reviews and Shipping.
5. A row of four card boxes labelled “You may also like”, then the footer.

Nothing here says what colour the button is or which font to use. That is intentional: the page can be tested on structure and priority first.

How to Make a Wireframe in 6 Steps

1. Define the goal. Write one sentence: who is this screen for and what should they be able to do?
2. Collect the content. List the headings, copy, images and actions the screen must have.
3. Sketch quickly. Draw several rough layouts on paper or a whiteboard and pick the strongest.
4. Build it digitally. Recreate the winner in a wireframing tool with simple shapes and real labels.
5. Connect the screens. Draw how a person gets from one screen to the next, and annotate the behaviour.
6. Review and test. Ask teammates and a few users to walk through it, then revise.

For the thinking that sits before the sketch, see our user experience basics guide.

Make a Wireframe with AI

Describe a screen or flow, and Anima will turn it into an editable wireframe and a working prototype.

With AI you can skip the blank page. Describe the screen in plain language, get a first wireframe, then refine it by chat. Anima Playground turns the result into a working prototype in the browser. If you design in Figma, Buddy generates wireframes directly on the canvas. We compare the options in the best wireframing tools and software.

What Is a Prototype?

A prototype applies a design system to the structure your wireframes established. Early prototypes can look a lot like wireframes, while late-stage ones are high fidelity and meant to look, feel and ideally function like the real thing. Prototyping:

• produces navigable artifacts that can be tested with users, presented to stakeholders and handed off to developers.
• adds visual assets, colour and media to the wireframe structure.
• relies on user feedback to find friction early, so you can iterate until the flow feels natural.

A high-fidelity prototype (source)

Wireframe vs Mockup vs Prototype

People mix these terms up. The simplest way to separate them is by what each one is for:

Wireframes and Prototypes as Blueprints and Buildings

Think of your product as a building. Your wireframes are the blueprints. You decide the purpose, draw the rooms and mark how people move through them. If a colleague points out you forgot the bathroom, you redraw the blueprint, which costs minutes.

Your early prototype is the stripped-down building: walls, floors, door frames. People can walk through it and tell you what feels wrong. Later prototypes add paint, furniture and fixtures. You keep testing until a visitor can arrive, find what they need and leave without friction. That is a user-centered design process that started on paper and ended with a product people can use.

For more on how this fits the wider process, see UX vs UI.

Can You Skip Wireframes?

Sometimes. A solo designer at a startup or a team with a tight deadline may go straight from a sketch to a prototype, and with AI tools the gap between the two keeps shrinking. What you should not skip is the thinking a wireframe forces: who the screen is for, what they need to do and what comes first. Understand the problem before you make it pretty.

The Short Version

Wireframes are low-fidelity outlines of layout and essential components that show how a product will solve a user problem. Prototypes add design, interaction and testing so you can learn whether the solution is clear and enjoyable to use. Start rough, test early and add detail only when the structure is right.

Wireframe FAQ

What is a wireframe in simple terms?

A wireframe is a basic, black-and-white sketch of a screen or page that shows where things go, such as the menu, headline, images and buttons, without colours or final design.

What is the purpose of a wireframe?

Its purpose is to agree on structure, content priority and user flow early, when changes are cheap, and to get feedback before design and development work begins.

What is the difference between a wireframe and a prototype?

A wireframe is a static, low-detail layout. A prototype is interactive and usually more detailed, so people can click through it or use it and you can test how it works.

What is the difference between a wireframe and a mockup?

A wireframe shows structure and content placement. A mockup is a static, high-fidelity picture of the visual design, with colours, type and imagery.

What are the 3 types of wireframes?

Low-fidelity, mid-fidelity and high-fidelity. Low-fidelity wireframes are rough sketches, mid-fidelity ones add real content and annotations, and high-fidelity ones are close to the final look.

What tools do you use to make a wireframe?

You can start on paper or a whiteboard. Digital options include Figma, Balsamiq, Whimsical and Miro, plus AI tools such as Anima Playground, Buddy, UX Pilot and Google Stitch. See our comparison of wireframing tools and software for details.

Can AI create a wireframe?

Yes. AI tools can generate a wireframe from a text prompt, sketch or screenshot. You still need to check the result against your users and goals, then refine it.