Design
What is a mockup?
A mockup is a static, full-fidelity image of a screen, showing final colors, type, imagery, and layout without any working behavior.
New to Bolt? Sign up free.
Technical definition
The three artifacts sit on a fidelity scale. A wireframe is a grey-box layout showing structure and hierarchy with no styling. A mockup adds the full visual design but stays static. A prototype adds behavior, so screens respond to clicks and the flow can be walked through.
Mockups are produced in design tools and handed to development as a visual specification. The term is also used for product mockups, meaning a photorealistic render of a design applied to a physical object, which is a separate meaning and a large share of the search volume.
In plain terms
A wireframe is the floor plan. A mockup is the photograph of the finished room. A prototype is the room with doors you can open.
A mockup shows exactly what it will look like and does nothing when you click it.
Why it matters
Mockups exist to settle visual arguments before anyone builds. Changing a color in a design file costs seconds. Changing it after the site is built, tested, and deployed costs a cycle of somebody's week.
That said, the step is easier to skip than it used to be. When a working page can be generated and revised from a description in minutes, arguing over a static image can cost more than trying two real versions. The rule of thumb: mockup when several people need to agree before work starts, and build directly when the person deciding is the person building.
