Many a times, before releasing the final product we need to simulate and test the design. This is where a prototype comes in.

It also makes life easier for designers who want to demonstrate their product to the developers. The purpose of building prototypes is to test if the flow of the product is smooth and consistent or not.

Prototypes breathe life into any design and provide a great deal of insight into the user interaction.

Tools for building Prototypes

Easy Tools —

Marvel

This is probably the easiest prototyping tool available. You can draw your prototypes on a piece, and link them via Marvel, marvelous right?

According to Marvel, their app-“is the easiest way to turn your sketches, images and mockups into realistic mobile and web prototypes”.

Some of the features Marvel boasts include:

  • Dropbox syncing, as you work in Photoshop and hit save, the prototype updates in real-time.
  • Add sketches from mobile app if you like to start on paper first.
  • Support of different types of transitions and gestures.
  • Ability to create unlimited teams.
  • Device frames for previewing purposes.
  • Multiple options for sharing prototypes.
Prototype for the Scott Dunn App

Marvel is winner when it comes to keeping everything simple in regards to use and interface. Although some users may not like the simplicity finding it too simple compared to others. Also it’s free account has a lot limitations.

InVision

InVision’s tag line-the world’s leading prototyping, collaboration and workflow platform

It may not be the best, but it certainly is one of the top free tools available on the web.

Many of the top firms are using it to build their prototypes, one of them being Twitter. This what the Mike Davidson from Twitter had to say about Invision-

“InVision is a window into everything that’s being designed at Twitter. It gets all of our best work in one place.”

The InVision prototype editor is like Marvel as in it is a web-based tool so when you sign up you are taken directly to the dashboard. There may be a slight learning curve at the beginning but it gets better and easier with time.

Some of the important tools available in InVision are-

  1. Preview: see and interact how your prototype is shaping up.
  2. Build Mode: interact with your hotspots. Group them to make changes.
  3. Comment Mode: comment on assets, leave notes for your teammates, add sketches.
  4. History Mode: view earlier versions of your project screens as well as past comments.
  5. Configuration: add changes such as background color and a change of alignment.
A typical InVision dashboard

Intermediate tools

Adobe XD

Adobe XD allows users to easily create, edit and socialise prototypes for mobile designs, all within one program.

It was launched earlier this year, so there’s not much support. It is only compatible to Mac. Windows version will be rolled out soon. Since it’s just in it’s nascent stage, some features and tools are missing.

The software is organized into two tabs — Design & Prototype.

Design — you build your layouts. Just click and drag to make any shapes, and as you add more to the page, Adobe will show you cues of which corners line up and when you reach equal spacing. To add a photo, drag and drop it from your desktop, and it will resize within whatever bounding box you’ve built.

Prototype — you actually give your images interactivity, and build the button-linked workflow of your whole app or website. This user interface is particularly well-executed. All you do is click an object and a little arrow appears beside it. You drag this arrow over to the screen of your choice. It’s now linked. You can also set and time some basic animated transitions in this sequence, so you can get a feel for how the UI will really look and feel in motion. Once all of this work is done, you can hit the record button to tap through your app and export the results to share the demo.

Adobe XD Dashboard

All prototypes are saved online in your prototype section for easy management.

Adobe plans to add layer support, options for gradients and text blending, scrollable content, real-time design and preview on actual iOS and Android devices, API support, and Windows 10 availability.

Flinto

Flinto allows to create interactive prototypes for Android, iPad, iPhone mobile apps. Since it has native Mac OSX elements you can intuitively work with it. Another great thing about Flinto is that it has a Sketch plugin.

With Flinto you don’t have to do any graphics slicing to make a prototype.

Some really cool features of Flinto are:

  1. Timer Links: allows you to create a transition that will work without taping which is great for loading screens.
  2. Transition Designer: this is the fastest way of tweaking a transition.
  3. Connected Layers: this connects layers so you don’t need to guess how two layers will work together.
  4. Live Previews: allows to run live previews on desktop, so you keep a check after editing.
  5. Multiscreen Prototypes: you can have prototypes run on multiple number of screens.
Flinto in action

Flinto cannot record videos of gifs for your prototype. Also it doesn’t allow you to create ‘on scroll’ interactions. These can be put into the drawbacks section.

Hard tools—

Origami

Origami was launched by Facebook recently. Facebook has used Origami to build several of its flagship Apps such as Instagram, Messenger, Slingshot and Facebook Paper.

Facebook Origami in itself is just a big stack of Quartz Composer patches( pre-existing modules of animations, graphics or interactions) that make it easy to develop working mockups that include demonstrate animations and other complex interactions. It is fast to tweak prototypes because you don’t need to compile when you edit your patches. Everything gets reflected to the viewer in real time.

While the drawback is, it is relatively new and there isn’t a huge volume of supporting resources yet. However, the existing resources are very well made and organized.

If you are wondering what Quartz Composer is, here’s Apple’s official definition:Quartz Composer is a development tool for processing and rendering graphical data. Its visual programming environment lets you develop graphic processing modules, called compositions, without writing a single line of code.

Some basic tools and features are:

  1. The Editor Window: The Editor window is your main working space. Here you can drag and drop your patches and assemble the best combination of animations and interactions by wiring together different layers of your design.
  2. Patch Library Window: The Patches Library contains all the components needed to put together your prototype. These are the components that make the magic happen.
  3. Viewer Window: The Viewer Window looks like an actual device emulator. Everything you do inside the Editor window is reflected here.
  4. Sketch Integration: Origami’s Sketch integration allows you to directly link your layers designed in Sketch App with your prototype.
App layout of Origami.

Proto.io

Proto.io was launched in 2011. Originally designed to prototype on mobile devices, Proto.io has expanded to allow users to prototype apps for anything with a screen interface, including Smart TV’s, digital camera interfaces, cars, airplanes, and gaming consoles.

It is a web based service, with players for both iOS and Android.

Proto.io utilizes a drag and drop user interface (UI) and does not require coding. Everything here is controlled by the Drag and Drop functionality, which is a boon, but at times can be overwhelming and not user friendly.

Because of the nature of the IF prototype — different objects moving at different speeds

It uses the IFTTT (If This Then That) concept.

Some tools and features of proto.io are:

  1. If you want to send a prototype to a client, you can just generate a public link, which can also be opened in a mobile browser.
  2. Easy to make a quick mock-up because of the extensive library of standard UI elements, many of them customisable. Example: Material Design Library for Android.
  3. Proto.io is page-based ie. you can have multiple screens within a single project and create transitions between screens.

There are some limitations as well. There is no availability of Live Preview, all the prototypes are saved on their web platform, so you can’t even run them when you would cancel your account, and there is no scope of 3D animation.

Proto.io in full flow.

I’ll finish up by saying that prototyping is an integral part of the UX design process.

I have given you enough tools ranging from easy to hard. Now keeping in mind what your app needs and what level of fidelity you want, you can select from the tools given above.

This was dicussed at a design workshop at HelloMeets with Rahul Bhadauria, UX Designer at Roposo.

Our coming up workshops -

Negotiating with the Clients & Investors — Sunday | 7th August | 9:30 am to 5 pm

Data Drives Love — Sunday | 21st August | 5pm to 7pm

Photoshop Workshop — Saturday | 27th August | 10am to 2pm

Digital Marketing Workshop — Sunday | 28th August | 11 am to 5pm

Blog Credits — Ishmin Singh, Tech Content Writer at HelloMeets