Device Mockups: The Complete Guide

If you have ever dropped a flat screenshot into a landing page and felt it look cheap, you already understand why device mockups exist. A mockup wraps your screen in a phone, tablet, laptop, or watch frame, so the work reads as a real product instead of a loose image. That small shift in context changes how people judge your design, and it often changes whether they trust it.

This guide is for designers, founders, marketers, and anyone shipping app or web work who wants their screens to look finished. I will explain what device mockups are, the main types, where each one belongs, and how to make one from a single screenshot in a few minutes. By the end you will have a repeatable workflow and a clear sense of when to reach for flat versus 3D.

What you will learn

• What device mockups are and why they lift perceived quality.
• The core types: flat 2D, 3D, and isometric, with plain trade-offs.
• Where to use mockups: landing pages, app stores, decks, and social.
• A step-by-step way to turn a screenshot into a mockup.
• How backgrounds, lighting, and shadows create realism.
• Export settings for resolution that stays crisp everywhere.

What device mockups are and why they matter

A device mockup is a picture of your screen placed inside a realistic frame. The frame can be an iPhone, an Android phone, a tablet, a laptop, a desktop monitor, or a watch. The screenshot sits in the display area, and the device gives it scale, edges, and a sense of being held or used.

The reason mockups matter is context. A raw screenshot has no edges and no size cue. A viewer cannot tell if it is a tiny widget or a full app. Put the same screen inside a phone and the brain instantly reads it as a mobile product. That single cue makes the work feel intentional.

There is also a trust effect. People associate device frames with shipped, real software. When you present concepts inside frames, stakeholders stop critiquing pixels in a vacuum and start reacting to the product. For a deeper tour of the space, see our screenshot to mockup workflow.

The main types of device mockups

There are three families you will use most: flat 2D, 3D, and isometric. Each one sends a different message and fits a different job. Picking the right one is half the work.

Flat 2D mockups

A flat 2D mockup shows the device straight on, with no perspective. It is clean, neutral, and easy to read. The screen stays fully visible, so nothing gets cropped or skewed.

Use flat mockups when clarity matters most. App store screenshots, documentation, and feature lists all benefit from this honest, head-on view. Learn the details in our 2D mockups documentation.

3D mockups

A 3D mockup tilts and rotates the device in space. It feels dynamic and premium, and it catches the eye on a hero section or a social post. The trade-off is that perspective can hide part of the screen.

Reach for 3D when you want energy and depth more than perfect legibility. Our 3D mockups guide covers camera and orbit controls in depth.

Isometric mockups

An isometric mockup uses a fixed angled view with parallel lines and no vanishing point. It looks technical and modern, and it works well for scenes with several devices arranged together.

Isometric layouts shine in pitch decks and product diagrams. See our piece on isometric mockups for layout ideas. If you are weighing the first two, the 2D vs 3D comparison breaks it down further.

Type comparison at a glance

Where to use device mockups

The same screen can do very different jobs depending on where it lands. Matching the mockup to the channel keeps your work sharp and on message.

Landing pages

On a landing page, the hero mockup is the first proof your product is real. A tilted 3D phone or a clean laptop frame gives instant context above the fold. Keep the screen content simple so the message survives at a glance.

App store listings

App stores reward clarity and consistency. Flat 2D phone frames with short captions convert best, because shoppers scan fast. Follow the sizing rules in Apple's App Store screenshot specifications, and see our app store screenshot guide.

Pitch decks

In a deck, mockups carry the story between bullet points. A single device per slide keeps focus, while an isometric scene can show a whole flow at once. Our pitch deck mockups guide has slide-by-slide tips.

Social media

Social feeds move quickly, so contrast and motion win. A bold background behind a 3D frame, or a short spin video, stops the scroll. Animated frames help here, and our animated video mockups guide shows how.

How to make a device mockup from a screenshot

Here is the core workflow I use. It takes a single screenshot to a finished frame in a few minutes, and it scales to any device. You can follow along in the Zepixo Mockups workspace.

