The beginner’s guide to UX prototyping

Prototyping, as a concept, has been around since before the Internet. Typically, people developing a new physical product would first build the thing, and make sure that it worked as intended. The first version would be patented, perhaps, and shown to potential investors. If the inventor had access to their own means of manufacture (if they worked in an existing company, for example), they’d just go right ahead and work out the bugs until they had a production-ready model.

Remember those old demo disks? You know, the ones that came with programs with limited functionality, or the first level or two in a game? Prototypes are a lot like those demos, only even simpler.

[pullquote]You build a prototype of a website or app to make sure that the concept will work as intended[/pullquote]

Their purpose is not so much to get prospective customers to buy a product, as to help you make a better one. You build a prototype of a website or app to make sure that the concept will work as intended. You also use it to show your clients, or potential investors, how it’s supposed to work.

Recently, we’ve been seeing a lot of apps geared toward building prototypes for the web, and for mobile apps as well. Now, Adobe Experience Designer has been released, combining the functionality of a web-and-mobile-specific “design app” with that of a prototyping app. Given Adobe’s reputation, and their market share in the professional sector, it stands to reason that a lot of people who have not done a lot of prototyping in the past might now take that step.

So, like most other ultimate guides, this one is for beginners. It’s for people who are just starting to build prototypes on a regular basis, whatever their previous experience (or lack thereof) in the design industry.

In this guide, we’ve tried to cover the basic principles above all. After that, there are links to guides with further information, and, of course, a big long list of apps and tools that you can work with.

Wireframes & mockups vs. prototypes

Now, and designer who’s been around for a while has probably already worked with wireframes, and/or designed mockups in some image editor. Are these not prototypes?

Nope. Not always, anyway.

The problem with wireframes and static mockups is that they are…well…static. There is a lot of information that they simply cannot convey about the functionality of a thing. This can lead to misconceptions in the minds of clients, or even your developers, about how the thing is supposed to work. For this reason, prototypes are usually interactive in some way.

The most common exceptions are conceptual prototypes, and exceptionally well-documented static prototypes. What makes the difference is not interactivity itself, but the conveyance of information about a product’s intended functionality.

That said, wireframes and mockups are often used in making prototypes, so no one is abandoning them.

When do you need a prototype?

Whenever you need to show how something is supposed to work. That’s it.

The obvious example is that of a web or mobile app. Apps tend to have a fair bit of functionality that may not be easily seen or deduced from a mockup. However, even fairly static, content-driven websites may require a prototype.

For one thing, I’ve had clients look at mockups for a simple business site and ask “Okay, so if they click on those things at the top, ’About Us’, ’Services’, and stuff, that takes them to other pages?”, or “When they click send on the contact form, I get an email?”

[pullquote]Even simple…tasks are often fraught with uncertainty…prototypes can help take out some of the guesswork[/pullquote]

Even simple browsing tasks are often fraught with uncertainty to some users, and prospective clients, so prototypes can help take out some of the guesswork from the sign-off process.

Additionally, they’re always useful in user testing. After all, if you’re going to do user testing at all, it’s best to start with an early preview of the project. The last thing you want is to have to make big changes after most of the work has already been done.

4 kinds of prototypes

Before you start prototyping, you’ll want to determine what kind you’ll want to use. You can always use more than one kind in any given project; most designers do, at some point.

The kind of prototype that you choose will need to be right for you, your client, the project, and even the specific stage of the project that you’re in. Now, that might sound complex, but it’s really not that bad.

Each of these are intended to be used at different stages in the design phase. The rest is up to your preference, and how good your client is at understanding abstract visuals.

Clients who are less experienced with modern design processes might expect to see something that looks more “polished” so they can tell you to make the logo bigger, move that line an inch to the left, and that their site won’t be in Latin, so could you put some English in please?

If you have trouble with that, more detailed prototypes—and a lot of coffee—are your best bet. If not, then you can use something a bit more vague, and focus on mocking up the intended functionality.

1: Conceptual prototypes

These often don’t look anything like the finished product in any way shape or form. With conceptual prototypes, the details and layout of the interface don’t matter. The only things you’re working on are interactions and processes.

The goal of any prototype is to show how something works, or will work. In that sense, this is prototyping in its purest form. It’s literally all about the function, and form doesn’t even come into it.

They can look like just about anything, at this stage. You can use a flow-chart, post-it notes, a PowerPoint presentation, a video explaining the process with crude icon-based illustrations, or a recording of yourself speaking into the camera and flailing your arms wildly. Anything that gets the point across will do.

Conceptual prototypes are typically used at the very earliest stage of any project. Your project may not even have a name. It’s just an idea for an app or a web site, and you’ll be saying things like: “Yeah, I think it should sort of work like this…”

2: Low-fi prototypes

