Most guides explain how to wireframe a mobile app in the abstract: “define your goals”, “keep it simple”, “use grayscale”. Useful, but you still stare at a blank canvas afterwards. This tutorial does the opposite. We are going to build one real 5-screen app wireframe from the first rectangle to a clickable flow you can hand to someone for feedback, using fixed constraints so you never have to guess.

The app we will wireframe: a simple habit tracker called Streak. Five screens, one tab bar, one form, one modal. If you can build this, you can wireframe almost any consumer app.

What You Will Have at the End

• Five wireframed screens at real device dimensions
• A navigation structure that works with one thumb
• Clickable hotspots linking every screen together
• A shareable prototype link for testing

Time needed: 90 minutes to 3 hours if this is your first wireframe. Tools needed: a pen and paper for step 2, then any wireframing tool (Figma free plan works perfectly).

Step 0: Understand What a Wireframe Actually Is

A wireframe is a low-fidelity blueprint of a screen. It shows structure, hierarchy and content placement. It does not show colour, brand, photography, shadows, illustrations or final copy.

A quick way to know if you are still wireframing or if you have drifted into UI design:

A wireframe answers	A wireframe does NOT answer
What goes on this screen?	What colour is the button?
What is the most important element?	Which font pairing do we use?
Where does the user go next?	How does the transition animate?
How many taps to complete the task?	What does the icon set look like?

