Mockups are digital prototypes representing how your design will work in a real-world setting. This can be an extremely helpful tool to show exactly why a design has been created in a particular way and can enhance both your portfolio and improve engagement with your online product listings.

Some common examples of mockups include:

• Branded stationery such as business cards, letterheads, and office equipment.
• Signage including wall graphics, directional and branding
• Vehicle graphics depicting anything from cut vinyl to a full vehicle wrap
• E-commerce listing showing design options for a T-shirt, mug, or other products
• Websites and social media

The list goes on… honestly, there is a mock-up for pretty much anything you can think of, and the best part is you can usually find a pretty good one for free or at a very low cost.

So here are some more reasons why you should be using mock-ups to present your work.

It will improve the overall look of your portfolio or listing:

Picture this scenario… Say you have a label design for a brewery, we’re not used to seeing these as a flat layout. We’re used to seeing them printed on the real product sitting on a shelf, in a fridge, or on a table. This is the perfect opportunity to use a mockup. Even better, use a mockup where the can is sweating like it just came out of the fridge. Now think how professional that will look on your website instead of a flat design file. Also, many templates have options to have a transparent background which gives even more versatility to be used in advertising and online applications.

Mockups can increase the scope of a project:

Sometimes a client project will include branding as the only deliverable, and that is absolutely fine. However, if you want to showcase that design on your site you can use mockups to represent the logo in different environments such as vehicle graphics, signage, or branded clothing. This allows you to show the versatility of the branding and how it links to the client’s industry. You might have even created these mockups already during the development of the project. Include them on your website or social media, this applies to both paid jobs and anything you do to add personal projects to your portfolio.

They help to give a sense of scale:

Chances are your client will want to see how the design(s) can be implemented at various sizes. This could be anything from an app icon to a poster or a large billboard or exhibition stand. It can also be useful when making design decisions or explaining when to use certain elements of a design system. Create a series of mockups to show how versatile the design is but ensure they are relevant to the client’s industry and depict real-world uses for the design.

Mockups can replace a real photo.

Designers aren’t necessarily photographers and don’t always own a professional camera, have the latest smartphone, or possess the necessary skills to shoot a professional-level photograph. Also, often we don’t get the opportunity to see the final printed product, especially during current issues of a global pandemic or if you’re working with international clients. In this case, you can use a mockup to show the final product of any printed items such as a brochure, flyer, or business card, and create a professional-looking image instead of a mediocre shot from your phone.

Types of mockups

Mockups come in many different formats for various uses.

• Photorealistic: one of the most common mockups, these depict a real-world product including a realistic environment.
• Scene generators: Not always intended to look realistic, these often feature an overhead view showing a series of items on a tabletop. You can get even more creative with this by adding graphic elements to the background.
• Social media template layouts: Show how your client’s Facebook profile image will look alongside their cover photo, or display their Instagram grid with a series of posts you have created.

Combine them

Mockup a Facebook profile and show it being viewed on a laptop screen or tablet. This is perfect when creating responsive websites as you can show the client how their site will behave on different devices.

How to use them

In most cases, you will find mockups as downloadable Photoshop PSD files which often use a combination of ‘Smart Layers’ and ‘Layer masks’ to place your design in its environment. Many templates will have labelled layers to tell you which one to place your design on. You might also be able to alter the colour of a background, fabric, or product element to match your branding.

Best places to find your free mockups

There are many sites available with no shortage of quality templates to choose from, and if you’re anything like me you will download way more than you will ever need.

So the sites I recommend the most are…

Note: most of these sites will allow you to use their templates for commercial use, but if you’re unsure you can check the license info either on the website or within the download file itself.

‍