Low-fi prototypes are where you start to include things like the layout and screen size, and other more tangible concerns. They are typically made fast, and discarded faster.

They are intended to provide the fastest possible way to iterate your ideas until you and/or your client are happy with the basics. So don’t get attached. Most of these won’t be around long, and that’s a good thing.

As previously mentioned, the term “low-fidelity prototypes” is often interchangeable with “wireframes”. Indeed, this stage often takes place on paper.

When it’s done in an app, it’s advisable to use one that has basic prototyping functions like linking to other screens, annotation, etc. Wireframing apps do have the advantage of enabling easier collaboration over the Internet, but they’re often a bit slower to use.

These are also used at the beginning of a project, but you probably have a business model and an idea for a name by now. It’s time to sort through the myriad ideas floating around your head, and iterate until you have something that you’re pretty sure will work.

3: Medium-fi prototypes

Sometimes a low-fidelity prototype just won’t get the point across well enough, and a high-fidelity is too much work for the moment. Maybe you haven’t completely refined the style guide, or not all of your graphical assets have been made yet.

In any case, this is the kind of prototype you can use in the beginning-to-middle of the design phase. They’re often made with prototyping apps, which make heavy use of simulated interaction. They can also be built with HTML and CSS, usually with the help of a CSS framework.

Yup, Bootstrap and Foundation are probably two of the biggest prototyping tools out there right now.

You should use branded imagery for these if you have it, but stock images will do. Stock UI elements are typically used to build out the simulated interface faster. Many prototyping apps come with libraries of these elements to make your work faster.

These kinds of prototypes are great for the more literal thinkers who need to see a close-ish approximation of how it will look and work. It’s easier for them to ignore a header that’s “not finished yet”, than a sketchy-looking shape that doesn’t look anything like a website header as they know it.

For these clients, you might want to wireframe out your ideas fast, and never show those to the client. Then make a medium-fidelity prototype that makes it easier for them to see where you’re going.

4: High-fi prototypes

Well, we’re here. And so is your project. You have your mockups for every screen, and everything looks great. It’s time to show people how this is going to work, in all of its glory, when someone finally integrates it with the back-end code.

High-fidelity prototypes are usually used for getting a final sign-off on the design from the client. But you can’t just send them the PSDs. This stuff has to be interactive.

This is typically accomplished in one of two ways. Some use static HTML and CSS to put the finalized visuals together in a way that’s semi-interactive. Others use apps that import images, or even raw PSD files, and add pseudo-interactive features to mimic the final functionality of the app.

Depending on the app, you can even demo these prototypes on the web (or on a mobile device, if you’ve been working on an app).

Prototyping methods

Now that we’ve gone over the main kinds of prototypes you can make, it’s time to cover the tools used to make them. I mentioned most of these in the previous section, and their basic usage; but I’d like to go into a bit more detail.

Again, the method you choose should depend on what both you and the client are comfortable with.

Video or presentation prototypes

These are often made to sell an idea before any concrete work has been done. Thus, they’re usually directed at potential investors. They can be used for clients too; but there are often more efficient ways of communicating with a client. Your mileage may vary.

The video and presentation-based prototypes that are made for sales pitches usually follow a commercial-style formula:

1. Introduce a problem that the viewer might identify with.
2. Demonstrate how your product will solve that problem.
3. (Optional step) a digitally rendered corporate mascot does a happy dance while shouting a catchphrase.

Some of these prototypes just use icons, text, and illustrations. Others have animation; and still others use live action to get the point across. And that’s, well… the point. As long as you sell your idea, you’ve done it right.

Here’s an awesome example that mixes video prototyping with paper prototyping.

Wireframes

Wireframes can be done on paper or in apps. They are nearly always considered low-fidelity prototypes, though they can be upgraded to medium-fidelity if you put enough time into them. It’s rarely worth the effort, though.

Usually, wireframes are designed to be both drawn and discarded quickly. This is one of the things that makes drawing them on paper so attractive. Apps can be far more precise, and you can easily edit existing wireframes; but nothing beats the speed of a sketch that no one is supposed to see but yourself… ever.

However, as previously mentioned, App-based wireframes do have the advantage of more easily mimicking the functionality of an interface. Tapping on a paper wire-frame will just make a pleasant thunk-thunk-thunk sound.

That can be fun, but it may not convey your meaning.

You might choose to use both: paper to nail down the most basic concepts, and an app to flesh it out, and share it easily.

Paper prototypes

These differ from wireframes in that they are a lot more than drawings. In this kind of prototype, paper is used to make a physical, if still rather flat, model of the interface. You can see one of these in the video above.

Interface elements are usually drawn, cut out, sometimes copied to make extras, and then assembled on another piece of paper. This gives them the advantage of flexibility. Where you might throw away an entire sheet of paper with a wireframe, you can just re-arrange the elements of a paper model until you’re satisfied. Got an element that’s the wrong size, after you’ve re-arranged things a few times? Just cut a new version out.

