Illustration by Erica Fasoli

Wireframes and prototypes are the two design deliverables most often associated with UX design. A lot of people in the field of digital design use the terms “wireframe” and “prototype” interchangeably, but there are significant differences between the two: they look different, they communicate different things, and they serve different purposes.

So, what exactly is a wireframe in design? What’s the difference between a wireframe and a prototype? This article will explain the basics behind these two terms and explore how they fit into the UX design process.

Wireframes

A wireframe (also known as “skeleton”) is a static, low-fidelity representation of the different screens and pages that form a product. Wireframes use simple shapes to create visual representations of page layouts. They’re used to communicate the structure of individual pages (how the pieces of the page work together and where the content will be) and how those pages connect (how the interface will work from a user perspective).

At the core, wireframes are stories about the future. They are similar in purpose to an architectural blueprint (a detailed plan of a building-to-be). If you want to explore various wireframe styles, check out this collection of wireframe examples for websites and mobile apps.

What does a wireframe look like?

Wireframes have very limited visual characteristics, since the majority of design elements (like images, videos, colors, real text, etc.) aren’t included. Instead of these specific design elements, designers use placeholders. For example, a box with a cross in it represents an image. Designers follow this approach for a purpose—object placeholders and a grayscale color palette help team members focus on the layout and structure of the page, rather than the visual aspects of the design.

A typical wireframe design sticks to a very limited black & white or grayscale color scheme.
A typical wireframe design sticks to a very limited black & white or grayscale color scheme. Image credit Adobe Stock.

What is the primary purpose of wireframing?

The role of a wireframe is to create a foundation for your final design. Designers create wireframes and validate them to ensure that the wireframe design contains all the essential elements. A limited number of visual elements enable the team to focus solely on core design decisions before diving into the details.

When should you create a wireframe?

Designers typically create wireframes early on in the design process, before the team starts working on the visual details. At the wireframing stage, it’s much easier to make big changes. Since wireframes are relatively quick and cheap to produce, designers can experiment with adding or removing objects, moving content and objects around, and grouping items together.

The benefits of wireframing

Wireframes help designers:

  • Communicate ideas. A picture is worth a thousand words. Wireframes communicate design decisions to teammates; by looking at a wireframe, they should have a good idea of what screens an app or website will have. Even a website or mobile app wireframe full of placeholders still helps the team see how the design is shaping up.
  • Prepare project documentation. Wireframes also act as a reference point for functional specifications. Designers can share the wireframes with the entire team so that everyone’s on the same page regarding the requirements for the design.

The limitations of wireframing

Since wireframe design is a schematic representation of the final design, wireframes aren’t good for usability testing. Although they may help you gather feedback during the initial research phase (when you want to explore what your users think about your idea), the fact that they’re static makes it very difficult to use them to assess overall user experience. Test participants have to rely on their imagination to understand how the final design will work. As a result, you receive very limited feedback during wireframe testing.

Wireframes also aren’t the best tool for demonstrating a concept to stakeholders. Similar to your test participants, stakeholders might have problems understanding what the final design will look like. If you use a wireframe during this stage, expect questions like “Why is this design so black and white?” from your stakeholders. 

Lastly, wireframes won’t help you if you need to describe complex design ideas, like animated effects, complex transitions, or gestures. While a pair of wireframes can show where interaction begins and ends, it doesn’t describe what happens in between. If you need to describe any dynamic effects, it’s better to use a high-fidelity interactive prototype, which will make that behavior explicit and remove any guesswork for the viewers.

Methods of wireframing

You can create your wireframe design using one of the following methods:

  • Sketching. Hand-drawn sketches are quick to create and quick to iterate on. Sketching is especially good for brainstorming sessions when designers need to quickly visualize different ideas (e.g. explore a variety of layouts for a certain view).
Sketching is a quick way to visualize an idea, like a new interface design.
Sketching is a quick way to visualize an idea, like a new interface design. Image credit Nicholas Swanson.
Example of awireframe created in Adobe Illustrator.
Example of awireframe created in Adobe Illustrator. Image credit Mackenzie Child.
  • UX design software. The major advantage of using special software is that you can move seamlessly from wireframes to prototypes without switching to another tool. With tools like Adobe XD, designers can turn their wireframes into low-fidelity prototypes in a matter of minutes.
With Adobe XD, you can move from wireframes to prototypes quickly and efficiently.
With Adobe XD, you can move from wireframes to prototypes quickly and efficiently. Image credit Tom Green.

Practical recommendations for wireframe design

Here are a few tips to consider when designing wireframes:

  • Do not try to make wireframes pixel-perfect. The goal of wireframing is to evaluate the structure of individual pages, not to polish visual design details. Be aware of common wireframing issues and focus instead on speed and simplicity.
  • Do not add too many details. Wireframes are the barebone structure of the product, so only add the essential elements.
  • Use color to draw attention. Wireframes traditionally use black & white or grayscale, but feel free to use a contrasting color to create visual accents.
  • Use short and to-the-point annotations. If you plan to present a wireframe to the team, always include written annotations. Annotations help create context and quickly deliver key ideas.
