Prototyping for designers

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 of prototyping in low fidelity are multiple. It's easier to prove or disprove an interaction without the need for color. You can quickly get back to modifying the wireframes due to their low fidelity nature.

It’s also effortless to iterate and improve on your wireframes and prototypes, because of the same reason.

Since prototypes are based on the 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 would like to achieve with it, it will be easier to choose the correct tools. If your goals are 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 to make your wireframes interactive.

I have been using InVision and Marvel for some time now, and I must confess that, in almost all cases, the design was easier for the client to understand when presented with 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 are usually 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 typically 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, with 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 suggests, is (more than) a JavaScript 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 giant 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.