Mockup

Mockups are high-fidelity visuals of your final design. You can use mockups to highlight pixel-perfect details and certain features or as the featured image of a presentation or portfolio.

Updated on January 24th, 2023

Share

Mockups are called high-fidelity designs because they resemble a design in the final stages before development. They include branding, actual content, good use of color, and typography.

An example of a mobile design mockup

Unlike prototypes, mockups don't have any interactive elements or functionality.

When to use mockups

Within the overall design project, you create mockups based on wireframes. In turn, you can use the mockups in preparation for crafting a prototype for the validation phase of your project.

You can also use mockups in presentations and portfolios. Compared to written documents and verbal discussions, mockups offer a more realistic perspective for stakeholders and can help to move discussions forward.

What is the difference between wireframes and mockups?

Wireframes and mockups are often used interchangeably. However, there's a big difference between wireframes and mockups.

A comparison to show the difference between mockups and wireframes

The main difference is the fidelity of both deliverables. On the one hand, wireframes are a black-and-white schematic to help determine navigational patterns and user flow. They're low-fidelity.

Mockups, on the other hand, are high-fidelity visuals of your product that showcase a finished product.

Useful resources

Prototype vs. Wireframe vs. Mockup – What Are the Differences? - UX Pin

Wireframe, Mockup, Prototype: What is What? - UX Planet

19 Best Practices for Faster UI Mockups - UX Pin

Share

×

Page link

Want to learn more about Mockup?

Learn together with other UX designers in our community. Join by picking one of the options below.

Monthly

  • Same as annual, but billed monthly.

$5/month

Choose plan

Annual

Save 18% compared to monthly

  • 1️⃣ Join our Discord community

  • 2️⃣ Monthly UX Master Classes

  • 3️⃣ Office hours in the community

$49/year

Choose plan

Lifetime

One purchase. Join forever.

  • Support the development and upkeep of UX Dictionary

$99/lifetime

Choose plan

Once you choose your plan, you'll be redirected to our Stripe page. After that, you'll be redirected to our dashboard. You can cancel, pause, or upgrade at any time.