Cameron FrancisMay 27,2014

Apps That Make Prototyping Easy

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

Invision Prototyping

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.

iMockups

IMockups Prototyping

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

Flinto prototyping

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

Briefs Prototyping

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

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.

Conclusion

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.

Author: Cameron Francis Cameron Francis is the Director of eTraffic Group. He has been engaged in all aspects of online marketing for the past 8 years. He is actively involved in SEO, Paid Search, Social Media Optimisation, and Web Design.
  • Hi, I’d suggest trying out FluidUI.com for high and low fidelity prototyping, it’s a web based tool with a drag and drop interface and extensive widget libraries for all major platforms.
    Thanks,
    Eileen (from Fluid UI)

  • Jessie

    Hi, thanks for this article.
    Have you check out Mockplus? It’s a professional prototyping tool support for building apps on multiple platforms, such as mobile and desktop. Easy and simple to use with a very low learning curve, but no any single line of code required. A friendly tool I think it should be involved in this list. Thank you.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.

Writers

• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you