How to design a mobile app screen

Write the screen's job in one sentence

One sentence, written before you open the palette: what is the user here to do. Check today's tasks, choose a plan, confirm a delivery. The sentence is short because it is a ranking tool, and every element on the screen can be measured against it. If an element does not help the sentence become true, it is a candidate for cutting, and the app wireframe guide covers the same discipline for a low-fidelity pass.

The sentence also tells you what the screen is allowed to be about. A screen whose job is choosing a plan might include a price, a feature list and a button. A screen whose job is comparing plans needs a different set, and the difference shows up in the order of blocks rather than in a change of style.

Decide the single primary action while you are still writing. A phone screen has room for one obvious next step, and two buttons that both look important mean the user has to read before they act.

• One sentence per screen, written before the first component
• Name the user action, not the list of things on screen
• Exactly one primary action, and it is the most prominent thing

Note: If the sentence needs an and in it, you are looking at two screens. Splitting them early is cheaper than building one crowded screen that tries to be both.

Set the type scale before placing anything

Pick your type sizes first, because type is what tells the reader which block matters. A Heading component starts at 28 and a Text component at 15, and the inspector's Aa field changes either of them. Choose two or three sizes and use them for everything: a screen title, a block title, a label and body text.

A scale of two or three sizes is enough on a phone because hierarchy comes from weight and space as much as from size. The inspector typography section gives you Align, Weight with Regular, Semi and Bold, and toggles for Italic, Underline and Wrap. Bold on one size and regular on the next is a stronger signal than a jump in point size. The typography guide covers how to pick a scale.

Do this before the components go in. Choosing a size per block as you place it produces six similar sizes and no hierarchy. Choosing three sizes first and assigning them by role produces a screen where the reader can tell what is a title before they finish reading.

• A Heading, a block title and a body size, and nothing else
• Bold carries the emphasis, not a bigger point size
• Set the size once per role and reuse it on every screen

Note: Canvasola has two theme token sets, light and dark, and the Toggle dark theme button in the toolbar switches between them. Check the scale in both, because a muted gray that reads as secondary in light can disappear in dark.

Use the 8 px grid to keep the edges honest

The App Builder placement grid is 8 pixels, so anything you drag lands on a shared rhythm instead of wherever your hand stopped. That rule removes most of the small ugliness that makes a screen look amateur: a card starting 4 pixels in from the card above, a button 2 pixels narrower than the field it sits under.

Turn on the layout grid with the Toggle layout grid button in the toolbar and it draws column guides over mobile frames, so you can see the margins you are drifting from. The guides are a check, not a constraint; the snap grid is what holds the edges in place.

When something is a fraction out, the arrow keys fix it. A selected element nudges 4 pixels per press, and 16 pixels with Shift held down, so a stubborn edge can be walked onto the grid without dragging.

1. Switch on the grid overlay. Use the Toggle layout grid button in the toolbar to draw the column guides over the mobile frame.
2. Walk the stubborn edges. Select the block and press the arrow keys to nudge by 4 pixels, or hold Shift to nudge by 16.

Note: One aligned edge beats four centerd ones. Pick the side the eye lands on first and make the rest follow it.

Decide what deserves a full-width block

Full width is a decision about importance, and it is the scarcest resource on a phone screen. The blocks that usually earn it are the primary action, a search field, a list the user has to read, and a header holding the identity of the screen. Those four cover most apps.

The blocks that usually do not earn it are the quiet ones: a secondary action, a footnote, metadata, a link. Give those their own width and align them with the edge of the block above, and the screen gains a rhythm instead of a stack of stripes.

Mixed widths are where a screen starts to look unfinished. Either the content column runs full width and everything inside aligns to its edges, or a narrower column is centered with an obvious margin. The worst outcome is a wide block next to a narrow one with no rule behind it.

• Full width: the primary action, search, a list to read, the header
• Narrow: secondary actions, metadata, footnotes, links
• Align narrow blocks to the edge of the block above them

Note: The primary action in a mobile app is often a floating button instead of a full-width bar. A FAB component is in the palette, and it changes the width argument for everything above it.

Balance the screen with space, not extra elements

