What is a Mockup?

TL;DR

• A mockup is a static representation of how a product or screen should look.
• It usually includes realistic typography, color, components, spacing, and content.
• Mockups are more visually detailed than wireframes.
• They are less behavior-focused than prototypes.
• Mockups are useful for visual review, but they cannot prove that a flow works.

What does a mockup show?

A mockup can show the intended visual hierarchy, component choices, content, brand styling, and responsive composition for a screen.

It is useful when the team needs to evaluate presentation rather than interaction.

Mockup vs. wireframe

A wireframe focuses on structure. A mockup adds visual detail.

Mockup vs. prototype

A prototype emphasizes how the experience behaves. A mockup is usually static.

A set of mockups can later become a prototype.

When are mockups useful?

• visual direction review
• design-system application
• responsive layout review
• stakeholder communication
• handoff references

Common mistakes

Using a mockup to validate behavior

A static image cannot fully test an interaction sequence.

Polishing before the flow is clear

Visual quality can create false confidence in a weak product concept.

Ignoring states

One beautiful default screen is not the complete interface.

The bottom line

A mockup asks: if this screen existed, how should the visual interface look?

Related terms

Wireframe · Prototype · UI design · High-fidelity prototype

Relevant Figr resource

Read Prototyping UX Design for the relationship between static and interactive artifacts.