Wireframes and prototypes are the two design deliverables that 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’s a significant difference between the two: they look different, they communicate different things, and they serve different purposes.

This article will explain the basics: what each does, why they’re useful, and how they fit into UX design process.

Wireframes

What Is a Wireframe?

A wireframe (also known as ‘skeleton’) is a static, low-fidelity representation of different layouts that form a product. It’s a visual representation of an interface using only simple shapes (wireframes look like they were designed with wires and that’s where the name comes from). Wireframes are used to communicate structure (how the pieces of the page will be put together), content (what will be displayed on the page), and functionality (how the interface will work).

At the core, wireframes are stories about the future. They help design teams create a shared sense of the current state, the future vision, and the path they’ll take to get there. Wireframes are similar in purpose to an architectural blueprint (a detailed plan of a building-to-be). If you check an architectural blueprint you’ll see how a given space will be allocated for different rooms, but you won’t see the finished house.

What Does A Wireframe Look Like?

Wireframes don’t look anything like the real finished product–the visual characteristics of a wireframe are very limited. The majority of design elements (like images, videos, text, etc.) are left out. Often, these omitted parts of the interface are represented by placeholders (objects associated with real design elements, like images, tend to be represented by crossed boxes and text with Lorem Ipsum). Lines, placeholders, and a grayscale color palette communicate information architecture, content, and layout considerations. Depending on the needs of a project, some placeholders may evolve to real graphic elements or actual text so designers and developers can gain a better feel for how everything fits together.

What Is The Primary Purpose of Wireframing?

The role of wireframes is to create a foundation for designers to start from and to set a direction for the creative team. They give creative teams a chance to properly plan before moving forward, reducing the risk of going back because something was missed.

Wireframes also allow designers to quickly test their overall design strategy without getting bogged down in the details of a visual design. A limited number of visual elements enable the team to focus solely on core design decisions before diving into the details.

When Should Wireframes Be Created?

Wireframes should be created early on in the design process before the team starts with visual details. At this stage, it’s much more efficient to make big changes. Since wireframes are relatively quick and cheap to produce, designers can experiment with moving content and objects around, group items together, and add or remove elements.

The Benefits of Wireframing

• It’s a communication tool. A picture is worth a thousand words. Wireframes clearly communicate design decisions to stakeholders and teammates and, 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 enables stakeholders and teammates to see how the design is shaping up.
• It’s documentation. Wireframes are typically used as a reference point for functional specifications. As a design deliverable, wireframes can be shared with the entire team so that everyone’s on the same page.

The Limitations of Wireframing

Wireframes aren’t good for user testing. Although they may help you gather feedback during the initial research phase (in the form of some quick insights), the fact that they’re static makes it very difficult to use them to assess overall user experience.

Wireframes also 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

• Sketching. Wireframes can be easily drawn by hand. 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). The more you can flush out your ideas on paper the faster you’ll move when you switch to your computer.

• Graphic design software. It’s fairly easy to create wireframes with software like Adobe Photoshop or Illustrator.
• UX design software. The major advantage of using special software is the possibility to move seamlessly from wireframes to prototypes without switching to another tool. With tools like Adobe XD, designers are able to turn their wireframes into low-fidelity prototypes in a matter of minutes.

Tips

• Keep them simple. The key to wireframing is speed and simplicity. Wireframes should be created quickly, since the aim of a wireframe is to show the structure of a page’s design. Details come later.
• Short ‘to the point’ annotations. Team members read wireframes more than any other documents, so if you plan to present a wireframe to the team, always include annotations. Annotations help to create context and quickly deliver key ideas.
• Encourage feedback. Sharing your wireframes and encouraging feedback from your team members is a sure way to improve them.
• Use a wireframe kit. Get started on your wireframe with Wires, free wireframe kits for Adobe XD.

Prototypes

What Is A Prototype?

Prototyping is the process of exploring an idea by building an interactive experience. A prototype is a middle to high-fidelity representation of the final product, which simulates user interface interaction. Prototyping is the first phase in which designers can actually interact with their creation.

What Does A Prototype Look Like?

Unlike wireframes, which often look similar, prototypes can vary significantly. Prototypes come in all shapes and sizes, from analogue paper prototypes all the way up to real software products.

