Free · 6 min read
What is a mockup and how to make one: a step-by-step guide for beginners
What a mockup is in design: an interface layout or work shown on a photo of an object. How it differs from a wireframe and a prototype, and how to make one.
- The two meanings of "mockup" and when you need each
- How a mockup differs from a wireframe and a prototype
- How to put your design into a mockup template in Photoshop
- Free
- 1,504 members
- Join in 1 click
Five steps to a mockup
- 1
Step 1
Work out which mockup is expected
- 2
Step 2
Interface mockup: from wireframe to finished screen
- 3
Step 3
Presentation mockup: choose the scene
- 4
Step 4
Put your design into the template
- 5
Step 5
Check honestly and show others
- 1,504
- community members
- 8,915
- messages with questions since July 2024
- 9
- design games since September 2024
- 759
- people wrote in the chat
This guide is for you if you are
Confused by the word "mockup"
Someone asks you to "send a mockup" and you're not sure what they expect: an interface screen, a picture on a T-shirt or a prototype.
Preparing portfolio work
You have a logo, packaging or app screens and want to show them as they'd look in real life.
Learning UI/UX
You're moving from wireframes to visual design and want to know what a team expects from a mockup.
In short
- In UI/UX, a mockup is a static, detailed interface layout with colors, fonts and images.
- In graphic design, a mockup also means presenting work on a photo of an object: a T-shirt, a phone, a box.
- A wireframe shows structure, a mockup shows the look, a prototype lets you test interaction.
- Ready-made mockup templates are handy, but check the license: not every free file can be used anywhere.
- A mockup doesn't replace a real-life check: a printed sample or a phone screen shows what a nice photo hides.
Five steps to a mockup
- 1
Step 1
Work out which mockup is expected
Designers use the word "mockup" in two senses, and mixing them up is very common. Before you start, clarify which one is meant:
- interface mockup (UI mockup, design comp): according to the Nielsen Norman Group glossary, a static, high-fidelity simulation of a proposed UI design that includes visual details such as colors and imagery;
- presentation mockup: your design placed into a photo or 3D scene of a real object, such as a logo on a sign, a print on a T-shirt or screens on a phone;
- two more terms sit nearby: a wireframe is a skeletal layout showing structure and functionality before visual design, and a prototype is an early version of a design used to test ideas and interactions.
💡 If a client or teacher asks for a "mockup", ask one question: "Do you need a screen layout, or the design shown on an object?" That way you won't spend time working in the wrong direction.
- 2
Step 2
Interface mockup: from wireframe to finished screen
A UI mockup is usually made in Figma or a similar tool, based on a wireframe. The wireframe has answered "what goes where"; now you answer "what it looks like". NN/g describes prototype fidelity along three dimensions: interactivity, visuals and content. On that scale, a mockup is high on visuals and content but has no interaction:
- replace gray boxes and "lorem ipsum" with realistic text and images, so you can see whether long names fit and the grid holds;
- set the typography: one or two fonts, a few sizes for headings and text;
- set the palette and check contrast: WCAG requires at least 4.5:1 for normal text;
- draw not only the "perfect" screen but key states too: an empty list, an error, loading.
💡 A mockup is easy to mistake for a finished product. If you show it to people early, say plainly that it isn't final and you want comments on the substance, not just the button color.
Show your mockup before publishing
A fresh pair of eyes will spot at once where the scene steals attention or the design has blurred. People in the community share their work and get feedback. Come in, it's free.
Share your mockupFree. 1,504 designers are already in the community.
- 3
Step 3
Presentation mockup: choose the scene
A presentation mockup helps people see the work in context: how the logo looks on a sign, how the print looks on a shirt. The scene should fit the task, not just look nice. When looking for or creating one, consider:
- plausibility: the object and situation should be where your design would really live;
- angle: a front view is better for a first look at the work; complex angles work as extras;
- resolution: the mockup file should be large enough that small details of your design don't blur;
- license: many mockup templates online are free only for personal use, and commercial use needs a different license or credit to the author. Read the terms before downloading and keep them with the file.
💡 A mockup shouldn't distract. If the first thing people notice is a trendy café or a plant on the desk rather than your design, choose a calmer scene.
- 4
Step 4
Put your design into the template
Most ready-made Photoshop mockup templates are built on Smart Objects: a layer that holds your design, with perspective, warping and shadows already set up by the template's author. Here's how it works according to Adobe's help:
- open the Layers panel (Window → Layers) and find the Smart Object layer, usually labeled something like "Your design here";
- right-click the layer and choose Replace Contents, then pick your design file and click Place: the new file replaces the old one and all transformations are kept;
- in Figma you can make a simple mockup yourself: place a photo of a device or object and put your screen or design on top of it with a mask.
💡 Prepare your design in the same proportions as the Smart Object area. Otherwise it stretches or gets cropped, and the mockup gives away that the work wasn't made for it.
Mockup looks fake? Show it to the community → - 5
Step 5
Check honestly and show others
A mockup is a presentation tool, not proof that a design works. A nice photo can hide small text that won't read on fabric or a button that's awkward to tap. So before putting a mockup in your portfolio or sending it to a client:
- check a UI mockup on a real phone screen, not just a monitor;
- for print work, print at least a fragment at real size;
- in your portfolio, label the work as a concept or study project if it was never produced;
- show the design itself separately next to the mockup, so both context and details are visible.
💡 Post the mockup in the community and ask: "What do you see first?" If the answer is "a nice photo" rather than "your logo", the mockup is working against you.
You're not alone with these questions
We counted what people ask about most in our community. Portfolios and case studies are in the top three. And a mockup is where the first impression of a case study begins.
Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.
Practice with a deadline and live feedback
The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.
Design game · January 2026
NAOMA website redesign
The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.
AI challenge · May 2025
A landing page made by AI
Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.
Workshop · April 2026
Figmosha: AI in Figma
The tool's author showed how to generate interfaces in Figma and analyze a design system.
Free. 1,504 designers are already in the community.
How to join: 1 minute
- 1
Tap the button
Telegram opens with the Spaceberry community.
- 2
Join
It's free: all you need is a Telegram account.
- 3
Introduce yourself
Say where you're starting from and ask your first question.
Questions and answers
Didn't find your answer? Ask it in the community.
How is a mockup different from a prototype and a wireframe?
According to the Nielsen Norman Group glossary, a wireframe is a skeletal layout that shows structure and functionality before visual design. A mockup is a static, high-fidelity layout with colors and imagery. A prototype is an early version of a design used to test ideas and interactions. To make a clickable prototype, see [Figma prototype](/en/guides/figma-prototype).
Where do I get mockup templates?
Templates are available on stock sites and from authors who share them for free or for a fee. Read the license before downloading: free mockups are often allowed for personal use only or require credit to the author. You can also make your own: photograph an object and place your design into the photo.
Can I make a mockup without Photoshop?
Yes. You can put together a simple mockup in Figma: place a photo of a device or object and put the design on top with a mask. But most ready-made templates with perspective and shadows are built for Photoshop Smart Objects. For the basics, see [Photoshop for beginners](/en/guides/photoshop-for-beginners).
Can I use mockups in my portfolio?
Yes, mockups help show work in context. But don't pass off a concept as a produced project: if the logo never hung on a real sign, label it as a concept or study project. And always show the design itself alongside, so the details are visible.
Is the Spaceberry community paid?
No. Spaceberry Community is a free Telegram community supported by Spaceberry Foundation, a non-profit organization. All you need to join is a Telegram account. Inside are 1,504 designers who discuss each other's work, plus regular design games: the same brief for everyone, a deadline and a community vote. Conversations are in Ukrainian.
Get feedback on your mockup
Join 1,504 designers who learn, share their work and play design games. Show your mockup and find out whether it works for your design. The community talks in Ukrainian.
- Free
- 1,504 members
- Join in 1 click