Website mockup

What a website mockup is

A website mockup, or maquette in French, is a detailed static visual of what a web page will look like once finished. It shows the real layout, colours, typography, spacing, images and often the actual content, so everyone can see and judge the design before any code is written. A mockup is how a client and a team agree on the visual direction of a site, turning an abstract brief into something concrete to react to.

Where it sits in the process

Design usually moves through three levels of fidelity. A wireframe is a rough, greyscale sketch of structure and hierarchy, without styling. A mockup adds the full visual layer: brand colours, fonts, imagery and polished detail, so it looks like the real page but is static. A prototype then makes the mockup clickable to simulate interaction and flows. Mockups are typically produced in design tools such as Figma, and are the stage where visual decisions are finalised before build.

Mockup, wireframe and prototype

The three are often confused. The simplest distinction: a wireframe answers where things go, a mockup answers what it looks like, and a prototype answers how it behaves. You do not always need all three, but skipping straight to a polished mockup without a wireframe often means arguing about colours before the structure is even right. Moving in order keeps each conversation focused.

Why mockups matter

A mockup catches design problems while they are cheap to fix. Changing a layout in Figma takes minutes; changing it after a site is built takes far longer. It aligns the client and the team on exactly what will be produced, reducing surprises and rework. It also lets stakeholders give meaningful feedback, because most people react far better to a realistic visual than to a description or a rough sketch. For content-heavy or conversion-focused sites, seeing real content in a mockup reveals issues a placeholder never would.

Common mistakes

Frequent errors include mocking up only the desktop version and discovering mobile problems later, filling mockups with lorem ipsum instead of real content so the design does not survive contact with reality, over-polishing a design before the structure is agreed, and treating the mockup as final without testing how it behaves as a responsive, interactive page.

Website mockups at BeBranded

Mockups are a core step in our design work. Before building anything in Webflow or Framer, we design high-fidelity mockups, usually in Figma, so you can see and validate the real look of your site, on desktop and mobile, with real content where possible. This keeps decisions on screen and on paper, where changes are fast and cheap, and means the site we build matches exactly what you approved, rather than being reinterpreted during development.