Prototypes vary on the level of fidelity. There are two types of prototyping: low-fidelity and high-fidelity prototyping. The fidelity of the prototype refers to the level of details and functionality built into the prototype:

• A low-fidelity prototype is a rough representation of your concepts 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.

• A high-fidelity prototype is an interactive prototype that simulates the real website or app’s functionality and design details. High-fidelity prototyping brings a product design to life and helps users ‘feel’ an app or website, not just react to it.

What Is The Primary Purpose of A Prototype?

Prototypes are critical to every product that will be used by people. Typically 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. While a prototype may not have every interaction in place, it should have the key interactions that will give a clear understanding of how the final product will function. This makes it good for testing with real users, since prototypes let people experience how an app or website flows, how the interactions work, and test the usability and feasibility of product designs. Without prototyping and testing it’ll be hard to predict how real users will interact with a product.

When Should Wireframes Be Created?

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

The Benefits of Prototyping

• It’s good for pitching ideas. A simple interactive prototype can sell an idea better than a specification or other form of textual description of the design. With the use of prototypes, it’s easy to get buy-in from stakeholders because they’re able to try the product and feel the experience.
• It helps you learn about the problem. Prototyping allows a team to gain a deeper understanding of the problem they are aiming to solve.
• It’s a communication tool. A person (designer, stakeholder, or end-user) can ‘play’ with a designer’s concepts and provide valuable feedback.
• It’s a validation tool. While wireframes handle structure, prototypes handle usability. Showing a prototype to users and asking them to go through regular user flows is amazingly insightful. It enables designers to test user journey and find potential problems throughout the interaction flow at a very early stage.
• It’s helpful during user research. A prototype also brings to light the preferences of your target user. Early testing of prototypes can save tons of money and time that would have gone toward developing the wrong solution. Seeking validation early in the product lifecycle will help designers identify the features that most resonate with their users and focus design and development efforts in the right direction.

The Limitations of Prototyping

Prototypes cannot be used as a form of documentation since they force the user to put in some effort to understand how the product works.

Methods of Prototyping

• Paper prototyping. This non-digital approach involves ‘pages’ drawn on paper. A human simulates the interactions (acting as the ‘computer,’ changing the paper based on the user’s choices). While such prototypes are quick and easy to make, this method requires a lot of imagination from the user and might not reflect many interaction issues.

• Presentation software. By linking together different pages and adding animated transitions between them, you can create a very basic prototype in software like PowerPoint and Keynote. These prototypes are quick and easy to make but, usually, they are limited in interactivity.
• Design software. Specialized design software comes equipped with almost all the features required to build a prototype. Most of the tools have an additional benefit: collaboration. That means different team members can comment on the same document, creating a good feedback loop right from the start.

• Native prototype. Native prototyping means writing code. This can mean writing an Android app with Java, constructing an iOS app with Swift, or writing HTML/CSS/JavaScript for a web app. Native prototyping should be done using real data, real devices, and real users as much as possible, and this type of prototyping requires strong technical proficiency. Native prototyping is essential when your product involves using technologies that are hard to prototype using design software (e.g. your project is mobile app which requires real GPS data).

Tips

• Don’t settle on a single design idea for your prototype. It’s tempting to fall in love with the first idea that seems to be the right one and start refining the prototype. However, it’s not the best approach for prototyping. When starting the prototyping phase, it’s important to try as many different ideas as possible. Diverging makes it possible for the team to learn more about the problem space and find all possible solutions.
• Select the right fidelity for your project. In his article Five Prevalent Pitfalls when Prototyping, Jared Spool mentioned that working in the wrong fidelity can be a major pitfall during prototyping. Fidelity should be selected depending on the goals of the testing, completeness of the design, and available resources.
• Iterative prototyping. A popular way to prototyping is to start quickly with a low-fidelity prototype, and then progressively iterate into high-fidelity versions (a similar technique is practized by Apple). The process is highly influenced by user feedback, which increases the possibility of ending up with a much more refined final product.
• Try to create reusable prototypes. With a few exceptions, prototyping is an expensive and time-consuming design deliverable. That’s why it’s always better to create prototypes that can be reused in development.

Conclusion

Wireframes and prototypes differ in terms of functionality, but both serve as useful tools that allow product teams to create better products. The key to successful product design is to invest in the design process and leverage wireframing and prototyping as an integral part of your workflow. But always remember: 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.