Top 4 ways to create a mockup for your design
Discover the different options at your disposal to create a mockup for your designs
As a designer, you’ll likely find yourself wanting to show off your designs, educate stakeholders, demonstrate design proposals or promote a product. One of the best ways to do this is to create a mockup of your product.
A mockup is a high-fidelity render of your product’s design that showcases how the finished product will look. It can take the shape of an image or a product model, and you typically create them using digital design tools.
In this article, we’ll explore four different ways you can create a mockup for your design.
How to create a mockup
Using a mockup template
Getting started on your design can be a daunting experience — even the most talented designers experience blank page syndrome. One of the best ways you can overcome this is by starting with a template instead of a blank page.
You can find templates for different products depending on what you’re creating a mockup for. Using Sketch, you can create a new document using one of the built-in templates. You can also make the most out of resource websites like Sketch App Sources to find a template that suits you. You might want even to consider creating your own custom template if you’re going to create a few mockups that share a lot of elements.
You can filter or adjust your search to find the template that suits your needs.
Now that we have an idea of the different kinds of templates you can use for your mockups, let’s talk about the pros and cons of using them.
| Mockup template pros | Mockup template cons |
|---|---|
| Accessible | Unoriginal |
| Fast | Limited availability |
| Reusable | |
| A source of inspiration | |
| Free or low cost |
When to use mockup templates
If you’re a designer looking for some inspiration or a strong starting point, there is nothing wrong with making use of a mockup template. You can still tailor it to match your product’s style and the cost can be free most of the time, so there’s a lot to gain. Just make sure you put enough effort in to make your mockup stand out from others using the same template.
Mockup generator
A popular option for non-designers, mockup generators let you create professional designs with minimal skill and effort. They do the heavy lifting in designing mockups and simplify the process for you. You can create your mockups by dragging and dropping images into a selection of templates and making some simple personalization choices.
There are plenty of options out there, including popular choices like Artboard.studio. Let’s take a look at the pros and cons of using a mockup generator.
| Mockup generator pros | Mockup generator cons |
|---|---|
| Accessible from any browser | Unoriginal |
| Low skill | Lower quality |
| Fast | Limitations in customization |
| Low cost |
When to use mockup generators
If you aren’t a designer and don’t have the resources to get one, mockup generators might be the easiest and cheapest way to create a presentable design. It keeps things simple, but can come at the cost of quality, so bear in mind what you’re using your mockups for.
Mockup plugins
If you plan on adding your designs to device models to present them in context, you might want to consider using mockup plugins. Similar to templates, they can save you time, while offering good quality designs. But instead of giving you a better start point for your project, they help you present your work on professionally-designed device mockups.
Plugins like Angle and Ls let you automatically place your Artboards on a wide array of different device models. This means that you’ll still have to design the mockup of the app or website you’re building, but the finishing touches for presentation will be easier. These plugins often come at a cost though, so let’s take a look at the pros and cons of using them.
| Mockup plugin pros | Mockup plugin cons |
|---|---|
| High-quality assets | High upfront cost |
| Time-saving | Skill requirement |
When to use mockup plugins
If you’re a designer who’ll constantly be showing off different mockup designs in real-world settings, mockup plugins might be the choice for you. It still means you will have full control over your app and website design and when it comes to presenting your work, you’ll have a library of professionally designed device mockups.
Create a custom mockup from scratch
Last, but not least, you can create your mockups yourself from scratch! If you have the skills for it — or curiosity to learn — you can always start with a blank page and design your product’s mockup. This means that you’ll have full creative control and unlimited potential with your design.
You can collaborate with your team and showcase your designs how you see fit.
With the very high potential ceiling, creating your own mockup is the default option for most designers. Everything has a cost, and with custom mockups from scratch, that cost can be time, resources, skilled designers or design tools. So, let’s take a look at the pros and cons of creating a custom mockup from scratch.
| Custom mockup pros | Custom mockup cons |
|---|---|
| Tailored design | Cost |
| Flexibility | Time |
| Highest quality | Needs design skills |
| Unique |
When to create custom mockups
If you can spare the time to get things right, this should be your default option as a designer. It’s important that your work looks its best when you showcase it to stakeholders or users.
Now that we’ve covered all the different ways to create a mockup, it’s time to take a step back. Think about what you need a mockup for, the resources at your disposal, and which option suits you the most. Each team and product are different, so there’s really no right or wrong option — just what suits you the best. If you’ve created any mockups in Sketch, share them with us — we’d love to feature them!
