Quick answer: A device frame is a realistic phone, laptop, or monitor border placed around a product screenshot. In a feed, a bare screenshot can look like a random attachment; a frame makes it clear that the image is a product.

Here's when to use one, how to do it, and when to skip it.

When to use a frame

Use a device frame when:

  • The image is a product announcement and the device form matters (mobile app, desktop app).
  • The feed shows multiple products and the frame helps yours stand out.
  • The screenshot needs orientation: a phone frame tells the reader this is a mobile product.

Skip a frame when:

  • The point is the interface detail itself; the frame shrinks the UI.
  • The screenshot is an annotated how-to, where text needs to be legible.
  • The frame is a decorative stock object with a fake screen glow.

The frame choices

  • Phone frame for mobile apps and mobile web products, in portrait.
  • Laptop frame for desktop apps and web apps.
  • Browser frame (the URL bar and tab chrome) for websites.
  • No frame for tight UI callouts and annotated workflows.

The browser frame is the lightest choice for most web products; the laptop frame is more dramatic.

Sourcing the assets

Use official device frames from the manufacturer where available, or a dedicated device-mockup tool. Key rules:

  • Use a current device; a five-year-old phone frame dates the launch.
  • Watch the license. Some official device assets are permitted for marketing, others aren't.
  • Keep the neutral colors (space black, silver, white); bright-colored devices compete with the product.

Placement and perspective

  • Straight-on, front view is the safest for social cards; the screen stays readable.
  • Perspective or 3D shots are good for a hero image, but the UI becomes smaller and harder to read.
  • Multiple devices (phone plus laptop) are appropriate on a multi-platform landing page, but crowded in a single feed card.

The fit

The screenshot should be placed inside the frame at the correct aspect ratio and scaled to fill the screen. A screenshot with the wrong ratio in a frame leaves bars or crops UI.

  • Mobile screen: 9:19.5 for modern phones, but 9:16 assets fit most standard frames; the Story size is 1080 × 1920.
  • Desktop screen: 16:9 or 16:10.

Background and shadow

  • A subtle drop shadow under the device separates it from the background.
  • The background is usually a solid or a quiet brand color.
  • Avoid lens flares and dramatic reflections; they date the image quickly.

Combining with annotations

A frame and annotations are often at odds:

  • The hero image uses the frame and no annotation.
  • The how-to uses the bare, tightly cropped screenshot with arrows.

The annotation guide covers the how-to version.

What to avoid

  • Fake screenshots. The product screen must be real.
  • Outdated hardware.
  • The frame larger than the screenshot. The UI is the point; the frame is the context.
  • Multiple overlapping devices on a single social card.
  • Stock reflection on the floor.

Frequently asked questions

Does a framed image need a different export size? No, export at the target platform size (1200 × 675 for X, 1080 × 1350 for Instagram); the frame is placed inside the canvas.

Can a phone frame hold a desktop screenshot? It shouldn't; the form factor is part of the promise.

Is there a license issue with Apple frames? Apple provides marketing guidelines for its devices; use the official assets or a licensed mockup and follow the terms.

Should the phone be tilted? Straight-on is the safest for readability; a small tilt is acceptable for a hero image.

Do generated launch images include the frame? The launch kit in Neatico composes framed product screenshots as one of the standard hero treatments; the bare annotated versions stay available for how-to posts.

Use a frame for the hero, a bare crop for the how-to, and make sure the UI is always the biggest thing in the image.

Related guide: the product demo video guide.