Chances are you’ve heard someone use the word “mockups” when discussing a design or presentation. If you’ve found understanding what mockups are a bit unclear, this piece will untangle your doubts and you’ll be able to understand the ins and outs of mockups. A basic understanding of mockups is crucial for both designers and non-designers as they’ve proven to be a very helpful resource . We’ll get into that later on but first, let’s break down what a mockup is.
What are Mockups?
Mockups are realistic models of objects or products that depict what the actual objects or products will look like. Mockups could be the representation of an advertisement, website, software application, or any other designable object. Typically, a mockup is designed to convey the general idea of the actual product and is not a working model. When the mockup is functional, it is usually referred to as a prototype.
What are Mockups used for?
Mockups are used as design tools virtually everywhere a new product is designed. The very first problem a mockup solves is to provide clarity. When you see a mockup, you get to see what an idea will look like when produced and this clarity helps solve the cost associated with feedback if the product or idea was to go straight into production. Beyond cost-saving purposes, mockups are great for:
- Making presentations
- Personalising pitch decks
- Testing customer reaction
- Educating (practical and visual aids)
- Relatability (when used in contextual environments like Nigerian Mockups)
Types of Mockups
There are different types of mockups and this categorization is based on the end product the mockup is intended to model. We’ll briefly go over some mockup types in this section. You’ll notice most mockups have broad categorizations where specific mockup types fall under. We’ll be going straight into this specific categories to make our classification of mockups as distinct and clear as can be. We get that this list can be expanded but we’ll point out the categories we know you’ll be working with the most as an African creator.
Print mockups
This is arguably one of the most obvious types of mockups. Everyday, a new startup is thinking of printing company merch or a consumer goods company is making plans to advertise on billboards in major cities. The typical next line of action is to get a freelancer or an agency to come up with a design before getting the printer involved.
Mockups are the most optimal way to present designs in this situation so you can get the most objective feedback. First off, you get to verify the technical details regarding legibility and other text choices. You also get to compare different variants of the mockup and see which works best. In general, examples of print mockups include billboard, lamp posts, apparel, banner, and book mockups to name a few.
Social media mockups
Social media isn’t just a place to look at the latest Justin Bieber Video. Justin is cool but brands have been able to harness the immense traffic that comes from social media and translate that into profit. This means there is a lot more at stake with what you post on social media, and visuals matter more than ever. A recent study by Hubspot found that about 16% of an average website’s traffic comes from social media, and the first step to getting people to care about social media is how it looks.
Being able to visualise content before going live is a key advantage that allows you to make informed decisions on content presentation and arrangement. Social media mockups also let you repurpose your content for blog posts.
Branding mockups
If you’re a brand designer, you’ve worked with branding mockups before. Branding mockups are made with unique brand assets such as logos, patterns, illustrations, and other elements created for and owned by individual brands. Brand mockups help businesses visualise their brand identity in use across various assets. Some of these assets include letterhead papers, business cards, apparel, and more.
A well-done brand mockup can also be used for presentations and online promotions before the actual branded materials go into production. An example would be a small brand working with the pre-order business model. Mockups can be used for promotions to rake in orders to fund production. This ensures optimal use of resources. Many print-on-demand brands use this model to maximise profit.
Packaging mockups
It’s common for physical products to come in packs. Product packaging mockups help to gauge consumer response to certain products and they also help with A/B testing. A strong package design will help the consumer attribute a certain level of quality to your product before even purchasing it. When a great product comes with an amazing packaging design, the odds of a positive consumer interaction increase. Packaging mockups help to predict this positive interaction to an extent.
UI/UX Mockups
User Interface and User Experience design is primarily the mockup of a website or webapp. It lets the client see exactly what the end product will be and it helps to analyse user experience flow. UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements. User interface design considers all the visual, and interactive elements of a product interface—including buttons, icons, spacing, typography, color schemes, and responsive design.
If you notice, the types of mockups we’ve explored so far can be collapsed to be under two umbrellas. Graphic design mockups and web design mockups. We’ll go through the distinction between the two next.
What are mockups in graphic design?
By now you’ve seen us define mockups over and over again so we’ll just touch on what makes mockups in graphic design different from web design. Graphic design mockups tend to be mockups that are for print, apparel, and physical products. The main point of these types of design is to serve as visual aids or promotional materials and don’t usually place so much emphasis on functionality. Popular tools used for mockups in graphic design include Adobe Photoshop and Adobe Illustrator.
What are mockups in web design?
Mockups in web designs are mid to high-level fidelity representations of what the live website or app would look like. Website mockups combine the structure and logic of a wireframe but with the images, graphics, and UI elements that the final product will have. Our previous explanation on UI/UX gives a pretty good explanation of what we try to achieve with web design mockups so let’s move on.
What is the difference between wireframes, mockups, and prototypes?
Typically in a design process, the wireframe comes first before the mockup stage, and then a prototype is done. The wireframe usually involves creating a structure for your design and defining the design flow. The mockup involves adding flesh to this structure and coming up with a design that is a replica of what the product will look like. A prototype is basically a demo of the actual product. At the prototype stage, the product is fully functional whereas this wasn’t the case at the mockup stage.
How to create mockups
If you’re a non-designer looking to use mockups for presentations, you need not worry so much about the intricate details of creating a mockup from scratch. We’ve covered how you can download your mockups from Nigerian Mockups and create your own mockup in a few steps here.
For designers, here are the basic steps to creating your own mockups:
- Take Photos
This is the first step in any mockup creation process. Take photos of the product you’d like to convert to mockup templates from as many angles as possible and edit the photos to look as good as can be. A cheaper alternative is the use of stock photos. If you don’t want to take photos, a workaround could be creating 3D renderings of the product you’d like to create a mockup for.
- Photoshop Smart Object
The next step is to move your photos to a software editing tool, preferably Adobe Photoshop, and then turn your design into a smart object. A smart object is essentially a container that stores an image in a linked file or design. If you replace the image in the smart object, it updates in the linked file or design. In simpler terms, It’s like having a big picture and selecting a part of the picture you want to be changeable ‘design wise’ but then that part is linked to another file somewhere where the design changes occur and it is automatically reflected on the big picture.
This video really explains how to turn your photos into smart objects for mockups in a simple way. If the definition here is too confusing for you, this video will do the trick.
If you’re more interested in creating mockups for 3D objects, you’ll find this detailed case study very helpful.
How to use mockups for your portfolio
Every creative knows the importance of having a solid portfolio. It is what everyone uses to judge the quality of your work. Having a visually appealing portfolio can be strongly enhanced by using the right mockups to present your work. For branding projects, you want to show how your designs look on various assets. A quick look at how designers present their portfolios on platforms like Dribbble can help you visualise how to make use of mockups in your portfolio.
Where can I get ready-to-use mockups?
There are a few platforms out there that let you download mockups templates you can customise. If you’d like to get a good range of mockups from apparel to laptop screens, and more, Envato Elements is a good place to start. Artboad Studio is another great resource for mockups. Mockuptree and Smartmockups are also good alternatives. For mockups that focus on the African context, Nigerianmockups is your best bet.
Our Final Thoughts
If you made it to this point then you should have a comprehensive answer to the fundamental question ‘What are Mockups?.’ You should also have an understanding of the importance of mockups and how to use them to your advantage. One thing we know for sure is that mockups will never go out of style as you’ll always need to visualise your ideas before going into production. As a creative, we encourage you to pick your favorite mockup platform and invest in beautiful mockup templates you can always use to bring your ideas to life.
What are Mockups? A Comprehensive Guide for Creators