What is a mockup in graphic design?
A mockup in graphic design is a realistic preview of a design in use: a logo on a business card, a label on a bottle, a website on a laptop screen. It is usually a photograph or 3D render with a placeholder layer where your artwork goes, so the design picks up the angle, lighting and texture of the real object. A mockup is a presentation tool, not the production file; the printer or developer still works from the original artwork.
In web and app design the word has a second meaning: a static, full-colour design of a screen, sitting between the wireframe and the clickable prototype.
| Term | What it is | Used for |
|---|---|---|
| Wireframe | Grey boxes showing layout and content, no styling | Agreeing structure before design |
| Mockup | A realistic, static view of the finished design | Approving the look, presenting to clients |
| Prototype | A clickable version of the screens | Testing how it works before it is built |
Why mockups matter
Clients are not trained to imagine. A mockup does the imagining for them and answers the question they actually have: what will this look like in the world? In our rebranded project, hoodie, cap and shoe mockups were what turned a logo file into an approved identity.
Types of graphic design mockups
- Stationery: business cards, letterheads, envelopes. The standard set for a logo presentation.
- Packaging: boxes, bottles, pouches, labels.
- Apparel and merchandise: T-shirts, hoodies, caps, tote bags, mugs.
- Signage and outdoor: shop signs, billboards, vehicle wraps, office walls.
- Website and device mockups: screens on laptops, phones and tablets, for web and app work.
- Social media: posts and stories shown inside a phone frame.
8 mockup websites for designers
1. Freepik
Huge library of PSD mockups, free with attribution or paid without. Freepik renamed itself Magnific in April 2026, and freepik.com links now redirect to magnific.com; the mockup library and accounts carried over. Quality varies; sort by the premium set for client work. Searching Freepik for the object plus "mockup" ("business card mockup", "tote bag mockup") narrows the results faster than browsing categories.
2. Mockuuups Studio
Drag a screenshot in and get hundreds of device scenes without opening Photoshop. Subscription, fast, good for app and website mockups.
3. Smartmockups
Browser-based, wide range of products and apparel, integrates with Canva. The quickest route from a logo to a merchandise line-up.
4. Mockups Design
Free, well-photographed PSDs of stationery, packaging and print. Our first stop for business card and letterhead presentations.
5. PSD Repo
Curated free mockups from various designers. Smaller library, consistently usable.
6. Graphberry
Free PSD mockups, icons and templates. Older library, still useful for classic print pieces.
7. Ls.graphics
Premium device and scene mockups with a Figma plugin. The best-looking option for web and app presentations if the budget allows.
8. Figma Community
Free device frames and mockup kits inside the tool you already use. Search the community, duplicate, drop in your frames. Ideal when the whole project lives in Figma.
How to use a mockup template
Most graphic design mockup templates are Photoshop files built around smart objects. The routine is the same for almost all of them:
- 01Open the PSD and find the layer marked as the design or smart object (often labelled "Your design here").
- 02Double-click the smart object's thumbnail. It opens as a separate file at the right size.
- 03Paste or place your artwork, ideally as a vector or high-resolution image, and save that file.
- 04Close it and return to the mockup. The design now sits in the scene with the perspective and lighting applied.
- 05Adjust colour layers or backgrounds if the template offers them, then export a JPG or PNG for the presentation.
Without Photoshop, Photopea opens most PSD mockups in the browser, and Mockuuups Studio, Smartmockups and Figma plugins skip the PSD step altogether.
Using mockups well
- Match the scene to the client: a construction company's logo belongs on a hard hat and a site sign, not a coffee cup.
- Check the licence: many free mockups are personal-use only.
- Do not present one mockup: show three to five surfaces so the client sees a system.
- Keep the file: the mockup becomes the client's social media asset after approval.
If you would rather have the identity and its presentation done for you, see our brand identity and logo design service.
Common questions
- What is a mockup in graphic design?
- A realistic preview of a design applied to a real object or screen, such as a logo on a business card or a website on a laptop. It is made by placing the artwork into a template photo or render, and it is used to present and approve work, not to print from.
- What is the difference between a mockup and a wireframe?
- A wireframe shows layout only, with grey boxes and no styling. A mockup shows the finished look: colours, type and images, either on a screen design or in a realistic scene.
- Where can I get free graphic design mockups?
- Freepik, Mockups Design, PSD Repo, Graphberry and the Figma Community all offer free mockups. Read each licence: some require attribution and some are personal-use only.
- Are free mockups safe to use for client work?
- Check each licence. Many free mockups allow commercial use with attribution; some are personal-use only. Paid mockups remove the ambiguity, which matters when the client will reuse the image.
- Do I need Photoshop for mockups?
- For PSD mockups, yes, or an editor that handles smart objects such as Photopea. Browser tools like Smartmockups and Mockuuups Studio need no software.
- How many mockups should a logo presentation include?
- Three to five relevant surfaces. Enough to show the logo works as a system; few enough that the client focuses on the design rather than the props.
- Are Freepik graphic design templates and mockups free?
- Many are free with attribution, and a Freepik subscription removes the attribution requirement and gives access to the premium files. Read the licence on each file before using it in client work or anything you sell.
