App Store screenshots are the highest-leverage piece of art an indie app has, yet most look like cropped device screens with hope attached. This article gives the layout patterns that actually convert in 2026, with the dimensions, caption rules, and per-device variants that hold up across the Apple ecosystem.
Background
In 2026 the App Store search and feed page shows the first 3 screenshots inline, before the user has tapped the listing. Those 3 frames carry as much weight as the icon and subtitle combined for the install decision. The conversion frame is fixed: caption (the promise) at the top, the actual product screen below, and just enough chrome to make it feel real. Designs that fight this frame — full-bleed marketing illustrations, no caption, walls of text — measurably underperform.
A second shift that matters: visionOS, macOS, and iPad listings are increasingly displayed alongside iPhone in unified search. If you ship multiple platforms, the screenshot variants should look like one family — same caption font, same color, same general composition — or the listing feels stitched together from different products.
How to tell
- You are launching for the first time or refreshing screenshots after a UI redesign.
- Your install conversion rate (page views to installs) is below 30%.
- Your screenshots are pure device screens with no captions.
- Your screenshots look great at full size but are unreadable at the thumbnail size shown in search.
Quick verdict
Use the caption-first frame: bold one-line caption at the top (8 words or fewer), real product screen below, consistent background color across all 10 slots. Front-load the first 3 frames with your strongest benefits. Provide both light and dark variants so each renders well on the user’s chosen system theme.
The first 3 frames
- Frame 1 — primary promise. The one-sentence headline answer to “why install this”. Caption restates the subtitle in a tactile way; screen shows the most representative real state of the app.
- Frame 2 — key differentiator. Why this app vs the obvious competitor. Caption is concrete (“21-day streaks” not “powerful features”); screen shows the unique feature in action.
- Frame 3 — social proof or specificity. A press quote, a user testimonial line, or a very specific number. Screen can be an achievement / share view, not the home screen.
Frames 4-10 are for depth — feature tour, integrations, privacy posture, before/after. Most users never scroll that far; do not put critical content there.
Caption rules
- Maximum 8 words. Anything longer is unreadable at thumbnail size.
- Lead with a verb or a number. “Build habits in 5 minutes”, “21 days to a routine”.
- No marketing adverbs (“smoothly”, “easily”, “magically”). They are placeholders for the actual benefit.
- One caption per frame. Stacking captions (“title” + “subtitle”) halves readability.
- Same font, same color, same position across all 10 frames. Visual consistency reinforces brand.
Dimensions and templates
- iPhone 6.7” / 6.9” reference: 1290 x 2796. This is the spec App Store auto-scales from for older devices, so design at this size and downscale.
- iPad 13”: 2064 x 2752. Designed separately — the layout shifts to a split or sidebar.
- Apple Vision Pro: 3840 x 2160 widescreen. Required if you ship visionOS; optional otherwise. Use sparingly because users typically install via iPhone listings.
- Localized screenshots: produce per-language captions, not per-language device frames. The screen content stays mostly identical except for app UI strings.
Light vs dark
- Provide both. App Store renders the user’s system theme by default.
- Background color should match the app’s primary brand color in light mode, and the dark-mode equivalent in dark mode. Never invert blindly.
- Captions stay high-contrast against the background — black text on light, white text on dark, never mid-gray.
- The screen content inside each frame should also reflect light or dark mode. A light-mode screenshot pair with a dark-mode UI screenshot inside looks inconsistent and breaks trust.
Production workflow
- Source of truth: a Figma file with one frame per screenshot, organized by language and theme. Component instances for the caption block so font changes propagate.
- Use Fastlane snapshot or Xcode UI testing to capture real device screens at the exact pixel dimensions. Avoid manually scaled screenshots — they look slightly soft.
- Build a small script that batches the Figma export plus the captured screen into the final composite image, one per locale. Saves hours every refresh.
- Version-control the Figma file and the export script alongside your app code so screenshot history lines up with release history.
Video preview (optional but recommended)
- Up to 30 seconds, autoplays silently in the listing. First 3 seconds carry 70% of the impression.
- No intro logo, no fade-in. Start on the strongest UI state.
- Captions appear in-video the same way as in screenshots — top, bold, 1 line.
- Production: screen-record at 60fps, trim aggressively, do not add music. Background music in app previews lowers conversion in our tests.
Common mistakes
- Walls of marketing text covering the screen. The screen should be 80% real product, not 80% caption.
- No caption at all. Users do not interpret the screen by themselves; the caption is the bridge between their need and your screen.
- Different background colors across frames. Looks “designed” individually, looks chaotic in a row.
- Mockup phones with hands. The App Store already frames screenshots in a device chrome; nested chrome is visual noise.
- Skipping localization. A native-language caption with a quick translation in the screen image converts notably better than English-everywhere.
- Optimizing for full-size display only. Always preview at thumbnail size — that is what most users see.
FAQ
- Can I A/B test screenshots?: Yes, via Product Page Optimization (PPO) in App Store Connect. Up to 3 variants vs control. Run for at least 7 days; weekly variance can fool you.
- Do I need all 10 slots filled?: No. 6 strong frames beats 10 mixed. Apple does not penalize fewer slots, and reviewers tend to scroll only the first 5.
- Should I use device frames or full bleed?: Either, but stay consistent. Apple’s own apps now lean full-bleed; many indie apps still use device frames for clarity. Pick one.
- What if I support iPhone, iPad, and Mac?: Design iPhone first (highest volume), iPad second (different layout), Mac last (often lowest install volume). Reuse captions across all three.
- How often should I refresh screenshots?: Every major UI change or every 4-6 months, whichever comes first. Stale screenshots that do not match the live UI hurt reviews (“the app looks different than the listing”).
- Can I use AI-generated illustrations?: Sparingly, and only for backgrounds or decorative elements. The screen content itself must be your real UI; AI-rendered “fake screens” usually fail review and tank trust.
- Should I include user data in screenshots?: Use realistic fake data, not lorem ipsum, and never real user data. Names like “Alex Morgan” and “Sam Chen” feel real without claiming a specific person.
Related
- In-app purchase pricing strategy for indie apps
- Writing your App Store listing so people actually install
- What an indie developer should prepare before launching on the App Store
- App Store review — the rejection reasons you can avoid in advance
Tags: #Indie dev #App Store #Launch #design