Device Mockups for App Screenshots: Best Practices & When to Skip Frames

Frames are a design choice, not a default

Device mockups—bezels, Dynamic Island cutouts, hardware buttons—can make screenshots feel tangible. They can also shrink your UI, date your listing overnight, or clash with store policies. Indie teams often inherit a Figma template with a phone frame and never question it. This guide explains when frames help, when they hurt, and how Apple vs Google guidance differs.

What “device mockup” means in store creatives

In ASO practice, a mockup usually includes:

• Hardware bezel / rounded rect approximating a phone or tablet
• Optional status bar / Dynamic Island / camera housing
• Optional multi-device compositions (phone + tablet, three phones fanned out)
• Background color, gradient, or lifestyle scene behind the device

Full-bleed UI (no bezel) is the alternative: the app interface is the entire screenshot canvas, with marketing headlines overlaid in the safe margins.

Platform rules that affect framing

Apple App Store

Apple’s screenshot specifications focus on exact pixel sizes, format (JPEG/PNG), and no alpha. Creatives must follow App Store Review Guidelines and depict the app accurately. Hardware frames are commonly used on iOS listings, especially when the design language emphasizes premium product feel—but frames are not required. If you show a device, keep it recognizable and avoid misleading hardware claims (do not imply Apple Watch support with a Watch frame if you do not ship Watch).

App Previews have their own specs; do not assume a static mockup template equals a valid preview render.

Google Play

Play Console Help is more explicit on promotional imagery: Google discourages device imagery in screenshots and feature graphics because devices age quickly and can alienate users on other OEMs. For Wear OS and watch faces, Google goes further—screenshots must show the interface without device frames or extra non-UI graphics.

For phone listings, framed shots may still upload if they meet size/format rules, but they can reduce eligibility or fitness for certain large-format recommendation surfaces that expect clean in-app experience. When in doubt for Play, prefer full-bleed UI plus short taglines.

When device frames help conversion

Frames tend to work when:

1. Hardware context is the product — camera apps, AR, foldables, stylus workflows.
2. UI is sparse — a mostly white productivity screen needs a bezel to feel “app-like.”
3. You need scale reference — tiny controls make more sense inside a familiar phone silhouette.
4. Brand is premium / hardware-adjacent — audio, health wearables companion apps (still avoid implying unshipped devices).
5. Multi-step stories — three framed phones in one image can show a sequence (use sparingly; Play prefers real UI focus).

When to skip frames entirely

Skip or minimize frames when:

1. You prioritize Google Play large-format placements — Google asks for actual in-app experience and warns against device imagery.
2. Captions need maximum pixels — bezels steal vertical space from headlines and UI.
3. You refresh hardware yearly — last year’s notch shape quietly ages the brand.
4. Tablet / desktop layouts — fake phone frames on iPad screenshots look wrong; use 13″ full-bleed or real iPad chrome only if accurate.
5. Wear / TV / Automotive — follow form-factor rules; Wear especially bans frames.
6. Localization volume is high — simpler full-bleed templates resize and translate faster.

Best-practice production rules

1. Design for the store canvas, not the physical phone

Export to the store’s required pixel size first (e.g., App Store 1320 × 2868, Play 1080 × 1920). Place the mockup inside that canvas. Never design only at “iPhone logical points” and stretch.

2. Keep a safe content zone

Whether framed or not:

• Reserve the top ~15–20% for headlines on marketing screenshots
• Keep primary UI away from extreme edges that crop in search carousels
• Avoid placing critical text behind Dynamic Island / punch-hole overlays if you composite those elements

3. Match orientation to the app

Do not drop a landscape game into a portrait bezel with huge black bars. Pick portrait or landscape sets intentionally; both stores support landscape sizes when appropriate.

4. One lighting language

If you use 3D device renders, keep reflections subtle and consistent across the set. Mismatched metallic materials make the carousel feel like five different apps.

5. Status bar discipline

• Full battery / signal glyphs
• No personal notifications or carrier names
• Consistent time (many teams use 9:41 on iOS creatives for tradition—optional)

6. Don’t fake capabilities

No Watch, fold, or desktop frame unless the build supports it. Misleading screenshots risk review pushback and refund-shaped reviews.

7. Prefer official or accurate silhouettes

Generic “squircles” are fine; inaccurate logos or trademarked OEM marks without permission are not. Keep third-party marks out unless licensed.

Frame vs full-bleed: a decision matrix

Workflow for indie teams

1. Capture raw screens at highest device resolution you support.
2. Choose frame policy per store (iOS may frame; Play often full-bleed).
3. Build two export presets from one Figma component set.
4. Translate headlines without resizing bezels ad hoc.
5. QA on a real phone: open the live listing and swipe the carousel.
6. Revisit after each major hardware generation—or skip hardware entirely to escape that treadmill.

Tools that generate multi-size screenshots with optional frames can accelerate the preset approach; strategy still decides whether the bezel earns its pixels.

Accessibility and clarity

Frames add visual noise for low-vision users if bezels are high-contrast chrome next to tiny UI. Prefer:

• Larger UI scale inside the mockup
• Stronger caption contrast
• Alt text on Play assets describing the screen’s purpose

Bottom line

Use device mockups when they clarify scale or elevate a sparse UI—especially on iOS. Skip them when Google Play promotion, caption space, Wear rules, or hardware churn matter more. The winning indie pattern in 2026 is often two presets: lightly framed App Store sets and full-bleed Play sets, both telling the same conversion story.