Mockup

Definitions

1. Mockup is a static, visual representation of a product or interface that demonstrates its appearance, layout, and key design elements without functional interactivity. Mockups sit between low-fidelity wireframes (which focus on structure and content hierarchy) and high-fidelity prototypes (which simulate actual user interactions). A mockup typically includes realistic colors, typography, images, icons, and content, showing what the final product will look like without the ability to click, scroll, or navigate. Designers create mockups using tools like Figma, Sketch, Adobe XD, and Photoshop. In the design process, mockups serve multiple purposes: they give stakeholders a concrete visual to evaluate and approve, they provide developers with a precise reference for implementation (including spacing, colors, and component styles), and they help identify design issues before expensive development work begins. Mockups are especially valuable for communicating design intent to non-technical stakeholders who may struggle to evaluate wireframes or verbal descriptions.

   In plain English: A picture of what the finished app or website will look like. It shows real colors and images, but you can't click on anything — it's like a photo of a product before it's built.

   Example: "The mockup looks great but we need to test the checkout flow — can we turn it into a clickable prototype?"

Related Terms

• Wireframe
• Prototype
• User Story
• Layout Shift
• Progressive Enhancement
• User Interface
• Paper Prototype