Mockup: what it is and what it's used for in design
What a mockup is, how it differs from a prototype or a wireframe, and how to use it to validate design before producing or publishing a piece.
The team behind Polimake. We explore the intersection of technology, creativity, and automation.
A mockup is a static visual representation of how a piece —website, app, packaging, poster, t-shirt, ad, interface— will look before it's produced or published. Its purpose isn't to be functional, but to communicate the design decision realistically enough to validate it.
It's one of the most basic tools of the creative process and, paradoxically, one of the most poorly used: many teams call anything between a sketch and a final prototype a "mockup," which creates confusion about what exactly is being approved.
Mockup vs. wireframe vs. prototype
The three words describe different levels of fidelity:
- Wireframe. A structural diagram, without style. Gray blocks that show what goes where. It's used to validate architecture and flow, not visual design.
- Mockup. A high-fidelity, static visual representation. It has typography, color, imagery, branding. It's used to validate design, not interaction.
- Prototype. A functional representation, navigable or interactive. It's used to validate behavior, not just appearance.
Confusing them is the cause of many frustrated approval meetings. If you present a mockup but the client expected a prototype, they'll ask for things that can't be done in a static image. If you present a wireframe but the client expected a mockup, they'll give you feedback about the gray typography.
Common uses of the mockup
- Branding and stationery. A logo applied to business cards, envelopes, email signature, vehicles.
- Packaging. Container, label, box viewed from different angles and contexts.
- Web and app. Key product screens before development.
- Sales presentations. To sell a proposal without having produced anything.
- Social media and ads. Visualizing how a piece will look within the real feed or channel.
- Physical product. T-shirts, books, merchandise applied to mannequins or environments.
- Editorial. Layout of magazines, catalogs, or reports before printing.
Why the mockup is the most cost-effective phase to approve
The sooner you catch a design problem, the cheaper it is to fix. The typical progression:
- Changing a wireframe → minutes.
- Changing a mockup → hours.
- Changing a prototype → days.
- Changing the final product → weeks + money already printed or developed.
Approving well at the mockup phase saves the compound cost of the following phases. That's why mature creative teams invest time in making realistic mockups: it's not perfectionism, it's risk management.
Common mistakes when presenting a mockup
- Presenting a single mockup. Without alternatives, the client has no context to judge it. Better to show 2-3 distinct directions.
- Mockups on a generic neutral background. Seeing them in a real context (a real website, a real shelf, a real human hand) changes the perception.
- Approving typography and color on screen when it will be printed. What you see in RGB isn't what comes out in CMYK. Always ask for a printed proof for physical pieces.
- Not documenting what was approved. If there's no record of which version was approved, someone is going to build on the wrong version.
- Confusing a mockup with the final product. A client who sees a polished mockup sometimes thinks it's finished and stops iterating. Communicate clearly that it's a representation.
The mockup in creative operations
In teams that produce many pieces, mockups are the intermediate approval point between brief and final production. If the mockups live in a design tool, the approval in another (email, PDF), and the feedback in a third (chat), the cycle breaks down.
An efficient workflow keeps the mockup, comments, and decision on a single surface —where the approver can comment on exactly the pixel they're worried about, not in the body of an email. For more on how to design these kinds of workflows without burning out the team, read creative approval workflows.
At Polimake, the mockups produced in Studio live linked to the brief in Studio, with version history, and they enter the Media library automatically when they're approved as final assets.
Related concepts
This piece is part of the Polimake glossary and of the cluster on creative operations. If you manage design at an agency or in-house team, also read creative approval workflows.