10 interactive design prototyping tools to check out

The design prototyping tool most designers used are mainly static in nature. This is fine when web pages or print design was all we needed to communicate with fellow team members or clients. However, as websites become more interactive and apps becoming more requested, designers need interactive design prototyping tool to better communicate their design ideas. These interactive design tools are better suited to show how one state moves into another so as to give a better view of how user interaction will be like. Viewers of these interactive prototypes will then be better able to give you more constructive and definite feedback.

Here are 10 such prototyping tools for you to try.

Note: Tools with an * besides their name is free.

Interactive design prototyping tool #1: Origami*

interactive design prototyping tool 1

Origami is a free interactive design prototyping tool created by the Facebook Design team to be used inside the Quartz Composer.  It doesn’t require programming knowledge and is good to show the flows and logic of your design. The output can then be preview to make corrections much easier and faster.

 

Interactive design prototyping tool #2: Macaw

interactive design prototyping tool 2

Macaw is an awesome design prototyping tool that converts your design into codes so that you spend more time designing, rather than coding.  All the prototypes you built with Macaw are clickable so that clients or users can have a better sense of how the interactive flow will be like. From its landing page, this tool might not be available yet but you can sign up to receive notifications once it is ready.

 

Interactive design prototyping tool #3: Marvelapp

interactive design prototyping tool 3

Marvel App allows you to import your digital design assets and make a prototype out of them. The end result can be very slick looking, almost like a complete app. Best of all, it is free to use so I encourage you guys to try this if you want to design an interactive prototype.

 

Interactive design prototyping tool #4: Notism

2.-Notism

I introduced Notism as a collaborative design platform for designers in an older article but they also allow interactive prototypes to be built. It is a nice tool to have and worth the subscription price.

 

Interactive design prototyping tool #5: Invision*

interactive design prototyping tool 4

Invision is a cloud based designer tool that can allow you to convert static design resources into clickable prototypes that can be shared between your team member for faster feedback.  Invision offers a free account for limited use so you can get one and try it yourself.

 

Interactive design prototyping tool #6: SolidifyApp

interactive design prototyping tool 5

Solidify allows you to create interactive prototypes with sketches for designers who really to sketch out their concepts and wireframes. It has a 30 day free trial in case you want to give it a test drive.

 

Interactive design prototyping tool #7: Proto.io

interactive design prototyping tool 6

Proto is specically made for doing interactive design prototypes on mobile. You can test your clickable designs on any devices using proto, with full featured animations to let you have a better sense of the end result. You can get a free 15 day trial account.

 

Interactive design prototyping tool #8: Moqups

interactive design prototyping tool 7

Moqups is a fairly straight forward prototyping tool. There is no fanciful features but what they have is functional and useful. You can drag and drop design elements into your prototypes as well as being able to add in interactive actions.

 

Interactive design prototyping tool #9: Easel

interactive design prototyping tool 8

Easel is an in browser design tool that lets you drag elements into your wireframe for fast design prototyping. It also incorporate Bootstrap libraries for those who like to work in the Twitter bootstrap framework. All the prototypes created are clickable.

 

Interactive design prototyping tool #10: Axure

interactive design prototyping tool 9

Axure has a powerful engines that lets you build interactive prototypes really really fast. It has conditional logic and dynamic content functionality built into its prototyping tool so that you don’t need to worry about all those when doing your concept work.


design

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


3 Comments

  1. Marry says:

    The most attractive is the second one “Macaw”

  2. Cemre says:

    Easel and macaw aren’t really prototyping tools as much as visual html authoring tools. In this light Microsoft frontpage is a prototyping tool too.

    FramerJS is a good, simpler alternative to Origami, by the way.