Prototyping for designers

April 20, 2017
Radu N

You may have heard the term “prototyping,” and you’ve seen some examples online, but you are unsure of what it is and how can you integrate it into your design process. I will guide you to understand what a prototype is, when to create prototypes and how.

What is Prototyping

When designers work on creating user experiences, they try to understand, first, who is going to use the application or website they are designing. Then based on the research, they seek to match the features planned for the application with their target audience.  Usually, after doing the research, UX designers move on to create wireframes - a stage that typically tries to identify patterns, screens and flows for the application.

In my design process, the prototyping stage comes right after the wireframes. I assume that I’ve correctly identified the design patterns for the application, the main flows are defined, and I am now ready to explore how the user will interact with my application.

A prototype is a simulation, simple or complex, of the entire application or parts of it, and it is meant to show how the final product will work.

When to prototype

Different designers will have different answers on when, in the design process, to start prototyping. Based on my experience, the best place for prototyping is after the wireframes stage.

The advantages in prototyping in low fidelity are multiple - it’s a lot easier to prove or disprove an interaction - you don’t need colors to make sure a transition works or not, and you can quickly get back to modifying the wireframes because of their low fidelity nature. It’s also very easy to iterate and improve on your wireframes and prototypes, because of the same reason.

Since prototypes are based on he existing wireframes, they can also help to improve them, and you can enter a very beneficial cycle of refinements for both prototypes and wireframes. Prototypes will help shape your wireframes, and in turn, wireframes will mold your prototypes.

How to prototype

Since a prototype will be as simple or as complicated as you want to make it, we should start by defining the goals for our prototype. If you know what you want to achieve with it, it will be easier to choose the correct tools. If your goals is to make your client understand your designs better, a simple image based prototype should be enough.

There are three main ways you can prototype: with sketches, images or code.

However, since I do believe that prototypes are more useful after the wireframing stage, I would recommend prototyping with images or with code.

Image based prototyping tools

If you are a beginner, I will focus on prototyping with images, and once you are comfortable with it, you can move to coding your prototypes.

The easiest way to get into prototyping with images is to use a tool like Invision (www.invisionapp.com) or Marvel (www.marvelapp.com). In this case, it’s just a matter of exporting your wireframes, and the app will let you link the screens together, add make your wireframes interactive.

I have used Invision for quite a while now, and Marvel for a little bit and I must confess that in almost all cases, it was a lot easier for the client to understand the design for an app when presented an Invasion prototype rather than a series of images of the app.

Layer based prototyping tools

The next level for image based prototyping are the specialized apps that work with Sketch or Photoshop, and they usually are integrated with your graphic design software via a plugin. From Sketch, for example, you export your artboards into these apps, and you can use your artboard layers to create animations. They are still going to be image based. However, you can explain your intentions a lot better with these applications. It does take a lot more time to create prototypes with layer based applications. The advantage is, however, that for complex apps and interactions, they usually have the right mix of features and the results are impressive.

Some of the best apps for doing complex image prototypes are Principle and Flinto. I have used them both and settled on Flinto for various reasons.

Code based prototyping tools

As the name suggest, whit these tools, you use actual code to add interactivity to your prototypes. They are the tool of choice for designers that have a coding background or anyone who is working on projects where the prototyping stage is crucial.

There are two primary tools that fit into this category - Origami - created by Facebook and Framer.js, as the name suggest, is (more than) a Java Script library for creating prototypes.

Whatever your comfort level is with producing prototypes, I would recommend getting into the habit of creating them. It will help you be a better designer, and it will also help your clients understand your work properly; not to mention, the huge benefit for the users of the app or website you are designing - they will be able to have a better experience using the app you design.

Leave a Reply