What mockups are for
A raw screenshot is flat and has no context. Put the same screenshot inside a phone and the viewer sees a product they could hold. It sounds like a small change. On a store page or in an ad it's often the difference between a scroll and a tap.
You'll find mockups in:
- App Store and Google Play screenshots
- Website hero images and product videos
- Instagram, TikTok and LinkedIn posts
- Client presentations and design portfolios
- Pitch decks
For designers there's a practical side too. A client looking at a flat PNG will ask how it looks on a phone. A mockup answers that before they ask.
Types of mockup
Three kinds are common today, and each is good at something different.
Flat (2D) mockups
The screenshot sits in a front-facing device frame. Quick to make, small files, and often enough for app store images. Everything is seen from the same angle, though, so a page full of them can look samey.
Photo mockups
Someone photographs a real device, say a phone in a hand or a laptop on a desk. The screen area is marked, and your design is placed into it with the right perspective. Because the light and the room are real, these look the most natural, which is why they work so well on social media and websites.
3D mockups and mockup videos
A three-dimensional model of the device. You can turn the phone to any angle, move the light and watch the shadow follow. The real strength is motion: the device turns or the laptop opens while your app plays on the screen. For launch videos and App Store previews this is now the most popular kind.
Mockup vs wireframe vs prototype
These get mixed up all the time. A wireframe is the skeleton of a screen: boxes, lines and placeholder text, no colour, used to agree on what goes where. A prototype is clickable; tap a button and the next screen opens, which makes it the thing you put in front of test users.
A mockup shows the finished, or nearly finished, design in a realistic setting. You can't click it. It's there to be looked at. There's a longer comparison in our mockup vs wireframe vs prototype guide.
How to make a mockup
There used to be two routes: open a PSD with smart objects in Photoshop, or build a scene in a 3D package like Blender or Cinema 4D. The first is quick but limited. The second is powerful and takes weeks to learn.
Now there are apps built for the job. In Mockup Center it goes like this:
- Drag your screenshot or screen recording into the app.
- Pick a device (iPhone, Galaxy, iPad, MacBook, Apple Watch and more) or open an animated template.
- Set the angle, light and background, then export a PNG or a video.
The how to make a mockup guide walks through each step.
What makes a good mockup
After looking at a lot of store pages and launch posts, the good ones share a few habits:
- The screenshot is sharp. A blurry screen makes even an expensive 3D scene look cheap. Capture at the device's real resolution.
- The status bar is clean: 9:41, full battery, no notifications. Small detail, but people notice.
- The background doesn't compete with the product. Loud backgrounds drown the screen.
- Each image says one thing, with one feature and one headline.
