PSD Mockup. What is this?

Hello fellow designers and people close to them. There is some confusion in terms of mockups, layouts, prototypes, and so on. We often confuse a prototype with a sketch, and a layout with a mockup. Let's understand together in this article what mockups are and how to use them.

First, we need a Wikipedia explanation of the concept of mockup (and all other design concepts of the finished work stage). We will go consistently, starting with an idea and ending with a finished product


This is the first thing that comes after the idea. After all, in order to explain your idea to a designer, you need to show it to him. And usually, it all starts with sketches, which are hastily entered into a notebook. This is the sketch.

Scheme (framework)

A diagram or, in other words, a frame is an already verified drawing / diagram of that sketch with all the details. Thinking through the structure of the site, where which blocks are located or fittings with sculpture silhouettes - this is all a scheme (or frame). It also includes such concepts as wireframe, mindmap and others, but we will not dwell on them.


A prototype is a working version of a framework. If this is a site, then this is a full-fledged site, only without design and functionality, but you can click, turn, look at it on a computer. If this is a prototype car, then it will most likely have many working parts, but it will not be able to drive yet.

Design layout

So we get to our ambiguous friend. A design layout is a finished work, in terms of visuals and functionality, that requires the attention of the customer for subsequent improvements and delivery of the order. In English, this concept is written like this - Mockup

What is a mockup?

Mockup (from English mockup - layout) - in production and design, this is a large-scale or full-size model of a structure or device used for training, demonstration, design evaluations, and so on. Mockups are mainly used to get feedback from users.

Mockup examples:

Mockup (layout) Boeing 2707 at the Aviation Museum. Giller

Mockup (mockup) of the American shuttle in full size

Mockup (model) of the interior, made in real size and photographed.

Mockups are used in manufacturing, architecture, programming, textiles, military affairs and other areas. Tank without engine and internals, made in full size of plastic and looking like a real one; kitchen, with opening doors, glass and drawers, but made in miniature; interior design, made in 3D Max in all details, very similar to the photo - all this is a mockup, that is, layouts.

From all of the above, we can isolate one thing:

A mockup is a showcase of a near-finished work, virtual like a design mockup or tangible like a cardboard house project.

It turns out that in Russian the word "mockup" is no longer quite the same as in English mockup. As we have already learned mockup from English - this is the mockup, but in Russian the word "mockup" has acquired a different character. This can be clearly seen in search engines.

As we can see, there are no shuttles or models of houses in miniature here. There are mainly photographs of mug designs, textiles with logos, and other images that can be modified using Adobe Photoshop. So we get to the definition of the word "mocap".

A mocap is an image of a finished work (a photograph or a realistic illustration) made in psd format and having a smart layer in which you can replace one or another drawing with your own image, thus obtaining a demonstration of the work in a realistic photo (or illustration)

Someone may disagree with me. The definition of the word "mockup" in this form may not seem right to everyone, but you must admit that when we drive "mockup business card" into the search box, we want to get not a design of a finished business card, nor a photo of satisfied customers with a business card, but a specific PSD file in which there will be a photo with an image of a business card in the real world, where we can place the design of our business card in 2 clicks. So the definition above has the right to exist.

Maybe it's time to recognize what we mean by the word "mockup"? That's all! Leave your opinions and indignation in the comments. Bye.

Eradzh Shams
Eradzh Shams
Post author