Mockup
Also known as: hi-fi design, visual comp, high-fidelity design
What Is a Mockup?
A mockup is a static, high-fidelity visual representation of a product's interface. It shows exactly how a screen will look (colors, typography, spacing, imagery, and UI components) without any interactive functionality.
It sits between a wireframe, which focuses on structure without visual design, and a prototype, which adds interaction to the visual design.
What Does a Mockup Include?
A completed mockup covers four main layers:
Visual design — the full color scheme, typography hierarchy, icon set, and component styling applied to the layout.
Real or representative content — placeholder text gives way to actual copy, headings, and data, giving stakeholders an accurate sense of what the finished screen will contain.
Spacing and grid — precise measurements and alignment that the development team can reference during implementation.
UI states — a single screen can appear in multiple forms: empty, populated, error, and loading states each warrant their own mockup.
What Are the Benefits?
Accurate visual preview — stakeholders see how the product will look before development begins, reducing misaligned expectations after launch.
Easier design feedback — visual decisions like color, typography, and component styling are far more concrete in a mockup than in a wireframe, making reviews more actionable.
Developer handoff ready — detailed mockups carry the measurements, styles, and content that development teams need to build from.
Brand consistency check — seeing brand identity applied across real screen layouts makes it easier to catch inconsistencies before they're coded in.
What Are the Limitations?
No interaction — a mockup shows what a product looks like, not how it behaves. Transitions, animations, and conditional logic stay invisible until prototyping.
Approval risk — a polished visual can signal finality to stakeholders, making it harder to revisit structural decisions that may still need adjustment.
Front-loaded investment — producing high-fidelity visuals takes more time than wireframing, so mockups created before structure is locked can become wasted work if requirements change.
When Is a Mockup Most Useful?
A mockup is most valuable once structure and layout decisions are confirmed — after wireframes have been reviewed and approved. At that point, the investment in visual design is grounded, and output can move directly toward a development handoff or prototype.
In UX/UI design, mockups are produced during the visual design phase, where the work moves from structural decisions to how the product will look and feel in users' hands.