App Store Screenshot Design: Best Practices & Layout Patterns

Good App Store screenshots sell one benefit per frame, put the strongest message in the first three, use short captions readable at thumbnail size, and show the real app with realistic data. Everything else — layout, color, mockups, panoramas — exists to make those four things land faster. This guide covers the principles, the layout patterns worth copying, platform differences and how to test.

The first three frames do most of the work

Most people decide from a search result or a quick scroll, not a careful read of your product page. In App Store search results, an app with portrait screenshots and no app preview shows its first three screenshots (a landscape set shows only the first). On iOS 27 and iPadOS 27 you can replace that with dedicated search results artwork, but people on older versions still see your screenshots.

• Frame 1: the core value proposition — what the app is and why it’s worth installing.
• Frames 2–3: the next two reasons people choose you, typically your most-used or most differentiating features.
• Frames 4–10: depth for people who are already interested — secondary features, integrations, personalization, social proof, platforms.

Read the first three as a set. Together they should answer “what is it, what does it do for me, why this one?” without anyone tapping through.

Plan the set as a story

Before opening a design tool, write the set as a list of one-line messages, one per screenshot. A simple structure:

1. Promise — the outcome (“Budget without spreadsheets”).
2. How — the main mechanism (“Every purchase sorted automatically”).
3. Differentiator — what competitors don’t do (“Shared budgets for couples”).
4. Supporting features — one per frame.
5. Reassurance — privacy, sync, offline support, real ratings or awards.

One idea per screenshot. If a caption needs “and”, it is probably two screenshots. If two screenshots say the same thing, cut one — a shorter, sharper set beats ten frames of filler.

Writing captions that convert

• 2–6 words for the headline. A supporting line is optional; a paragraph is not.
• Benefit, not feature. “Never miss a bill” beats “Push notifications”. Name the feature only when it is itself the draw (“Works offline”).
• Readable at thumbnail size. Search results show screenshots small. Keep the caption area to roughly a third of the image or less, use a heavy weight and large size, and check it zoomed out.
• Plain words people search for. Captions in screenshots aren’t a ranking keyword field, but matching the words people use (“habit tracker”, “invoice”) tells them they found the right app. See the keyword guide for where keywords actually go.
• Emphasize one or two words. A highlight color or weight on the key word guides the eye — in our editor, wrap it like **this**.
• Consistent voice and position. Same tense, same casing, same placement on every frame.
• Plan for translation. German and French often run noticeably longer than English. Leave room, and read the localization guide before you lock the layout.

Show the real app

App Review Guideline 2.3.3 says screenshots should show the app in use, “and not merely the title art, login page, or splash screen.” Beyond compliance, real UI is what convinces people. A few rules:

• Realistic data. Fill the account with believable names, numbers and content. Empty states and “Lorem ipsum” look unfinished; obviously fake data (“Test User 1”) looks careless.
• Clean status bar. Battery at 100%, full signal, 9:41 — see how to get a clean status bar.
• Crop to the point. If the feature is one card on a long screen, zoom into it or add a callout rather than shrinking the whole screen.
• No debug UI, no personal data, no third-party content you don’t have rights to.
• Match the current version. Outdated screenshots confuse users and can be flagged as inaccurate metadata.

Layout patterns that work

Panoramas: do them carefully

A panorama — a background, illustration or tilted device that continues from one frame into the next — makes the gallery feel designed and invites a swipe. But every frame is also seen alone: in search results, in a share sheet, in a single-screenshot view. Make sure each frame still has a complete caption and a readable focal point, and that seams don’t cut through faces or text.

Mix patterns, keep the system

Using the same layout ten times is safe but flat; using ten different layouts looks chaotic. A good middle ground is one base layout for most frames with one or two variations — a 3D hero first frame, a panorama across frames 2–3, a social proof frame at the end.

A consistent visual system

• Colors from your brand. Pull them from your icon so the icon, screenshots and product page read as one. The icon palette extractor gives you matching colors and gradients.
• Contrast first. Caption text needs strong contrast against its background at small sizes. Light text on a mid-tone gradient often fails when scaled down.
• Stand out from the category. Search your top keywords and look at the competitors’ screenshots. If every result is blue on white, a different color is the cheapest differentiation you’ll get.
• One device style per set. Realistic, clay, flat or frameless — pick one and stick with it. See the device mockups for the options.
• Consider dark mode. If your app has a strong dark theme, a dark set can look premium — but check it next to the light App Store UI. You can also alternate light and dark screens if your app supports both and the set stays coherent.
• Same fonts, sizes and margins across frames, devices and locales.

Social proof without getting rejected

Ratings, awards and press quotes are powerful reassurance — but they must be real. Apple’s guidelines prohibit misleading metadata, and inventing reviews, ratings or awards is exactly that.

• Quote real reviews, ideally with the reviewer’s display name as it appears in the store, and keep the wording intact.
• Only show a rating you actually have, and update it when it changes.
• Use award and press logos according to the awarding body’s or publication’s usage rules.
• Avoid unverifiable superlatives (“#1 app”, “best”) unless you can document them — Google Play is particularly strict about ranking claims in store graphics.

What’s different on Google Play

• Up to 8 screenshots per device type (phone, 7″ tablet, 10″ tablet, Chromebook, TV, Wear OS) instead of 10.
• Flexible sizes: Google accepts a range of dimensions and aspect ratios rather than exact display classes — see Google Play screenshot sizes.
• Feature graphic: a required 1024 × 500 banner used in promotional placements and as the cover of your promo video — see the feature graphic guide.
• Android devices: show Pixel or Galaxy frames (or frameless screenshots), never iPhones — and don’t show Android devices on the App Store.
• Promotional claims: Google Play’s metadata policy restricts things like ranking claims, price promotions and calls to action in graphics. Keep store graphics descriptive.

Test instead of guessing

Design opinions are cheap; conversion data isn’t. Both stores give you free testing tools:

• Product Page Optimization (App Store): test up to three treatments of your screenshots, app previews and icon against the original page, with a share of traffic going to each.
• Custom product pages (App Store): up to 70 alternative product pages with their own screenshots and promotional text, each with a unique URL for ads and campaigns — and, with keyword assignment, a way to tailor screenshots to specific searches.
• Store listing experiments (Google Play): test graphics and descriptions against your current listing, including per-locale experiments.

Test one big variable at a time — first-frame message, color scheme, or layout — and give the test enough traffic to reach a conclusion. Small tweaks like a slightly different shade rarely produce a measurable difference. More on the wider strategy in the ASO guide.

Checklist

• The first three frames explain what the app is and why to pick it.
• One idea per screenshot; captions of about 2–6 words, focused on benefits.
• Captions readable when the screenshot is scaled to search-result size.
• Real, current UI with realistic data and a clean status bar.
• Consistent colors, fonts, device style and caption position.
• Social proof is real and documented; no prices in images.
• Correct sizes for every device class and locale — check with the screenshot checker and the size guide.
• Platform-appropriate devices on each store.
• A test planned for the next iteration.

Design it with our tools

Every pattern above is available as a starting point in the template gallery: text-top layouts, 3D tilt, panoramas spanning pages, before/after, review cards, big-number stats and multi-device sets. In the editor pages sit side by side, so panoramas line up across frames, and the same captions carry over to every device size and locale. Before exporting, check your first three frames at real size in the store listing preview.