Step 1: Capture a clean screenshot

Start with the highest resolution capture you can get. Hide debug overlays, use real content instead of lorem text, and crop tightly to the screen edges. A clean input is the single biggest factor in a clean result.

If you do not have a screenshot yet, you can capture a live site directly. Our website capture documentation walks through grabbing any URL.

Step 2: Choose your device and view

Pick the device that matches where the design lives. A mobile app belongs in a phone, a dashboard in a laptop or desktop. Then choose flat 2D for clarity or 3D for energy.

Step 3: Upload and fit the screen

Drop your screenshot into the frame and let it fit the display area. Check that nothing important sits under a notch or near a rounded corner. Adjust the crop so the key content stays centered.

Step 4: Set body color and background

Choose a device body color that complements your brand. Then set a background: a solid color, a gradient, or none for a transparent PNG you can place anywhere.

Step 5: Tune lighting and camera

For 3D, adjust lighting and orbit until the screen is readable and the highlights feel natural. A slight tilt with soft light usually looks best. Avoid extreme angles that crop the interface.

Step 6: Export

Export a PNG at the resolution your channel needs. For a spin, render the short 360 video. We cover settings next, and in the export documentation.

Backgrounds, lighting, and shadows for realism

Realism is mostly about light behaving the way eyes expect. Get three things right and even a quick mockup looks convincing.

First, keep light direction consistent. If the highlight sits top-left, the shadow should fall bottom-right. Mixed directions read as fake immediately.

Second, soften your shadows. A tight, hard shadow looks pasted on. A soft, slightly spread shadow grounds the device on its surface. Match shadow color to the background rather than pure black.

Third, choose backgrounds that support, not fight, the screen. A calm gradient or a muted solid lets the interface lead. For more, read our realistic mockup tips. If you need a photo backdrop, free options from Unsplash work well.

Resolution and export

Crisp output starts at capture and ends at export. If either end is low resolution, the mockup looks soft no matter what you do in between.

Export at 1x for quick drafts, 2x for most web and retina screens, and 3x when you need print-grade or large hero sizes. The 3x option is part of Zepixo Pro. For the full breakdown, see our mockup resolution and export guide.

Choose PNG when you need transparency, which is essential for placing a device over any background. For motion, a short 360 spin video adds life to a hero or social post without heavy editing.

Tool comparison

Plenty of tools make mockups, but they differ in speed, 3D support, and export quality. Here is how the common options stack up against an all-in-one studio approach.

If you want one place that handles flat frames, 3D, website capture, and high-res export, that is exactly what the Mockups workspace is built for.

Ready to try it? Open Zepixo Mockups and turn your next screenshot into a clean device frame in minutes, no design tooling required.

A quick worked example

Say I have a screenshot of a budgeting app and I need a landing page hero. I capture the home screen at full resolution and crop to the edges.

I choose a phone in 3D, upload the screenshot, and let it fit. I set a deep indigo gradient background and a soft white body color. Then I lower the tilt a little so the screen stays readable.

I nudge the lighting until the top-left highlight feels natural, then export a transparent PNG at 2x. The whole thing takes about four minutes, and the result drops straight into the hero section. For presenting work like this to stakeholders, our guide on presenting app designs to clients pairs well.

Choosing the right device for your screen

The device frame should match where the design actually lives. A mismatch reads as careless, even when the screen itself is strong. Pick the frame by platform first, then by the story you want to tell.

Phone mockups

Phones are the default for mobile apps and any single-column layout. They are compact, instantly recognizable, and they fit social feeds well. Use a tall portrait frame for app screens and a landscape frame only when the app itself is landscape.

For iPhone-specific sizing and bezel details, see our iPhone mockup guide and the broader phone mockup generator walkthrough. Apple also publishes exact device metrics in the Human Interface Guidelines.

Tablet and laptop mockups

Tablets suit reading apps, drawing tools, and dashboards that need room to breathe. Laptops and desktop monitors fit web apps, admin panels, and anything keyboard-driven. These wider frames give data-heavy screens space to read clearly.

