What is a wireframe and a website mockup?

Before a website is built, designers usually show you two things: a wireframe and a mockup. Understanding the difference between a wireframe and mockup helps you give the right feedback at the right time, which keeps projects on schedule and on budget.

Here is what each one is, how to review it and why both are worth the time.

What a wireframe is

A wireframe is a simple layout, often grey boxes and placeholder text. It shows structure: where the heading, images, buttons, forms and sections go, and in what order. It deliberately leaves out colours and styling so you can focus on content and flow. Figma’s guide to wireframing explains the idea in more depth.

What a mockup is

A mockup is the visual design. It shows the page as it will look: brand colours, fonts, real or sample images, icons and spacing. Mockups are usually made for the most important pages, such as the home page and a service page, and for both desktop and mobile.

Wireframe and mockup compared

How to review a wireframe

• Is every important message on the page?
• Is the main action easy to find?
• Does the order match how customers think?
• Is anything there that does not need to be?

How to review a mockup

• Does it match your brand and audience?
• Is the text easy to read, with good contrast?
• Do the images represent your business honestly?
• How does it look on a phone?

Example: saving a week of rework

A training company saw its home page wireframe and noticed that course dates, the main reason people visited, were missing. Adding them took ten minutes at the wireframe stage. In the mockup, the team asked for a lighter colour scheme to match brochures. Both changes were quick because nothing had been built yet. Had the same changes come after development, they would have taken days. That is the real value of a wireframe and mockup: cheap changes before expensive ones.

Do all projects need both?

Small template-based sites may skip formal wireframes, and the designer may go straight to a mockup. Larger or custom projects benefit from both. Either way, approve the layout before development begins. Read the full website development process to see where these steps fit.

Tips for giving feedback on a wireframe and mockup

• Collect feedback from your team and send it in one list.
• Explain the problem rather than the solution, for example “customers won’t see prices” instead of “make it red”.
• Mark what you like, not only what you want changed.

Questions to ask your designer

Ask your designer which pages will get a wireframe and mockup, whether mobile versions are included, how many revision rounds you have and what format you will review them in. Ask whether the designs will use your real content or placeholders. Clear answers let you plan time for reviews and make sure the people who need to approve the design are available. Good preparation makes the wireframe and mockup stage quick and productive, and it means the developer starts building from designs everyone has already agreed.