Prototypes are one of the most important steps in the design process, yet prototyping is still confusing for some designers and project teams.

No wonder it’s unclear—a prototype can be almost anything, from a series of sketches representing different screens to a pixel-perfect prelaunch interface.

In this post, we’re going to define what prototyping is, explain different variations and how to make prototypes, and most importantly, dive into the ways they keep your UX design focused on users.

What Is a Prototype, Exactly?

The most basic definition of “prototype” is, “A simulation or sample version of a final product, which is used for testing prior to launch.” The goal of a prototype is to test products (and product ideas) before sinking lots of time and money into the final product.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork.

Prototypes have 4 main qualities:

• Representation — The actual form of the prototype, i.e., paper and mobile, or HTML and desktop.

• Precision — The fidelity of the prototype, meaning its level of detail, polish, and realism.

• Interactivity — The functionality open to the user, e.g., fully functional, partially functional, or view-only

• Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (this is known as “rapid prototyping”). Others may be built and improved upon, ultimately evolving into the final product.

One of the most common misconceptions about prototyping is that it only needs to be done once or twice at the end of the design process. This is not true. One of our mottos at Seventh Dev is “test early and test often.”

You should prototype every possible iteration of your design—even your first, most basic idea.

Prototypes aren’t simply beta tests that have the look of the final version; they are any version of your product that can be used for testing. As long as it gives you new insights into how people will naturally use the product, it doesn’t matter whether it’s paper, low-fidelity, high-fidelity, or HTML.

The Most Useful Prototyping Methodology

As we said above, prototypes can be a wide variety of things. For this post, we’ll break them into three general categories: paper, digital, and HTML.

Paper Prototyping

A practice that existed well before the Internet, paper prototyping works best in the early stages of design, mainly for testing product ideas.

It’s as straightforward as it sounds—simple screens are drawn on paper and configured to mimic a digital interaction. A common practice for testing these prototypes is to have one person play “the product,” switching the sketches according to how the user behaves.

Advantages

• Fast — You can make a quick paper prototype in 5 minutes, which is why paper works so well for testing ideas. You can draw one quickly (even during a brainstorming meeting), and it’s no big loss if the idea falls flat.

• Inexpensive — Since you only need paper and basic office supplies, paper prototypes are practically free. (If you want to improve the level of precision, you could buy specialized equipment like stencils or a mock phone cradle, but these are optional.)

• Team-building — Paper prototypes are fun to make, which can strengthen team bonds! There’s just something about a group of people working together and using their hands that builds unity.

• Documentation — Unlike digital and HTML prototypes, paper prototypes can be kept lying around as a reference for future iterations. Notes and revisions can be written on them, too, consolidating what you need in one place.

Disadvantages

• Unrealistic — No matter how skilled the art or craftsmanship, paper prototypes are still a poor substitute for a digital system; there’s always a limit to the usability data collected.

• False positives — Sometimes, paper prototypes don’t actually test what you had in mind. People might give feedback on the prototype itself (e.g. boxes aren’t uniform), rather than the idea it represents.

• No gut reactions — Paper prototypes rely on the user’s imagination, adding a break between when they see the stimulus and respond to it. That “gut” reaction is crucial for a successful UX.

Considering the advantages and disadvantages, we recommend paper prototyping only during those early stages when most of a project is still abstract. The further you get into the design process, the bigger the gap between paper prototypes and the final product.

For more information on paper prototyping, check out these helpful resources:

• Paper Prototyping as a Usability Testing Technique by Justin Mifsud

• Better Use of Paper in UX Design by Marcin Treder

• iPhone User Interface Design, Paper Prototype Design (video)

• Printable Paper Prototyping Templates courtesy of Tripwire Magazine

Digital Prototyping

Digital prototypes are the most common form of prototyping and are realistic enough to accurately test most interface elements, They are also much easier to produce than HTML prototypes.

Digital prototypes can be built using apps and software made specifically for prototyping. You can even make simple digital prototypes using presentation software like PowerPoint or Keynote.

Advantages

• Realistic interactions — You’re able to test how the user interacts with an environment comparable to the final product (depending on fidelity).

• Flexibility — Test early and test often! You can start with lo-fi prototypes that become progressively more advanced as the design process moves forward.

• Speed — Paper prototypes may have the edge, but if you want a computerized interface, digital prototypes are faster than HTML. Speed varies from app to app, but most have user-friendly interfaces and features like interactive elements or drag-and-drop.

Disadvantages

• Learning curve — Before you can build your prototype, you’ll need to learn the software. (But since most have user-friendly interfaces, it shouldn’t be too difficult).

• Transitioning to code — Depending on the software, translating your designs into code can be hit or miss; incompatible elements might be lost in the transition, meaning you’ll have to fix them from scratch.

A prototype’s success is affected by the software, and each designer tends to prefer some more than others (and of course, we’re a little biased here). For more hands-on advice, check out the links below:

• Creating Interactive Prototypes with PowerPoint by Amir Khella

• Creating Interactive Prototypes with Keynote by Amir Khella

HTML Prototyping

The last category, HTML prototyping, is only recommended for designers who are confident in their coding ability. HTML prototypes have numerous advantages, but they come with a technical cost.

Advantages

• Technical foundation for the final product — Assuming you’re not building a throwaway prototype, an HTML prototype provides the groundwork for final code right from the start—which is a huge energy and time saver down the road.

• Platform agnostic — You can test your prototype on virtually any OS or device, and the user won’t need to run outside software.

• Low-cost — HTML prototypes let you skip steps in the process—and you don’t need to buy prototyping software. If you’re short on funds and know the language, this could be the most economical option.

Disadvantages

• Dependent on designer skill level — Your HTML prototype is only as good as your ability to code. If you’re not sure you’re up to the task, it’s better to go with the convenience of prototyping software.

• Inhibits creativity — Diving straight into code means you’re essentially doing two things at once: designing and coding. This can create a sort of tunnel-vision where you “forget” about the user and the UX, whereas prototyping software gives you more room to explore and can even suggest new ideas with built-in libraries.

The Prototyping Process

There’s no one, best process for prototyping, but some are definitely better than others. Below are the three most effective processes, each suited to different needs.

(Note: We advise that you ALWAYS test the prototype when going from lo-fi to hi-fi.)

Lo-fi Digital => Hi-fi Digital => Code

This is the standard process most designers follow—and it’s what we used during the Seventh dev redesign.

A lo-fi digital prototype (which could be as simple as an interactive wireframe built in a digital tool) tests crucial elements like navigation and IA early on. This means feedback can be incorporated before it gets too hard to make changes.

Next, the hi-fi prototype provides detailed feedback on something more closely resembling the final product, so that everything’s already in place when it’s time to code.

Paper => Lo-fi Digital => Code

This is a highly efficient method that can save you time and resources, and it’s especially useful for experimental projects.

Paper prototypes can go a long way in conceptualizing the project, especially when there aren’t many relevant data on hand. To stay on track, a lo-fi prototype is then used to test concepts in action. If you have the resources, you can always create a hi-fi prototype; otherwise, go straight to coding.

HTML Prototyping => Code

If you know to code well, this process is quite streamlined.

Essentially, the prototype evolves alongside the design process and seamlessly becomes the final product (or its primary component). This process results in minimal waste—no throwaway prototypes, no extra steps, and no extra software costs.

Even so, keep in mind the disadvantages of an HTML prototype, most notably its dependence on the designer’s coding skill and its limited contributions to creative freedom.

If you’d like to read more interesting blogs make sure to check out our other content on 7th Dev's Blogs.

We are waiting to hear your outstanding product idea at SeventhDev.com