App Store Screenshot Mockups: Device Frames Done Right

TL;DR: An App Store screenshot mockup places your real app screen inside a device frame, flat or tilted, usually under a headline. To do it right, use a current device at the exact screen aspect ratio, a clean status bar and realistic data, keep the device large enough that the UI stays readable, and export flat JPEG or PNG without alpha. On Google Play, consider going frameless.

There is no single right mockup style. Each one trades UI size against context and visual energy.

A practical default is straight-on or frameless for most screens, with one tilted or multi-device hero where depth supports the message. The frameless screenshot guide covers when to drop the bezel entirely.

Wrong details are what make a mockup look cheap. Check these before you export:

• Current models. A notch where the current generation has a Dynamic Island, or a home button on a modern iPhone, dates your app instantly.
• Exact aspect ratio. Your screenshot must fill the frame's screen with no stretching or letterboxing. Capture on a simulator that matches the frame (for example 6.3-inch or 6.9-inch) so the pixels line up.
• Screen corners. The screenshot's corners should follow the frame's rounded display, not poke out as square edges.
• Real colors. Use device finishes that actually exist. Invented colors look off to anyone who owns the phone.
• Matching platform. Use iPhone and iPad frames on the App Store and Android devices on Google Play. Apple's Guideline 2.3.10 says not to include names, icons or imagery of other mobile platforms in your metadata.
• Right device for the screen. iPad UI belongs in an iPad frame. A phone screenshot scaled into a tablet frame is easy to spot.

A frame showcases whatever is on the screen, so the screen itself has to look intentional. On the iOS Simulator, override the status bar before capturing with xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100. On Android, System UI demo mode does the same job. Step-by-step commands are in the clean status bar guide.

Then fill the app with believable content: realistic names, numbers that make sense, no placeholder text and no test accounts. If you show people or photos, use fictional data and images you have the rights to.

Angled devices are popular on hero screenshots because they add depth. They also shrink and distort the UI, which matters when shoppers see your screenshots at thumbnail size in search results. Keep tilted mockups legible:

1. Limit the angle. A gentle tilt reads as depth; a steep one turns your UI into a sliver.
2. Use it once or twice per set. One 3D hero plus straight-on feature screens keeps the gallery readable.
3. Let the headline carry the message. On a tilted screen, the caption explains the benefit, not the tiny UI.
4. Add a zoom callout. Magnify the one element that matters, such as a chart, a result or a key button, next to the device.
5. Check it small. Shrink the export to roughly search-result size and ask whether you can still tell what the app does.

Neither store requires a device frame, but several official documents shape how you use one:

The practical takeaway: on the App Store, a frame is a design choice. If you reuse the same mockups in ads, on your website or in a press kit, Apple's separate marketing guidelines are stricter about how Apple products may appear, and Apple provides official bezels for that purpose. On Google Play, frameless screenshots follow Google's recommendation more closely; see Google Play screenshot best practices.

Outside the stores, you usually want the device on a transparent background so it sits on any page. ScreenShipper's free device mockup generator exports framed screens as transparent PNGs for landing pages, social posts and launch galleries, and the iPhone mockup guide covers angles and colors. For paid campaigns that show Apple devices, read Apple's marketing guidelines first.

Keep those transparent files away from App Store Connect and Play Console. Store uploads need flat images, and an alpha channel is a common cause of rejected uploads. The alpha channel guide shows how to flatten a file in Preview or with sips.