# 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

[UI mockupA screen convincing enough to react to.](https://help.gocapable.com/diagrams/ui-mockup.html)

[Site map diagramPage hierarchy, and what links to what.](https://help.gocapable.com/diagrams/site-map-diagram.html)

[ExamplesWorking diagrams you can copy.](https://help.gocapable.com/diagrams/examples.html)

---

_Fidelity is a choice, so choose it._