Rule for this tutorial: greys only (white, light grey #E5E5E5, mid grey #999, near-black #333), one font, boxes with an X for images, and horizontal lines for body text you have not written yet.

Step 1: Define the One Job of Your App

Before you draw anything, write a single sentence in this format:

“[User] opens the app to [primary action] so they can [outcome].”

For our example: “A person opens Streak to check off today’s habits so they can keep their streak alive.” This reference is the one worth keeping handy.

Everything that does not serve that sentence gets pushed to a secondary screen. This single constraint is what stops beginner wireframes from becoming cluttered.

List your screens before you draw them

Write the screen names as a flat list. For Streak:

1. Onboarding / Sign in (entry point)
2. Today (home, the habit list)
3. Habit detail (streak history for one habit)
4. Add habit (a form, presented as a modal)
5. Progress (stats tab)

Five screens is the sweet spot for a first wireframe. It is enough to show a real flow and small enough to finish in one sitting.

Step 2: Map the Flow on Paper First

Do not open your design tool yet. On one sheet of paper, draw five boxes and connect them with arrows showing what leads where. This is your user flow, and it takes four minutes.

Our flow:

• Sign in → Today
• Today → Habit detail (tap a habit row)
• Today → Add habit (tap the + button, opens as modal)
• Add habit → Today (save, modal dismisses)
• Today ↔ Progress (tab bar)

Now sketch each screen roughly, six boxes per page, one minute per sketch. Ugly is fine. The point is to burn through the obvious layouts fast so you spot problems early: a form that needs eight fields, a home screen with no empty state, a back button that has nowhere to go.

Do not skip the empty state

New users see an empty Today screen. Sketch that version too. Beginners wireframe the “happy, full of data” screen and forget that day one looks completely different.

Step 3: Choose the Right Canvas Size

Pick one device size and design everything at that width. Do not try to wireframe for tablets, foldables and phones at the same time on your first pass.

Frame	Width x Height (pt/dp)	Use it when
iPhone (standard)	393 x 852	Default choice for iOS-first wireframes
iPhone (Pro / large)	402 x 874 or 440 x 956	Checking how layouts breathe on big screens
Android (compact)	360 x 800	Android-first, and the safest “small screen” test
Android (large)	412 x 915	Most common modern Android flagship size

Our pick: 393 x 852. Then, at the very end, we will duplicate the Today screen at 360 x 800 to confirm nothing breaks on narrow devices.

The layout constraints to set once and reuse

• Side margins: 16pt left and right (20pt if you want more air)
• Spacing grid: multiples of 8 (8, 16, 24, 32, 40)
• Status bar: reserve the top 44pt (iOS) or 24dp (Android)
• Home indicator / gesture bar: reserve the bottom 34pt
• Tab bar height: 49pt on iOS, 80dp for Material navigation bar
• Top app bar: 44pt to 56pt
• Minimum tap target: 44 x 44pt (iOS) or 48 x 48dp (Android)
• Body text: never below 15pt in a wireframe, or you are designing something nobody can read

Subtract the status bar, top bar, tab bar and gesture area from 852 and you have roughly 650pt of usable vertical space. That is your real estate. Know it before you start filling it.

Step 4: Respect the Thumb Zone

Phones are held in one hand most of the time. Split your canvas into three horizontal bands and place elements accordingly.

Zone	Screen area	Put here
Easy	Bottom third	Tab bar, primary CTA, floating action button, checkboxes users tap repeatedly
Stretch	Middle third	Scrollable content, list rows, cards
Hard	Top third, especially top corners	Screen title, back button, rarely used icons like settings

Practical consequence for Streak: the + Add habit button sits bottom right as a floating button, not top right. The habit checkboxes sit on the right edge of each row, where the thumb naturally lands. Settings lives in the top left, because people open it once a month.

Step 5: Pick a Navigation Pattern (and Only One)

Navigation is the skeleton. Choose before drawing, not after.

Pattern	Best for	Watch out
Bottom tab bar	3 to 5 equally important sections	Breaks down past 5 tabs
Stack / drill-down	List → detail content	Always needs a visible way back
Modal / sheet	Self-contained tasks (create, edit, filter)	Needs explicit Cancel and Save
Hamburger / drawer	Many low-frequency destinations	Hides features, lowers discovery
Carousel / onboarding swipe	First-run explanation only	Keep to 3 slides with a Skip

Streak uses: a 2-item bottom tab bar (Today, Progress), a stack push for habit detail, and a modal sheet for adding a habit. That is all.

Step 6: Wireframe the Five Screens

Now open your tool. Create five frames side by side, name them exactly as in your flow, and build them in this order. Work top to bottom on each screen.

Screen 1: Sign in

1. Status bar placeholder (grey strip, 44pt)
2. Logo placeholder: 64 x 64 square with an X, centred, 80pt from the top
3. Heading line: “Build habits that stick” (24pt, bold, centred)
4. Subheading: one grey line of placeholder text
5. Two input fields: 48pt tall, full width minus margins, labels above (Email, Password)
6. Primary button: full width, 48pt tall, label “Continue”
7. Secondary text link: “Create an account”, centred, 24pt below the button

Beginner trap: do not centre everything vertically. Anchor the form to the top half so the keyboard does not cover it when it opens. Related reading: Mobile app Wireframe Builder.

Screen 2: Today (home)

1. Top bar: settings icon left (24pt), title “Today” centre, date right
2. Summary card: full width, 88pt tall, containing “3 of 5 done” and a progress bar rectangle
3. Section label: “Morning” (13pt uppercase, grey)
4. Habit rows: 64pt tall each, structure = 32pt icon square, habit name, streak count in grey on the right, then a 44pt checkbox at the far right
5. Repeat for 4 to 5 rows, 1pt divider lines between them
6. Floating action button: 56pt circle, bottom right, 16pt from the edge, 24pt above the tab bar
7. Tab bar: 2 items (Today, Progress), 49pt tall, active item marked with a filled shape

Duplicate this frame and make an empty state version: centred icon placeholder, one line of text (“No habits yet”), one button (“Add your first habit”).

Screen 3: Habit detail

1. Top bar: back chevron left, habit name centre, edit link right
2. Big stat block: current streak number (48pt type) plus label
3. Calendar grid placeholder: 7 columns x 5 rows of small squares
4. Two secondary stats side by side: “Best streak” and “Completion rate”
5. Destructive action at the very bottom: “Delete habit” text link

Screen 4: Add habit (modal)

1. Sheet starts 80pt from the top, rounded top corners, 8pt drag handle centred
2. Header row: “Cancel” left, “New habit” centre, “Save” right
3. Text field: habit name
4. Selector row: frequency (Daily / Weekly), shown as a segmented control
5. Selector row: reminder time, shown as a row with a chevron
6. Icon picker: a row of 6 square placeholders

Keep it to four inputs maximum. Every extra field in a creation form is a measurable drop in completion.

Screen 5: Progress

1. Top bar: title “Progress”
2. Segmented control: Week / Month / Year
3. Chart placeholder: full width rectangle, 200pt tall, with an X through it and the label “Bar chart”
4. Stat rows: 3 rows showing total completions, longest streak, active habits
5. Tab bar, with Progress marked active

Annotate as you go

Next to each frame, drop small text notes in a distinct colour (red is standard) explaining behaviour a static image cannot show: “Row swipes left to reveal Archive”, “Checkbox animates and updates the summary card”, “Save is disabled until name is filled”. Annotations are what turn a drawing into a spec.

Step 7: Turn Static Frames into a Clickable Flow

This is the step most beginners skip, and it is the one that makes feedback actually useful. In Figma, switch to Prototype mode; in Balsamiq or MockFlow, use link regions. Then connect:

Hotspot	Destination	Transition
Continue (Sign in)	Today	Push left / instant
Habit row (Today)	Habit detail	Push left
Back chevron (Detail)	Today	Push right / back
+ button (Today)	Add habit	Move in from bottom
Cancel / Save (Add)	Today	Move out to bottom
Tab bar items	Today / Progress	Instant, no animation

Two rules that keep prototypes honest:

• Every screen must have an exit. If a tester can get stuck, your navigation model is wrong, not their tapping.
• Do not fake more than you need. Prototype the main path plus one alternate path. Wiring up every possible tap wastes hours at wireframe stage.

Test it with five people in 20 minutes

Send the prototype link and give a task, not instructions: “Add a habit called Read 10 pages, then find out how many days in a row you have done your workout.” Then stay quiet and watch.

Record three things per tester:

1. Where they tapped first (reveals what looks tappable)
2. Where they hesitated for more than 3 seconds
3. What they said out loud when confused

Five testers surface the vast majority of structural problems. Fix, then re-test. This loop is fast precisely because your screens are grey boxes and nobody is arguing about colours yet.

Step 8: Run the Pre-Handoff Checklist

• □ Every screen fits the chosen frame with no content hidden behind the tab bar or gesture area
• □ All tap targets are at least 44 x 44pt
• □ Side margins are consistent across all five screens
• □ Every spacing value is a multiple of 8
• □ Primary actions live in the bottom third
• □ The home screen has an empty state version
• □ Loading and error states are at least annotated, if not drawn
• □ Text is realistic length, not “Lorem ipsum” of arbitrary size
• □ No colour, no shadows, no brand assets
• □ The Today screen has been checked at 360pt width
• □ Every frame is reachable and escapable in the prototype
• □ Annotations explain anything a static frame cannot

Wireframing Tools Compared

Tool	Strength	Best for
Figma	Free tier, device frames, built-in prototyping, huge community kits	Almost everyone, and the safest skill to learn
Balsamiq	Deliberately sketchy style that stops colour debates	Client workshops and fast idea dumps
Miro	Infinite canvas, flow maps and wireframes on the same board	Team sessions and flow mapping
MockFlow	Large ready-made mobile UI packs	Assembling screens quickly from components
Pen and paper	Fastest iteration on earth, zero cost	Step 2, always

Seven Mistakes That Sink Beginner Wireframes

1. Starting in the tool instead of on paper. You commit to the first layout you build.
2. Adding colour “just to see”. Feedback instantly shifts to aesthetics.
3. Designing only the perfect state. Real apps are mostly empty, loading or broken.
4. Inventing a new navigation pattern. Users have learned tab bars and back buttons. Use them.
5. Tiny tap targets. If it is under 44pt, it does not exist on a moving bus.
6. Cramming desktop density into 393 points. One primary action per screen.
7. Never making it clickable. A PDF of five screens gets polite comments. A prototype gets real ones.

What Comes After the Wireframe

Once your clickable flow survives testing, you move up in fidelity:

• Mid-fidelity: real copy, real type scale, correct spacing, still greyscale
• High-fidelity UI: colour, brand, iconography, components, states
• Design system: tokens and reusable components so screens six through sixty take minutes instead of hours
• Developer handoff: specs, measurements, interaction notes

Keep the wireframe file. When someone asks six weeks later why the add button is a floating circle instead of a top-right icon, your annotated frames are the answer.

FAQ

What is a wireframe for an app?

A wireframe is a simplified, greyscale layout of an app screen showing where content, controls and navigation sit. It focuses on structure and hierarchy rather than visual design, which makes it cheap to change and fast to test. How to Create Wireframes for Mobile Apps Fast tackles the same question from another angle.

Is wireframing UI or UX?

Both, but it leans UX. Wireframing is where you settle flow, information hierarchy and navigation, which are UX decisions. It touches UI because you are placing concrete components, but colour, type and brand come later in the UI phase.

What is the best app for creating wireframes?

Figma is the strongest default in 2026: free for individuals, includes device frames and built-in prototyping, and is the industry standard so your skills transfer. Balsamiq is excellent when you want a deliberately rough look, and Miro is ideal when flow mapping and wireframing happen in the same team session.

What size should a mobile app wireframe be?

Design at 393 x 852 points for an iOS-first project or 360 x 800 dp for Android-first. Use 16pt side margins, an 8pt spacing grid, and minimum tap targets of 44 x 44pt on iOS or 48 x 48dp on Android.

How many screens should my first wireframe have?

Five is ideal: an entry screen, a home screen, a detail screen, a form and one secondary section. That covers the main navigation patterns without becoming a project you abandon halfway.

How long does it take to wireframe a mobile app?

A focused 5-screen wireframe with a clickable prototype takes roughly 2 to 3 hours for a beginner and under an hour once you have reusable components. A full production app with 30 or more screens and all states typically runs 1 to 3 weeks.

Should wireframes include real content?

Yes, as much as possible. Realistic labels, names and numbers expose layout problems that placeholder text hides, such as long habit names wrapping to two lines or four-digit numbers breaking a stat row.

Do I need to wireframe separately for iOS and Android?

Not at the wireframe stage. Build one version, then check it at the narrower width and note the platform differences in your annotations: back navigation, tab bar height, system font and the position of destructive actions. Platform-specific adaptation belongs to the UI phase.

Your Next Move

Open a blank file, set a 393 x 852 frame, and write your one-sentence app job at the top of the canvas. Then follow steps 2 through 7 on your own idea instead of Streak. The point of learning how to wireframe a mobile app is not to admire the frames. It is to find out, in an afternoon and for free, which parts of your idea do not work yet.