How to make a screenshot mockup
Follow these steps in order. Each one is something we do on client work.
- Capture clean screens. Demo data, full battery, clean status bar.
- Choose framed or frameless. Frames date quickly; frameless is simpler.
- Add a caption. Five words or fewer.
- Place the capture. Same position on every screen.
- Export at store sizes. Check pixels.
- Review on a phone. Look at it small.
App screenshot mockup: key rules and context
Frame vs frameless. Frames add context but take 15–25% of the canvas. Frameless shows bigger UI with a caption above. Partial frames (top of device cropped) are a middle ground.
Rules. Apple requires screenshots to show the app in use (2.3.3). Google forbids misleading device imagery. Don't show a device of the wrong platform: no iPhone on Google Play.
Where to get frames. Apple publishes product bezels for marketing. Many generators include frames: screenshot generator.
Test it. Frames vs frameless is a good first screenshot A/B test.
Worked example (hypothetical)
This example is illustrative. The app is made up, and so are any numbers in it.
Say Flowly puts screenshots inside an old phone frame. The frame looks dated. We'd go frameless with a rounded capture and a soft shadow.
Mockup tools compared
| Tool | Best for |
|---|---|
| Figma | Full control |
| Canva | Quick drafts |
| Our generator | Fast exports at store sizes |
Common mistakes
- Old device frames. Dated quickly.
- Messy status bars. Distracting.
- Placeholder data. Looks unfinished.
- Wrong export size. Upload fails.
For more on this topic, our ASO guides hub collects the rest of this series.
Screenshot specs we design to
Both stores publish exact requirements. These are the ones that matter most for a phone-first app.
| Store / device | Size or rule | Count |
|---|---|---|
| App Store, iPhone 6.9-inch | 1320 × 2868, 1290 × 2796 or 1260 × 2736 px (portrait) | 1–10 per device size |
| App Store, iPad 13-inch | 2064 × 2752 or 2048 × 2732 px (portrait) | 1–10 per device size |
| App Store, format | .jpeg,.jpg or.png | — |
| Google Play, phone | JPEG or 24-bit PNG, 320–3,840 px, long side no more than 2× the short side | Minimum 2 to publish, up to 8 per device type |
| Google Play, Chromebook / tablet | 1,080–7,680 px, 16:9 or 9:16 | Minimum 4 recommended |
How we measure the result
For app screenshot mockup, success is measured on conversion, not looks. Screenshots mainly change conversion: the share of people who see your page or search result and then install. App Analytics reports product page views and conversion rate, and product page optimization tests show estimated lift per treatment.
Checklist
Copy this list into your release notes or ticket and tick each item off before you ship.
- Clean captures
- Frame choice
- Captions
- Consistent placement
- Correct sizes
- Reviewed on phone
Sources
- Apple: Screenshot specifications (accessed 26 October 2026)
- Google Play Console Help: Add preview assets to showcase your app (accessed 26 October 2026)
- Apple App Store Connect Help: Screenshot specifications (accessed 26 October 2026)
Questions
Do mockups increase installs?
No fixed answer; test it.
Can I use iPhone frames on Play?
No.
Are angled 3D mockups OK?
Yes, if UI stays readable.
Where are official frames?
Apple Design Resources.
Do you make mockups?
Yes, inside Screenshots A/B.
Should screenshots include a device frame?
It's optional. Frameless designs avoid looking dated when new devices launch.