Mockup

A Mockup is a static, high-fidelity visual representation of a product’s design, showing its appearance, layout, and visual style. Unlike a prototype, a mockup typically does not include interactivity and is used primarily for visual design and branding purposes. Mockups allow stakeholders to evaluate the aesthetic aspects of a design before development begins.

Mockups are most valuable for stakeholder alignment and developer handoff — they provide pixel-level visual specifications that remove ambiguity from implementation. The risk is treating mockups as the end goal rather than a communication tool: a perfect-looking mockup with undefined interactions, missing edge cases, or unrealistic content will produce a product that looks like the mockup but doesn't work like users expect. Mockups need to be accompanied by interaction specs and real content to be useful for engineering.

Zeplin and Figma's developer handoff tools turn mockups into annotated, measurable specs — developers can inspect any element to see exact colors, spacing, font sizes, and assets without needing a designer in every implementation meeting, which is the practical reason mockups matter at engineering scale.