Wireframe vs mockup vs prototype: what is the difference?

ls.graphicsOctober 27, 20265 min read

A wireframe shows the structure of a screen, a mockup shows how it will look, and a prototype shows how it will work. A wireframe is gray boxes and placeholder text; a mockup adds real colors, type and images but stays static; a prototype links screens so you can click through the flow and test it.

What is a wireframe?

A wireframe is a low-fidelity layout of a screen: boxes for images, lines for text, labels for buttons, and no visual design. It answers one question: what goes where. Teams use wireframes early, when changing a layout costs a minute instead of a day.

• What it contains: layout, content blocks, navigation, the order of information.
• What it leaves out: colors, fonts, real images, brand.
• Made with: paper and pen, a whiteboard, or a design tool such as Figma using plain gray shapes.
• Who it is for: the design team, product managers and developers agreeing on structure.

Because a wireframe looks unfinished on purpose, people comment on the flow and the content instead of arguing about a shade of blue.

What is a mockup?

A mockup is a static, high-fidelity picture of the design: the wireframe's layout with real colors, typography, icons and images. It looks like the finished product, but nothing on it can be clicked. Its job is to settle the look before anyone writes code.

The word has two meanings, and both are common:

• In product and UI design, a mockup is the final-looking screen itself, usually a flat frame in a design file.
• In graphic design, branding and marketing, a mockup is that design shown on a real object or device: an app on an iPhone, a website on a MacBook, a logo on a business card. This is the meaning covered in what is a mockup.

The second kind usually comes last. Once the screens are approved, designers place them on devices for the client presentation, the case study, the landing page and the store listing.

What is a prototype?

A prototype is an interactive model of the product: screens linked so that a tap or click takes you to the next one, often with transitions and animations. It shows how the product behaves and is the version you put in front of users for testing.

A prototype can be built at any fidelity. A low-fidelity prototype links wireframes to test a flow; a high-fidelity prototype links finished mockups and feels close to the real app. In Figma, you add connections between frames in the Prototype tab and play them in presentation view, as described in Figma's guide to prototyping. A prototype is still not the product: there is usually no backend, no real data and no production code.

What is the difference between a mockup and a prototype?

A mockup is a static picture you look at; a prototype is a model you click through. Both can look exactly the same on screen. The difference is behavior:

• Purpose: a mockup approves the visual design; a prototype tests the flow and usability.
• Interaction: none on a mockup; links, transitions and states on a prototype.
• Feedback you get: "make the header lighter" from a mockup, "I could not find checkout" from a prototype.
• Output: an image (PNG, JPG, PDF) for a mockup; a shareable link or a file that plays for a prototype.

In practice a high-fidelity prototype is often made of the same frames as the mockups, with connections added.

In what order do you make a wireframe, mockup and prototype?

The usual order is wireframe, then mockup, then prototype: structure first, look second, behavior third. Each step costs more to change than the one before, so problems are cheapest to fix in the wireframe.

1. Wireframe the key screens and agree on layout and flow.
2. Turn the wireframes into mockups: apply the design system, real copy and images.
3. Link the mockups into a prototype and test it with a few users.
4. Fix what the test shows, then hand the files to developers.
5. Place the final screens in device mockups for the presentation, portfolio and marketing.

Not every project needs all three. A small landing page can go from a sketch straight to a mockup. A simple marketing site may skip the prototype. A complex app with long flows benefits from every step, because a broken flow found in a prototype is far cheaper than one found after launch.

Where does a device mockup fit in the process?

A device mockup comes after the design is approved. It is not a design stage but a presentation one: it shows finished screens in the context people will see them, on a phone in a hand or a laptop on a desk.

Typical uses are App Store and Google Play images (see screenshot sizes for both stores), Dribbble and Behance shots, case studies, pitch decks and launch posts. Clay mockups, with plain white or gray devices, keep attention on the screen; realistic ones show the product in a setting.

You can make one in three ways: replace the smart object in a PSD file, drop your screen into an online mockup generator (the step-by-step guide takes about two minutes), or stay in Figma with the Mockup plugin: select a frame, pick a scene, and the render lands next to your frame.

Device mockup examples

Six device scenes and the kind of project each one suits:

• An iPhone on stone steps in hard light, for a bold app launch post
• An iPhone lying flat on glass, for a minimal app case study
• An iPad Pro hanging on cords against black, for a dark-mode tablet app
• A MacBook Air in three-quarter view, for a website or SaaS dashboard
• An iMac flanked by two screens seen from behind, for a desktop app
• An Apple Watch Ultra on a light background, for a watch app or complication

More phone scenes are in the iPhone mockups category.

FAQ

Are wireframes considered prototypes?

Not on their own. A wireframe is a static layout. Once you link wireframes so they can be clicked through, the result is a low-fidelity prototype.

Which comes first, a wireframe or a mockup?

The wireframe. It fixes the structure, and the mockup then adds the visual design on top of that structure.

Is a mockup the same as a prototype?

No. A mockup is static and shows how the design looks; a prototype is interactive and shows how it works. A high-fidelity prototype is often built from the mockups.

What is a low-fidelity vs a high-fidelity design?

Fidelity is how close a design is to the final product. Low fidelity means rough: sketches, gray boxes, placeholder text. High fidelity means final colors, type, images and spacing.

Can one tool make all three?

Yes. Figma, Sketch and similar tools cover wireframes, mockups and prototypes in one file, and device mockups can be added with a plugin or an online editor.