Everything You Need To Know About Wireframes And Prototypes

by Nick Babich

POSTED ON 10-30-2017

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. Be sure to check out this collection of wireframe examples for websites and mobile apps.

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

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 is a quick way to visualize an idea (like a new interface design). Image credits: Nicholas Swanson

Tips

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:

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 Prototypes 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

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

Tips

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.

Download XD now.

Topics: Creative Inspiration & Trends, Design

Products: Photoshop, Creative Cloud