A screen that feels empty is usually short of space rather than content. Padding and gap in auto-layout are the cheapest visual weight you can add: 16 pixels of padding and a 12 pixel gap is a reasonable start on a 390-pixel-wide frame, and both values change in the inspector without moving anything by hand.

Space is also what separates a reading column from a toolbar. The gap under the header says the header belongs to the screen, and the gap between two cards says those are two things rather than one long list. When a screen feels crowded, increase a gap before deleting a block.

The alternative is adding something to fill the gap, and that is how a screen fills up with a banner, a divider, a subtitle and a chevron that nobody asked for. Every extra element is a promise to keep it useful. Space makes no promise.

• Start with 16 pixel padding and a 12 pixel gap, then adjust
• Increase a gap before you remove a block
• Keep the same padding and gap on every screen of the flow

Note: Auto-layout gap and padding both run from 0 to 96, and a container with a zero dimension hugs its children. That makes the spacing scale a number you can argue about rather than a position you have to eyeball.

Run a legibility pass at real size

Zoom out and look at the screen the way it will be seen. Ctrl/Cmd+0 returns the view to 100 percent, Ctrl/Cmd+1 fits the frames in the window, and Ctrl/Cmd+2 zooms to the selection. Hold Space and drag to pan, the quickest way to check a tall screen end to end.

At that size, the things that fail are small. A label that looked fine when you were zoomed in turns out to be unreadable, and a secondary color that looked gray enough to recede carries the same weight as the text around it. The check that catches both is simple: read every string without moving closer.

Do the pass in the dark theme as well, because the two token sets do not carry the same contrast relationships. A screen that reads cleanly in light can turn muddy in dark, and the fix is often the color of one label. The mockup tutorial covers the full pass.

• Zoom to 100 percent and read every string on the frame
• Check the smallest text first, since it fails first
• Export PNG at 2× and look at the file, not the canvas

Note: The mockup tutorial covers the full pass from an empty frame to an exported screen set, and the app wireframe guide covers the structural version of the same screen.

A checklist you can reuse

• The screen's job is written as a single sentence
• Exactly one element is the primary action
• Three type sizes at most, assigned by role
• Left and right edges land on the 8 pixel grid
• Full-width blocks are limited to the important ones
• Padding and gap come from auto-layout values
• The screen has been read in both the light and dark themes

Common mistakes to avoid

• Filling space with more elements. An empty area is fixed with a larger gap, not a decorative banner. Every element you add is a promise to keep it useful.
• A type size for every block. Six similar sizes create no hierarchy. Choose three by role and let weight do the rest.
• Two competing primary actions. When both buttons look important, neither is. Demote one to a secondary style and the screen becomes obvious.
• Mismatched widths. A wide block next to a narrow one with no rule behind it looks like a mistake. Align narrow blocks to the column edge.
• Reviewing only at zoom. Everything looks good when you are close. Read the screen at 100 percent before you call it finished.

Frequently asked questions

What size should a mobile app screen be?

Use the device the product ships on. App Builder opens mobile frames at 390×844 and offers iPhone SE 375×667, iPhone 14 390×844, iPhone Pro Max 430×932, Android 412×915 and Tablet 820×1180 as presets. Designing at 390 and checking on 375 catches the row that no longer fits.

How do I keep a screen consistent with the rest of the app?

Reuse the same numbers: one type scale, one padding value, one gap value, and the same list row for every repeating item. App Builder has seven insertable reusable components, including a List row and a Nav header, which give you the same shape in every frame. You cannot define your own reusable components, so the seven you have are the ones to plan around.

What is the 8 pixel grid in App Builder?

It is the placement grid that elements snap to as you drag them, and the rhythm most mobile interfaces use. The Toggle layout grid button in the toolbar draws column guides over mobile frames so you can see where your margins sit. Arrow keys nudge a selection by 4 pixels, or 16 with Shift.

Does the screen change between light and dark themes?

The theme token sets change how surfaces, text and accents are colored, and the toggle in the toolbar switches between them. The toggle also changes the HTML export, so the file you hand over matches the theme you reviewed. Layout and spacing stay the same, so check a screen in both before signing it off.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.