What is a Mockup in Design?

If you have any experience with graphic design, chances are that you’ve heard of the term mockup. But what is a mockup exactly, and what part does it play in the design process? 

There’s a lot more to graphic design that it might seem at first. The graphic design process involves a series of steps. And once you have the final product, graphic designers will often create a mockup for clients to see.

{{GENERAL_PORTFOLIO="/dev/components"}}

What is a mockup in design?

A mockup is a visual representation of a design intended to showcase how the finished product will look and feel.

It is typically a static, high-fidelity depiction that provides detailed insight into the design’s appearance, layout, and functionality. Mockups are used across various industries, including graphic design, web design, product design, and interior design, to help clients understand how physical products and digital design will look in real life. 

Mockups can take many forms depending on the project’s nature:

• Graphic design: Mockups might include brand logos on merchandise, business cards, or marketing materials.
• Web design: These mockups show how a website’s pages, navigation, and user interface will appear.
• Product design: Physical mockups represent product packaging, gadgets, or prototypes.
• Interior design: Mockups for interior spaces might display furniture layouts, color schemes, or lighting plans.

Mockup vs. prototype

Now that we’ve answered “what is a mockup in design”, there’s one more term we need to clear out: prototype. 

With physical products and user experience design, mockups are created before or after the prototype stage. Prototypes are functional “drafts” of a finished product.

For example, in web design a prototype will mostly work like a website is supposed to work (interaction, working buttons, etc.). A website mockup on the other hand will just show how the website is supposed to look - the colors and images used, usually with placeholder text. 

While mockups are not fully functional like prototypes, they play a critical role in visualizing a design’s potential before committing resources to production.

The purpose of mockups

Let’s say you hired a designer to create a flyer. They will likely deliver the final design in PDF format, so that it can be sent to the printers.

Along with that, they will usually provide a mockup, typically in PNG format for clients to review. But, why do you need a mockup anyway?

Mockups serve several important purposes in the design process: 

1. Visual communication: A mockup provides a tangible representation of a design idea, making it easier for clients or team members to understand the concept. 
2. Testing visual appeal: Mockups help designers evaluate the aesthetic aspects of their work, such as color schemes, typography, layout, and overall harmony. This ensures that the design aligns with the intended vision and brand identity.
3. Feedback and iteration: Mockups act as a collaborative tool. By presenting a design in a realistic context, designers can gather valuable feedback from clients and stakeholders.
4. Presentation: A polished demonstrates professionalism and allows you to present ideas better. 
5. Pre-production verification: Before diving into production or development, mockups provide a checkpoint to ensure that the design meets expectations and resolves potential issues early on.

How to create a mockup?

Whether you’re starting out as a designer, or testing out options for DIY design, we’ll teach you everything you need to know about how to create a mockup. 

1. Define the purpose and goals

Not every mockup is created with the same end-user in mind. Sometimes, designers create mockups for themselves, to test out ideas.

More commonly, the mockups are for design clients. Especially with physical products, the purpose of a mockup might be to show how the full size model will look (e.g. packaging on shelves, billboards on a street, etc.).

Finally, a mockup might also be for a third party. For example, someone might be selling t-shirts on popular websites. A design mockup in this case, is meant to give buyers an idea how the custom graphic will look on their tees, hoodies, etc. In that case, the design elements of a mockup should be minimal (e.g. background) to showcase the design properly.  

2. Gather necessary assets

Unlike prototypes that are focused on functionality, mockups focus on design. Make sure you have all the necessary assets, to create a high-quality mockup. This might include brand colors, images, illustrations, and icons.

Ideally, a mockup will also include the text, but this is not mandatory. If the copy hasn’t been finalized, placeholder text will do. 

3. Choose the right design tool

There are many great design software which allow you to create professional and realistic mockups. Some popular options include:

• Adobe Photoshop: Ideal for creating high-quality, detailed mockups.
• Figma: A collaborative design tool that supports mockups, wireframes, and prototypes.
• Sketch: A vector-based tool tailored for UI/UX design mockups.
• Canva: A user-friendly option for simple graphic design mockups.
• Mockup-specific tools: Websites like Smartmockups or Placeit offer ready-to-use templates for quick mockup creation.

5. Build the design

Since a mockup usually has the necessary content, i.e. the actual design, it’s not very hard to create.

Just make sure to select the real-life context, e.g. packaging or devices, like laptops or phones for digital products. 

You can also use an abstract background (e.g. if you’re creating mockups for social media posts). In this case, make sure to select the background color palette carefully. It should complement the main design, rather than overpower it.

6. Use mockup templates (optional)

If you’re a non-designer that doesn’t feel comfortable creating a mockup from scratch, there’s another option.

You can download free or premium mockup templates for realistic presentations from sites like Envato, Freepik, and other design marketplaces.

Place your design into the mockup using smart objects in Photoshop or drag-and-drop interfaces in online tools, like Canva.

Conclusion

A mockup is more than just a visual representation.

By offering a detailed preview of a design, mockups can help you make informed design decisions, encourage collaboration, and speed up the product development process. 

Whether you are designing a logo, website, product, or interior space, incorporating mockups into your workflow can streamline the process and lead to more successful outcomes. 

We recommend you check out our work page, where you can find lots of mockups created by our professional designers.