Device Mockup

A device mockup is an image that shows a screenshot inside a drawn or photographed device frame, such as a phone, a tablet, a laptop or a browser window. The frame shows viewers where the interface runs.

Each mockup template has a screen area with a fixed size and aspect ratio. The screenshot must match that area, or it is stretched, cropped or surrounded by empty space. Templates based on photographs also apply perspective, so the screenshot is warped to fit the angled screen.

A mockup is a presentation image. It is different from device emulation, which changes how the page itself renders.

Why device mockups matter

A bare phone screenshot on a web page can look like a random tall rectangle. The frame tells the viewer the screen size and context at once. It also gives mixed screenshots a consistent look on a landing page or in a deck.

Common device frames

• Phones in portrait orientation, with or without the notch or Dynamic Island area.
• Tablets in portrait or landscape.
• Laptops with the screen at an angle.
• Browser windows with a simple address bar, used for web app screenshots.

How to create device mockups

1. Capture the screen at the frame's screen ratio.
2. Open a mockup template in a design tool or a mockup generator.
3. Place the screenshot in the screen area and check the corners and notch.
4. Export at the size the destination needs.

In Temposhot, the Custom Area picker has phone presets such as iPhone 17 Pro (402×874), iPhone 17 Pro Max (440×956), Galaxy S25 (360×780) and Pixel 9 (360×808). For web pages, Website Capture has a Mobile device size of 390×844.

Common mistakes

• Using a screenshot with a different ratio, so the frame cuts off content.
• Upscaling a small capture to fill a large frame, which blurs text.
• Putting a mockup where a store expects a plain screenshot. Check the store's current requirements.
• Using outdated device frames that no longer match current hardware.

Taking the same screenshots again and again?

Capture every phone-size screen in one run with screenshot automation on Mac.

Common questions

Do app stores accept mockups?

Rules differ by store and change over time. Read the store's current screenshot guidelines before submitting.

What resolution should the screenshot have?

At least the pixel size of the frame's screen area. A Retina capture usually provides enough pixels.

Sources

• Mockup (Wikipedia)

Related resources

• Capture sources: Custom Area presets.
• Social Image Composer: place a screenshot on a background with padding.
• Aspect Ratio Calculator: match a frame's screen ratio.