Mockup

A mockup sits between a wireframe and a prototype. The wireframe settles where things go, the mockup settles how they look, and a high-fidelity prototype adds clicking and movement to that look so people can try it. Prototypes can also be built earlier, from linked wireframes. Some teams go straight from sketch to clickable prototype, but the mockup stage is where visual decisions are usually signed off.

The word is also used in marketing for product shots, such as a design placed on a photo of a phone, laptop or printed box. That is a presentation image, not a design deliverable, and it should not be confused with the screens a developer builds from.

How it works

A designer takes the agreed wireframes and applies the brand: typefaces, colour, imagery, icons, spacing and real or realistic copy. Key pages are usually drawn at a desktop width and a phone width so the client can see how the layout adapts. The client reviews the mockups, comments directly on the file and the designer revises until the look is approved.

Because a mockup is a picture, it cannot show hover effects, form errors, loading or how a page behaves between the two drawn widths. Those details need notes, extra frames or a prototype.

Most mockups are made in a collaborative design tool, where the client opens a link instead of receiving image files. Comments are pinned to the exact element they refer to, so feedback about a heading or a button stays attached to the right place. Once a mockup is approved, its colours, type sizes and spacing become the specification the developer builds from, so later changes should go back through the design file rather than straight into the code, or the two drift apart.

Example

A restaurant approves wireframes for its new menu page, then receives two mockups: one at desktop width with large food photography and the menu in two columns, one at phone width with a single column and a fixed Book a table button. The owner notices that the dish names are hard to read over the photos and asks for a solid background, a change that takes minutes in the mockup and far longer once the page is built.

A second issue appears when the owner pastes in the real menu. Several dishes have long names in two languages that wrap onto three lines in the phone mockup, pushing the prices out of line. The designer adds a rule for long names, with the translation on a smaller second line, and checks the layout with the longest real entry rather than tidy placeholder text. This is the kind of edge case worth catching while the design is still a picture.

Why it matters for your business

Mockups let you see and approve the finished look before anyone writes code, which is the cheapest moment to change your mind. They also become the reference the build is checked against during design handoff. The trade-off is that a polished picture can feel finished when it is not: real content is often longer, real photos are often weaker and phone screens are narrower than the mockup suggests. Approve mockups made with your actual content wherever possible.

Common mistakes

• Approving mockups filled with placeholder text and stock photos, then discovering the real content does not fit.
• Reviewing only the desktop version when most visitors arrive on a phone.
• Treating a mockup as proof that an interaction works, when nobody has tried it.
• Asking for a mockup of every page instead of the key templates the rest of the site repeats.

Questions people ask

What is the difference between a wireframe, a mockup and a prototype?

A wireframe is a rough layout showing structure without visual design. A mockup is a static, detailed picture of the final look. A prototype is clickable or interactive at any level of detail, from linked wireframes to near-final screens, so people can test how it works. Many projects go from wireframe to mockup to a detailed prototype; small projects often merge steps.

How many mockups does a website need?

Usually one per distinct page template rather than one per page. A typical small business site might need a home page, a service page, an article page and a contact page, each at desktop and phone width. Pages that reuse an approved template rarely need a mockup of their own.

Can a mockup be turned straight into a website?

Not directly. A mockup is an image of a design, so a developer still has to build it in HTML, CSS and whatever system runs the site. Design tools can export measurements, colours and assets, and some generate starter code, but responsive behaviour, accessibility and real content still have to be built and checked.