Mockup
What is a Mockup?
Definition of a Mockup
A mockup is a static representation of a product, showing users and stakeholders how it may look and be used. It contains elements such as the typography, logos, images, color schemes, and navigation visuals that will make up the final design and user experience — as well as ergonomics, where necessary.
What are mockups used for?
Mockups are used to present medium to high fidelity versions of a design during the product development process. They demonstrate a realistic layout to decision-makers and allow teams to determine which aspects of the product work well from a user’s perspective, and which do not.
Where mockups fit into the product development process
The various phases of the product development lifecycle are subject to varying levels of design complexity. Although there can be some crossover with other methods, mockups are just one of the ways to illustrate a product concept.
Earlier in the cycle, a simple sketch may be employed to brainstorm ideas. A wireframe is commonly used as a bare-bones structure of a digital product, to demonstrate the basic purpose and layout in black and white.
If an idea is ready to progress through the design process, it may move from a mockup to a prototype. This offers an interactive simulation of the design and functionality of the product as a real, tangible experience — closer to the end product, but still with scope for improvement.
Types of mockups
There are a few different types of mockups you can use to showcase how your product will look.
Digital
Digital mockups usually represent design-related aspects of the product. They visually represent the product and can be used for digital or physical products. Digital mockups can also double as marketing material.
Paper
Paper mockups provide an inexpensive way to create physical representations of your product. It’s a great tool to use in the early stages of product development because it offers a clear picture of how your product will look or function without adding a level of commitment to the idea.
Physical product mockups
Physical mockups give people a hands-on representation of the product's appearance. Usually, there these mockups aren’t functional — adding functionality elevates the mockup to the prototype stage.
UI/UX mockups
Wireframes that map out the user interface are crucial for creating a great user experience (UX). You can create UX mockups on paper that show each screen and how the screens link together. This will allow you to experience how a user will interact with a digital product before spending time and money creating the actual UI.
Best practices in mockup design
Digital product mockups are a great way to save time and money when developing the actual product. However, getting the mockup process wrong can have a knock-on effect and lead you down the wrong path for your product.
Following these mockup best practices will ensure your team is following the right path when developing your product:
Get super familiar with your product
Be clear on the message of your product
Focus on storytelling
Know your audience and what they're looking for
Create rough sketches first
Focus on user value
Use screenshots or other product photos
Keep things realistic
Keep things organized
Align fonts and colors with your branding
Test and get feedback
Be ready to change the mockup as required
Use mockups to guide prioritization
The role of mockups in user testing
Mockups can play a key role in user testing by giving users a chance to experience your product before you make costly decisions.
For digital products, you can make paper mockups of the user interface and use them to see how the user would interact with the product. Getting user feedback at this early stage removes the guesswork from UX design and means you can build the product to match how the user would expect the product to work.
It also allows you to validate any existing design ideas you have implemented with hands-on feedback, letting you know what works. As the project progresses, this will save money and resources because you won’t build anything that needs to be rolled back after user testing.
Using mockups in user experience testing also opens the project to input from real users. Having fresh eyes and new perspectives and getting involved in the product early will help influence decision-making, promote ideas that have real value, and ensure discussions are centered around the user at every stage.
General FAQ
Glossary categories
All product feedback in one place
Experience the new way of doing product management
