What Is a Mockup?

A mockup is a full-size model of a design or device, used for product presentations or other purposes.

Think of it as a means of showing off what your design will actually look like when it’s put out into the real world.

Depending on your skills and time, you can go through the process of creating your own mockup using dedicated graphics software such as Adobe Illustrator or Photoshop, but sometimes you might be better off using more basic tools.

An introduction to mockups

A mockup is a static high-profile visual design draft of a design or device, used to represent the structure of information, visualize the content and demonstrate the basic functionalities in a static way.

Unlike wireframe, mockups provide visual details, such as colors and typography. While wireframes are design placeholders, mockups are built to give the viewer a more realistic impression of how the end product will look.

What does PSD stand for?

PSD , which stands for Photoshop Document, is the default format that Photoshop uses for saving data. PSD is a proprietary file that allows the user to work with the images’ individual layers even after the file has been saved.

Why use mockups?

Organize project details

Mockups can help the designer to uncover visual elements that clash, before you arrive at the final, end design. Visual hierarchies, that show the difference between design elements such as font and color, should be determined at the mockup phase of the design process.

With the visual elements more refined than with wireframes, mockups allow stakeholders to actually review the visual side of the project.

A mockup is a visual way of representing a product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. But still, a mockup is not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or high-fidelity display of design.

Mockup tools with design handoff features include:

InVision Studio Figma

Adobe XD Justinmind Sketch(when combined with Marvel, Zeplin, Sympli, or Avocode)

The ingredients of a great mockup presentation

An effective mockup doesn’t just make a design three dimensional—it brings a design to life. When you’re working on a mockup, keep the following tips in mind:

Show the product in action. Think of it as a diorama featuring the product in its natural habitat.

Keep the mockup focused. If you’re showing a building interior with your design on banners and signage, don’t distract the viewer with lots of clashing elements. Yes, your mockup can be populated with consumers, but they shouldn’t detract from the design you’re showcasing.

Stay away from stock photos. They are not customized to your client and as a result rarely communicate designs effectively.

Consider how the design might adapt to different settings throughout the brand design. Can you make a pattern out of it? Can the colors change?

Showcase multiple, well thought-out mockup “scenes” featuring the design. This will flesh out your vision for the client.

How do you make a Mockup in Photoshop?

Create an original mockup from scratch Use Smart Objects to apply your design to a template Use a Photoshop Action to make a 3D mockup Use a mockup generator website

Mockups are useful both for the creative phase of the project — for instance when you’re trying to figure out your user flows or the proper visual hierarchy — and the production phase when they will represent the target product.

Making mockups a part of your creative and development process allows you to quickl y and easily ideate and iterate on your site before you’ve invested in the actual coding process. You’ll have something tangible to show potential clients or a helpful reference to work from when you start moving forward.

A small investment of time up front to learn this skill will save multiples of that in the future.