They also tend to feel a bit more “real” than a wire-frame. Even though nothing interesting will happen, a client can touch a paper model. They can feel it. That tactile sensation can sometimes explain more to a client than anything you could ever show them.

Everyone needs physical contact to achieve a better understanding of any object. Half of UX design is about re-creating the feeling of physical interaction with a digital interface.

Medium and high-fidelity prototypes made with apps

These have a lot in common with paper prototypes. Prototypes made with an app like Invision, or one of the many other options out there (see the list below), are typically made from pre-designed interface elements, and then pieced together to mimic the final product.

The difference is, of course, that everything is done on the screen. Oh, and you can do it with the final graphics and branding, making the prototype look exactly like the finished product. Then, as I mentioned earlier, some apps can demo the product in the browser and on mobile devices.

This brings the tactile feeling back into play, and you want this. If you can give your clients that feeling, and they like it, you’ve basically gotten their final approval.

Code

Of course, if interaction is what you want, then building interface prototypes with code is a good way to get it. Now, you might choose code-based prototypes for one of several reasons:

• it just fits your workflow better (like if you design in the browser anyway);
• your site or app has a lot of buttons and other things to interact with;
• you can use prototype code in the final product, saving you time;
• you want to demonstrate interface functionality in the browser without bothering with an app;
• you like pressing keys and hate clicking.

Prototyping in the browser can be a bit slower, especially if major revisions are still being made. I would not recommend it for the early stages of a project, so it’s best for medium-to-high fidelity prototypes.

Still, it’s one of the best ways to show off a nearly-finished project, if you already like to work with HTML and CSS.

Prototyping with frameworks

It should be noted that using a framework to build prototypes can speed up code-based prototyping considerably. As a bonus, if you use the framework that is intended to be used for the final product, there’s less coding to do overall.

As a side note, some people have built drag ’n’ drop web page editors based on more popular frameworks, like Bootstrap and Foundation. Using these, once could conceivably create everything from the low-fidelity prototypes to the final product with code.

However, some people just use them to build prototypes fast, and then use custom code for the final project. It works either way.

Prototyping tutorials and guides

Now that we’ve covered all of the basics, it’s time to really get into details. As with almost everything else in design, and in life, there is no one right way to build a prototype. There’s only the way that works for you. That said, successful design processes tend to have a few things in common.

Here are a few different guides to prototyping that focus on different methods and fidelities, just to get you started. Take from them what works for you, ignore what doesn’t.

(We will not be including app-specific tutorials because there are simply too many.)

Design Better and Faster With Rapid Prototyping

This guide from Smashing Magazine focuses on a methodology for building prototypes fast, and iterating often.

How I Rapidly Prototype Websites

This is a more personal article by Nick Pettit on the Treehouse blog that outlines his own approach to prototyping.

How to build websites fast, with the rapid prototyping workflow

Here’s a third article on rapid prototyping. It seems to be popular. This one’s right here on Webdesigner Depot, and it outlines a few tips for, and pitfalls inherent in, the process.

The Skeptic’s Guide to Low-Fidelity Prototyping

Another article by Smashing Magazine, this one goes into greater detail about low-fidelity prototyping.

How We Prototype

In this in-depth, and quite frankly fascinating article the Newfangled agency describes their process in-depth. It revolves around browser-based greyscreen prototyping, and they make a convincing case for trying it out.

How to test the usability of prototypes like a pro

Another one here on WDD, this article is all about making sure that your prototyping has a point. If you only do your usability testing after you’ve completed the final project, then you’re probably doing it wrong.

Free ebook: The Ultimate Guide to Prototyping, by UXPin

You’ll have to give over some of your personal information (or just lie) to get this ebook, but hey, they’re not asking for money! it includes more information on popular prototyping methods, app-based tutorials, and best practices from major companies like Google, Apple, Zurb, and more.

Now, it is made by the people behind UXPin, a prototyping app, so they may be slightly biased about which app you should use. Still, it’s got lots of good information.

Prototyping tools and apps

Okay, so you’ve got the theory. It’s time to get cracking on building prototypes. Assuming that you’re not going to stick to paper models or code, you’re gonna use an app at some point.

The good news: there are lots of great apps to choose from. The bad news: there are lots of great apps to choose from.

Once again, it’ll all come down to the way you work. Do you need the ability to demo mobile apps? Do you need to sync your files with Google Drive, Dropbox, or some other service? How about Github integration? Low-fi, medium, or high-fi? Advanced scripting?

The apps listed below will feature some or all of those options. I’ll list the most relevant features for each one to give you an idea of where to look.

