Mobile app wireframe
Mobile screens have constraints a desktop wireframe lets you ignore: the frame is small, the thumb reaches only part of it, and the navigation pattern is usually fixed by the platform.
Drawing inside a device frame makes those constraints visible rather than theoretical.
#When to reach for one
Designing a mobile screen or flow.
Reviewing whether a screen fits above the fold on a small device.
Documenting platform navigation patterns for a team new to mobile.
#How to draw it in Capable
Route | Use when |
|---|---|
draw.io | Device frames and native UI shapes for iOS and Android. |
Excalidraw | Rough exploration before committing to a layout. |
#What to include
Status bar, navigation bar and any tab bar, at real proportions.
The fold: what is visible without scrolling.
Every interactive element, sized as a real touch target.
The empty, loading and error states, not just the happy one.
IMAGE PLACEHOLDER
A mobile wireframe inside a device frame, showing the fold and a tab bar. 1280 wide, light theme. File: diagrams-mobile-wireframe.png
#A few things that catch people out
Draw the frame at a real device size. "It will fit" is where most mobile designs go wrong.
Show the navigation bar and safe areas; they take more space than people remember.
Touch targets have a minimum size. A wireframe that ignores it hides a real problem.
#Related
Fidelity is a choice, so choose it.
