The Year of Interaction Design Tools
We’re six months in to 2014, and designers have the widest selection of interaction and prototyping tools to date. The community is blossoming, and bridging the gap from mockup to working prototype is now easier than ever.
Inspired by the upcoming Pixate, I’ve compiled a brief breakdown of the state of interaction design tools in 2014.
Webflow
https://webflow.com/
$16+ a month | Web app
Webflow is a web app that allows users to design websites in the browser and that are completely coded and live. Webflow’s friendly WYSIWYG editor gives designers full control over the output, including the appearance on mobile devices.
Webflow is continuously adding new features — including web fonts, video support, continued W3C compliance, interactive states — and it even includes hosting, too.
Marvel
https://marvelapp.com/
Free | Web app
Marvel is a free web app for prototyping for web and mobile designs. With Marvel, work is done entirely online — but syncs with your Dropbox, allowing you to easily pull in mockups from your private or company files. Marvel also supports PSD files — so you don’t have to convert files before creating prototypes.
Macaw
http://macaw.co/
$99 | Mac & Windows
Macaw is a desktop WYSIWYG design tool that outputs working, live code. It’s particular strength lies in creating responsive designs: Macaw’s built-in breakpoint editor makes it easy to create pixel-perfect designs at any screen size.
Although no coding knowledge is required, basic experience with HTML and CSS certainly enhances the final product.
InVision
http://www.invisionapp.com/
Free | Web app
InVision is not strictly an interaction design tool. InVision is used for prototyping and productivity. For prototyping, InVision allows you to add interactive events to static images to demo user interaction. At the same time, InVision’s project management features allow both stakeholders and designers to interact with prototypes before development begins.
Flinto
https://www.flinto.com/
$20 a month | Web app
Flinto allows you to create interactive prototypes that are useable both on the web and on a mobile device. Flinto allows designers to take static images and create prototypes that can be scrolled, rotated, and interacted with however you want.
One particularly enticing feature: Flinto prototypes can be used natively on Android and iOS devices — so, you can interact with your latest Instacart-for-Cats prototype on your own iPhone or Android device.
Quartz Composer
Quartz Composer is a developer tool created by Apple for use in motion graphics. Although not its original purpose, Quartz Composer has been adopted by the interaction design community as a code-free option for showing animation and state change in designs.
Quartz Composer can be daunting at first glance —with a significant learning curve. Luckily, support is growing. Facebook and IDEO have recently released new Quartz Composer libraries to make the program more accessible to first time users.
Origami
http://facebook.github.io/origami/
Free | Mac only
Origami is a Quartz Composer library created by the Facebook Design team to help prototype interaction on mobile devices. It allows designers to easily replicate common animation and interactions that occur on mobile devices — think animating image transitions or button presses.
Like Quartz Composer, Origami is particularly useful for prototyping, but it doesn’t output useable code. Its claim to fame: Origami was instrumental in designing Facebook’s most recent mobile app, Paper.
Avocado
http://labs.ideo.com/2014/05/27/avocado/
Free | Mac only
Like Origami, Avocado aims to improve Quartz Composer by adding a library that mimics common interaction on mobile devices.
While Origami focuses on interaction and animation, Avocado focuses on replicating common UI elements for iOS — for example, a working iOS keyboard — allowing users to prototype ideas for iOS without using any code.
Framer.js
http://framerjs.com/
Free | Javascript framework
Framer.js is a Javascript framework for prototyping event-triggered animation. Framer boasts many features — one being a built-in generator that processes layer groups from your own PSD files and outputs each group into layers that form the basis of your project.
Framer is a Javascript framework — so unlike other options here, it doesrequire an understanding of HTML, CSS, and Javascript. However, it’s not bound to any specific program. You can host it and interact with it anywhere and everywhere.