What is Mockup?
Wireframe + visual design = mockup. A static image of how it will look. Clickable? Then it is a prototype.
A mockup is an image of how a finished web page or app will look, with all the visual elements in place: colours, images, typefaces, real copy, and logo. If a wireframe is the stripped-back blueprint, the mockup is the painted photo of the finished house — but still just an image, nothing you can click yet.
You can say mockup = wireframe + visual design. First the wireframe sets the structure (where things sit), then the mockup adds the full polished layer on top. You see the real feel and mood, like an interior photo in a furniture catalogue showing how the room will look — but you cannot sit on the sofa.
The difference from a prototype is clickability. A mockup is a static image. As soon as you can press buttons and navigate around, it is a prototype instead.
Why are mockups important for your business?
A mockup lets you see and approve exactly how your site or app will look before it is built for real. You avoid surprises and can give feedback on colours, images, and feel while changes are still easy to make.
It makes the decision safer. Instead of trusting a verbal description, you see the result in front of you and can give clear feedback. That reduces the risk of costly misunderstandings later in the build.
Mockup in practice
Imagine a café that wants a new site. From the wireframe, we create a mockup: now you see the café's real colours, attractive photos of the food, the chosen font, and the finished text "Welcome in for a cup".
The owner looks at the mockup and says "make the background a bit warmer and swap the hero image". We adjust the image, they approve, and only then do we move on to building the real, clickable site. That way everyone knows exactly what the end result will be before work really gets going.
Common questions about Mockup
What does mockup mean?
A mockup is a static image of how a finished page or app will look, with colours, images, and real text. It is wireframe plus visual design — but not yet clickable.
What is the difference between a mockup and a prototype?
A mockup is a still image you only look at, while a prototype can be clicked and used to test flows. A mockup shows how it looks; a prototype shows how it works.
Why create a mockup?
So you can see and approve the exact appearance before the site is built. That makes it easy to give feedback on colours and feel while changes are still cheap and quick.
Related terms
Web Design
The art of making a site both look good and work well. Like interior design — except the furniture also has to be easy to find.
A/B Test
Show different versions to different users and see which wins. Stop guessing — start measuring.
Accessibility (a11y)
Making your site usable for everyone — regardless of ability. Often a legal requirement, and simply the right thing to do.
Dark Mode
Dark theme — easier on the eyes, can save battery, and makes everything look noticeably sharper. We build it in by default.
Design System
A library of reusable design components and rules. Keeps everything looking and feeling consistent.
Prototype
A clickable version of the design. Test flows before a single line of code is written. Saves weeks of work.