What is a wireframe?
Choose an answer, then check it.
UX/UI Design · Foundations
Wireframes
On this page 9 sections
In 30 seconds
A wireframe A low-detail layout of a screen that shows where content and controls go, with visual style deliberately left out. Full entry → is a low-detail layout of a screen that shows structure The skeleton of a screen: what is on it, where each element sits, and how the parts relate to one another. Full entry →, not style: where the content and controls go, what is most important, and how much space each part takes. Colors, fonts, and images are deliberately left out, because the point is to decide the skeleton before anyone invests in the look. Wireframes are cheap on purpose — quick to draw, easy to change, and cheap to throw away — so teams settle structure questions before any code exists.
Why this matters
Wireframes are where a screen's big questions get answered before they become expensive. Deciding where the search box goes costs minutes on paper and hours in code. Wireframes give everyone — designers, developers, product managers — a shared picture of the skeleton to react to, which is why they are the cheapest honest way to test whether a screen idea holds together. Knowing what a wireframe is, and what it deliberately leaves out, also lets you tell structure problems from style problems, and it prepares you for the sibling topics that build on this one: prototypes, visual hierarchy The ordering of a screen's parts by importance, so the most important content stands out first. Full entry →, and layout.
The college version
A working definition: structure, not style
A wireframe is a low-detail layout of a screen that shows structure, not style. The Interaction Design Foundation gives the working definition: wireframes are basic visual representations of a user interface that outline the structure and layout of a webpage or app, and they do not focus on design details like colors, fonts, or imagery. The word evokes the picture: a skeleton of boxes, lines, and labels standing in for headlines, images, buttons, and forms. What a wireframe promises is not how a screen will look but how it will be put together — what is on it, where each part sits, and how the parts relate. Everything visual that would make a screen beautiful is deliberately deferred.
What a wireframe shows — and what it hides
A wireframe names three kinds of structure decisions. Placement: where the content and controls go — the search box at the top, the product image on the left, the checkout button at the bottom. Hierarchy: what matters most, shown by size and position, so the headline reads before the footer. spacing The empty gaps between a screen's elements that shape how grouped or separated they feel. Full entry →: the gaps between elements that tell the eye what belongs together. Nielsen Norman Group describes the same object from the practitioner's side: wireframes visualize a user path or flow, as well as page layouts and information hierarchy. What a wireframe hides matters just as much. There are no final colors, fonts, or photographs. Style is absent on purpose: the question a wireframe answers — does this skeleton work? — differs from the one a styled screen answers — does this look right?
Wireframes vs. prototypes: static structure vs. interactive behavior
A prototype An interactive model of a product used to test how people behave with it; the wireframe's interactive sibling. Full entry → is a screen's behavior; a wireframe is its bones. The Interaction Design Foundation states the distinction plainly: wireframing is distinct from prototyping in the sense that prototyping deals more with testing interactivity. A prototype responds — a click opens a screen, a submitted form shows a confirmation — while a wireframe sits still on the page, asking the reader to imagine the movement. Nielsen Norman Group makes the same point from the other end: prototypes range from static to interactive, and an interactive prototype requires the designer to define a response for each possible user action. Prototypes are sibling topics here, with their own lessons on low and high fidelity; this lesson only needs the boundary: wireframes are the static structure, and prototypes are the interactive behavior that structure will eventually support.
Wireframes vs. mockups: structure vs. visual design
The other sibling that gets confused with wireframes is the mockup A visual representation of a screen that includes color, text, and imagery, showing how it will look. Full entry →. The Interaction Design Foundation draws the line by what each artifact carries: wireframes are simple visual representations that focus on the layout of a product and do not include color, images, or detailed design elements, while mockups include color, text, shapes, and other visual elements, and designers use them to showcase a product's appearance and functionality. In short: the wireframe decides where the button goes; the mockup decides what the button looks like. Teams move from one to the other as decisions mature — skeleton first, then skin. If a wireframe is a floor plan, a mockup is the color rendering of the same room.
Why wireframes come first
Structure before style is an argument about cost. A structure decision — where the checkout button goes, whether the search box deserves the top of the screen — affects every screen that follows and every line of code that will be written. A style decision — blue or green, serif or sans — is cheap to change later. The Interaction Design Foundation makes the economic case: resolving issues at the wireframe stage avoids expensive changes later, particularly during development. Nielsen Norman Group states the same math more bluntly: ripping up code is very expensive; ripping up a prototype is not. The reverse order fails quietly: a screen that is beautifully styled but badly structured wastes the style, because no amount of polish fixes a checkout that sits where no thumb can reach.
The levels: from sketch to annotation
Wireframes are a ladder of increasing detail, and the level should match the question being asked. A low-fidelity Rough and simplified, focused on structure rather than polish, like a quick hand sketch. Full entry → sketch is a quick, messy drawing: the Interaction Design Foundation describes low-fidelity wireframes as rough, simplified layouts that use grayscale placeholders for images and text, and Nielsen Norman Group adds that messiness is completely fine and expected at this level. A clean wireframe is the same skeleton tidied into neat boxes and labels for people outside the team to read. A high-fidelity Detailed and close to the final design, with accurate sizes and real content in place. Full entry → wireframe adds accurate sizes, real images, and sometimes limited interactivity. An annotated wireframe carries notes explaining how a part behaves or why the design chose it — for example, 'this button is small because it is a secondary action.' Each rung costs a little more and communicates a little more, so teams climb only as high as the question requires.
The honest framing: cheap on purpose
There is a reason wireframes look unfinished: they are supposed to. Wireframes are cheap on purpose — quick to draw, easy to change, and cheap to throw away — because their job is to invite change while change is still free. A wireframe that looked finished would discourage the very feedback it exists to collect; people hesitate to red-line a polished drawing, but they will happily scribble on a gray box. The honest framing of this lesson: a wireframe is not a delivery, it is a question. The moment a team stops treating it as a question — defending the skeleton as if it were the final design — the artifact has outlived its purpose, and the next rung, the prototype, is waiting.
Eli explains
The same idea, in plain words
Explain it like I’m 10
A wireframe is the skeleton of a screen, drawn before the screen gets any style. It is a simple, low-detail picture of where things go: the search box at the top, the product image on the left, the button in the corner, the headline above the paragraph. No colors, no pretty fonts, no photos — just boxes, lines, and labels showing the structure. Teams draw wireframes early because a skeleton is quick to sketch, quick to change, and cheap to throw away, while a finished screen is none of those things.
Picture it like this
Think of a house. A wireframe is the floor plan — the rooms, their sizes, the doors between them, where the kitchen sits. A mockup is the architect's colorful rendering, showing paint colors, furniture, and light. A prototype is a model you can walk through. Nobody argues about wallpaper before the rooms are in the right places; the plan comes first, because moving a wall costs far more than repainting it. Wireframes are the floor-plan stage of a screen.
Where the picture stops working
The house analogy oversimplifies in one way: a floor plan is drawn once and built once, but a screen's skeleton gets redrawn many times as the team learns. That constant redrawing is the method working, not a failure of planning — wireframes are meant to be redrawn cheaply and often, and no builder would tolerate the same revisions a design team welcomes.
Worked example
Northwind Cycles sells refurbished bikes from a single city shop and wants an online checkout. The team starts with wireframes, not screens. On paper they sketch the cart: a line for the bike name, a box for quantity, a bold line for the price, a rectangle labeled 'Checkout' at the bottom. The first sketch puts the checkout button top-right; a teammate points out that on a phone a thumb reaches the bottom more easily, so they move it. Later, the annotated wireframe adds a note: 'If the cart is empty, show a friendly message and a link back to the catalog.' All of this happened before a single line of code, and the change that cost two minutes of erasing would have cost a developer a morning.
Key takeaway
A wireframe is a screen's skeleton: a low-detail layout showing where content and controls go, what matters most, and how the parts are spaced — with visual style deliberately left out. It is cheap on purpose, so structure questions get settled before anyone spends time on looks or code.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
Which of the following does a wireframe deliberately leave out?
Choose an answer, then check it.
A team shows stakeholders a gray page of boxes and lines, with a note attached saying the confirmation message will appear in the top box. A stakeholder asks, 'Where are the colors and photos?' Which response best applies this lesson's ideas?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define a wireframe as a low-detail layout of a screen that shows structure, not style, attributing the working definition to the Interaction Design Foundation.
- Identify what wireframes show — the placement of content and controls, hierarchy, and spacing — and what they deliberately leave out, such as colors, fonts, and images.
- Distinguish wireframes from prototypes (static structure versus interactive behavior) and from mockups (structure versus visual design).
- Explain the argument for wireframing before styling: structure decisions come first because they are the most expensive to change later.
- Name the levels of wireframes, from low-fidelity sketches to annotated wireframes, and what each level is for.
Common mistakes
Treating a wireframe as a visual design.
Colors, fonts, and images are deliberately absent from a wireframe. The Interaction Design Foundation defines wireframes as basic visual representations that outline structure and layout without focusing on design details. If a team is debating brand colors, they have moved past the wireframe stage.
Calling a wireframe a prototype.
A wireframe is static structure; a prototype is interactive behavior. The Interaction Design Foundation states that wireframing is distinct from prototyping because prototyping deals more with testing interactivity, and Nielsen Norman Group notes that interactive prototypes must define a response for each user action. Prototypes are their own sibling topics.
Skipping wireframes to save time.
Structure questions answered in code are the expensive ones. The Interaction Design Foundation notes that resolving issues at the wireframe stage avoids expensive changes later, particularly during development — and Nielsen Norman Group adds that ripping up code is very expensive while ripping up a prototype is not.
Polishing the first wireframe.
Messiness is a feature, not a flaw: Nielsen Norman Group says messy is completely fine and expected, especially for low-fidelity wireframes, because the point is to invite feedback while change is still free. A wireframe is a question, not a delivery.
Easily confused
Wireframe vs. Prototype
A wireframe is static structure: a low-detail layout of what goes on a screen and where. A prototype is interactive behavior: a model that responds to clicks and taps so teams can test how people use it. Prototypes are sibling topics; this lesson only needs the boundary.
Wireframe vs. Mockup
A wireframe shows structure — placement, hierarchy, and spacing — with no color, images, or detailed design. A mockup shows visual design — color, text, shapes, and imagery — to showcase how the screen will look. Skeleton first, then skin.
Low-fidelity wireframe vs. High-fidelity wireframe
A low-fidelity wireframe is a rough, quick sketch using grayscale placeholders to focus on structure. A high-fidelity wireframe uses accurate sizes and real images and may include limited interactivity, approaching the final design.
Key vocabulary
- wireframe
- A low-detail layout of a screen that shows where content and controls go, with visual style deliberately left out.
- structure
- The skeleton of a screen: what is on it, where each element sits, and how the parts relate to one another.
- hierarchy
- The ordering of a screen's parts by importance, so the most important content stands out first.
- spacing
- The empty gaps between a screen's elements that shape how grouped or separated they feel.
- placeholder
- A stand-in marking where real content will go, such as a gray box with an X for an image.
- annotation
- A note on a wireframe that explains how a part behaves or why the design chose it.
- mockup
- A visual representation of a screen that includes color, text, and imagery, showing how it will look.
- prototype
- An interactive model of a product used to test how people behave with it; the wireframe's interactive sibling.
- low-fidelity
- Rough and simplified, focused on structure rather than polish, like a quick hand sketch.
- high-fidelity
- Detailed and close to the final design, with accurate sizes and real content in place.
Sources & references
- How to Draw a Wireframe (Even if You Can't Draw) — Nielsen Norman Group
- What is Wireframing? — Interaction Design Foundation
- What are Mockups? — Interaction Design Foundation
- UX Prototypes: Low Fidelity vs. High Fidelity — Nielsen Norman Group
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-21
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.