Mockup
Mockup
A realistic visual model of a product created to review its appearance and layout before development is complete
In Simple Terms
A mockup is a sample image or model that reproduces what a website or app will look like when finished. It's used during the production process to compare design options or for the team to discuss whether button placement feels right. The actual functionality doesn't work yet, but it's prepared to share a clear visual image of the final look — including colors and font sizes.
Behind the Name
The word 'mockup' combines 'mock' (imitation) and 'up' (to build), describing something crafted to look exactly like the real thing while having no working functionality. The term is used broadly across fields such as industrial prototyping and software design, where it refers to a realistic visual representation prepared before the real thing is built.
Take a Closer Look!
A mockup is a realistic model built to check what a finished product — such as a website or app — will look like.
Creating a clear visual of the final appearance early in production helps prevent the finished result from differing from what everyone expected.
The underlying code and functionality are generally nonfunctional — the focus is purely on visual confirmation.
In app development, for example, tapping a button won't switch screens, but the colors and font sizes are crafted just as they will appear in the real product.
Reviewing the design in mockup form before programming begins has become a standard step in the development process.
Related terms like wireframe and prototype each serve a different purpose.
To put it simply: a wireframe is a layout diagram, a mockup is a visual sample of the finished appearance, and a prototype is a working demo you can actually interact with.
Using a mockup makes it much easier to align the development team and clients on what the final product will look like.