---
title: "Mockup"
description: "A mockup is a high-fidelity static design showing the final look of an interface or graphic. Learn how it differs from a wireframe and a prototype."
url: "https://nodea.io/en/glossary/mockup"
lang: "en"
updated: "2026-07-13"
---

# Mockup

> A mockup is a high-fidelity static representation that shows the intended final look of an interface or graphic — with colours, typography and real content, but without interactivity.

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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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.

### How is a mockup different from a wireframe and a prototype?

A wireframe is a low-fidelity skeleton — block placement without styling. A mockup adds the visual layer: colours, fonts, images and real content, but stays static. A prototype goes further — it is clickable and simulates interactions. They are three successive stages of refining a design.

## Related

- [Wireframe](https://nodea.io/en/glossary/wireframe)
- [Layout](https://nodea.io/en/glossary/layout)
- [UI](https://nodea.io/en/glossary/ui)
- [UX](https://nodea.io/en/glossary/ux)
- [Responsive Design](https://nodea.io/en/glossary/responsive-design)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/mockup.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)