Mobile app layout: a guide to laying out app screens

A mobile app layout is the arrangement of everything on a phone screen: the bar at the top, the content that scrolls, the main action, and the navigation at the bottom. Good layouts look alike because phones are alike. They're tall, narrow, held in one hand and operated by a thumb, and nearly every layout rule follows from that.

The standard screen skeleton

Almost every app screen stacks the same four parts from top to bottom.

1. A top bar with the screen's title, a back button on deeper screens, and at most two actions.
2. The content, which takes most of the screen and is the only part that scrolls.
3. The main action, if the screen has one, pinned low.
4. A tab bar on top-level screens.

One rule saves a lot of trouble: give each screen a single thing fixed at the bottom. A top-level screen gets the tab bar. A task screen, like checkout or a form, gets its main button there instead and hides the tab bar. Stacking a pinned button on top of a tab bar eats a fifth of the screen and leaves two things competing for the thumb.

Screen sizes and safe areas

Design in points (iOS) or dp (Android), the units that stay the same across screen densities. These are common sizes to start from:

Phones aren't rectangles of usable space. The status bar, the camera cutout and the home indicator all take a strip, and the area left over is called the safe area. Backgrounds and images can run edge to edge behind those strips, which usually looks better, but text and buttons must stay inside. Apple's Human Interface Guidelines and Google's Material Design both spell out the insets.

Pick one size to design at, then check the narrowest phone you support. A row of three buttons that fits at 390 wide can wrap at 360, and a title that sits on one line can break into two.

Spacing: use one grid

Choose a scale built on multiples of 4 and use only those numbers: 4, 8, 12, 16, 24, 32. Then give the common ones a job. Typical values on a phone:

• 16 to 20 for the left and right screen margins
• 24 to 32 between sections
• 12 to 16 between cards or rows in a group
• 4 to 8 between a label and the thing it labels

The principle underneath is proximity. Things that belong together sit closer than things that don't, so the gap between a heading and its own paragraph should be clearly smaller than the gap between that paragraph and the next heading. When a screen feels cluttered, the cause is often equal spacing everywhere, which leaves the eye no way to see the groups.

Design for the thumb

Most people hold a phone in one hand and tap with that hand's thumb. The lower middle of the screen is easy to reach and the top corners are a stretch, more so on large phones. That gives a simple priority:

• frequent and important actions go low (the tab bar, the main button, a floating action button on Android)
• content to read goes in the middle
• rare actions go at the top (settings, close, share)

Tap targets need room as well. Apple asks for at least 44 by 44 points and Material Design for 48 by 48 dp. The visible icon can be smaller as long as the tappable area around it meets the minimum. Leave space between neighboring targets, because two small icons side by side cause most mistaps.

Five layout patterns that cover most screens

Choose by the content. Things people compare by looking, such as clothes or apartments, want a grid with large images. Things people scan by reading, such as emails or payments, want a list.

Whichever pattern you use, give the screen one focal point. If the balance, the chart and the promo banner are all the same size, nothing leads and people have to work out where to look.

Scrolling and fixed parts

Vertical scrolling is free on a phone, so a long screen is fine. What costs you is fixed chrome: every pinned bar is permanent space the content never gets back. A top bar plus a tab bar is normal. Add a pinned filter row and a pinned banner and the content is peeking through a letterbox.

Horizontal scrolling works for a row of cards as long as the last visible card is cut off at the edge, which tells people there's more. Avoid it for anything they must read in full.

Larger screens

A phone layout stretched across a tablet looks empty and wastes the width. Android's guidance groups screens into width classes (compact under 600 dp, medium from 600 to 840, expanded above that), and the same breakpoints work as a rule of thumb on iPad. At medium widths, grids gain columns. At expanded widths, a list and its detail screen can sit side by side, and the bottom tab bar often becomes a rail along the side.

Layout mistakes worth checking for

• Text touching the screen edge, or margins that differ from screen to screen.
• A tab bar on a detail screen, where a back button is enough.
• Content hidden behind a pinned button because the scroll area has no bottom padding.
• Centered body text. Center a short headline if you like; paragraphs read better aligned left.
• A layout that only works with short English labels. Try your longest real label, and German if you plan to translate.

Layout checklist

• One focal point per screen.
• One fixed item at the bottom: tab bar or main button.
• Side margins the same on every screen.
• All spacing from one scale.
• Tap targets at least 44 points or 48 dp.
• Text and controls inside the safe area.
• Checked on the narrowest phone you support.

If you'd like to see these rules applied before drawing anything yourself, describe your app in Outclass. It designs each screen on this skeleton at 390 by 844, and you can switch the canvas to tablet or desktop width to see how the layout adapts. The companion pieces are the app screens every app needs for what to lay out, and how to design a mobile app for the full process.