Why do it the hard way?
6 Click Through Prototyping Tools You May Not Have Tried Yet

Reading time: 4 minutes
cover-1050x700

Being a user centered designer means a significant portion of my responsibility involves prototyping concepts to gain feedback, or buy in, for various designs that solve actual business problems. That means iteratively sketching or wire-framing ideas early and often in the design process to generate conversation, and more importantly, to gather feedback from stakeholders. My goal is to ultimately mesh user goals with business goals for a win-win situation that is mutually beneficial from both perspectives. Therefore, I’m always interested in any tool that enables me to not only be more efficient, but more effective in that process.

If what I’ve said so far begins to resonate, you may be interested in the following prototyping tools that can assist you in walking your stakeholders through your vision on the way to your final product.

iMockups for iPad

iMockups

If you have an iPad and prefer working on it, iMockups may be worth a look, because iMockups was designed exclusively for the iPad. And despite being iPad specific, it’s still very valuable for sharing your vision with a larger audience by connecting your iPad to a big screen with presentation view. To string together a user scenario, place hot-links on various elements in the wireframe for actual navigation from one wireframe to the next.

If you’re a Balsamiq Mockups user or work with someone who is, it’s convenient that iMockups files can be exported to Balsamiq BMML format. With that said though, collaboration and sharing is limited to emailing either editable project files or PNGs.

Price: $7.00

 

Flinto

Flinto

From PNGs to prototypes in 45 seconds is Flinto’s pitch. However, what you need to realize is that you still need to create said PNGs outside of Flinto unlike some other prototyping services. Some people might look at that as a negative, but I actually like having the ability to use my favorite graphic editor instead of being confined to using yet another interface built into another app that I have to learn how to use before I can do anything. And I don’t think I’m really stepping out on a limb when I say if you’re in the business of creating apps, you probably already have your preferred graphic editor ready to go at a moment’s notice.

Where Flinto really excels is with its integrated Share & Install feature that allows you to share your prototype link with others who can literally install the prototype on their homescreen (both iOS and Android) to use like a live working app. You can make it as realistic as you want it to be with recreated iOS and Android transitions, fixed headers and footers, and screens that scroll vertically.

Price: $20.00/month (30 day free trial)

 

Briefs

Briefs

Built for visual thinkers, Briefs provides a way for you to describe your mobile app to others. You’ve got an app design in your head, and Briefs is here to help you get that idea into the heads of others, which includes more that just sharing a demo. Briefs for Mac allows you to see your design and even test it live on actual devices (you can connect an iPhone and iPad simultaneously) while you design. It uses native animations and interactions so you can gain a really strong appreciation for how it will feel. Like other competing services, you can apply hotspots to flat files that link between “pages” but Briefs gives you the flexibility to use either your own assets created outside of the app (including retina assets) or you can build pages right in the app using their library of interface elements.

Briefs separates itself from the rest when it comes time to sharing your work. Using what they call briefs, you package all of your mobile design timelines into one brief that can be viewed on the free Briefscase iOS app by clients or teammates on their own devices. But what’s especially nice is Briefs for Mac streamlines the exporting of your assets to your developer(s), where you can provide a detailed blueprint that represents your app design.

Price: $199 (trial version with no expiration date limited to 10 scenes and 1 timeline per brief)

 

POP – Prototyping on Paper

Prototyping on Paper

If you prefer the tried and true method of sketching wireframes on actual paper or the proverbial back of a napkin, of which I am personally a fan, then have we got an app for you. You literally sketch out your ideas, take pictures of them with your phone, and then upload them into Prototyping on Paper where you can then begin to stitch together your sketches using hotspots.

Yes it’s basic, but that’s the beauty of it. You don’t need any complicated software, just a pencil and piece of paper. After you’ve created your scenario, you can share and demo your rough prototype on an iPhone, iPad, or even in your web browser.

Price: free

 

Marvel

Marvel

Running completely off DropBox, updating your prototype is as simple as updating your design files, because Marvel automatically recognizes whenever you save changes to your assets thus updating your prototype in the background without the nuisance of re-uploading your files. And unlike much of the competition, Marvel not only supports mobile (iOS and Android), but web and gaming devices as well.

Another standout feature is while you could convert your Photoshop files to images (PNG, JPG, GIF), you don’t need to (unless you want to) because Marvel supports PSD files and also claims to be supporting Sketch (an alternative to Photoshop) soon.

Price: free

 

Invision

invision-project-screens

Built for agile iterations, the power of InVision is in its collaboration platform, making it a great choice for distributed teams. Of course, yes, like many other prototyping services and apps, you can create a clickable demo by linking up sketches, wireframes, or high fidelity designs. And such prototypes can be shared and viewed through a browser or a mobile device for an instant touchable demo. I don’t mean to gloss over these facts, but I just want to get to what sets it apart from other prototyping services.

Unless you’re a one-person team designing apps only for yourself, then you’ve probably experienced some of the difficulties collaborating with clients and teammates, keeping track of who said what about what, and organizing all of the comments and recommendations in a digestible format.

Any designer who has been buried in feedback and struggled to organize all of it will appreciate Invision’s design collaboration tool, LiveShare, which enables real time in-browser collaboration (no downloading required). LiveShare is much more than a screen sharing application as evidenced by visible name tag pointers for everyone in the meeting, voice chat, private conference line capabilities, text chat, sketch mode, and even whiteboard mode where everyone has a pencil with which to draw on a shared virtual whiteboard.

Price: free for 1 active project, $13/month for 3 active projects, $22/month for unlimited use


Of course, there is no one size fits all prototyping tool. Many factors determine what might be right for you or your team.

Perhaps one of your favorites wasn’t featured, if so, what is it, and what do you love about it? Do you have experience with one of the ones highlighted here? Let us know in the comments.

  • http://www.mobileinc.co.uk/ Murat Mutlu

    Thanks for featuring us, We’re in with some great company

    • http://maccg.com/ Jason McGovern

      No, thank you for making our lives easier.

  • Doug Strickland

    Good article, thanks for putting these together. A tool I often use is Protosketch, from UI Tools. They are the company that makes those great sketch pads and stencils you can use for pretty much any platform and OS. Even windows!

    Protosketch is a little like POP, in the way you can take a picture of a sketch, whiteboard, etc., and draw hotspots. But if you use their sketch pads and stencils to draw with, they import and automatically scale and simplify the hotspot process drastically. Even without their stencils and pads, the ability to adjust exposure and other attributes make Protosketch a frequent appearance in my workflows.

    • http://maccg.com/ Jason McGovern

      Hey that looks pretty sweet. I’m goi to have to give it a try. Thanks for the share!