9 Awesome Prototyping Tools for Designers
The UX prototyping space is booming. Dozens of solutions are now available for a practice that was done largely with paper and flat deliverables less than a decade ago. Designers can now start building experiences earlier in a product’s lifecycle and get real results around decisions through testing these prototypes
Some of them prefer to go vanilla and create prototypes and mockups by hand using good ol’ pen and paper. But one thing UX designers or researchers have in common is that they always look out for new technologies.
Creating a list about prototyping tools without mentioning Balsamiq is like a sphere: pointless. It is one of the basics when it comes to creating your first wireframes and mockups.
Don’t want to spend hours on prototyping? In this case, you should use Balsamiq. This tool emulates the whiteboard sketching but on computer. It is simple yet highly effective when it comes to create a powerful prototype. Balsamiq helps you create multiple mockups so that you can test them all and find the one that delivers the best result.
- Platform: Mac, Linux, Windows & web-based
- Price: $79
UXPin is a great tool with tons of options for wireframing. But what caught my attention is the option of turning your sketch into a digital wireframe.
Provides an extremely lightweight web-based prototyping environment and contains a UI component library that can be used to design screens for a number of devices. Properties, interactions and states can be applied to these components. Support for gestures and animation is quite robust, and versions of screens can be made responsive by defining breakpoints.
Cost: $13.50-$36/month depending on plan
Very early on the scene and continues to be a dominant force in the space. A complete set of drawing and editing tools are available and you get a decent set of UI components out of the box.
- Platform: Mac & Windows
- Price: $289-$589
As well as creating mock-ups, Axure allows you to add functionality to your layout and create an interactive prototype. Features of this wireframing tool include sitemaps and various ‘widgets’ in the form of various UI elements. Interactive HTML mock-ups can be created for both websites and apps; you can even view your app design on your phone with a built-in share function.
- Platform: Windows
- Price: $600-$999
Viseo’s real strength lies in technical diagrams rather than wireframing; however, for those already accustomed with other Microsoft apps such as Word or Excel, the interface will be very familiar. It is quite clunky, Viseo does offer add-on tools such as Swipr, which allows you to create and export a usable HTML prototype.
- Platform: Web-based (Flash)
- Price: Free-$79
Flash-base wireframing tool iPlotz allows you to make clickable wireframes with drag-and-drop components. Its main addition includes the ability to add tasks and notes for project managers and coders.
07. Photoshop CC
- Platform: Mac, Windows
- Price: £17.15/month as part of Adobe Creative Cloud
Photoshop doesn’t offer libraries of interface elements, but for straight-forward, fast wireframing, it is a very easy choice for designers. Even for those not familiar with Adobe products, sketching out quick ideas, grouping various elements and layers affords a very quick process.
Marvel attracts you with its simple and clear design which allows you to get right to work. It also operates on web browsers, so it is accessible via many platforms (PC, mobile, etc.).
Marvel syncs with Dropbox, and offers access to projects for full teams, like other tools. Marvel can export the prototype as an .apk for Android developers, so you can turn your prototypes into offline apps.
To follow their words “napkins supported”, you can take a screenshot with your phone iPhone and turn it into a prototype with few clicks. It’s simple, clear, and most of all free, with some extensive plans available.