Mockup

A mockup is a high-fidelity static representation of a design that shows how an interface, page or graphic will ultimately look. Unlike a bare-bones wireframe, a mockup carries the full aesthetic layer — chosen colours, typography, icons, imagery and real content — while remaining a non-interactive image.

How a mockup works

A mockup sits in the middle of the design process, between a conceptual sketch and a working prototype. Its job is to translate structural decisions into a concrete visual language that stakeholders can sign off before any code is written. A typical mockup includes:

• Colour palette and typography — final fonts, sizes and contrast aligned with the brand identity.
• Element placement — a refined layout with realistic proportions and spacing.
• Content and imagery — actual copy and images instead of placeholders, so the review is credible.
• Component states — the appearance of buttons, form fields and cards within the UI.

Mockups in practice

Mockups are a communication tool between the designer, the client and the development team:

1. Design sign-off — the client approves the look from the mockup before any code exists, cutting costly rework.
2. Presenting variants — comparing several visual proposals for a homepage or landing page.
3. Handoff to development — developers read exact colour values, margins and typography straight from the mockup.
4. Perception testing — checking visual hierarchy and readability before building an interactive prototype.

Popular tools for creating mockups include Figma, Sketch and Adobe XD, which make it easy to move from a static mockup to a clickable prototype.