What is a mock-up. How it is used by graphic and web designers

July 26, 2021
7 min. read
Read the article

To present the developed design qualitatively, performers use mock-ups. With their help, a created website, logo or corporate identity is displayed on objects, not just on a white background. Show how the work will look on the sign, booklet, business card, clothes, device displays.

Mock-up is usually a PSD file (Photoshop) with a special layer (smart object) to which the prepared sketch is attached.

In short, what is a mock-up – 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 applying a new design, the location of the object, angles, shadows, perspective are taken into account.

In web design, mock-up also means a site layout that conveys its visual style. About it below.

Mock-up – saves time and money

It is easier for the customer to conclude the design, seeing it on his product. So fewer corrections, misunderstandings, closer to the finished project. Plus for both parties.

To start large-scale production, you need to make sure that everything is in harmony. Printing is expensive and difficult. And if there are edits, will I have to print again? Making a  mock-up is easier and it will show the final result from different angles.

Also with the help of a mock-up, it is convenient to demonstrate the adaptability and flexibility of webwork. You can show what the resource will look like on different devices.

Where to look for a mock-up?

1. Download ready-made templates from special sites and attach your sketch. Made in Figma, but Adobe Photoshop is more popular.

2. Online generators. If you need to do it quickly and there are no graphic editors.

3. To create independently based on a photo of the goods of the customer. A time-consuming process, but there are cases when none of the presented templates is suitable for the project.

5 web resources for downloading mock-up:

1. Freepik.com – here are vector illustrations, photos and mock-ups. 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 – mock-ups, fonts, icons, encoding, photos, themes for WordPress and more. There is a separate category for Figma.

4. PSD Freebies – in addition to mock-ups, you can find web elements (icons, banners), web templates, templates for printed products.

5. Freemockup – in Russian with sorting by categories.

5 popular online generators:

1. Smartmockups – you can edit the background, change the colors of images, adjust the shadow.

2. Mockuper – a great choice for the presentation of web development on various gadgets. There are other categories.

3. Renderforest – in addition to mock-ups there are website designers, video templates, a logo maker.

4. Mockdrop – a very fast generator. To create presentations of web projects on devices.

5. Dimmy.Club – a choice of different colors of devices. You can add your own text to the image, apply effects.


All of these libraries have free templates and paid extensions

How to use ready-made mock-ups in Photoshop

Ready-made PSD mock-ups are the most popular. Easy to use and give 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 desired layer (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 2 times with the left mouse button

5. Insert the prepared sketch into the open window

6. Delete the template design, if any (in the window on the right)

7. Save changes “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 present the site, 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, subject, smart object.

Consider the example of the cup on which you want to insert your print:

1. Upload the photo to the editor

2. Separate the cup from the background (cut) to edit it, change the color, add glare

3. Insert on the desired background

4. Where the print will be located, add a rectangle and turn it into a smart object.

5. Choose “Deformation”, give the figure roundness, so that the new picture fits harmoniously on the subject

6. Click on the smart object icon. A window will open where you drag the desired sketch

7. Save

The difference between a mock-up, a wireframe, a sketch and a prototype

Above, we talked more about the mock-up, as a “faceless” picture of the product, on which you can superimpose your design to present it to the customer. But when creating websites, this concept is still used to determine the layout of the future web product.

In addition to mock-up, layouts are called wireframes, prototypes, and sometimes even sketches. And here is the confusion. Let’s take turns.

Sketch

A freehand drawing.

The main task is to quickly capture the main idea.

Draw to visualize the idea from the head or present it to the team.

What is a wireframe

Black and white web product diagram.

The main task is to transfer the structure of the future project.

Emphasis on the location of elements and structural blocks. What will be the content where it will be located. Comments are added here to describe the interactivity or animation.

What is a mock-up of the site

The color layout of the project

The main task is to convey the visual concept.

The artist takes into account the structure of the site and imposes a design on it. This layout is static, without interactivity.

Also remember that a mock-up is used to demonstrate web products on various devices and screen extensions.

Prototype of the site

Functional layout

The main task is to evaluate the work of the site, the usability of the interface.

Clickable buttons, links, interactive elements. Allows testing the work of the web resource and eliminating of drawbacks.

The main task of the mock-up is a beautiful presentation of a design project. This is a ready-made picture with an object on which you can place a unique corporate identity. In the context of website development, this concept means a colorful layout.

Everyone who wants to make a good impression on the customer and demonstrate their work in the best light, should work with mock-ups.