The best 10 interactive design tools of the 2014

A few years ago the interaction designer was an obscure job, and now the interaction designer and the UI designer are fighting at the forefront of the design. UI designers have classic PS and pioneer sketch to open up the territory, compared to the new professional interaction designer is not a more unified design tools. However, the maturity of the interactive design community has spawned more and more full-featured new tools, and made the 2014 the year of interactive design tools.

At the beginning of the design, between the visual manuscript provided by the UI designer and the final interactive prototype, interaction designers need tools to make up the static vision into a vibrant interactive interface. These interactive design tools, which emerged in the 2014, have become mature in the continuous iterative upgrade, and the usability and reliability have been greatly improved. If you are an interactive designer, these excellent interactive design tools are always in line with your needs, a complete farewell to the Roar, interactive hand of the Savage era!

Webflow

https://webflow.com/

$16/Month | Web app

Webflow is a web app that allows you to complete the visual and interactive design of your Web site directly in a browser, including real-time previews and code writing. The Webflow editor interface is friendly, WYSIWYG, and the designer has full control. Webflow has been continually updating features, including Web fonts, video support, interactive status, standardization of the Consortium, and even host hosting.

　Marvel

https://marvelapp.com/

Free | Web app

Marvel is a free prototype design Web application that can be used for web design and mobile-side UI design. Like Webflow, you can use Marvel to complete the design completely online, and you can sync with your Dropbox, you can easily share or share. It is worth mentioning that Marvel supports the PSD format document, which means that your visual manuscript is not required to convert the format

Macaw

http://macaw.co/

$99 | Mac & Windows to use.

Macaw is a desktop side of the WYSIWYG design tools, real-time code preview, convenient output. What's unique is that Macaw can create responsive designs, and a built-in breakpoint editor can help you easily display the perfect response on different sizes of screens. Although the code editing feature in Macow is not necessarily necessary, the latest version of Macaw is a good experience for HTML and CSS code editing.

Uxpin

Http://uxpin.com

$ monthly | Web app

Uxpin is a more famous design class of Web applications, users can use Uxpin online collaboration to complete the wireframe and prototype design. Uxpin is designed to help designers quickly and easily make wireframes and prototypes, have complete versioning, support responsive design, and drag and drop prefabricated controls for UI design.

Invision

http://www.invisionapp.com/

Free | Web app

Invision is not an interactive designer tool in a strict sense, Invision can help designers and design teams to do prototyping more efficiently. When making prototypes, Invision lets you create interactive activities, add static images to activities, communicate with colleagues, users, and get feedback. At the same time, Invision has a complete project management function, team collaboration to complete the prototype design.

　Flinto

https://www.flinto.com/

$ monthly | Web app

Flinto can help you create interactive design prototypes and can be run on Web pages and mobile-side devices. Designers can use static images to create prototypes in Flinto, rotate them and interact with them in their own thoughts.

Quartz Composer

Quartz Composer is a graphical programming tool designed to generate a variety of dynamic visual effects, including interactive interface prototypes. As a graphical programming tool, designer students can save a lot of trouble when making interactive prototypes. Facebook and Ideo have also recently provided a dedicated library that makes it easier to develop programs and prototypes.

　Origami

http://facebook.github.io/origami/

Free | Mac Platform Exclusive

Origami is the library of Facebook for Quartz composer, the Facebook design team that has implemented its own program to run prototypes on mobile devices, test dynamic, interact, and so on. Origami can almost perfectly help you make a high-fidelity, interoperable prototype, but you can't generate the code that's available.

Avocado

http://labs.ideo.com/2014/05/27/avocado/

Free | Mac Platform Exclusive

Like origami, avocado is a library of ideo for Quartz composer, which simulates the interaction of common mobile-end devices. Origami focuses on interaction and action, while avocado is more focused on replacing commonly used UI elements, such as you can replace the iOS default keyboard with no code.

Framer.js

http://framerjs.com/

Free | Javascript Framework

Framer.js is a JS framework that is used to create a prototype of a dynamic trigger event. Framer has many features, its built-in generator reads the layers in the PSD document, and prints each set of layers as a separate item. Framer is able to identify HTML, CSS, and JavaScript code, but it is not attached to a particular program, so you can use it anytime, anywhere.