5 Best Practices for Creating Mock-ups

published on: 09.06.2020 last updated on: 29.09.2020

There are as many different approaches to creating mock-ups as there are graphic designers. Each designer has their own idiosyncrasies, each knows what works best for them, their employers, and their clients.

But there are certain ways that make the process better whether you’re creating a mock-up for a webpage, a business card, a social media post, or a print brochure.

Best practices for creating mock-ups

These best practices include simple things, like paying attention to the type (or source) of the font you use; thinking about the mobile experience first and then designing for a desktop second. As well as the benefits of using vectors, and sketching your ideas out first.

The other best practice is to preview your work on different devices. This will provide a better picture of what the mockup will look like when it goes lives.

Here are 5 Best Practices for Creating Mock-ups:

1. Sketch or draw ideas first

Before you even open a design program, it can be beneficial to first sketch out your ideas. With a pen and pad, you can experiment, and test ideas out to see what they look like.

This way you can try a few different ideas quickly, rather than trying to put something together in a design program. By a few different ideas and putting them next to each other, you can get a sense of what will look better.

The obvious benefit to this practice is it can speed up the process and give you more direction when you dive into the actual mock-up.

2. Choose the Right Fonts

Fonts that work on MAC don’t always look good on a PC. And indeed, there are some fonts that, while they look good on a MAC won’t render at all on a PC.

This is why it’s important to do two things. Firstly, make sure the font looks good on both MAC and PC. Secondly, if the font is part of the branding and can’t be changed. Try to find a web-based font that is similar and will look good.

3. Mobile-first design

Even with most websites being developed to be responsive, it is still necessary in many cases to create designs for both mobile and desktop devices. Mobile is more important as it has quickly become the first screen people use, with a desktop, laptop, or tablet being the second.

The advantage for a designer of starting with the smallest size is twofold. Firstly, it gives a little more control over how the important elements are displayed on a small device (as well as which elements are important). Secondly, mobile design is often the fiddliest part because of the lack of space. Creating this version first gets much of the difficult work out of the way.

4. Use smart objects

Since vector-based images can be resized to fit any resolution (without losing any quality), they are ideal for mockups. Especially those that require a mobile and desktop design.

This is why you want to use vector images whenever possible. Additionally, vector graphics are able to scale quickly. This means they can adapt to high-definition, retina screens that are two or three times their size.

5. Preview different sized devices

Once you’ve completed your design, it’s a good idea to test it on different sized devices. As well as different brands. Ideally, you’ll want to see how it looks on an Android and Apple phone as well as on a PC and MAC desktops and laptops.

This will give you a fairly good indication of what a mockup will look like on each device after they’ve been coded, or printed, or posted on social media.

How a mockup generator can help you

If you are looking for a quick, easy, and efficient way to create mockups, a mockup generator can help. It has a wide variety of mockup templates and tools to help graphic designers successfully manage their workload.

With the mockup software, you can be creating mock-ups for logos, print, products, clothing, or social media content, and much more.

You can download the final mockup as a high-resolution image, or as a Photoshop PSD if you’d like to make edits in Photoshop.

If you would like to see the range of mock-ups being offered, you could skim through mockups here.

Mashum Mollah

Mashum Mollah is an entrepreneur, founder and CEO at Viacon, a digital marketing agency that drive visibility, engagement, and proven results. He blogs at BloggerOutreach.io.