What’s the Difference Between Wireframes, Prototypes, and Mockups in UX Design?

Design terms such as wireframes, prototypes, and mockups are often used interchangeably, but in the field of UX/UI design, they actually mean very different things. As UX designer, Marcin Treder put it, “confusing wireframes with prototypes is like assuming an architectural blueprint…and a display house are the same thing.”

Instead of conflating the terms, which can confuse design teams and stakeholders, it helps to think of the three deliverables as different steps in the product design process. Starting with a low-fidelity sketch in the form of wireframes before advancing to mockups and prototypes, each stage of the design process becomes more detailed and fleshed out, with designers building on top of blueprints, adding graphics and visual design, and coding interactive elements. With each step, design teams get closer to the end product.

What Are Wireframes in UX Design?

Wireframes are typically the first step in the product design process. Often thought of as the “skeleton stage,” they offer a basic (and often black and white) visual representation of a product’s user interface design, with rough sketches and diagrams outlining the layout of a page.

Wireframes don’t just fall within the purview of designers—researchers, product managers, and other stakeholders can use wireframes to express their design ideas, and they can be accomplished using low-tech tools such as pencil and paper, or software such as Balsamiq, Figma, Adobe XD, Adobe Photoshop, Justinmind, and Mockplus.

What Are Mockups in UX Design?

Mockups are a medium-fidelity visual representation of the design. Building on the placement of objects outlined by the wireframing stage, mockups incorporate fonts, logos, typography, navigation graphics, color, images, and text.

Mockups tend to not be interactive, which means buttons and visual representations of links won’t be clickable. Still, the static design is useful in helping design teams determine the visual aesthetic of a product. User testing can also be conducted at this stage to gather user feedback on what visual elements might not be working. This can help save time and resources because it allows designers to address usability issues before a prototype has been built.

Some of the common tools used to create mockups include Artboard Studio, Cleanmock, Craftwork Design, Frrames, Lstore Graphics, Mockflow, Mockuuups, Justinmind, and Smartmockups.

What Are Prototypes in UX Design?

Prototypes are a high-fidelity representation of the final product. Unlike wireframes and mockups, prototypes closely simulate the final experience with clickable links and other interactive elements, which means they’re ideal for usability testing, showing stakeholders what the final product will look like in action, and for catching issues that might be costly to fix later on.

Some of the common prototyping tools include InVision, Adobe XD, Sketch, Origami Studios, Webflow, Axure, Atomic, Framer, and Principle.

Related: What Does a UX Designer Do?

Wireframes vs. Prototypes vs. Mockups: What’s the Difference?

Wireframes, mockups, and prototypes are distinctive deliverables used at different stages of a product’s design process.

In a design project, a wireframe design will normally come first. This basic, often bare-bones representation of a website, app, or platform page will serve as the blueprint for designers and developers. Wireframes often lack color, graphics, and text; instead, as the name suggests, they consist of simple sketches that outline layouts and object placement. Design teams will usually use wireframes to arrive at a consensus of a product’s design blueprint before they proceed to the next step.

Mockups typically come next in the design process. Building off the wireframes, visual elements such as color schemes, fonts, and navigation elements are added to bring the visual representation closer to the final product. At this stage, designers can use the mockup to invite feedback from stakeholders. There is often enough detail and information in a mockup that team members can begin to critique whether a design scheme will make sense to users, what usability problems it might pose, and whether there is consistency across aesthetic and tone. It tends to be easier (and cheaper) to make changes during these early stages, before a product has been greenlit for development.

Prototypes are an advanced stage of the design process. Building on both wireframes and mockups, they are the closest thing to the final product, with clickable links and some functional interactive elements. Prototypes are invaluable to the user testing process because design teams can actually see how people interact with the features of a product. From there, they can incorporate feedback from users before handing the deliverables over to the development team to be turned into the final product.

Does the Difference Actually Matter?

Going back to Marcin Treder’s original point—conflating a wireframe with a prototype is like requesting a display home and getting a blueprint instead. The terms wireframe, mockup, and prototype mean different things in UX design, so understanding the difference is important to ensure clear communication of goals, expectations, and deliverables.

Failing to know the difference between the three deliverables can lead to both time and resources being wasted. For example, some projects might only require wireframes and prototypes—a stakeholder who mistakenly asks for a mockup could advertently order a deliverable that won’t end up being used. Worse, such a mistake could delay a project and eat through a limited budget.

Wireframes vs. Prototypes vs. Mockups: Tips To Choose the Right One

With each stage of the design process, deliverables get more complex and resource-intensive. This is why it’s important to choose the right deliverable for the right stage to meet a project’s needs.

If your project is at the stage where you need to quickly sketch out a proof of concept or show the core functionality of a design, wireframes are the best tool for the job.
If you want to create a realistic visual representation of the product, showing off elements such as brand design, navigation, and other visual/audio assets, a mockup will be the best distillation of those ideas.

If you want an interactive simulation that will give stakeholders a taste of how the final product will both look and perform, a prototype that mimics the end products will get the job done.

This post was written by Tracey Lien.

Since you’re here…
Are you a future UX designer? Enroll in our UI/UX Bootcamp and join over 10,000 students who have successfully changed careers with us. Want to get wireframing right this second? Check out our free UX design course today.