Whether it’s just a quick sketch in your notebook or a post-it note, a wireframe made using your favorite graphics software, or a high-fidelity mockup created by a web app — incorporating some form of prototyping within your workflow is a critical step. I’d like to share some reasons why I believe prototyping is an integral part of the design process.

This post was brought to you with help by Proto.io

Proto.io is a silly-fast way to create fully interactive mobile app prototypes. Its users can create high-fidelity mobile prototypes that look and work as a real app should, within minutes. Sign up and use Proto.io for free!

Find Design Issues Early

Things we conceptualize in our heads that seem awesome regularly turn out to be terrible ideas when we put them in a more concrete, visual medium such as a piece of paper or a computer screen.

Imagine this situation: You’re designing a web form. You’ve been given the input fields that need to be included. You visualize the design in your head. And then, you decide to sketch it out in your notebook. Within minutes, you’ll be able to spot issues with your initial design concept.

Maybe you can do away with some parts of the design. Perhaps you realize that you should adjust the layout of some input fields to create a better user flow. Maybe having error validation messages at the top of input fields can make them easier to see.

First paper sketch of a web form.First paper sketch of a web form.

A simple prototype can instantly reveal flaws in our design concepts. This, then, allow us to resolve these issues before we make more significant production commitments (such as creating a high-fidelity mockup or coding the design).

Iterate More Quickly on a Design Concept

Creating prototypes allows you to improve a design concept quickly. You can iteratively revise and refine your idea in a matter of minutes.

Let’s look back at my previous example. I found some design issues with my concept. I can now visually validate if my solutions to those issues are better (or worse) than my preliminary ideas simply by moving things around and tweaking some things. And, if not, then I can continue to sketch out another version.

Second paper sketch of a web form.Second paper sketch of a web form.

Compare Design Variations Quickly

User interface (UI) design is fundamentally about creating the most optimal way for a user to achieve their tasks. In most cases, to determine the best solution, you’ll have to come up with various ideas. Comparing several designs with each other is made easier through prototyping.

What’s a better solution: a tabbed navigation menu or a list of links arranged vertically?

The only definite answer to that question is: It depends.

It depends on the information architecture of your content. It depends on what goals and primary tasks your users will have when interfacing with your UI. It depends on the quantity of the links. It depends on the wording of your links.

One way to compare several ideas easily is by prototyping them.

Here’s an example of how you can quickly compare and contrast a web page’s layout with each other (I made these using Gliffy):

Comparing two layouts against each otherComparing two web page layouts against each other.

Gather Design Feedback Better

By simply describing your user interface ideas, it may be hard for others to grasp what you’re trying to achieve. This can result in poor feedback due to misinterpretation.

However, with a prototype, people can quickly and conveniently see your idea, giving you a much better probability that they’ll respond more effectively.

If you work with developers and engineers, they can tell you if they spot any issues with the prototype from their standpoint, and they might even be able to offer alternative solutions based on their experience.

Prototypes can be a Presentational Tool

More often than not, building web-based products is a collaborative, multi-person effort. Except for cases like personal projects that you create purely for self-fulfillment, you’ll most likely find yourself working with clients, employees, colleagues, users, stakeholders, etc.

Prototyping your design concepts can be an effective way to illustrate your ideas and get approval/sign-off from your higher-ups.

There are, however, designers who would argue that showing clients a wireframe or a low-fidelity prototype could lead to confusion.

For example, Aida Zilic, an interface designer at digital design agency Imulus, wrote about how her company has decided not to show wireframes to their clients because it caused confusion and other things that "can end up hurting the project and its goals."

It’s best to exercise caution when presenting your prototypes. There are high-fidelity, interactive prototyping tools that may be better for presentations to clients. Check out this example:

GetLost Student MapGetLost Student Map is a demo of an interactive, high-fidelity prototype of a mobile app.

Be Able to Perform User Testing Early On

In user-centered design, the most valuable source of feedback is users.

A prototype can put user testing at the start of a project, instead of at the end.

One thing to keep in mind, though, is that a low-fidelity prototype won’t be able to capture the nuances that a finished, polished design will have.

For example, if there are issues with users finding a web button that they need to click on, it could be because the visual weight of the button isn’t properly represented in the low-fidelity prototype yet.

However, I think it’s safe to say that conducting user tests on prototypes can be effective in getting the kinks out of broad usability issues such as user flow, the categorization of content, and so forth.

Prototypes Encourage Collaboration

As I’ve said, building web-based products will more than likely involve several individuals. Prototypes can get everyone involved early in the process.

Your clients and employers can have a rough preview of what you’re going to build for them, and they can provide you with feedback and decisions before you make big commitments that would take a lot of time to revise later on. Your teammates can offer feedback and share their concerns before the design is finished.

Designs Are Increasingly Becoming More Complex

User interface designers face the challenge of creating designs that will be viewed in a vast number of ways.

We need to account for most (if not all) types of viewing scenarios: Desktop monitors, laptop screens, smartphones, tablets, and the list goes on.

Responsive web design is one of the ways to achieve optimal layouts under different viewing mediums. But it also adds a layer of complexity in coding and laying out our web pages. We need to know how the different components of a web page will change in dimensions and where they’ll move if we were to view the web page in, say, an iPhone versus a widescreen monitor. We can figure all of this out via prototypes.

An example of quickly prototyping web page layouts on different viewing scenarios.An example of quickly prototyping web page layouts on different viewing scenarios. (Prototypes created using wireframe.cc.)

Prototypes Give You More Opportunities to Work Concurrently

By creating prototypes, members of your team can begin working on some components of the UI even if the design hasn’t been polished yet.

For example, if your app needs to report information to its users, your server-side programmers can begin creating your database as well as the database queries that will pull out the data you need — even before finalizing your UI.

An example of a basic wireframe that allows for concurrent work.An example of a basic wireframe that allows for concurrent work.

Prototypes Give You a Visual Guide to the Finished Product

It’s much easier to produce things when you have a solid idea of how the end result is going to (roughly) look.

When the goals are clear and defined, when everyone involved agrees on the intended results, when design concepts have been validated early on — you’ll find that the path to the finish line will be more straightforward.

Prototypes can even be significant jump-off points of the final product. Some tools allow you to create prototypes that you can convert into HTML/CSS code. Though I don’t recommend that you use the auto-generated code of any software without (at the very least) a professional and experienced front-end web developer reviewing it, they could potentially be used as starting points.

Prototyping is Cheap, Fast, and Easy

Perhaps the most apparent reason why you should prototype your designs is that there’s very little reason not to.

It integrates seamlessly into most design processes. It’s safe to say that all UI designers begin with some form of prototype — even if it’s only a paper sketch done in 30 seconds.

There are tons of tools out there that are easily integrated with your existing design process — from the timeless pencil-and-paper combo that’s been used for centuries, to web tools that run in the browser.

Other Articles about Prototyping

What are Other Benefits of Prototyping a Design?

  • What benefits did I miss?
  • Do you have a story to tell about how a prototype helped you with a particular project?
  • Why do you prototype your designs?

Please share your views in the comments!

Author:

Jacob Gube is the co-founder and a managing editor of Design Instruct. He's a web developer, and also the owner of Six Revisions. Follow Jacob on Twitter: @sixrevisions