App Store screenshot best practices
Store listings are won in the first two screenshots. Here is how to decide what goes on them — and what the rest of the gallery is actually for.
Reading time: about 9 minutes
- Search results show two or three portrait screenshots at thumbnail size. That is the real ad.
- Pair every framed screen with one benefit headline of four to six words — never a UI label.
- Order the gallery hook → proof → breadth → trust → nudge. Five to seven beats ten.
- Design at 150 px wide first. If the headline dies at thumbnail scale, nothing else matters.
- Change one variable per test and expect a 5–15% lift, not a transformation.
App Store Optimisation is usually explained as keywords and metadata. That is the half that gets you seen. The half that gets you installed is the gallery — and specifically the first two or three screenshots, which are the only ones most people ever look at. This guide is about that half.
1. Know what the store actually shows
Almost every screenshot mistake comes from designing for the wrong surface. You are looking at a full-size canvas in a design tool; the person deciding whether to install is looking at something much smaller, often with three apps side by side.
| Where it appears | What is actually visible |
|---|---|
| App Store search results | The first three portrait screenshots, or the first landscape one, rendered small and side by side. Most people never scroll past this. |
| Google Play search results | A tighter crop and fewer visible frames than Apple. The icon does more work here, and the first screenshot has to survive being clipped. |
| The product page | The full scrollable gallery, with the first screenshot partially cut off at the leading edge to signal there is more. |
| Editorial and category browsing | Your icon and first screenshot appear far from your app name and description, with no context around them. |
The practical consequence: screenshots one and two are an advertisement, not documentation. Everything after them is for the smaller group who are already interested enough to swipe.
2. Lead with the outcome, not the interface
A screenshot of your home screen tells someone what your app looks like. A headline tells them what it does for them. Pair every framed screen with one short line that names a result.
- Weak: “Dashboard” — a label for the UI.
- Strong: “See every account in one place” — a result.
- Weak: “Powerful analytics engine” — vague and unverifiable.
- Strong: “Know where your money went, every Friday” — concrete and specific.
Four to six words is the working limit. If a line needs two rows at thumbnail size, it is too long. There are twelve reusable patterns for this line on the headline formulas page, including the words worth deleting on sight.
3. Order the gallery as a story
The order matters more than the count. A sequence that holds up across most categories:
| Position | What it does |
|---|---|
| 1. The hook | Your single strongest benefit at the biggest type size in the set. If someone reads only this frame, they should understand why the app exists. |
| 2. The proof | The feature that actually delivers the hook, shown working on a real screen rather than described. |
| 3–4. Breadth | Two supporting capabilities, one per screenshot. This is where you answer "but does it also…". |
| 5. Trust | Ratings, install counts, a press line, or a security guarantee — whatever is true and checkable. |
| 6. The nudge | The reason to start now: a free tier, a two-minute setup, an import from the tool they already use. |
Five to seven screenshots is the sweet spot. The temptation to fill all ten slots is worth resisting — a weak eighth frame does not sit harmlessly at the end, it makes the whole set look padded.
4. Design for the thumbnail, not the canvas
The thumbnail test: shrink the finished screenshot to about 150 px wide — roughly what a search result gives you. If the headline is no longer legible, the type is too small or the line is too long. Do this before anything else; it invalidates more designs than any other single check.
- High contrast between headline and background. Light grey on white survives your monitor and dies in the store.
- One typeface in two weights. Decorative faces turn to mush when scaled down.
- Aim for roughly 60–80 px cap height on a 1290 × 2796 canvas. That is larger than it feels correct to make it.
- Size the device frame so the screen still reads as a real app without squeezing the headline out of the top band.
- Keep everything meaningful inside the crop margins on the screenshot sizes & safe zones page.
5. Use colour to signal category
People scan galleries at speed and read colour before text. Matching your category’s convention buys instant comprehension; differentiating inside it is what makes you memorable. Do both, in that order.
| Category | Convention | What it signals |
|---|---|---|
| Finance and fintech | Deep blues, greens, near-black | Signals security before a word is read. Bright warm palettes read as risky here. |
| Health and fitness | High-energy gradients, saturated accents | Motion and effort. Restraint reads as clinical rather than motivating. |
| Productivity and SaaS | White space, one accent, restrained type | Calm and control. Busy galleries undercut the promise of simplicity. |
| Games | Full-bleed art, high contrast, character-forward | The art is the pitch. UI screenshots underperform badly in this category. |
| Food and delivery | Warm reds, oranges, photography-led | Appetite. Flat illustration converts worse than real food imagery. |
Then pull a single accent colour from your app icon and carry it across every frame. That one decision does more for brand recall in a search result than any amount of logo placement. Category-specific breakdowns live under screenshots for fintech, fitness, e-commerce, SaaS, food delivery and games.
6. Five patterns that keep working
Look at enough top-grossing listings and the same handful of layouts keep reappearing. They are worth knowing not to copy but to choose between deliberately.
| Pattern | When it works, and when it does not |
|---|---|
| The single-benefit opener | One short line, one device, an uncluttered background. It wins because it survives the thumbnail crop when nothing else does, which is why it is the most common first frame in almost every category. |
| The annotated screen | A real screen with one callout pointing at the thing that matters. Useful for the second or third frame, where someone has already decided to look closer. It fails as an opener because callouts vanish at thumbnail size. |
| The social-proof slab | A rating, an install count, or a named award set in large type with the device secondary or absent. Effective around position five, once interest exists and scepticism starts. |
| The continuous panorama | A background image or device row that runs across two or three frames so the gallery reads as one scene. Distinctive on the product page, risky in search results where frames appear out of order or cropped. |
| The before-and-after | A split frame contrasting the problem with your app resolving it. Strong for apps whose value is a change of state — budgeting, cleanup, editing — and weak for apps whose value is breadth of features. |
Four rendered art directions of the same screen — and which suits which category — are on the screenshot styles page.
7. Mistakes that quietly cost installs
None of these will get your app rejected. They just lose you conversions without ever showing up as an error.
| Mistake | Why it costs you |
|---|---|
| Opening on a settings or home screen | It describes the interface rather than the outcome, and it is the frame most people judge the app on. |
| Headlines longer than one line at thumbnail scale | A line that wraps at 150 px wide becomes an unreadable grey block. Four to six words is the ceiling. |
| Ten screenshots because ten are allowed | Attention drops off sharply after the third frame. Later screenshots dilute rather than add. |
| A different look on every frame | The set stops reading as one product. Colour, type and framing should carry across all of them. |
| Shipping English screenshots to every storefront | A localised binary with English marketing copy reads as "not built for me" — the most common missed win in ASO. |
| Low contrast between headline and background | Light grey on white survives your monitor and dies in a search result. |
| A device frame Apple no longer ships | It dates the app instantly, and it is a documented review flag rather than just a style problem. |
| Never testing after launch | Both stores give you free experimentation. Not using it means your first guess is permanent. |
8. Where screenshots sit in the wider ASO picture
Screenshots are the conversion half of ASO. They do nothing for discovery — no store ranks you higher for a better gallery — but they decide what happens to the traffic your keywords and metadata earn. Three neighbouring pieces are worth doing properly alongside them:
- Localisation. Translate the headlines before anything else, budget for 20–35% text expansion in languages like German, and start with your top five install markets. The full method is on localised screenshots.
- Testing. Product Page Optimization on the App Store and Store Listing Experiments on Google Play are free. Change one variable, run one to two weeks, expect 5–15%. See screenshot A/B testing.
- Diagnosis. If installs are flat, find out whether you are losing people at impression or at product page view before you redesign anything — app store conversion rate walks through the funnel.
For the full release-day sweep across metadata, creative, compliance and post-launch, use the launch & ASO checklist; unfamiliar terms are defined in the ASO glossary.
Screenshot questions
How many App Store screenshots should I use?+
Five to seven. Apple allows up to ten and Google Play up to eight, but attention falls off sharply after the third frame — later screenshots dilute the set rather than strengthen it. Five deliberate screenshots consistently outperform ten half-considered ones.
Which screenshot matters most?+
The first, by a wide margin, and then the second. Search results show only two or three portrait frames at thumbnail size, so those are the ones most people ever see. Treat them as an advertisement and treat everything after them as documentation for the smaller group who tapped through.
Should App Store screenshots have text on them?+
Yes. A raw capture tells someone what your app looks like; a headline tells them what it does for them. Both stores expect marketing overlays on gallery images. The rule is that the text must be truthful and must not reference a competing store — see our screenshot requirements page for the full content rules.
Portrait or landscape screenshots?+
Portrait for almost everything. Search results give portrait frames more visible slots, and landscape shows only one at a time. Landscape makes sense for games and media apps that are genuinely used in that orientation. You cannot mix the two inside one device family.
Do the same screenshots work for the App Store and Google Play?+
The design ideas carry over; the files should not. The stores crop differently, Play leans harder on the icon in search, and the required dimensions differ. Reuse the art direction and the headline strategy, re-render at each store’s sizes rather than resizing one set into the other.
How do I know whether my screenshots are working?+
Look at conversion rate from product page view to install rather than downloads in aggregate — downloads move for reasons that have nothing to do with your gallery. Then use Product Page Optimization on the App Store or Store Listing Experiments on Google Play to test a single change at a time.
How often should I update my screenshots?+
After any significant UI change, after a repositioning, and seasonally if your category is seasonal. Beyond that, treat them as something you test rather than something you finish — a listing that has never been revisited is usually leaving a double-digit percentage on the table.
Put it into practice
Upload your raw screens and App Mockup Generator AI handles the framing, the layout and the export dimensions — leaving you the part that actually moves conversion: deciding what to say. Start in the App Store screenshot generator or the Google Play generator, or create a free account and try it on your own screens.