Examples of annotated wireframes.
Examples of annotated wireframes. Image credit Chaymae Lougmani.
  • Encourage feedback. Sharing your wireframes and encouraging feedback from your team members is a sure way to improve them.
  • Use wireframe templates. It’s easier to design wireframes when you have visual references. We’ve created a very useful collection of wireframing templates that will help you get started.
  • Use a wireframe kit. Get started on your wireframe with Wires or free UI kits from Adobe XD.

Prototypes

Prototyping, on the other hand, is the process of building an interactive experience. A prototype represents the final product, including simulations of the user interface interactions. Prototyping is the first phase in which designers can actually interact with their creations.

What does a prototype look like?

Unlike wireframes, which often look similar, prototypes can vary significantly. Prototypes can be simple artifacts that resemble just basic interactions all the way up to coded prototypes that look and work almost like a real product.

There are two main types of prototyping: low-fidelity and high-fidelity prototyping.

  • A low-fidelity prototype is a rough representation of a design concept that helps designers validate them early on in the design process. Low-fidelity prototypes are generally limited in function and interaction. An example of a low-fidelity prototype is a clickable prototype created from sketches or wireframes.
Designers can create a low-fidelity prototype by linking wireframes.
Designers can create a low-fidelity prototype by linking wireframes. Image credit Theresa Choi.
  • A high-fidelity prototype is an interactive prototype that simulates the real website or app’s functionality and design details. High-fidelity prototyping helps users understand the look and feel of a future product.
A high-fidelity prototype represents the design as close to the final product as possible.
A high-fidelity prototype represents the design as close to the final product as possible. Image credit Adobe XD.

What is the primary purpose of a prototype?

Prototypes act as a bridge to the actual product. The goal of a prototype is to simulate the interaction between the user and the interface and understand how the final product will function. This makes it good for testing with real users—prototypes let test participants interact with a design just like they would interact with a finished product. It allows designers to test both the usability and feasibility of product designs.

When should you create a prototype?

The actual moment when a creative team needs a prototype will vary based on the project. Generally, the team needs to have a prototype when they want to tie visual and interaction design together, before moving to the actual development.

The benefits of prototyping

Prototypes are especially valuable:

  • for pitching ideas. A simple interactive prototype can sell an idea better than a text description of the design. High-fidelity prototypes are great for stakeholders because they can see how the design will look and work. It’s easier to get buy-in from them because they’re able to try the product.
  • as a validation tool. Prototypes are great for usability testing. Showing a prototype to users and asking them to go through regular user flows helps designers test the flows and identify potential UX problems.
  • during user research. Prototypes are great for understanding the preferences of your target audience. Whenever product teams have an idea about a new feature, they can create a prototype and validate it with the target audience early in the product lifecycle to ensure that the feature resonates with them.

The limitations of prototyping

Prototyping is an expensive and time-consuming design deliverable. In comparison with wireframing, creating prototypes takes more time, especially for high-fidelity prototypes. Also, creating prototypes requires some design skills, which not everyone can do.

Methods of prototyping

While you can use a piece of paper or a digital design tool to create a wireframe, prototypes require digital software. Here are two of the most common methods:

  • Design software: Modern prototyping tools offer a lot of features that allow you to create interactive prototypes. Plus, they offer an additional benefit: team collaboration. Different team members can comment on the same document, creating a good feedback loop right from the start.
An example of a high-fidelity interactive prototype created in Adobe XD and mirrored on an iPhone.
An example of a high-fidelity interactive prototype created in Adobe XD and mirrored on an iPhone. Image credit Adobe XD.
  • Native prototype: Native prototyping means writing code. When you create a native prototype of an Android app, you write Java code. Native prototyping is essential when your product involves technologies that are hard to prototype using app design software, like if you’re building a mobile app that requires real GPS data.

Practical recommendations for prototyping

Here are a few things to consider when designing prototypes:

  • Don’t settle on a single design idea for your prototype. Many designers fall in love with the first idea that seems to be the right one. However, this isn’t the best approach for design. Why? Because your idea might not actually be the best one. Instead, try as many different ideas as possible and select the most prominent idea after evaluating them all with team members and/or testing ideas with users.
  • Select the right fidelity for your project. In his article Five Prevalent Pitfalls when Prototyping, Jared Spool mentions that working in the wrong fidelity can be a major pitfall during prototyping. The fidelity of your design should match the fidelity of your thinking, the maturity of your idea, and the available resources.
  • Use high-fidelity prototypes to visualize complex animated transitions. High-fidelity prototypes are great during design handoff because they allow developers to see how the animation will work. This helps them transfer the behavior into code.
  • Practice rapid prototyping and iterative design. Quick iterations of the build-measure-learn process are a popular way to create products. When a team practices this approach, they start with a low-fidelity prototype and then progressively iterate it into high-fidelity versions. Feedback from users plays a key role in this process, since the team can evaluate every decision according to testing with users.
  • Practice native prototyping. Not everything that designers create can be easily turned into code. But when designers write code, the risk of technical feasibility problems is much lower.

Conclusion

Wireframe design and prototyping are an integral part of your design process. The most important thing to remember when creating them: don’t ever wireframe or prototype a product without the user in mind. The user should always be at the heart of any design you create. This will help you build better products that your users will love.