Mockup Prototyping - Wireframing Utility - App Roundup 2013
One of the aftermaths of the iOS/Android revolution has been an explosion of mockup/wireframing utilities. In an ideal world I’d of had time to learn the ins and outs of every utility on this list and write comprehensive reviews, as I simply lack the resources.
Instead, I’ve garnered a list of utilities with my impressions, some of which I’ve used (Omnigraffle, Jetstrap) and one of which I use daily (Balsamiq) and a few I’d really like to use (Antetype, Briefs) and taken every utility for a test drive on the list.
I’ve tried to include every utility I could find that was worth mentioning. A few of the tools fall into multiple categories, and two are on the list are rapid prototyping utilities (Jetstrap and Easel.io).
I’ve included the app type, price and the clients that each app boasts (and if they include any actual endorsements).
If I’m missing any key mockup / wireframing utilities, please let me know.
Antetype
Antetype UI designer is a brand new, ground-breaking design application that supports user-interface designers at every step of their work. Design beautiful interfaces, invent new widgets, style them, and put it all together in an interactive prototype!
Price: $189.00
App Type: Desktop (OS X only)
Notable Clients/Endorsements: Brendan Donohoe, Design Lead at twitter, Ben Dansby, UX Designer at LOYAL3 (includes quotes)
Personal Take: Antetype is unusual as its designed for prototyping websites, apps and even manufacturing projects. Its one of the few prototyping apps that boasts responsive wireframes, specifically designed for UI Designers.
Serious projects call for serious tools. It sports smart guides, widget creation, stylizing, collaboration tools and more. It also exports to the web as interactive presentations.
Don’t take my word on it… Review
Spendy and powerful.
Balsamiq
Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting. Product managers, designers, developers, and even clients can now work together in the same tool to quickly iterate over wireframes, before writing code.
Price: $79
App Type: Desktop
Notable Clients/Endorsements: Apple, Google, Cisco, IBM, Adobe…
Personal Take: I’ve found Balsamiq exceptionally easy to use. Its fast and quick, and allows for interactive wireframes. However it could really use responsive wireframes.
That said, Balsamiq is one of the best deals as there’s no subscription, and great for client communication. The “hand drawn” styled mock ups might be garish to some designers but it communicates to non-design savvy the nature of the mockup as a “sketch”. Balsamiq smartly forces you to focus on layouts and functionality rather than pixels and colors.
Highly recommended.
Briefs
Professional Prototypes
Powerful Mockups Lifeless mockups don’t tell the entire story, but you don’t have time to build a prototype. We’ve been there, too. MartianCraft’s clients are some of the most demanding companies in the world. Your clients need a clear picture, so give them something to touch.
Create a brief and you can hand your designs to people in a way they can play with. You can quickly incorporate their feedback and create new iterations quickly for them to retest. Before you know it, you’ve cut months of back and forth from your schedule without spending a dime on
One container for all of your mockups.
There’s iPhone and iPad. But there’s also the taller screen on the iPhone 5. Who wants to deal with three sets of mockups? With Briefs you can package all of these mockups into one convenient file, with a different timeline for each device. Simpler delivery and easier version control. And if you have an iPad, you can use one device to show off all your mockups.development.
Price: $199
App Type: Desktop (Mac Only) + Free iOS viewer
Notable Clients/Endorsements: John Gruber of daringfireball.com
Personal Take: Absolutely gorgeous and beautiful. If you’re looking to pitch an App, and you’re beyond wireframing, Briefs is the most high level prototyping app on the market, complete with animation support.
Its locked into the Apple-sphere but any client with an iOS device can easily view a “Brief” of an app with a free iOS app. At $199 it doesn’t come cheap but it gives a level of polish that designers and clients can both appreciate.
Draw.Io
“Any browser, no login, fully functional, free demonstration of mxGraph library.”
Price: Free
App Type: Browser-Based
Notable Clients/Endorsements: None boasted
Personal Take: Saves to Google Drive, but it is much more limited as many of the panels can’t be customized. Great for diagrams but it doesn’t allow interactive presentations. Mediocre at best for UI.
Omnigraffle it is not but it is free.
Easel.io
Designers
Designing in the browser is the only way to ensure pixel perfect execution. Use modern tools like web fonts and CSS3 but without the interruption of shifting back and forth between your text editor and your browser.
Bootstrap
Support Already use Bootstrap on your site? Use Easel to create markup that you can drop directly into your site. Don’t use Bootstrap yet? It’s a great collection of components to help get your next project started on the right foot.
Price: $15 Monthly (Personal) - $99 Monthly (Medium Team)
App Type: Browser Based + Chrome Extension
Notable Clients/Endorsements: Molly Clare Design Lecturer Stanford D-School, Jamie Wong CEO Vayable, Steven Streisguth Designer at Squareknot (includes quotes)
Personal Take: Easel.io is more robust than Jetstrap. It exports to HTML and the ability to move objects around works more naturally. That said, you’re still locked in the DOM structures of pages.
Easel.io is strictly for web based projects,. App designers look elsewhere, Rapid prototyping web developers, check it out.
GoMockingBird
“GoMockingBird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.”
Price: Subscription $9 Monthly (Personal - 2 project limit) to $85 Monthly for Unlimited Projects.
App Type: Browser-Based
Notable Clients/Endorsements: None Boasted
Personal Take: Its a quick wire-framing utility, modeled after Balsamiq but completely web based. The linking mechanism is pretty quick and fast although not as snappy as Balsamiq. The pricing seems a bit high, when compared to Jetstrap and Easel.io,
Jetstrap
Price: Free (One Project/Three Screens) - $8/mo (10 projects/unlimited screens)
App Type: Browser Based
Notable Clients/Endorsements: Wall of Twitter quotes (see website)
Personal Take: Despite using bootstrap, I never quite got into the flow of Jetstrap.
I found it incredibly quick for form building but beyond that, if you’ve memorized bootstrap syntax, you may not necessarily need this tool. That said, it generates 100% Bootstrap compatible HTML which means, anything in the app WYSIWYG in the truest sense.
I liked it, just not $8 a month liked it and the free version let me build a few forms fast. Jetstrap is worth checking out.
Keynotopia
Keynotopia transforms your favorite presentation application into the best rapid prototyping tool for creating mobile, web and desktop app mockups.
Keynotopia templates are the largest collections of user interface design components for wireframing, prototyping and testing app ideas in 30 minutes or less using Apple Keynote, Microsoft PowerPoint, or OpenOffice
Price: $45 for individual templates $97 for Bundles
App Type: Templates for Keynote, MS PowerPoint and OpenOpen
Notable Clients/Endorsements: Phillips, IBM, Ebay, Oracle, Intuit, AT&T… + Quotes from users
Personal Take: I’ve never been fond of presentation apps as protyping apps. It’s always struck me as a managerial type mockup, something that your boss’s boss would hand down the food chain.
That said, best is tool can be the one you know and Keynotopia has templates in plenty of styles, iOS, Bootstrap, Facebook etc. At $97 for a bundle of templates, I’d suggest looking at Balsamiq or Omnigraffle.
Justinmind
The best platform to define mobile and web apps with rich interactive wireframes
Not just Clicks but the Full Experience
Create the most interactive prototypes you could imagine with rich interactions, gestures and stunning effects. You can even prototype data-driven apps and form validations … without a single line of code!
Collaboration made Easy
Publish, share and get valuable feedback from users and customers and get all your team working on the same prototype at the same time. You won’t need to install any kind of server!
Price: $29 per user/month ($19 monthly, if paid yearly), $495 (forever), Free limited version
App Type: Desktop App + Cloud service
Notable Clients/Endorsements: Adobe, Google, Intuit, Dell, HP, Paypal… + Quotes from high profile clients (Audi, TASC etc)
Personal Take: Justinmind is a crossover from simple wireframing to full mockup/prototype. Its not quite as quick to churn out mockups as Balsamiq and has a much higher degree of focus on UI interaction (icons for gestures and ability to insert notes into presentations).
Justinmind while usable for wireframes, it focused prototyping (turning PSDs to Interactive mockups ). Its a presentation suite that’s sure to wow clients or bosses. The easiest way to explain it is to check out the examples on the website.
pidoco.com
Pidoco is a web-based prototyping software for rapidly creating clickable wireframes and UI prototypes for web, mobile and enterprise applications. It’s easy to use with smart sharing and collaboration features, a convenient usability testing module and much more.
Price: $9.00 User/Month (25 prototypes), $29 per user/month (unlimited prototypes), $59 (unlimited prototypes + custom features), $7 + a month for mobile prototypes,
App Type: Browser Based
Notable Clients/Endorsements: Mozilla, T-Mobile, Sanofi, Zimory + Users quotes
Personal Take: Pidoco has a similar look and feel to Balsamiq but with more bells and whistles at the higher price tiers. It’s expensive but offers API integration and custom template creation.
Unlike many of the others on this list, it offers a suite of collaboration tools like a VoIP, Screensharing, and screen cast recordings for UI testing.
Pidoco is seriously business… and one of the most spendy suite on this list.
Protoshare
ProtoShare is an easy-to-use, collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive prototypes while working together in real-time. Start creating mockups, website wireframes and prototypes today.
Price: Per user: $29 / month (1 GB storage, no reviewers), $49 / month (2 GB storage 10 reviewers), $59 / month (5GB Storage, unlimited reviewers + Business only features),
App Type: Browser Based
Notable Clients/Endorsements: British Airways,, Sony, 3M, Proctor & Gamble, News Corp + High Level Client Quotes
Personal Take: Wireframing + Prototyping + Communications + ability customize your own HTML and JS. its a mix of wireframing and prototyping. UI elements include a lot of common elements, bootstrap, iOS. Android. All mockups are built in HTML meaning any code can be looted. Spendy but polished.
Protosketch
With Protosketch from UI Stencils, your sketches become real, interactive prototypes that help you tell the whole story behind your great idea.
SHARE YOUR IDEAS, QUICK AND EASY. Easily get feedback on your app idea from others by sharing your Protosketch over the web.
USE YOUR UI STENCILS SUITE OF TOOLS. Put your stencils and sketch pads to use. The UI Stencils products you already love work perfectly with Protosketch.
Price: $5 App (Stencils $9-$60)
App Type: iOS (and physical Stencils)
Notable Clients: User Quotes
Personal Take: Protosketch allows you to make interactive mockups from realworld sketches, using your iPhone and its camera.
Protosketch gets special merit as the only product on this list with a physical product component. The stencils/pads are the real star of the show, Protosketch is just the support cast member for UI stencils.
https://protosketch.uistencils.com/
MockFlow
Price: Free (4 pages) - $69 yearly (unlimited projects)
App Type: Browser
Notable Clients: None boasted
Personal Take; You can create interactive mockups, but the UI mockup is fairly clunky and… ugly. Mockflow lacks the integration with Bootstrap like JetStrap and Easel.io, or multiple UI widgets like Easel.io, Omnigraffle and Anteype.
While not as spendy as many of the solutions, Balsamiq matches it feature for feature and then some, is easier to use and only costs $10 more, and Protoshare, Jetstrap and Easel.io generate usable code.
Skip.
Omnigraffle
Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click. Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable.
Price: $99 or $199
App Type: Desktop (Mac Only)
Notable Clients: None boasted
Personal Take: OmniGraffle started primarily as a diagramming application but has grown to be quite a bit more. Personally, its not my first choice for wire-framing but I do love the diagramming abilities. Its the best flow chart app I’ve touched.
Omnigraffle is the only software that’s suitable for mapping ideas before you even start with a wireframe.
Omnigraffle is expensive and I’m not wild about using it for UI, its great for creating maps, flow charts etc fast. OmniGroup has put a lot of love and effort into this app over the years and should have a place in every product manager’s dock.
http://www.omnigroup.com/products/omnigraffle/
Closing
There isn’t a magic bullet for Wireframing and prototyping, however there’s a a good list of tools to fit different needs. Subscription services are the future as the cloud environment makes for collaboration opportunities but I’m a fan of the oldschool desktop apps.
If had to choose only one on this list, I’d pick Balsamiq. Its the most versitle, one of the least expensive and, most importantly the easiest to use. I’ve gotten a lot of milage out of it as I’m able to communicate designs FAST to clients. Want a layout change of an existing website? I can easily mock it up without getting distracted by design.
As a front end web developer, going too much beyond wireframes often makes me question of the viability of more in-depth prototypes for what I do but I recognize how useful a functioning prototype can be, especially for app development.
The prototyping app that excites me the most on this list is Briefs, although pidoco and justinmind are impressive as well.
Recommended readings:
Note, I don’t endorse necessarily all the views below (especially mockups = dead) but they are good food for thought if you’re debating forgoing mockups.