# Wireframe

A wireframe is a low-fidelity layout of a screen that shows its structure and content priority (what goes where and what matters most) without visual style such as color, imagery, or final typography.

Also called: Wireframing, Low-fidelity mockup, Lo-fi wireframe, Screen layout.

## In short

- A wireframe shows what is on a screen and what matters most, with visual style left out on purpose.
- It sits between a sketch and a mockup on the fidelity scale, and it is cheap enough to throw away.
- Wireframes are best for agreeing structure across many screens before visual design starts.
- When the risk is in how something behaves, skip ahead to a [prototype](https://www.choie.co/glossary/prototype).

## What a wireframe is

A wireframe is a plan for a screen. It uses gray boxes and plain text to show where things go: the navigation, the main content, the actions, and what someone should notice first. Use real copy where you have it, because the words often decide the layout.

What it leaves out is deliberate. Brand colors, photography, and final fonts all wait. Removing them keeps the review on structure, so people discuss whether the price belongs near the top of the page instead of debating a shade of blue.

Wireframes are one of the core tools of [UX design](https://www.choie.co/glossary/ux-design). They usually come after the user flows are agreed and before any visual design starts. In a Choie build, that agreement happens in the first two weeks, which settle flows, hierarchy, what to build first, and what to cut.

## Sketch, wireframe, mockup, prototype

These terms describe fidelity, meaning how close an artifact is to the finished product. Higher fidelity tells you more and costs more to change, so each step is worth taking once the previous one has answered its questions.

**Diagram: Levels of design fidelity.**

From quick to change to close to real:
1. Sketch (Pen and paper, minutes per screen)
2. Wireframe (Structure and priority, no style)
3. Mockup (Final look, but nothing moves)
4. Clickable prototype (Linked screens you can tap through)
5. Coded prototype (Real behavior and real data)

_A wireframe is usually the first level that someone else can review without you in the room explaining it._

| Level | Question it answers | Typical tool |
| --- | --- | --- |
| Sketch | Is this roughly the right idea? | Paper or a whiteboard |
| Wireframe | What goes on each screen, and in what order? | Figma or a whiteboard app |
| Mockup | What will the finished screen look like? | Figma |
| Clickable prototype | Does the flow make sense end to end? | Figma prototyping |
| Coded prototype | Does it work with real data and devices? | Code, often React or a mobile framework |

## When to wireframe

Wireframes earn their keep when the hard part of the problem is structure.

- **Many screens in one flow.** Laying out a long onboarding or a dashboard with several views is faster in boxes than in finished design.
- **Content-heavy pages.** Marketing pages, settings, and long forms, where order and grouping are the main decisions.
- **Getting agreement.** Founders and engineers can comment on a wireframe in minutes, and changes cost almost nothing.
- **Before a visual language exists.** Wireframes let you settle structure while the brand and the [design system](https://www.choie.co/glossary/design-system) are still being decided.

## When to skip straight to a prototype

Some questions a wireframe cannot answer. If the risk is in how something feels or behaves, a static layout tells you little, and the faster path is a prototype of that one interaction.

- **The interaction is the product.** Drag and drop, a camera flow, live collaboration, or anything where timing matters.
- **You already have a design system.** With components ready, a realistic screen costs little more than a wireframe.
- **Real data shapes the screen.** Search results, feeds, and dashboards look very different with real content than with gray boxes.
- **Users need to try it.** People react to a static layout differently from how they use working software.

[AI-assisted development](https://www.choie.co/glossary/ai-assisted-development) has made coded prototypes cheaper and faster to produce, so the gap between a wireframe and something people can use has narrowed. Wireframes are still a good way to think. They are less often the thing you put in front of users. Choie's one-week [coded prototype](https://www.choie.co/services/coded-prototype) goes from structure to working software in the same week: day one names the screens and states of one critical workflow, and days two to four design and code them together, for a fixed $4,900.

## Common mistakes

- **Too much polish too early.** A wireframe with finished visuals invites feedback on style when you wanted feedback on structure.
- **Placeholder text everywhere.** Lorem ipsum hides whether the real content fits and whether the labels make sense.
- **Skipping the states.** Wireframe the empty, loading, and error versions of key screens as well as the full one.
- **Treating wireframes as the spec.** They show structure. Behavior, edge cases, and visual detail still need deciding before the build.

The person at Choie who sketches a wireframe also writes the code, so the structure agreed in it does not have to survive a handoff to another team. [How a project runs](https://www.choie.co/process) shows where that happens week by week.

## Common questions

### What is the difference between a wireframe and a mockup?

A wireframe shows structure and content priority without visual style, and a mockup shows what the finished screen will look like. Wireframes come first, so structure is settled before time goes into visuals.

### What is the difference between a wireframe and a prototype?

A wireframe is a static layout, and a prototype is something people can interact with. Wireframes help you decide what goes on each screen, and prototypes help you test whether the flow works.

### Do I need wireframes for my app?

For anything with several screens or a complex flow, usually yes, though they can be quick. For a single interaction where behavior is the risk, a prototype is often the better first step.

### What tool should I use for wireframes?

Paper is fine for a first pass, and Figma is a common choice when others need to review and comment. The tool matters far less than keeping the wireframe rough enough to change.

Related: [Prototype](https://www.choie.co/glossary/prototype), [User flow](https://www.choie.co/glossary/user-flow), [Information architecture (IA)](https://www.choie.co/glossary/information-architecture), [UX design](https://www.choie.co/glossary/ux-design), [UI design](https://www.choie.co/glossary/ui-design).

HTML: https://www.choie.co/glossary/wireframe