To present a finished design in the best possible way, designers use mockups. A mockup shows a website, logo or corporate identity on a real object, not just on a white background: on a sign, a booklet, a business card, clothes or a device screen.
A mockup is usually a PSD file (Photoshop) with a special layer (a smart object) to which the prepared sketch is attached.
So what is a mockup, in short? A mockup is a template picture with an object to which a unique style is added. The finished image looks realistic and colorfully shows the future product. When a new design is applied, the position of the object, angles, shadows and perspective are taken into account.
In web design, mockup also means a website layout that conveys its visual style. More on that below.
Mock-up – saves time and money
It is easier for the customer to judge the design when they see it on their own product. That means fewer corrections and misunderstandings, and the finished project is closer. A plus for both parties.
To start large-scale production, you need to make sure that everything sits in harmony. Printing is expensive and difficult. And if there are edits, will you have to print again? Making a mockup is easier, and it will show the final result from different angles.
A mockup is also a convenient way to demonstrate the adaptability and flexibility of web projects. You can show what the resource will look like on different devices.
Where to find mockups?
1. Download ready-made templates from special sites and attach your sketch. This is done in Figma, but Adobe Photoshop is more popular.
2. Online generators. If you need to do it quickly and have no graphic editors.
3. Create one yourself based on a photo of the customer’s product. A time-consuming process, but there are cases when none of the available templates suits the project.
4 web resources for downloading mockups:
1. Freepik.com – vector illustrations, photos and mockups. In the search bar, type “mockup”, in the filters, select PSD. There are free and paid options.
2. Mockupworld – a large library. Easy sorting by categories: Apple products, cosmetics, fashion/clothing, food/drinks, posters/pictures, etc. You can work directly in the browser without uploading to Photoshop.
3. CSS Author – mockups, fonts, icons, code snippets, photos, WordPress themes and more. There is a separate category for Figma.
4. PSD Freebies – in addition to mockups, you can find web elements (icons, banners), web templates and templates for printed products.
5 popular online generators:
1. Smartmockups – you can edit the background, change the colors of images, adjust the shadow.
2. Mockuper – a large selection of templates for presenting web projects on various gadgets. There are other categories too.
3. Renderforest – in addition to mockups, there are website builders, video templates and a logo maker.
4. Mockdrop – a very fast generator for creating presentations of web projects on devices.
5. Dimmy.Club – a choice of different device colors. You can add your own text to the image and apply effects.
All of these libraries have free templates and paid extensions.
How to use ready-made mockups in Photoshop
Ready-made PSD mockups are the most popular. Easy to use, with a quality result.
How it works:
1. Download the template from the resource
2. Open the file in Photoshop
3. In the window on the right, find the layer you need (smart object). If the object has several sides to which you want to add a style, there will be several layers.
4. Click on the appropriate layer twice with the left mouse button
5. Insert the prepared sketch into the window that opens
6. Delete the template design, if any (in the window on the right)
7. Save changes with “Ctrl + S” or “File” and “Save”
Online generators are even easier and faster to use:
1. Select the appropriate layout
2. Upload a picture with your design; if you are presenting a website, you can insert a URL
3. Adjust the size, align
4. Save
How to create a mockup in Photoshop yourself
This layout is created based on a photo of the product and consists of layers: background, object, smart object.
Let’s take the example of a mug on which you want to place your print:
1. Upload the photo to the editor
2. Separate the mug from the background (cut it out) to edit it, change the color, add highlights
3. Place it on the desired background
4. Where the print will be located, add a rectangle and turn it into a smart object.
5. Choose “Warp” and give the shape roundness so that the new picture fits harmoniously on the object
6. Click on the smart object icon. A window will open where you drag the desired sketch
7. Save
The difference between a mockup, a wireframe, a sketch and a prototype
Above, we talked about the mockup mostly as a “faceless” picture of a product on which you can place your design to present it to the customer. But when creating websites, this concept is also used to describe the layout of the future web product.
In addition to mockups, wireframes, prototypes and sometimes even sketches are called layouts. And this is where the confusion happens. Let’s break them down one by one.
Sketch
A freehand drawing.
The main task is to quickly capture the main idea.
It is drawn to visualize an idea or present it to the team.
What is a wireframe
A black-and-white diagram of a web product.
The main task is to convey the structure of the future project.
The emphasis is on the location of elements and structural blocks: what the content will be and where it will be placed. Comments are added here to describe interactivity or animation.
What is a website mockup
A color layout of the project.
The main task is to convey the visual concept.
The designer takes into account the structure of the site and applies the design to it. This layout is static, without interactivity. It matters most where everything depends on the visual presentation: in wow website development, it is the mockup that first shows the mood of the future project.
Also remember that mockups are used to demonstrate web products on various devices and screen resolutions.
Website prototype
A functional layout.
The main task is to evaluate how the site works and how convenient the interface is.
Clickable buttons, links, interactive elements. It makes it possible to test the web resource and eliminate flaws.
The main task of a mockup is a beautiful presentation of a design project. It is a ready-made picture with an object on which you can place a unique corporate identity. In the context of website development, the term means a colorful website layout.
Anyone who wants to make a good impression on the customer and show their work in the best light should work with mockups.