What's the difference between a mockup and a prototype?

A mockup is the final visual design, static. A prototype connects screens so users can attempt tasks. Mockups answer “does this look right?”; prototypes answer “does this work?”

Can you skip mockups and design in code?

With a mature design system, often yes — screens assemble from existing components directly. New patterns, marketing pages, and anything brand-sensitive still benefit from a mockup pass first: iteration is cheaper before code.

Mockup

A high-fidelity, static representation of a screen showing the final visual design — real colors, type, and content — but without interactivity.

Deliverables & Artifacts

A mockup is what a screen will actually look like: full visual design applied — real type, color, imagery, and content — but static, with nothing clickable. It is the fidelity step between a gray wireframe and an interactive prototype.

Mockups are what stakeholders usually mean by "the design," and they are ideal for sign-off on look and feel. To test behavior and flow, though, they need to be linked into a prototype — a mockup alone can't reveal whether a sequence of screens actually works.

In practice

Before building, a designer produces pixel-final mockups of the new billing page: real plan names, real prices, the exact table that will ship. Stakeholders approve look and tone; legal catches a compliance line that must appear near the price. None of that feedback needed interactivity — it needed realism. The mockups then become the spec for engineering and the frames for a clickable prototype if the flow itself needs testing.

Mockup

In practice

Frequently Asked Questions