Skip Navigation
Image showing how to create a mockup over a teal background.
Learn design

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

  1. Using a mockup template
  2. Mockup generator
  3. Mockup plugins
  4. Custom mockup from scratch

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.

Image showing how to create a mockup with a template.

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.

Image showing how to create a mockup with a generator.

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.

Image showing how to create a mockup with a plugin.

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.

Image showing how to create a mockup from scratch in Sketch.

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!

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free
1280x720