By Quick answer: How do I make a wireframe for an app?
- 0–5 min — choose one flow and list its screens.
- 5–15 min — sketch each screen on paper: boxes, labels, buttons.
- 15–25 min — rebuild the best version in Figma or another free tool.
- 25–30 min — link screens into a clickable prototype and share it.
Key takeaways
- A wireframe decides structure and priority, not style. Stay grey on purpose.
- Design one complete flow before ten disconnected screens.
- Use real content, not lorem ipsum — real words reveal real layout problems.
- Five quick user tests on a rough prototype catch most usability issues early.
- Mobile first: a small screen forces you to choose what matters.
A wireframe is the cheapest place to make a mistake. Moving a box on paper costs nothing; moving a feature after it is built costs a sprint. The trick is to stay rough on purpose — grey boxes, real words, no colour — so that everyone talks about what the screen does rather than how it looks. Here is how to make one in half an hour.
Wireframe, mockup or prototype?
| Shows | Fidelity | Best for | |
|---|---|---|---|
| Wireframe | Structure, content, actions | Low — grey boxes and labels | Deciding what goes where |
| Mockup | Final look: colours, type, images | High, static | Visual design approval |
| Prototype | Interaction between screens | Low or high, clickable | Testing flows with users |
Minutes 0–5: pick one flow
Don't start with "the app". Start with one complete journey — the job your app exists to do. For a salon booking app:
- Open app → see nearby salons
- Pick a salon → see services and prices
- Choose service and time slot
- Confirm and pay
- See confirmation and reminder
That is five screens. Write them as a list before you draw anything.
Minutes 5–15: sketch on paper
Draw a phone-shaped rectangle for each screen. Then, for each one:
- Write the one thing this screen must help the user do
- Place the primary action where a thumb reaches it — usually lower on the screen
- Use real content: actual service names, prices, times — not "lorem ipsum"
- Draw images as boxes with an X, text as lines, buttons as labelled rectangles
- Sketch two or three versions of the hardest screen, then pick the best
Designing for the small screen first forces priorities — Luke Wroblewski's mobile-first principle3.
Minutes 15–25: rebuild it digitally
Open Figma (free plan) or the open-source Penpot4:
- Create a frame at a phone size such as 390×844.
- Use grey rectangles for images, simple text for content, outlined boxes for buttons.
- Keep one font and two greys. Resist colour.
- Duplicate the frame for each screen in your flow.
- Name every frame ("03 – Choose slot") so the flow reads clearly.
Figma's own wireframing guide covers the same low-fidelity approach2.
Minutes 25–30: make it clickable and test
Use the prototype mode to link each primary button to the next screen. Share the link. Then watch three to five people try the task without help. Nielsen Norman Group's research found that testing with five users reveals most of the usability problems in a design, and that several small rounds of testing beat one large one1.
Common mistakes
Styling too early
Colour and polish invite opinions on taste instead of structure.
Disconnected screens
Ten beautiful screens with no flow between them teach you nothing.
Placeholder text
Lorem ipsum hides the fact that your real labels are long or confusing.
Skipping empty and error states
What does the screen show with no bookings, no internet or a failed payment?
Once the flow tests well, move to visual design — our Figma app design tutorial is the next step — and attach the wireframes to your requirements document.
Key terms, defined
Wireframe — a low-fidelity layout showing structure and content. Mockup — a static, visually designed screen. Prototype — a clickable or interactive model of the app. User flow — the sequence of screens to complete a task. Low fidelity — rough and unstyled. Empty state — what a screen shows when there is no data yet.
Frequently asked questions
What is a wireframe?
A wireframe is a simple, usually grey-scale layout of a screen showing where content, navigation and actions go, without colours, images or final styling. It is the blueprint of an interface.
What is the difference between a wireframe, mockup and prototype?
A wireframe shows structure. A mockup adds visual design — colours, typography, imagery — so it looks real. A prototype is clickable or interactive, letting people move through screens. Many teams go from wireframe to clickable wireframe prototype before visual design.
What is the best free tool for wireframing?
Paper and pen is the fastest start. For digital wireframes, Figma's free plan is the most widely used, and tools like Penpot (open source), Excalidraw and Balsamiq's wireframe-style kits also work well.
How detailed should a wireframe be?
Detailed enough to show every piece of content and action and their priority, but not styled. If people start commenting on colours, it's too detailed for this stage.
How many screens should I wireframe for an app?
Start with the single most important flow — often five to eight screens such as onboarding, home, the core task and confirmation. Add other flows once the main one tests well.
Can AI make wireframes?
Yes, several design tools can generate wireframe drafts from a text prompt. They are useful starting points, but you still need to check them against your user flow and test them with real people.
Sources
- Nielsen Norman Group — Why you only need to test with 5 users
- Figma — Wireframing guide
- Luke Wroblewski — Mobile First
- Penpot — Open-source design and prototyping
- Checked October 23, 2026. Figures that change — fees, salaries, prices — are reviewed every six months; if something is out of date, tell us.
Where to go from here
- How to design an app in Figma — turn wireframes into polished screens
- How to write app requirements — the words that sit beside your wireframes
- How to make an appHow to design an app in Figma: a beginner's tutorialDesign your first app in Figma: frames, a simple style system, auto layout, components, a clickable prototype and a clean developer handoff. Free-plan friendly.
- UI/UX designFigma alternatives: the best free and paid design tools, and who each is forThe best Figma alternatives for UI design, prototyping and wireframing — Penpot, Sketch, Framer, ProtoPie, Axure, Balsamiq — and who each suits.
- UI/UX designOnboarding screen examples: 40 patterns that get users to value faster40 app onboarding examples and patterns — welcome, sign-up, personalisation, permissions, empty states and first success — and why each works.
- How to make an appHow to make an Android app from scratchMake your first Android app with Android Studio, Kotlin and Jetpack Compose: setup, first screen, state, data, testing on a phone and publishing on Google Play.
- How to make an appHow to make a game app, even if you can't codeMake a mobile game without coding using GDevelop, Construct, Buildbox or Unity: pick an engine, scope a tiny game, test, publish and know India's 2025 rules.
- AI & vibe codingThe best AI tools for designers — what they're good at, and where your judgment still winsThe best AI tools for UI/UX designers by task: AI in Figma, prompt-to-prototype, imagery, research synthesis, copy and accessibility.
Get the ideas, not the noise.
Sign up with Google and we’ll send you short UX psychology tips by email — why people tap, stall and leave, and what to do about it. Unsubscribe anytime. Prefer something to keep? Get the free Laws of UX guide as a PDF.
Make sure the first screen makes sense.
A behavioral UX audit of your app or SaaS product: why users hesitate, stall and leave, and a prioritized fix list. Fixed price, 2–4 weeks.