How to design a mobile app from scratch, step by step

To design a mobile app from scratch, decide what the app is for, list the screens that job needs, sketch them roughly, choose a visual style, then design each screen at real phone size with real content and test it on an actual phone. The order matters more than the tool. People who open a design tool first tend to produce one lovely home screen and nothing behind it.

Here are the nine steps, in the order that wastes the least work.

1. Write down the job in one sentence

Who uses this app, and what do they come to do? "Flatmates split the electricity bill without doing arithmetic." "Runners log a run and see whether they're getting faster." If the sentence needs an "and also", you probably have two apps, or one app and a feature that can wait.

Keep the sentence somewhere visible. Every argument later about what belongs on the home screen gets settled by reading it again.

2. Look at what people already use

Open four or five apps that do something similar and go through their main task with a notepad. Where did you get stuck? What took one tap that you expected to take three? You're collecting conventions here, and you should follow most of them. People arrive at your app with years of habits from other apps, and an unusual navigation scheme costs them effort for no gain.

3. List the screens and draw the flow

Write every screen as a box and draw arrows for how someone moves between them. Start with the main task from step 1, since that path has to be short. Then add the unglamorous screens: sign-in, settings, the empty version of every list. Our list of app screens every app needs is useful as a checklist at this point.

A first version usually lands between eight and fifteen screens. If you have forty, cut. If you have three, you've forgotten the states.

4. Sketch wireframes

On paper or in gray boxes, lay out each screen: what's at the top, what the main content is, where the main action sits. Spend a minute or two per screen. You're testing the arrangement, so color and fonts would only distract you.

This is the cheapest moment to change your mind. Moving a button in a sketch costs seconds, and moving it after the app is built costs a release.

5. Choose the style

Now decide how it looks. You need less than you think:

• one accent color for actions, plus neutrals for everything else
• one typeface and five or six text sizes
• one spacing scale, usually multiples of 4
• one corner radius

Write these down as a mobile app style guide before designing the remaining screens, even if it's ten lines long. It saves you from re-deciding the same gray on every screen.

6. Design the core screens at real size

Set your canvas to a real phone size (390 by 844 points is a common one) and design the three or four screens of the main task first. Use real content from the start: actual names, plausible prices, a message someone might send. Placeholder text hides problems. A list row looks tidy with "Item name" in it and breaks the moment a real product name runs to two lines.

Follow the platform's basics while you work. Tap targets should be at least 44 by 44 points on iOS and 48 by 48 dp on Android, body text 16 points or larger, and the main action low on the screen where a thumb reaches. The mobile app layout guide goes through placement in detail, and iOS and Android design guidelines covers where the two platforms differ.

7. Design the states

Every screen with data has at least four versions: loading, empty, error, and full. Add the pressed and disabled versions of each button and the error version of each field. Developers will have to build these whether you design them or not, and the ones nobody designed are usually the ones users complain about.

8. Put it on a phone and watch someone use it

A design looks different in the hand. Text you thought was readable turns out small, and a button you thought was obvious gets missed. Mirror your design to a phone, hand it to three people who haven't seen it, and ask them to do the main task while you stay quiet. You'll find most of the big problems in those three sessions, and they're rarely the ones you were worried about.

9. Hand it off

Developers need the screens, the style values, the states, and a note on anything that moves. In Figma that means named layers, auto layout so spacing is measurable, and components for anything repeated. Our guide to Figma mobile app design explains how to set the file up so the handoff doesn't turn into a week of questions.

Where AI fits in this process

AI design tools compress steps 4 to 7. You describe the app in a sentence or two and get a designed draft of every screen, which you then correct. That doesn't remove steps 1 to 3: a vague description produces a generic app, and the job sentence from step 1 is most of a good prompt. It doesn't remove step 8 either, because no tool knows whether your users will find the button.

With Outclass, the draft comes out in one shared design system, you can click any element to change it by hand, and the screens copy into Figma as editable layers with auto layout. How to design an app with AI walks through that route from the first prompt, and AI app design vs traditional app design compares the two honestly if you're deciding which to use.