It should be noted that many of these are primarily known as wire-framing tools. It’s common for wireframing software to integrate the features needed for interactive prototypes. Your mileage with these apps may vary.

Adobe Experience Design CC

This is the newest offering on the market right now, and it’s poised to deliver some serious competition to a somewhat saturated market. It’s not just a wire-framing or prototyping app; it’s a design app. It’s like Sketch, or the now-dead Fireworks, but it takes things a step further by allowing you to make prototypes out of everything you just designed.

It’s currently Mac-only, and in the preview stage at that, but a Windows version is due before the end of the year.

The pre-release version is free, once the final version ships it will be part of Adobe’s Creative Cloud subscription plan.

Presentation software

Microsoft PowerPoint, Apple Keynote, LibreOffice Impress, and Google Slides can all be used to make prototypes. Mostly, these prototypes would be of the conceptual variety. You can mimic a certain amount of interactivity, though, by just linking slides together.

It could work just as well for prototyping content-driven sites, and chances are that you’re already using at least one of these programs. If not, Impress and Slides are free.

Invision

Invision is another one of the “big names”, with more high-fidelity prototyping. It emphasizes version control, and prides itself on its real-time collaboration and feedback features. Like Marvel app, it also has animation, prototype embedding, in-device demos and more.

In addition, they just recently bought Silver Flows, a tool that integrates prototyping functionality with Sketch. They intend to use it to integrate Sketch with their online software.

There’s a free plan, but you can only make a single prototype. After that, you can start at $15USD per month.

Justinmind

Justinmind seems deliberately geared toward creating high-fidelity application prototypes. The site also mentions prototyping responsive websites. There’re also in-app demos.

Pricing currently starts at $19USD per user, per month, if you pay annually.

Marvel App

Marvel App is a huge app (one of the “big names” in prototyping) with a free plan, and moderate pricing for all upgrades. Notable features include: support for Photoshop and Sketch, syncing with Drive and Dropbox, embedding prototypes in web pages) and features that turn your prototypes into animated presentations.

This one is about high-fidelity prototypes for sure.

Axure

Axure is a bit of an oddity with features for both low-fi and high-fi prototyping. it’s even more odd, because it’s a desktop app with a one-time price. It’s designed for enterprise users and large teams, with features for writing your own documentation, project management, and more.

The standard editions comes in at $289USD per license.

HotGloo

HotGloo is all about the low-to-medium-fidelity wire-frames and prototypes. It started out as primarily a wireframing app, primarily, but the functionality for more advanced prototypes is there.

Where other apps focus on prototyping apps, HotGloo got its start with web designers. So, you can do either, really.

Plans start at $14USD per month, and that plan can include up to 10 people collaborating.

Proto.io

Annnnnnd we’re back to the the high-fidelity prototyping with Proto.io. It’s got complex interactions, animation, exporting, printing, embedding, and device demonstrations all built in. Prices start at $24USD per month, but there is a 15-day free trial if you want to give it a whirl.

Solidify

Solidify is brought to us by Zurb, the same company that makes the Foundation framework. It’s designed to handle (and get feedback on) everything from sketches to high-fidelity prototypes and mockups.

Instead of focusing on animation and other presentational tools, Solidify offers an abundance of user-testing features. You can run tests in-person or remotely, and share the results with your team.

POP

POP distinguishes itself from other apps by helping you make a hybrid of wire-frame sketches and digital prototypes. You start by taking pictures of your sketches with an iPhone, Android phone, or Windows phone, and turning those sketches into an interactive prototype.

If you do most of your work on paper, it could be a great way of sharing the results. The service is free for two projects, and then plans start at $10USD per month.

Flairbuilder

Flairbuilder is another desktop app, though it has an online viewer for projects. It seems geared toward medium-fidelity wireframes and prototypes. It’s got features that allow you to add interaction, it can do in-device demos, and it puts a special emphasis on grid-based design.

It’s priced at a one-time fee of $99USD. That’s steep, sure, but a lot cheaper than Axure.

Flinto

Flinto actually has two versions: there’s a Mac app, and a web-based Lite version. The difference? The Mac version brings more complex animations, features, and interactions to the table. It also allows you to import your assets from Sketch, which the web version can’t do.

It costs $99USD as a one-time purchase. Interestingly, the Lite version (which costs 20USD a month) includes a license for the desktop version, giving you the best of both worlds.

UXPin

UXPin is a medium-to-high-fidelity prototyping app with all of the features that we’ve come to expect. Like a few of the others, it also has real-time collaboration, built-in usability testing features, and project management.

Unlike other apps, UXPin aims to be a one-stop design shop. As in, you can skip Photoshop, Sketch, or what-have-you, and turn your wire-frames into mockups. This is ambitious to say the least, but if it works as promised, I can see that being useful to a lot of designers.

Pricing starts at $19UD per month, per user.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.