What is a mockup? Meaning, types and examples

ls.graphicsOctober 26, 20264 min read

A mockup (also spelled mock-up) is a realistic picture of a design shown in its real-world context: an app on a phone screen, a logo on a business card, a print on a t-shirt. Designers use mockups to present work to clients, fill portfolios and store listings, and check how a design looks before anything is built or printed.

What is a mockup used for?

A mockup is used to show a design the way people will meet it. A flat design file tells you little about the finished thing. The same screen design reads differently once it sits inside a phone frame with a reflection on the glass, and a label looks different wrapped around a bottle than it does on an artboard. A mockup closes that gap. The main uses:

• Client presentations. A client approves a logo faster when they see it on a sign or a card than on a white canvas.
• Portfolios and case studies. Dribbble shots, Behance projects and portfolio pages are mostly mockups.
• Store and marketing images. App Store and Google Play screenshots, landing page heroes, product pages for print-on-demand shops.
• Checking the design. Scale, contrast and legibility problems show up once the design is on a real-looking object.

What is the difference between a mockup, a wireframe and a prototype?

A wireframe shows structure, a mockup shows how the design will look, and a prototype shows how it will work. They are different stages of the same project:

• A wireframe is the skeleton: gray boxes and lines that show layout and structure, with no visual design.
• A mockup is static and looks final: real colors, type and images, shown on a device or object. You look at it, you do not click it.
• A prototype is interactive: you can tap through screens and test the flow, usually built in Figma or a prototyping tool.

In product design the word mockup can also mean a static high-fidelity screen without a device around it. In graphic design and branding it almost always means the design placed on an object or device, which is the meaning used here.

What types of mockups are there?

Mockups are grouped by the object the design goes on:

• Device mockups: phones, tablets, laptops and monitors, for apps and websites. See iPhone mockups or MacBook mockups.
• Branding and stationery: business cards, letterheads, envelopes, signs.
• Print: posters, books and magazines.
• Apparel: t-shirts, hoodies, caps, tote bags.
• Packaging: boxes, bottles, cans, pouches and labels.
• Animated and 3D mockups: a device that turns, or a short clip played on a screen, for launches and social posts. See 3D Live Mockups.

Mockup examples

Six mockups and what each one is for:

• An apparel mockup: a hoodie laid flat, seen from above
• A device mockup: two MacBook Air laptops side by side for a website
• A packaging mockup: a pizza box on a chair in sunlight
• An outdoor mockup: a single billboard for an ad campaign
• A print mockup: a torn, textured poster
• A packaging mockup: a drink can on green fabric

How does a mockup work?

Most mockups are files with a placeholder for your design. In a Photoshop mockup (a PSD file) the placeholder is a smart object: you open it, paste your design, save, and the design appears in the scene with the right perspective, shadows and highlights. Online mockup editors do the same in the browser: you drop your image onto the scene and export the result. Plugins such as the Mockup plugin for Figma take the selected frame and place it on a device without leaving the design tool.

The quality of a mockup comes down to the scene itself: light that falls on the design the way it falls on the object, believable reflections, a sharp result at the size you need, and a surface or setting that suits the design rather than competing with it.

How do you make a mockup?

You pick a scene, put your design into its placeholder and export the result, in five steps:

1. Pick a scene that matches where the design will live: a phone for an app, a box for packaging, a shirt for a print.
2. Export your design at the size the placeholder expects. For a screen, that is the device's screen resolution; for print, match the proportions of the item.
3. Put the design in: replace the smart object content in Photoshop, drop the image into an online mockup generator, or run a plugin in Figma.
4. Adjust: background color, light, and any color variants of the object, such as a white or black shirt.
5. Export at the size your channel needs: PNG or JPG for stills, MP4 or WebM for animated mockups.

To try it without installing anything, open one of the free mockups, drop in your design and export it.

FAQ

What does mock-up mean, and is it mockup or mock-up?

Mock-up means the same as mockup: a model or picture that shows how something will look. Both spellings are correct. "Mockup" as one word is the common form in design and tech; "mock-up" with a hyphen is more traditional and still used in print and manufacturing.

Is a mockup the same as a prototype?

No. A mockup is a static picture of how the design will look. A prototype is interactive and shows how it will work.

Can I use mockups for client work?

Usually yes, but it depends on the license of the mockup you use. Check whether it allows commercial and client projects, and whether you may resell or redistribute the file itself. ls.graphics mockups, for example, may be used in personal and commercial projects, including client work, but not resold or redistributed.

Do I need Photoshop to make a mockup?

No. PSD mockups need Photoshop or a compatible editor such as Photopea or Affinity, but online mockup editors and Figma plugins work without it.