6 apps to supercharge your prototyping

Default avatar.
April 28, 2014
6 apps to supercharge your prototyping.

thumbnailBeing a user centered designer means a significant portion of my responsibility involves prototyping concepts to gain feedback for various designs that solve actual business problems. That means iteratively sketching or wireframing 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 effficient, 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 ($7)

If you have an iPad and prefer working on it, iMockups may be worth a look. Although iMockups is designed exclusively for the iPad, it has a presentation view for sharing your vision with a larger audience by connecting your iPad to a big screen. You can place hotlinks 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 is 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.

imockup

Flinto ($20.00/month — 30 day free trial)

From PNGs to prototypes in 45 seconds is Flintos pitch. That said, however, you still need to create those 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 built-in interface 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. It allows you to share your prototype link with others who can 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.

flinto

Briefs ($199 — free trial)

Built for visual thinkers, Briefs provides a way for you 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 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 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 share 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.

briefs

POP — Prototyping on Paper (free)

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.

pop

Marvel (free)

Running completely off DropBox, updating your prototype is as simple as updating your design files: Marvel automatically recognizes whenever you save changes to your assets and updates 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 it will be supporting Sketch soon.

marvel

InVision (free – $22/​month)

Built for agile iterations, the power of InVision is in its collaboration platform, making it a great choice for distributed teams. Obviously, 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 with 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.

invision

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

Jason McGovern

Jason McGovern is a user-centered designer and wannabe golfer. He invites you to connect on Twitter @maccgizzle, follow his experiments on codepen​.io, or catch his latest rant on maccg​.com.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…