What Is a Mockup?

Mockups are a common step in web design and development projects. A mockup lets your team weigh design options and plan the front-end build before committing significant resources, so you know the project is headed in the right direction before anyone writes code.

Anatomy of a mockup

A mockup shows the finished visual treatment: the final color palette, typography, imagery, spacing, and branding, all applied to a layout the team has already agreed on. For most projects, it’s the deliverable a client signs off on before development begins.

Its limits matter just as much. A mockup is static. There are no working links, no code behind it, placeholder content instead of real copy, and no responsive behavior. It shows how one screen looks at one size, not how the site behaves.

Mockup tools and workflow

If you’re working on a website with a team, designers usually build the initial mockup in Figma, which holds an 82.3% market share among UI design tools in the UX Tools 2024 Design Tools Survey. Sketch and Adobe Photoshop are solid choices for teams already using them, and Penpot is an open-source alternative. The team reviews the mockup, suggests changes, and iterates. When everyone agrees on the design and its elements, developers build it.

Mockup vs. wireframe vs. prototype

Teams commonly move from structure to visuals to behavior: wireframe, then mockup, then prototype. That order is a convention, not a rule. Some projects skip the standalone mockup, others test a rough prototype before any polished visuals exist, and in a tool like Figma the same design file can double as mockup and prototype. What separates the three is purpose:

• A wireframe settles structure: layout and content placement in plain boxes and lines, with no colors or styling.
• A mockup communicates the visuals: real colors, typography, and imagery applied to the layout, still as a static image.
• A prototype simulates behavior: a clickable simulation used to test how the design works before anyone codes it.

The quick tell: if you can click through it, it’s a prototype. If it looks finished but nothing responds, it’s a mockup.

When to make a mockup, and when to skip it

Make a mockup once the structure is settled, usually in a wireframe, and before anything gets built. It earns its time on custom designs and on any project where a client has to approve the look, because changing a static image is much cheaper than changing built pages.

You can often skip a standalone mockup when you’re building on a pre-designed WordPress theme. The theme’s demo effectively is the mockup: evaluate the look there, get sign-off on it, and customize from that starting point.

Where mockups go wrong

The classic failure mode: stakeholders approve a single static desktop image, and the built site surprises them. Real headlines run longer than the placeholder text, real photos come in awkward shapes, and many visitors first see the design on a phone screen the mockup never showed.

The fix is to mock up the key breakpoints, desktop and mobile at minimum, or to move to a clickable prototype before sign-off. If the layout has to adapt across many screen sizes, review how responsive design handles that before you approve anything.