Interaction Design Tools

Reviews of the best prototype tools.

Prototype like a wizard

Here we are in mid 2015, and the world of interaction design tools keeps in agile mode, with more and more players in the scene.

Context

We have been using static design tools that don’t necessarily represent the world around us and the devices we use. The world around us is in motion, and the progressive Experience Designer feels the need to replicate that flux in his digital projects. There’s a need to simulate transitional interfaces, the same way life flows organically from event to event.

Pen and paper might be a good starting point to get your ideas out quickly, but when you want to take things to the next level you will need interactive prototype tools.

Here comes the pain point, with an ocean of new design and prototype tools, which one should designers choose?

Here, an overview of the most popular ones:

Invision

Invision used by Evernote and Twitter is a prototype tool with strong focus on communication.

Relevant to gather feedback from stakeholders, clients and team members. Making Invision an important platform to manage design projects.
Invision focuses on the flow by easily link pages using hotspots.
Quickly bounce between build, preview and comment mode to progress.
It integrates nicely with Sketch and Photoshop, including the new artboards feature.
Another interesting feature is LiveShare, which enables real time in-browser collaborations.

Cons
Linking pages based just on filenames
Low-fi prototype

Pros
Great for collaboration
Easy to share
Relatively easy to learn

Marvel

Marvel allows you to link images with hotspots and easily implement essential transitions and interactions. It has a clean interface, making it very intuitive to create a simple prototype for web or mobile.

Super heroes aside, Marvel might be the right prototype tool for you if you’re a Dropbox fan. When saving your PSD file it automatically updates your screens by seamless syncing with dropbox. Soon with Google drive.

Cons
Paid when you start to add team members
Low-fi prototype

Pros
Easy to use and share
No code requirement

Flinto

Flinto which is used by Spotify, focuses on easy and low-fi prototyping for mobile apps.

It’s a good tool for flows and quick iterations.

It allows you to drag and drop static mockups and link them via hotspots. You can create fix headers and footers, to make the content scroll underneath.

If you share the link by sms or e-mail, it will automatically be updated as you iterate your design. You can also set timers to make transitions between screens.

Cons
Paid
Limited animations and interactions

Pros
Easy to learn
Linking pages based on images

Form

Form is an interaction design tool, that was acquired by Google.
Form has a patch-based interface with a focus on visual programming.

It runs all prototypes natively on iOS devices, giving you access to native features like the accelerometer, multitouch gestures, and the camera sensor.

Pros
Runs natively
Free

Cons
Complex tool with a high learning curve
Not for Android (yet)

Origami

Origami is a free toolkit for Quartz Composer — created by the Facebook Design team. A node based design platform, with layers and patches to give you infinite possibilities.

Is a great tool for instant iteration, and to collaborate directly with developers by exporting code snippets that your engineers can use.
It is also a really powerful tool for fine-tuning animations and interactions.

Luckily IDEO took it to next level and built Avocado,
making it more designer friendly, with a neat visual language.

This tool is ideal when you are in the detail stage of a project.

Cons
Complex tool with a high learning curve
Not easy to share prototype
CPU hit

Pros
Great for simulation, with a immediate visual feedback
Free

Pixate

Pixate is a image Layer based prototype tool used by Lyft.

Recently acquired by Google, Pixate might be a good choice if you plan to do some rapid prototyping, but still have full control of complex transitions and interactions.

The interface is quite user-friendly and has a lot of customisation options to put things in motion.
You can do native prototypes on iOS and Android.
The team workspace makes it easy to collaborate and share.

Pros
High-fidelity prototype
No code requirement
Free

Cons
Medium learning curve

Framer

Framer.js is a prototyping and interaction toolkit based on JavaScript.
It allows you to code with visual feedback, where you can test animations and interactions directly on the browser.
You can curate your animations nicely with Spring physics for example.

It is certainly the best way to get in the mindset of an engineer.
It also integrates with other tools like Sketch and Photoshop, skipping slicing tedious work, and bouncing between JavaScript code and PSD files to progress.

For designers who want to learn how to code, this could be a good starting point.

Cons
High learning curve
Requires code skills
Paid

Pros
Great for high fidelity prototypes
Ideal for collaborating with developers
Rapid transition from prototype to production

Atomic

Atomic is the new kid on the block.
It gives you the opportunity to not just prototype but also design on the platform.

It has some basic graphic tools that allows you to quickly test some possible layouts/buttons without the need of using another design program.

It has a clean and intuitive interface, in the same style of Sketch. Actually with the same keyboard shortcuts.

The platform is based on layers and pages, and links can be created via hotspots. You can easily share a ink with anyone or invite team members to comment on it.

Cons
Limited options to customise animated transitions

Pros
Design and prototype in the same platform
Easy learning curve
Free ( for now )

Meanwhile, as I write Photoshop launches Design Space, with a canvas curated for UX and UI. Things are getting interesting.

Independent of the tools you choose, conversations will certainly get richer when we are prototyping with team members, developers, clients or users (aka real people).
But remember, these are just tools. In the end of the day it’s what you do with them. It’s all about the experience itself.

What’s your favourite design tool?

Keep iterating.