25+ of the best wireframing and prototyping tools, ever

You’re all about User Experience (UX) design. The terms wireframing and prototyping roll off your tongue with poise and you probably already have a fantastic workflow that helps you with rapid design iteration and concept testing. Like us however, you’re always curious about what’s out there, that special tool that might take your design process to the next level.

And, for those new to UX design, we think you’ll like this article quite a bit too. We dug deep and came up with what we consider to be some of the greatest tools out there. We also realise that there are a jaw dropping array of tools on the market and we might have missed a few gems. Please let us know about your favourites — we’d like to make this list as comprehensive as possible.

Before we get started, we’d like to salute all you UX people out there. You’re quite an enterprising bunch. Some of you follow a “pencils before pixels” approach with hand- or stencil-drawn mockups on paper solemnly preceding software-based wireframing — do check out UXPin, we think you might love it. Others opt to go digital first, but most layout concepts eventually end up as files on a hard drive somewhere.

As wireframing and prototyping are creative processes, there’s no real rule of thumb when it comes to choosing a method. Similarly, the software preferred for the task varies from person to person. All-purpose graphic software like Photoshop or Illustrator will do fine for some, especially when combined with UI stencils — check out these ones for Android, and these ones for iPhone, for example.

If UX is your life however, you’ve probably come to appreciate things like OS specific UI-elements and the workflow built into software tailored for the task. Although there’s a definite short-list of popular tools, the abundance of alternatives are hard to ignore, especially when they compete valiantly in terms of price and collaboration features.

One more formality before we get underway. If you’re unsure about how wireframing differs from prototyping here’s a simple explanation. Whereas wireframing is simply concerned with creating layout and design blueprints, prototyping is about creating basic, working models of sites or applications.

Right, let’s get going.

Balsamiq Mockups — Desktop: US$79 | Online: From US$12 per month

Try it out, you won’t be sorry. It’s probably not as an enterprise level tool as say, Omnigraffle or Axure RP, but ignoring it would be a mistake. Give Balsamiq a serious look for your wireframing needs, especially if you’re on a budget and looking for web and mobile development UI stencils. It has strong community support, and if quick-and-dirty is your thing, you’ll probably fall in love with it.

Check out Balsamiq’s Google Drive integration to supercharge your cloud collaboration.

Note, it’s Flash based, so your development platforms are limited.

OmniGraffle — Desktop: From US$99 | iOS: US$49.99

Available on Mac and iPad only and costing a hefty price, OmniGraffle isn’t for everyone, but it’s undoubtedly one of the most popular wireframing and prototyping tool available today. It has a range of free stencils, so whether you’re into desktop, mobile (iPhone, Android, Windows Phone, BlackBerry) or web development, Omnigraffle has you covered.

There’s a bit of a learning curve and it’s not available on the web, so if you’re looking for real-time collaboration, look around a bit.

Axure RP — Desktop: US$289

Really powerful, really expensive. Axure RP is as comprehensive as it gets when it comes to wireframing and prototyping. Collaboration features, online sharing, extensibility through widgets — think iPhone and Android stencils — it’s all here, including the learning-curve.

It’s available for Mac and PC,

Visio — Desktop: From US$120

Perhaps you think of us as unimaginative to include one of the world’s most widely used wireframing and prototyping tools on this list, but we aim to be comprehensive. If you know about Visio, move along now, nothing to see here.

If you’re still reading, may we present Visio, a staple for those working with the Redmond giant’s software packages. Templates, live wireframes with real-time data, online sharing, rule-based diagram validations and interactivity features. There’s a lot going on in this software package, and it can take some time to fully master. Drawing basic wireframes however, couldn’t be easier. If you have a copy lying around, give it a bash. Alternatively, keep looking for a better option.

This powerhouse tool is also extensible. Want iPhone stencils? No problem. You’re grinning, we can tell.

Available for PC only, Naturally.

Moqups — Online: Free

Moqups is a refreshing ocean breeze. It’s an HTML5-based, no hassle, hit-the-ground running approach to wireframing which has you playing around with UI elements from the very first moment you visit the site. It’s intentionally basic — very basic — but if basic is all you need, you’ll find Moqups compelling, especially if you consider that it has rudimentary iPhone and iPad templates to play around with.

You can export your designs as PDFs or PNGs and if you combine them with tools like InVision, FieldTest or ClickDummy that allow you to add hotspot links to static designs, you’re looking at a completely free prototyping solution.

Antetype — Desktop: From US$99

One of the most beautiful desktop application on this list. Antetype is a Mac-only, and allows for fine-grained wireframing and prototyping. It has clever tricks like the ability to show you what your wireframe will look like in different desktop OS environments. It has built-in widgets that support iOS and Android and it can be extended with your own custom elements.