Watch mockups

Watch frames are small but powerful for showing glanceable, notification-style features. Keep the screen content to one idea, since the display is tiny. A watch beside a phone makes a strong companion-app story.

Common mockup mistakes to avoid

Most weak mockups fail for a handful of repeatable reasons. Knowing them upfront saves a lot of rework.

The first mistake is a low-resolution screenshot. The frame can be perfect, but a soft screen makes the whole thing look cheap. Always capture at the highest resolution available, then scale down, never up.

The second is fighting backgrounds. A busy photo or a clashing color pulls attention away from the interface. The screen should always be the brightest, most detailed thing in the frame.

The third is inconsistent light. A highlight on one side and a shadow on the same side reads as fake instantly. Keep one light direction across every mockup in a set.

The fourth is content cropped by notches or corners. Always check that key text and buttons sit clear of the frame edges and any cutout. A quick nudge of the crop fixes it.

Building consistent mockup sets

One mockup is easy. A set that looks like a family takes a little discipline. Consistency is what makes a landing page or an app store listing feel professional rather than assembled.

Lock three things across the set: the device body color, the background style, and the light direction. When those match, even very different screens feel like one product. Decide them once, then reuse them.

Keep the same export scale across the set too, so nothing looks softer than its neighbors. If one frame is 2x, make them all 2x. Mixed resolutions are the most common giveaway of a rushed set.

Finally, hold the framing rhythm steady. If the first phone is tilted ten degrees, tilt the rest the same way. A consistent angle turns a row of screens into a deliberate composition.

Optimizing mockups for each platform

A mockup that sings on a landing page can flop in an app store. Each platform has its own crop, aspect ratio, and attention span. A little tailoring per channel pays off in clicks and conversions.

For landing pages, lead with one strong hero frame and let it breathe. Give it space, a calm background, and enough size to read on a phone browser. The hero carries the first impression, so it earns the room.

For app stores, follow the exact pixel dimensions each store requires and keep captions short. Shoppers swipe fast, so the first two frames must land the core value. Consistency across the set signals a polished, trustworthy app.

For social, push contrast and consider motion. A bold background and a short spin stop the scroll where a quiet frame would be ignored. Square and vertical crops fit feeds better than wide landscape frames.

Accessibility and file hygiene

Polished mockups still need clean handoff. Small habits keep your files usable for teammates and kind to viewers who rely on assistive tech.

Always write meaningful alt text when a mockup ships as an image on a page. Describe what the screen shows, not just "phone mockup," so the context survives for screen readers. Good alt text also helps search engines understand the image.

Name your exports clearly, with the device, channel, and scale in the file name. A name like home-hero-phone-2x reads better than export-final-3 a week later. Future you will be grateful.

Frequently asked questions

What are device mockups?

Device mockups are images of your screen placed inside a realistic frame like a phone, tablet, laptop, or watch. The frame adds scale and context, so the work reads as a real, shipped product instead of a loose screenshot.

Should I use 2D or 3D mockups?

Use 2D when legibility matters most, such as app store listings and documentation. Use 3D for hero sections and social posts where energy and depth help. Many projects use both, matched to the channel.

How do I make a mockup from a screenshot?

Capture a clean, high-resolution screenshot, pick a device and view, upload and fit the screen, set body color and background, tune lighting, then export a PNG. In Zepixo this takes only a few minutes per frame.

What resolution should I export at?

Export at 1x for drafts, 2x for web and retina, and 3x for print or large hero images. PNG keeps transparency so you can place the device over any background. The 3x option is part of Zepixo Pro.

Do device mockups need a background?

Not always. A solid or gradient background adds polish, but exporting with no background gives a transparent PNG you can drop onto any page. Choose based on where the mockup will live.

Can I make a spinning mockup?

Yes. Zepixo can render a five second 360 degree spin video of a 3D mockup, which is great for social and heroes. The video export is a Pro feature.

Pick the right type, keep the light honest, and export crisp, and your screens will look finished every time.