Wireframes & Prototypes

Overview

A user-centered interface makes it as simple as possible for the user to understand it- even if their understanding is technically wrong. When an interface is designed for implementation models the design fails. By considering mental models instead, the design can help eliminate frustration and promote success.

Wireframes and prototypes are tools for planning, mapping, and testing those mental models throughout the design phase.

Learning Goals

  • Know why wireframes and prototypes improve usability
  • Understand wireframes and when to use them
  • Understand prototypes and when to use them
  • Know the difference between a wireframe and prototype
  • Be able to successly use wireframes and prototypes in applicable scenarios

Frequently Asked Questions

Are wireframes and prototypes a waste of time?

Wireframes and prototypes, not only help to map mental models to improve usability, but also save time, money, and stress by catching errors before production. They also help improve communication to the client and between production teams.

READ: "6 Reasons You Should Be Prototyping More"

Who can benefit from using wireframes and prototypes?

Anyone creating an interface that users will interact with can benefit from wireframes and prototypes. Because designers understand how their interface works better than anyone, they can easily fall into the implementation model trap. Wireframes and prototypes help keep the design user-centered.

WATCH: "What is a Prototype?"

How are wireframes and prototypes made?

Wireframes and prototypes come in all shapes and sizes, from low-fidely wireframes made with pencil and paper to high-fidelity prototypes made with specialty software. There's an option to fit the need of any project, no matter how big or small.

READ: "Types of Prototypes and their Usage"

Wireframes

A wireframe is a skeleton framework that shows the interface's structure and layout. Think of it as a blueprint- a tool for planning what content will be placed, where it will be placed, and how the content works together in the space.

    Wireframes are...

  • made with simple shapes and lines to visualize layout
  • used to communicate structure and information architecture
  • made quickly to kickstart the development process
  • concerned with where things go

    Wireframes are not...

  • made with color pallets, graphics, or other visual design elements
  • used to communicate aesthetic or interactivity
  • made painstakingly, delivered shortly before the deadline
  • concerned with how things look

Frequently Asked Questions

When are wireframes useful?

Because wireframes help decide the underlying structure of an interface, they are most useful early in the development process. Wireframes allow user requirements analysis findings to be tested quickly. They also help communicate ideas and set expectations for the client and team members.

READ: "When to Wireframe - How Much Fidelity Can You Afford?"

Can't you just skip wireframing and go straight to the prototype?

Ultimately, the goal of a wireframe is to be quick and easy enough that it's helpful without being a waste of time. When the questions a wireframe can solve are answered, it's time to move to the prototyping stage.

READ: "Why You Shouldn't Skip Your Wireframing"

How do you make a wireframe?

A wireframe can be as simple as ideas on a sketched on piece of paper. Collaborative wireframing is common on whiteboards or on projectors. For wireframes with a bit more polish or that can be easily sent digitally, programs like Illustrator, XD, Balsamiq, and Axure RP are also easily accessible.

WATCH: "How to Wireframe a Website or App"

Prototypes

A prototype is a functioning simulation that shows how the interface works. While they include visual aspects such as typography and color, prototypes are not concerned about how the interface looks. Instead, they focus on how the interface, or a task within the interface, functions. Usability testing produces more effective results with interactive tools like prototypes because it provides an opportunity for the user to engage with the product in a realistic presentation.

Explore a Prototype

This is a high-fidely prototype made in Adobe XD. Its goal is to simulate a design for this website and map how a user might navigate it to find pertinent information.

Frequently Asked Questions

Do all prototypes need to be made with special software?

No way! While prototyping software can offer the ability to simulate digital interactivity such as linking and pop-ups, low-fidelity paper prototypes can be just as effective in snuffing out usability flaws. They can often be produced faster and are more accessible than high-fidelity prototypes as well.

WATCH: "Mobile Application Design : Paper Prototype"

What kind of prototype is best?

The best kind of prototype depends on the project and the goals of the prototype. Have a clear understanding of what problems need to be solved and what you hope to learn. If the goal is to see how successful animations are in directing user attention, then a paper prototype likely won't be sufficient.

READ: "8 Keys to a Successful Prototype"

Are there any downsides to prototyping?

Prototyping has a use in every project. It is important to keep prototypes focused and centered around the user experience, however. With so many ways to create beautiful prototypes these days, it's easy to get lost in the bells and whistles and forget the purpose.

READ: "Five Prevalent Pitfalls When Prototyping"

Practice

Understanding the goals and purpose of both wireframes and prototypes is critical to using them effectively.

  • Conceptualize an interface, real or fictional, that you will be designing.
    Keep who you are designing for in mind
  • For this interface, list 3 specific goals that you'd like to accomplish with a wireframe
    Keep structure and layout in mind
  • For this interface, list 3 specific goals that you'd like to accomplish with a prototype
    Keep process and functionality in mind
  • Create a 1-screen wireframe with those goals in mind
    Remember: wireframes are void of visual design
  • Create a 2-3 screen prototype with those goals in mind
    Remember: the best kind of prototype depends on your goals
  • Write a 1 page analysis explaining how your wireframe and prototype supports the goals of your interface

Frequently Asked Questions

What are the workshop deliverables?

  • 6 goals, 3 for each mock-up. Written or typed is acceptable
  • 1 wireframe. Paper or digital is acceptable
  • 1 prototype. Paper or digital is acceptable
  • 1 page analysis of your mock-ups. Written or typed is acceptable

Can this be done in groups?

The workshop can be done individually or in your pods, however everyone should submit their own written analysis.

Review

Frequently Asked Questions

So what's the difference between wireframes and prototypes one more time?

WATCH: "What is a Wireframe? What is a Prototype?"

READ: "What's the Difference Between Wireframes and Prototypes?"

READ: "Wireframing vs. Prototyping: What's the Difference?"

Where can I learn more?

WATCH: "Design is in the Details"

READ: "Introduction to Effective Prototyping"

READ: "Define Your Prototyping Goal"

Who made this project?

Holly Slocum. Made for John Barber's DTC 478 Usability and Interface Design course.