There’s also an Antetype iOS viewer available to show off your work on iDevices.

Hey if it’s good enough for Pixar employees, it probably deserves to be on this list.

Protoshare — Online: From US$29 per month

Protoshare gives off a “pro” vibe and doesn’t shy away from billing itself as an “enterprise prototype solution”. It has extensive collaboration features allowing for fancy real-time discussion around interactive wireframes. It has a nice drag-and-drop interface with UI elements for the web and mobile platforms (iOS and Android), but you can also create JS,CSS and HTML elements which allows you to custom code aspects of your wireframes.

It boasts clients like BMG and British Airways.

proto.io — Online: Free and paid from US$24 per month

proto.io is all about high-fidelity wireframing and prototyping for iOS. It’s all sorts of gorgeous. From the actual wireframing UI — based in HTML, CSS and jQuery — right down to the user experience. As a party trick, when you’re done wireframing your apps, you can test them out on your actual iDevice.

Sadly, no other mobile platforms are supported yet.

AppCooker — iOS: US$39.99

With AppCooker you can wireframe complete iOS apps on your iPad. AppCooker includes a full-powered wireframing tool, app icon designer, iOS pricing tool and a notebook for jotting down your ideas. There’s also an App Store assistant which helps you with concocting the right name, keywords and description combination for your app.

When you’re done, show your work off on a TV with mirroring.

AppCooker is another step to legitimising the post-PC era, but is it a novelty?

HotGloo — Online: Free and paid from US$14 per month

Some services just have a way of drawing you in. HotGloo doesn’t offer the most extensive set of UI elements — the company is still working on elements for iPhone — but its beautifully designed wireframing interface and collaboration features make creating website wireframes a joy.

The application is written in Flash so keep that in mind, but you can get started for free, so there’s not much to complain about here.

Fluid UI Online: Free and paid from US$29 per month

Fluid is all about mobile OS prototyping and, it’s amazing. It has up to date mobile elements for iOS, Android and Windows Phone 8. Prototyping is a cinch — Fluid UI allows simple linking of pages through a slick GUI.

It’s hard to find something negative to say. It’s HTML5 and you can even use it offline as a Chrome app. Desktop stencils would be nice.

MockFlow — Online and desktop: Free and paid from US$69 per year

MockFlow is deceptively understated. It has so much to offer. Like Balsamiq, it offers online / offline (Adobe Air) hybrid wireframing. It has collaboration features, a large library of UI elements, and is extensible thanks to the “MockStore” which allows you to add new UI elements — think Windows Phone for example — as you go along.

There’s also a whiteboard tool for sketching out designs by hand, plenty of export options and mobile compatibility — your designs can easily be viewed on smartphones and tablets.

It’s Flash-based.

iPhoneMockup — Online: Free

This is iPhone wireframing at its most basic and that’s why it’s great. Choose from stencil or sketch style UI elements and start wireframing immediately.

Pencil — Online and desktop: Free

Pencil can run as a standalone Windows, Mac and Linux application, or a Firefox plugin. It’s a great open source wireframing tool for web and mobile design, and backed by Mozilla. It doesn’t support Android mobile stencils right off the bat, so be sure to pick up the Android 4.0 UI element pack.

Pencil has the ability to link pages so it can also be used for prototyping.

Justinmind — Desktop: Free and paid from US$495

Justinmind definitely deserves a close look. It’s a desktop based wireframing and prototyping application with online collaboration features thanks to a feature called Userote, an online service which allows you to share, test and review your wireframes and prototypes with colleagues or users.

If you’re looking for more than just web and desktop wireframing, free UI element packs called “widgets” are available for all the major mobile operating systems.

There’s some great additional tools on offer like heat maps, as well as gesture and form validation support, but they, along with Usernote, are only available in the Pro version, which is rather expensive.

Justinmind is an excellent mix of native desktop power computing, with online collaboration features, but it will cost you.

Wirify Pro — Online: Free and paid from US$6 per wireframe

And now, for something completely different. Load up a website, click the Wirify bookmarklet, and watch as it clearly reveals the page’s layout. The Pro version allows you to export the layout to Omnigraffle, Balsamiq, or Visio for further editing.

It’s a cool tool, but it does come off feeling a little bit like a party trick. The free version will allow you to generate wireframes, but it doesn’t allow you to export them, which seems like most important part.

Exporting costs US$6 per wireframe, which appears steep, but considering that it’s probably something that you might only use once in a while for design inspiration, six bucks might not seem that expensive to you.

FlairBuilder — Desktop: From US$99

FlairBuilder looks good and boasts an easy learning curve. It has over 70 custom UI elements for desktop, web and mobile and can be extended by downloading more stencils. We liked that FlairBuilder allows you to share custom wireframing elements with colleagues. When you’re done wireframing, you can post your designs online for feedback.

