DEV Community

Chris F A
Chris F A

Posted on

App Store screenshots: a designer's playbook for 2026

TL;DR

  • Design for the 6.7" iOS format only; Apple scales the rest
  • Every converting layout is the same three-band structure: headline, device, caption
  • Sequence your screenshots as a six-part story, and over-invest in the first three
  • Localization means redesigning layouts, not just swapping strings
  • Run the thumbnail test and the sequence test before every upload

App Store screenshots are the single highest-leverage design surface for a mobile app. Users decide install-or-scroll within the first few seconds of scanning search results, and those seconds are dominated by your screenshots. Not your icon. Not your description. Screenshots.

Despite that, most teams' screenshots are afterthought screengrabs. Big miss. Here's the playbook I'd insist on if you're leading design on a mobile app.

The 6.7" primary format

As of 2026, the iOS App Store only requires 6.7" screenshots (iPhone Pro Max class, 1290 x 2796 px). Apple auto-generates smaller-device previews from your 6.7" upload. Design for the primary; don't waste a cycle laying out 5.5" separately.

Android Play Store: 1080 x 1920 minimum, up to 8 screenshots. Similar hierarchy applies, but device frames matter less (Play doesn't render them prominently).

Hierarchy: headline > device > caption

Every screenshot layout that consistently converts uses the same three-band structure:

┌──────────────────────────────┐
│                              │
│   BIG HEADLINE (60pt+)       │  <- Top 1/3
│   Single value prop          │
│                              │
├──────────────────────────────┤
│                              │
│   [Device Mockup]            │  <- Middle 1/3
│   Real app UI                │
│   Real content, not lorem    │
│                              │
├──────────────────────────────┤
│                              │
│   Sub-headline in a line     │  <- Bottom 1/3
│                              │
└──────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Why it works: at thumbnail size (roughly 120px wide in search results), only the headline is legible. That headline sells the install. The device and caption sell the feature to users who tap through.

The story arc across 6 screenshots

You get up to 10 screenshots on iOS, 8 on Android. Users see the first 3 in search results and the rest when they tap into your listing. Structure them as a narrative:

  1. The promise. Your single strongest value prop. "Every dollar tracked in one place."
  2. The proof. The core feature that delivers that promise. Show the app doing the thing.
  3. The delight. A visual moment that makes them want to hold the app. Widgets, animations frozen at their most impressive frame, a beautiful data visualization.
  4. The utility. A secondary feature that reinforces they'll use it often.
  5. The trust. Social proof, awards, press mentions.
  6. The action. A screenshot that literally says "Get started free" with a CTA-styled headline.

The first three carry most of the conversion weight. Invest disproportionately in them.

Localization: don't just translate, redesign

German copy runs substantially longer than English. Arabic reads right-to-left. Chinese ideographs need larger vertical spacing.

If your English headline is "Track your money," the German equivalent "Verwalten Sie Ihr Geld" won't fit at 60pt in the same box. You need per-language screenshot layouts. Apple lets you upload localized screenshots per storefront. Use it.

Minimum viable localization: English plus your top two non-English markets. Don't bother with every App Store language until you have data on where your installs come from.

Testing before submission

Two tests I run on every screenshot set before uploading:

Thumbnail test. Screenshot your screenshots. Resize to 120px wide. If you can't read the headline, redesign.

Sequence test. Line up all 6 in order. Do they tell a story? Or is it 6 random screens? If the latter, reorder or replace.

If you'd rather automate the first pass, the screenshot linter in the deploy pipeline catches most of the common failures before submission: thumbnail-legibility check, device-frame correctness, alert-in-screenshot detection.

Common mistakes

  • Using third-party device mockup frames. Apple prefers the official device chrome from its own design resources, not third-party frames.
  • A screenshot showing an alert or modal (it looks like an error state at thumbnail size).
  • Dark-mode UI in screenshots when the app defaults to light mode (users flip-flop mentally).
  • Numbers or metrics in the mock UI that don't add up. Obsessive users notice and flag your app as fake.

Worth four hours, every launch

If you're rolling your own process, spend the four hours per launch. Screenshots are the four hours of design that most dominate your install conversion.

What does your current first screenshot say at 120px? Drop it in the comments; happy to critique headlines.

Top comments (0)