Wireframe vs mockup vs prototype: what is the difference?

Five people sit around a table reading the same requirements document: “The customer must be able to see their orders and reorder.” Everyone nods. Three weeks later it turns out the sales director imagined a list, the finance director a table of invoices and the CEO an app with one big button. A wireframe on screen on day one would have exposed the disagreement in ten minutes. That is the whole point of wireframes, mockups and prototypes: making a product concrete before it is expensive to change.

The words are often used interchangeably, including by agencies, which makes quotes hard to compare. When one quote includes “design of 10 screens” and another a “clickable prototype”, they can be completely different deliverables. So here we go through what each thing is, what it is used for and what it typically costs.

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

The most important column is “Cost of change”. A wireframe can be redrawn while the client sits at the table. A mockup requires the designer to update colours, components and states. And once the product is coded, the same change can take days. That is why the order matters so much.

What is a wireframe, and what should it contain?

A wireframe is a greyscale sketch of a screen. It shows which elements are on the page, where they sit and what matters most. Colours, images and typefaces are deliberately left out, so the conversation stays on content and function. Wireframes can be lo-fi, drawn on paper in five minutes, or mid-fi, made in Figma with real headings and realistic data. Mid-fi is often the most useful level, because real copy and numbers expose problems that “lorem ipsum” hides.

• Headings and the main copy, ideally as a realistic draft.
• Navigation and how to move on from the screen.
• Buttons and actions with their real labels.
• Form fields and which ones are required.
• Realistic data: long names, empty lists, many rows.
• Notes on behaviour: what happens on click, error and empty state.

What is a mockup, and when do you need one?

A mockup is a static image of how the finished screen will look. It builds on the wireframe and adds your colours, typography, icons, images and components in every state. Mockups are used to approve the visual expression, check contrast and legibility and give developers a precise target. In larger projects the components from the mockups are collected in a design system, so the same buttons and fields are reused everywhere. That speeds up both design and development, and we have written more about it under design systems.

Remember that a mockup shows only one screen size at a time. Most visitors to a typical website arrive on mobile, so the key screens should be designed for mobile first and then for desktop. Ask for mockups in at least two widths, and check that tables, menus and forms work on a small screen. This is also where you should look at contrast and text sizes if you are covered by the accessibility act, because fixes at the mockup stage are far cheaper than fixes in finished code.

What is a prototype, and why is it clickable?

A prototype links the screens together so you can click through a flow as if it were a real product. It can be made from wireframes when you want to test structure quickly, or from finished mockups when you want to test the whole experience or show the product to investors and management. The prototype is the most effective tool for usability testing, because users react to something they can try rather than answering hypothetical questions.

Clickable Figma prototype or coded prototype?

In most projects a clickable Figma prototype is the right choice. A coded prototype makes sense when the hard part is technical, such as real-time data, maps or an advanced calendar. Read more about how we build and test clickable prototypes.

When should you use a wireframe, a mockup or a prototype?

What do wireframes, mockups and prototypes cost?

The price depends on the number of screens, complexity and whether research and testing are included. With a freelance UX designer at typically DKK 600–750 an hour and agencies at typically DKK 1,100–1,300 an hour, you can use the table below as a rough estimate. The hours are typical levels for a defined project with 8–12 screens.

A worked example: a wholesaler with 15 staff wants to give its B2B customers a portal for orders and reordering. Ten mid-fi wireframes, a clickable prototype and a test with five customers typically take 35–55 hours. The test shows that customers want to reorder from a list of previous orders rather than searching the catalogue. That insight costs a couple of hours to work into the wireframes. Had it surfaced after launch, it would have meant a rebuild. For more prices per deliverable, read what UX design costs.

How do you get from sketch to finished product?

The move from Figma to code is where many projects lose quality. We describe what designers should deliver, and how design tokens help, in the guide from Figma to website.

Which mistakes do we see most often?

• Wireframes full of “lorem ipsum” that hide the fact that the real copy will not fit.
• Only the perfect scenario is designed. Empty lists, errors and long names are forgotten.
• Mockups are approved by management without being tested with users.
• The prototype becomes so polished that nobody dares change it after testing.
• Design files sit in the designer’s private account and vanish when the collaboration ends.
• The mobile version is drawn last, even though most users arrive on mobile.

Checklist: what should you ask for in a quote?

1. How many screens are included, and which flows do they cover?
2. Are the wireframes lo-fi or mid-fi, and do they use real copy?
3. Is there a clickable prototype, and will it be tested with users?
4. How many users are tested, and do we get a report?
5. Do the mockups include every state: empty, error, loading and success?
6. Are mobile and desktop both designed?
7. Who owns the design files, and where are they stored?
8. How many rounds of revisions are included?

If you are unsure about the difference between the structural and the visual work, read UX vs UI design. And if you want a prototype you can test or pitch with, you can get a fixed price within 24 hours.