It’s an Adobe Air app so it works on Windows, Mac and Linux.

As there is no free, basic version you’ll have to decide within 15 days whether or not it’s wireframing and prototyping tool of your dreams.

Pidoco — Online: From €7.00 per month

Collaboration and usability tests are key features of Pidoco, a handsome, web-based prototyping and wireframing tool for designing web and iOS applications.

As a bonus, you can simulate and test interactive prototypes directly on the iPad or iPhone, without any downloads or installation, using the Pidoco App.

We highly recommend checking Pidoco out. It’s HTML5 too. Pity there’s no free version, just a trial.

Jumpchart — Online: Free and paid from US$5 per month

Jumpchart’s strength lies in helping you organise the structure of your website. It helps you sort out what content belongs on which pages, and helps you visualise how they will link together with basic working prototypes and gorgeous looking sitemaps.

You can also upload picture mockups to Jumpchart which allows you to received feedback from colleagues and track revisions.

Content added to your structure pages are added in HTML, so when it’s time to export, some of the front-end work has already been done. You can also export in WordPress WXR format to hit the ground running.

It’s a gorgeous service, a bit basic, but it wasn’t intended to be a mockup creator.

Lucidchart — Online: Free and paid from US$9.95 per month

Lucidchart looks pretty damn brilliant, but the free version won’t actually allow you to do any wireframing — you’re restricted to flowcharts. It has web and iOS UI elements and the mockup GUI looks fantastic (it’s not Flash based), but you’ll have to pay before you can get an impression of how it works for wireframing.

It has (real-time) team collaboration through group chat, revision history and fancy embeddable diagrams.

UXPin — Online: Paid from US$7

If UXPin was to be evaluated on the face of its collaboration features alone, we would urge you to check it out. But, it goes beyond that with a really good wireframing and prototyping editor, plenty of generic, web and mobile (iOS and Android) UI stencils, as well as versioning controls.

As its trump card UXPin touts itself as the only app that can convert paper prototypes into digital wireframes. It’s a bit of a novelty really, but UXPin sells notepads with UI elements that you physically arrange into the layout you want. When you’re done, you take a picture of your design and send to UXpin, which then converts it into digital components. The notepad costs US29.99, though.

We highly recommend checking this one out. Apparently it’s used by folks over at companies like Google, Sony and IBM.

Cacoo — Online: Free and paid from US$4.95

Don’t the let the cute cartoon graphics fool you into thinking Cacoo is not a serious wireframing tool. It has extensive UI element libraries including stencils for iOS and Android, powerful real-time collaboration features and can be extended thanks to plenty of additional components available from the Cacoo online store.

It’s just a wireframing tool though. If you’re looking for something that does prototyping, Cacoo is not it, and, it’s Flash based.

Creately — Online: Free and paid from US$5

Creately feels very basic, but worth a look if you’re not looking for something with prototyping features. It has (real-time) team collaboration through chat and does fancy “smart diagramming” — objects suggest connectors and draws as you type and adds data to your diagrams.

You can start of free, but note that it’s Flash based.

Creately has its fans at big name companies such as Amazon.com, NASA, Lenovo and Dow Jones to name a few.

Lovely Charts — Desktop: €59 | Online: €29/Year | iPad €3.99

Lovely Charts is a Flash-based online, Adobe Air-based desktop, and iPad-based wireframing tool. The desktop and online versions of the app are pretty basic, with no mobile specific stencils, collaboration or prototyping features, but you should definitely check out the iPad app. It probably has the most intuitive diagramming interface of all the apps on this list — we’re not so sure how great it is for wireframing though.

Gliffy — Online: Free

Gliffy isn’t the strongest tool on this list, but it’s free and if you’re not looking for mobile design wireframing, its basic website UI elements might appeal to you. It’s more useful as a general purpose diagramming tool — I’ve used it for its UML and ER diagramming capabilities in the past.

Gliffy makes money by charging for its JIRA, Confluence and Jive plugins — allowing diagramming inside these applications.

It boasts high-profile clients such as NASA, Dell, Harvard Business, Xerox and Adobe.

It’s Flash based.

WireframeSketcher — Desktop: From US$99

Not the cheapest entry on this list, WireframeSketcher is a desktop only wireframing and prototyping tool for Mac, Windows and Linux.

You get a lot of bang for your buck though. Easily mockup your website, desktop, Android and iPhone applications with add-on stencils from the Mockups Gallery. You can also create your own elements using vector images.

It has collaboration features such as version control, projects, the ability to show off your work in full-screen mode and sharable click-through PDFs.

If you’re a Java developer you might like the fact that it can function as an Eclipse plugin.

Used by people in companies diverse such as eBay, Subaru and Siemens.