Successful products don’t just happen. They’re the result of thoughtful exploration. One important phase of the product development process involves representations of products known as mockups. Mockups are a powerful way to get product managers and relevant stakeholders engaged in decisions regarding a final design. Mockups serve as a way for a design team to acquire feedback, and they can also be a marketing tool to get audiences excited about upcoming launches.
What is a mockup?
A mockup is a polished visual draft of a design concept. Mockups are medium to high-fidelity static images, meaning they portray key visual elements but don’t necessarily reflect the full functionality of the finished product. Digitally generated via design software or online templates, they can illustrate a range of projects, from apps and web pages to physical products.
Wireframe vs. mockup
A wireframe is a hand-drawn or digitally rendered outline of a web page or app screen. Wireframes and mockups serve a similar purpose of visually representing a product concept sans functionality. Wireframes precede mockups in the design process, and they facilitate rapid feedback on the general layout of products. Mockups, on the other hand, facilitate detailed critiques, so changes can be made prior to finalized designs.
Prototype vs. mockup
A prototype is an early, unreleased version of a product. Both prototypes and mockups are high-fidelity, realistic renderings of a product. But while mockups showcase how a product will look, prototypes are functional and usable. The purpose of a prototype is to generate feedback about the product’s functionality, whereas mockups are used to generate conceptual feedback.
Types of mockups
While there are variations across industries, common types of mockups include:
Physical product mockups
Product mockups allow you and other team members to visualize your product before creating a prototype. They can also help you imagine the product in the context for which it’s designed. For example, you might create mockups of a new shoe design—one mockup might be a 3D rendering of the shoe itself, while another might show an image of how the shoe looks when worn.
Some mockups may be physical models of the product itself. They differ from prototypes in that they don’t offer full functionality. For instance, if you’re a furniture designer creating a chair, you might create a 1/10th scale model of your design before you commit to building a full-size chair. This allows you to see how the design will look when realized, without spending the time and money it would take to create the final product.
App and website mockups
App and web page mockups serve as a visual reference for a user interface. They allow you to preview apps and websites before releasing them to the public. Although the mockup’s interactive features may not work, you’ll still be able to get a sense of the user experience.
For instance, if you’re designing the app version of your ecommerce store, you’ll likely create a non-functional version of the app before launch. You can use this mockup to adjust the size of imagery and buttons to ensure that it works on a variety of devices.
Branding mockups
Branding mockups are static visual renderings that present an array of branding designs in development. They often involve a print mockup that enables materials like business cards, packaging, and apparel to be examined and refined before they are officially produced. Branding mockups help designers, stakeholders, and manufacturers work in sync and create the best versions of designs.
Tools for creating mockups
Depending on your needs and skill level, you’ll likely choose from either inexpensive mockup templates or more sophisticated design software.
Online mockup generators
There are many easy-to-use online mockup generators for streamlined mockup creation. Whether you need a hoodie mockup template or a jumping off point for your website mockup, you can find preexisting templates online.
For instance, if you’re a budding skin care company that needs a mockup for brand packaging, a cloud-based design tool like Canva can help you brainstorm ideas and eventually land on a packaging mockup to send to a manufacturer.
Inexpensive online software can also help you think through website and app designs by providing thoughtfully structured containers where visual elements like a logo, graphics, copy, and more can be inserted. Not only is the learning curve shallower when you opt for online mockup generators, the cost is usually lower than purchasing a subscription-based design software—and some are even free. Other accessible mockup generators include Placeit and Smartmockups.
Professional design software
Creating mockups in design software is an industry standard for designers. However, if you're new to designing mockups, or there isn’t a designated designer in your company, this option usually comes with a steeper learning curve and higher pricing compared to using online templates. But if you’re ready to take the plunge, you can make mockups from scratch using design software like Figma, Sketch, and Adobe XD.
Mockup FAQ
Where do mockups come into the design process?
High-fidelity mockups come in toward the end of the design process. They are valuable right before the final phase because they provide information necessary to finalize a product.
What is a mockup example?
T-shirt mockups are an example of a mockup. Companies create them to see how an idea could come to life in the real world and to facilitate decision-making about specific elements of branding. They are digitally rendered prior to t-shirts being printed.
Where can I use or post mockups?
Mockups can be used in business presentations for internal teams or relevant stakeholders in order to discuss design elements. You can also post mockups on social platforms as part of a marketing strategy.
Why are mockups important?
Professional-looking mockups are important because they are a tool for gathering feedback before a product is moved to prototyping or production. Early revisions are less costly compared to adjustments made during later stages of development or after a product is produced. Mockups are also important because they unite the development team, including non-designers, around a final version.
