The best
prototyping tools
Top prototyping tools available on the market
Creating and improving products based on prototypes and solid practices of User Experience is growing in strength. We should be happy because designing with particular emphasis on intuitive user interaction
and ergonomics is becoming a common practice for many web developers, app designers and programmers, as well as for those, who design for products that go far beyond displays.
Why prototyping is becoming so common? Because this approach (although it is very time-consuming and cost-intensive) quickly pays off— users appreciate intiuitive and natural feeling of an app or website.
There are many tools for prototyping websites and mobile applications.
We have prepared a list of the most popular ones.
Justinmind
Justinmind is a prototyping tool that is used in our studio. It’s was created in 2008. Justinmind’s big plus is that it can be downloaded to your computer instead of being used in a browser, which allows you to work offline. The application lets you design everything from websites to advanced administration panel interfaces. You can use items from UI libraries and create Master Pages (templates known to Indesign users). A huge plus is the ability to download add-ons in form of ready-made modules, including bootstrap elements. Mobile prototypes can be shared with our team members and be tested on any smartphone. Also, every little change can be commented. Justinmind is very simple to use, but sometimes its performance leaves a lot to be desired.
Prices start from $19 a month, you can test a Pro version for free for 30 days.
UXPin
Techcrunch, Wall Street Journal, and Fubiz have already written about this full-stack UX design platform created by a Polish team.
What’s the phenomenon behind it?
UXPin started as a wireframing notepad (a physical product), pivoted into a cloud-based prototyping tool, and has since grown into an end-to-end UX design platform.
UXPin aims to support an Agile UX process in one place:
- Design: You can prototype with custom team UI libraries, built-in libraries (Bootstrap, iOS, Android, etc) and Photoshop/Sketch integrations.
- Collaboration: People can co-design in one file at the same time, as well as comment on designs and notify people of updates.
- Iteration: The platform has built-in version control so people can review past design decisions (or revert to past versions).
- Documentation: You can insert annotations or code snippets that travel with elements. That way, when you move an element, the documentation follows along.
- Developer Handoff: Auto-generate style guides, assets, and specs for developers.
We really like that the platform has Smart Guides (already known to users of Adobe), which allow you to measure the exact distance between elements. All images can be simply edited within UXPin too: you can correct brightness, contrast, sharpness and transparency. You can also create interactions and simulate the entire project. Your finished prototype can be exported to pdf, html or png formats.
Check out Studio by UXPin — you can improve your UX and product development knowledge with free ebooks and webinars from practitioners.
UXPin starts at $19 a month. The trial version lasts only 7 days, but you can ask the UXPin team to prolong it :)
Invision
Invision is another very intuitive and simple prototyping tool. Just upload your projects in psd or png format and add hotspots to transform static screens into clickable, interactive prototypes with a series of gestures, transitions and animations. Invision also allows team collaboration and comments on work progress. Thanks to synchronization with Creative Cloud, Dropbox and Google Drive, prototypes update themselves every time you edit source files. You can also view history of previous versions and restore their earlier appearance.
Working on one prototype is free, starter pack that allows you to manage
3 projects costs $15/month.
POP
POP is an application for mobile prototyping and it allows you to pass from paper to digital prototyping smoothly. Just take pictures of your sketches to upload them to POP, or upload .psd files to Adobe Creative Cloud. Then you can easily add transitions between views, gestures and interactions. POP is synchronized with Dropbox, so you can easily share your work with others.
POP application is free if you use it only for two projects.
Full pro version costs $25 a month.
Marvel
Marvel will allow you to create prototypes of websites and mobile applications. Just upload your psd files, png, jpg ,gifs or take pictures
of sketches made on paper. In Marvel you can transform static screens into clickable, interactive prototypes with a series of gestures, animations and transitions. You can also view other prototypes created and shared by Marvel community here.
The app is available for free with no collaboration available. In free version you can also comment only up to 3 projects. Pro Pack starts at $9 per month. Marvelous!
Balsamiq
Balsamiq is another tool for rapid prototyping. Mockups created in Balsamiq are “low fidelity”, similar to freehand sketches. You can choose from
over 500 icons and many basic ready-made items stored in the UI libraries. Balsamiq allows you to add basic interactions and share prototype with your team.
Prices from $89, trial version available for 30 days.
Axure
The largest (in terms of functionality) application designed for advanced prototyping projects. In Axure you can quickly create prototypes of responsive websites and mobile applications. It allows you to add interactions, create Master Pages and use ready-made components from Widget libraries. In the further process, you can import images, add colors, gradients and change transparency of each object. The interface is quite deterring on the first sight because of overwhelming amount of options available. With help comes Forum and Axure Blog, which comes very handy if you’re lost.
Prices are quite high — the package with the ability to work as a team costs $589. Axure trial version can be used for free for 30 days.
Flinto
Flinto is an application designed for prototyping mobile applications. Just drop ready pngs to each application screen, add interactions and link them together. When finished, you can add an application icon and startup screen. Thus prepared, the project is ready to send to anyone. Users of tablets and smartphones can install your prototype as an app and test it. They will also be able to see any changes that you make.
For 30 days you can use it for free, after that time the cost is $20/month.
Proto.io
Proto.io enables you to prototype mobile applications and websites. You can use templates as well as UI elements from extensive library. Items can be freely stylized, and you can share your project with others on Dropbox. After finishing work you can test your prototype, and even share it and receive valuable feedback form community Proto.io Spaces.
You can test Proto.io for 15 days for free. Prices start at $24 per month.
Moqups
Moqups is a simple and free online tool (premium accounts are paid, but we’ll get to that) to create mockups. In its free version there’s 31 components available, such as graphs, icons, buttons, figures, or iPhone mockup. You can also use your own images by dragging them directly to Moqups app or add hotspots to selected items. In the Premium version (prices start from $99 per year), you have the opportunity to work on multiple projects, share them with your team, comment on changes on the fly, create Master Pages, and export ready projects to PDF file or .png.
Antetype
Antetype is one of the market leaders in Mac prototyping apps. It allows you to create responsive websites, mobile apps or even software. Antetype comes with templates for different devices and 400 ready to use widgets. Thanks to dynamic layouts you can easily drag and resize each element without disturbing the layout. You don’t need to toggle between design software while working in Antetype —it provides all the tools to create hi-fidelity prototypes (gradients, shadows, rounded corner etc.)With interaction features, you can easily demonstrate the feel of your prototype. Define actions, events, widget states and change screens. You can also export your project as vector or pixel based graphics and generate CSS code.
You can download a free trial version (30 days). Price: $189,99
iRise
A new powerful tool released by team from California. iRise will allow you to build interactive prototypes: web, mobile and wearable products. You can pick fidelity level of your prototypes: lo-fi wireframes, hot spot driven prototypes or hi-fi apps with real data. It also provides a large collection of global assets: UI elements, interactive widgets and so on. iRise supports mobile gestures like swipe, long press, pinch, rotate and supports collaboration with others in real time. iRise combines prototyping with requirements management so that everyone can be on the same page. You can create user flows, business process diagrams and export your information instantly into the documents.
You can test iRise for free for 30 days. Prices start from $69/month.
Adobe Experience Design
After mysterious Project Comet here it came to life — Adobe Experience Design, which allows your to design, and create interactive prototypes of websites and mobile apps.
Switching between design and prototype is super smooth. You can also copy/paste elements from other Adobe programs, such as Illustrator and edit them directly in XD. Also — repeat grid is a feature worth mentioning that can save you a lot of time.
It’s only for Mac users, which kinda sucks. But hey, let us know how you feel about it, you Mac lovers :)
Mockplus
Free software that you can download to your computer and work offline. (supports Android, iOS, PC and Mac — sweet!) In Mockplus you can easily sketch and create wireframes, as well as design by drag and drop interactive prototypes. 200 ready-made components and icons help you to work fast. You can also preview your ready interactive prototype through QR scan and share your prototypes with others.
We also recommend checking out this source. Table clearly describes functionalites of individual prototyping tools, allowing you to choose the best one for you.
Another great site/table comparing prototyping tools. Click! Thanks to Javier for letting us know :)
Tell us in comments what do you recommend, and what do you use to create interactive prototypes! We’re currently looking fot an alternative to Justinmind.
