Most designers will spend a good portion of their time creating prototypes to solve their client’s business problems and soliciting client feedback on various conceptual designs.
This will generally require creating iterative wireframes and/or sketches of design concepts in order to generate more design ideas and to gain feedback from the project’s stakeholders.
The ultimate goal is to combine your client’s goals with the goals of their users. This will generate a design that is beneficial from the perspective of both parties. Consequently, designers have an interest in tools that will help them to be both more effective and efficient when engaging in this process.
For designers who are interested in this process, the tools we will introduce to you below will help you in presenting your clients with your conceptual designs on your journey to producing a final solution for them.
InVision is a useful tool for distributed teams due to its collaboration platform. Similar to other prototyping tools, you have the ability to create clickable demos by linking wireframes, sketches or other designs. These prototypes can be viewed and shared via a mobile device or browser creating instant demos. Although these features are important, they aren’t what differentiates InVision from other tools.
Unless you are a solo designer, you have likely experienced some of the problems associated with collaborating with team members and clients such as tracking changes, and organising recommendations and comments in a format that is understandable.
Any designer who has experienced these organisational difficulties will welcome LiveShare, which is design collaboration software that’s part of InVision.
LiveShare gives you the ability to have in-browser real-time collaboration without having to download. In addition to live screen sharing, LiveShare has voice chat, name tag pointers for those involved in the meeting, sketch mode, text chat, and private conference functionality. LiveShare even provides a whiteboard mode in which all attendees have a pencil they can use to write on a whiteboard that’s shared.
InVision costs $22 per month.
If you like working on an iPad, iMockups may be for you. It’s designed to be used exclusively on an iPad. The presentation view in iMockups is helpful for sharing your designs with a bigger audience by connecting to a larger screen. Hotlinks can be placed in different wireframe elements so you can navigate between wireframes.
If you use Balsamiq Mockups or if you work with others who use Balsamiq, iMockups gives you the ability to export files in the BMML format used in Balsamiq. Nevertheless, sharing and collaboration is limited to emailing PNGs or project files that are editable.
iMockups costs about $7.
Flinto says you can go from a PNG to a prototype in 45 seconds. Nevertheless, you’ll need to create your PNGs using a tool other than Flinto. To some, that’s a drawback, for others they may prefer to use another graphic editor rather than being forced to use proprietary interface that’s built-into a tool. In most instances designers are already using a graphic editor with which they have great familiarity, so that’s probably not a big drawback.
Flinto’s real selling point is its Share and Install functionality.
This gives you the ability to share a link to prototypes with other interested parties who are able to install your prototype on the home screen of both Android and iOS devices and use it like it is a functioning app.
Your prototype can be quite realistic by using Android and iOS transitions, footers, fixed headers, and vertically scrolling screens.
Flinto costs $20 per month and offers a 30 day trial period for free.
Briefs was created for people that think visually. It gives you away to quickly describe your mobile app conceptual design to others. If you have conceptualised a design, brief helps you to quickly describe it. It has more functionality than just sharing a prototype.
Briefs gives you the ability to visualise your design and test it while you design. It makes use of native interactions and animations to give you a good idea of how it will look and feel on actual devices. Similar to other tools it allows you to use hotspots in flat files that link to other pages.
Briefs also provides you with the ability to use assets of your own that were created outside of Briefs or to use their built-in interface elements library.
Briefs stands apart from its competitors with regard to sharing. It allows you to place your timelines of mobile designs within one brief. This brief can be viewed by others on an iOS app that’s free, called Briefscase, on devices of their own.
Briefs for Mac also makes it easy to export your assets to a developer, giving you the ability to provide them with a detailed design of your app.
Briefs is for Mac users and costs $199, and they have a free trial offer.
Marvel runs totally off of DropBox. Your prototypes are updated as your design files are updated. Marvel detects when changes to your assets are saved, and it will update your prototype automatically without you being required to upload files to it. Unlike some other tools Marvel supports Android, iOS, and other gaming and web devices.
Another great feature of Marvel is that it supports PSD files so you won’t need to convert Photoshop files into GIF, JPG, or PNG formats. Marvel also claims that it will soon support Sketch.
Marvel is free.
Certainly there isn’t one prototyping tool that’s suitable for all designers. However, we’ve found that the tools described above can be quite helpful. There are numerous factors in determining which tools may be suitable for your design team.
Are there any prototyping tools that your team has found helpful? We’d love to hear about them.