Mockup

A mockup is a full-color, realistic picture of a screen that looks finished but doesn't work yet. Real fonts, real colors, real words, zero function.

It's the stage where the gray bars of a wireframe get replaced with actual content. The crossed-out placeholder becomes the photo, "button" becomes "Get started," and the layout gets its real typography and color. Put the two side by side and the mockup looks like a shipped product. A mockup is a photograph of a product that doesn't exist yet.

It sits in the middle of the three fakes: a wireframe settles what goes where, a mockup shows what it will look like, and a prototype is mockups wired together so you can tap through them. Same screen, three different questions.

The trap is that mockups are too convincing. A stakeholder looks at a mockup and sees a product that's nearly done; a developer looks at the same image and sees six weeks of work. That gap is where timelines quietly die, so it's worth saying "looks finished, still a picture" out loud in the review.

You'll also hear "mocks," "comps" (an old agency word, short for comprehensive layout), and "hi-fi," meaning high fidelity.

When you want to see exactly what a screen will look like before anyone builds it, ask for a mockup. When you want to try it, ask for a prototype.