A mockup is a static, high-fidelity visual representation of a product's interface. It shows what the final design will actually look like, including colors, typography, spacing, and imagery, but it isn't interactive.
‍
Mockups sit between wireframes and prototypes in the design process. They come after you've nailed down the layout in a wireframe, and before you add interactivity to build a clickable prototype.

Why does a mockup matter?

Mockups let you and your stakeholders evaluate the visual design before any code is written, catching issues with branding, layout, or hierarchy early on. They're also a great tool for getting buy-in from clients or teammates, since they look much closer to a finished product than a wireframe.

For example, a designer might create a mockup of a mobile app's home screen in Figma, showing the exact colors, icons, and fonts, so the development team knows precisely what to build.

Similar