Device Frames for App Videos: Best Practices

Should your app demo video show a floating iPhone, or just the screen? Device frames can make your video look polished and premium — or dated and distracting. Here's how to use them well.

Tools like Matte make adding frames trivial — one click and done. But knowing when to use them matters more than how.

When to Use Device Frames

Device frames aren't always the right choice. Here's when they work best:

✅ Use Frames For:

• Marketing websites — Frames add visual interest and help your video stand out on landing pages
• Social media posts — A device frame provides context and makes the video feel more tangible
• Pitch decks — Investors want to see your app in a real-world context
• Product Hunt launches — Polished presentation matters for first impressions
• YouTube demos — Frames help fill the 16:9 canvas with portrait app recordings

❌ Skip Frames For:

• App Store preview videos — Apple requires full-screen recordings without device bezels
• Google Play Store — Same rule: full-screen only
• In-app tutorials — Users are already in your app; frames add nothing
• Bug reports — Developers need to see the raw screen

Choosing the Right Frame

Not all device frames are created equal. Here's what to consider:

Match the Actual Device

If you're showing an iPhone 15 Pro recording, use an iPhone 15 Pro frame. Sounds obvious, but mismatches are common. The notch shape, corner radius, and screen size should all align with your recording.

Color Coordination

Apple offers devices in multiple colors. Choose a frame color that complements your app:

• Space Black / Graphite — Safe choice, works with everything, professional look
• Silver / White — Clean and minimal, great for light-themed apps
• Gold / Natural Titanium — Warm and premium, pairs well with warm color palettes
• Blue / Colored options — Bold choice, make sure it doesn't clash with your app's colors

Frame Style: Realistic vs. Minimal

Both styles can work well — it depends on your context and brand aesthetic.

Making Device Frames Look Good

1. Get the Perspective Right

Flat, straight-on device frames are fine, but angled perspectives can add dynamism. If you go angled:

• Keep the angle subtle (5-15 degrees)
• Match the perspective of your screen recording
• Avoid extreme 3D rotations that distort the UI

2. Add Depth with Shadows

A well-crafted shadow makes the device feel like it's floating in space. Key principles:

• Soft shadows — Large blur radius (40-80px), low opacity (10-20%)
• Offset direction — Usually down and slightly to one side
• Multiple layers — A tight, darker shadow close to the device plus a larger, softer ambient shadow

3. Choose the Right Background

Your background can make or break the presentation:

• Solid colors — Simple and effective, pick a color from your app's palette
• Gradients — Add visual interest without distraction, stick to 2-3 colors
• Blurred environments — Photos with heavy blur can add warmth
• Abstract patterns — Geometric shapes, subtle textures

Avoid busy backgrounds that compete with your app's UI.

4. Consider Motion

Static frames work, but gentle motion can elevate your video:

• Subtle rotation — 2-3 degrees over the video's duration
• Slow zoom — Ken Burns-style drift keeps the eye engaged
• Parallax — Background moves slower than the device for depth

Keep motion subtle. The focus should be on your app's UI, not the choreography.

Common Frame Mistakes

1. Outdated device — Using an iPhone X frame in 2026 signals "old app." Use current-generation devices.
2. Resolution mismatch — Your recording doesn't fit the frame properly. Black bars, cropping, or stretching all look amateur.
3. Over-the-top 3D — Extreme angles, spinning devices, excessive reflections. Restraint is key.
4. Wrong device type — Showing an iPad app in an iPhone frame (or vice versa). Match the device to the content.
5. Cluttered compositions — Too many devices, elements, or text competing for attention.

Device Frames for Different Platforms

Twitter/X

Square (1:1) or portrait (4:5) videos with centered devices work well. Keep text minimal — let the UI speak for itself.

Instagram

Similar to Twitter. Reels (9:16) can show the full device in frame with room for captions. Stories work great with device mockups.

YouTube

Landscape (16:9) requires thought about composition. You can:

• Center a single device with generous padding
• Show multiple devices side-by-side
• Use the extra space for text callouts or feature highlights

Your Website

You have full control here. Match your site's design language. Many developers use hero videos with device frames as the centerpiece of their landing page.

Where to Get Device Frames

If you're creating frames manually, here are reliable sources:

• Apple Design Resources — Official frames directly from Apple, updated with each new device
• Facebook Design — Free device mockups in Sketch/Figma format
• Figma Community — Search for "device mockup" for countless options
• Built-in tools — Apps like Matte, Rotato, and MockUPhone have frames included

Final Thoughts

Device frames are a simple way to elevate your app videos from "screen recording" to "polished marketing asset." The key is restraint: choose the right context, match your device to your recording, and let your app's UI be the star.

Remember: for App Store and Play Store uploads, skip the frames entirely. For everything else, a well-chosen device frame shows you care about the details — and so does your app.