Mobile app design: a practical guide

Mobile app design is the work of deciding what an app does on each screen and how it looks and behaves while people use it with one thumb, in a few seconds, often distracted. This guide covers the decisions that matter most and the conventions worth following, so your app feels familiar on day one.

Start from the job, not the screens

Every good app design starts with one sentence: who uses the app, and what they come to do. "Commuters check when the next train leaves." "Parents log a baby's feeds at 3 a.m." That sentence decides what goes on the first screen, what can wait two taps and what doesn't belong at all.

From there, list the three to five tasks people will do most often. Those tasks become your core screens, and they should be reachable in one or two taps. Everything else can live deeper.

Design for real screen sizes

Design at the size people actually hold. Common starting points:

• Phone: 390 by 844 points (a common iPhone size) or 393 by 852. Design at 1x points; the device scales up for sharp pixels.
• Tablet: 834 by 1194 points (an 11-inch iPad) if you support tablets.
• Safe areas: keep content clear of the status bar at the top and the home indicator at the bottom.

Check your design on the smallest phone you support too. Text that fits on one line at 430 points wide may wrap at 375.

Layout and spacing

Use a spacing scale and stick to it. Most teams use multiples of 4 or 8: 4, 8, 12, 16, 24, 32. Side margins of 16 to 20 points are standard on phones. A consistent scale is the single fastest way to make a design look deliberate.

Put the most important content and the main action where thumbs reach easily: the lower and middle part of the screen. Top corners are the hardest to reach one-handed, so use them for secondary things like settings or close buttons.

Navigation patterns

Pick the simplest pattern that fits:

• Tab bar (bottom): for 3 to 5 top-level sections people switch between often. The most familiar pattern on both iOS and Android.
• Stack navigation: list to detail to sub-detail, with a back button. Almost every app uses this inside its tabs.
• Sheets: for focused tasks like a filter, a share menu or a quick form, without leaving the current screen.
• Navigation drawer: only when you have many sections that aren't used often. It hides navigation, so it is a poor choice for core features.

Show the tab bar on top-level screens only. On a detail screen, a back button and the content are enough.

Typography

Mobile typography is mostly about restraint:

• Body text of 16 to 17 points. Smaller body text is the most common readability complaint.
• Two or three sizes per screen: a title, body and a small caption are usually enough.
• One typeface, or two at most. The system fonts (SF Pro on iOS, Roboto on Android) are a safe default and support Dynamic Type.
• Weight and color for hierarchy before size. A semibold label reads as more important without taking more space.

Color

Choose one accent color for actions and selected states, and use it sparingly so it keeps meaning "tap here". Build the rest from neutrals. Check contrast: body text needs at least 4.5:1 against its background, large text 3:1. Use color for meaning consistently (red for destructive or overdue, green for success) and never as the only signal, since some people can't tell those colors apart.

If you support dark mode, design it as its own palette rather than inverting colors. Pure black backgrounds with pure white text are harsh; slightly lifted grays read better.

Components and states

Design each component in all its states, not just the default one: pressed, disabled, loading, error, empty. Users hit these states every day, and they are where unfinished apps show.

Reuse components across screens. The same card, list row and button everywhere make the app easier to learn and much easier to build. This is the start of a design system, even if it's only ten components.

What makes a beautiful app design

Beautiful app design is rarely about decoration. The apps people call beautiful share a few habits:

• Clear hierarchy. One thing leads on each screen.
• Real content. Designs built with real names, prices and photos look finished; placeholders never do.
• Consistent spacing. Everything sits on the same scale.
• Restraint. One accent color, few font sizes, shadows only where something floats.
• Motion with a purpose. Short transitions that show where things came from, and respect for reduced-motion settings.

Tools for mobile app design

You can design an app in many tools. Figma is the standard for teams: it has components, auto layout, prototyping and developer handoff. Our guide to Figma mobile app design covers how to set it up.

AI app design tools are the fastest way to a first draft. With Outclass you describe your app in a sentence and get every screen designed in one consistent style, which you can edit visually and copy into Figma as editable layers. See how to design an app with AI for the full process.

A mobile app design checklist

• The main task on each screen is obvious in two seconds.
• Core tasks are reachable in one or two taps.
• Touch targets are at least 44 by 44 points.
• Body text is 16 points or more and meets 4.5:1 contrast.
• Spacing follows one scale.
• One accent color, used for actions.
• Every screen has empty, loading and error states.
• The tab bar appears only on top-level screens.
• Content is real, not placeholder.
• It works on the smallest phone you support.