A few years ago there were only a handful of wireframing tools available, which I found either too cumbersome or too expensive to bother with.
Nowadays it seems that a new app for creating mockups is launched every week. Some of them are excellent, and a welcome addition to the UX toolkit.
Many user experience classicists still prefer a pen and paper, and that’s always a smart place to start. I’m slightly odd in that I produce most of my wireframes using Microsoft Excel (well, those columns and rows do make for a nice grid).
These new tools really come into their own when you want to bring other people into the picture, as many of them allow for collaboration.
Anyhow, do check them out, and by all means point at some others in the comments section below.
Wireframe.cc
A minimal online tool that provides allows you to rapidly mock up page layouts, and which requires no registration to use it, or to save your work. You can choose from mobile and desktop templates.
Moqups
An impressively powerful HTML5 app with plenty of common web elements that you can make use of when designing your pages. Easy to use, with desktop, mobile and tablet templates.
FlairBuilder
FlairBuilder is a desktop app for creating interactive wireframes, which allows teams / clients to play with the prototypes. Includes more than 70 drag and drop components and widgets.
Fluid UI
A lovely tool with lots of features for creating mobile app prototypes. Provides a canvas to see the big picture, as well as the page-level detail. Dive straight in, no immediate registration required.
Google Drawings
Morten Just has made a bunch of stencils for Google Drawings, to help people use it for wireframing.
HotGloo
A paid-for tool (with a limited access free option) that should be of interest to UX professionals. Includes the usual drag and drop functionality, alongside a comprehensive library of user interface elements. It also allows you to show different content states (for example, to show what a logged in user would see vs a new visitor).
Wirify
This one flips wireframing on its head, by giving you the option to turn existing web pages into wireframes in just one click.
iPhone Mockup
Allows multiple users to work on wireframes for iPhone apps. Changes are rendered in real-time.
iMockups
An iPad app for wireframing “on the go”.
ASCII Flow
You want lo-fi? You got it…
Or alternatively there's always this...
[Image credit @organised]
Reader comments (9)
2:20PM on 7th November 2012
I can recommend Balsamiq (http://www.balsamiq.com), probably far more feature rich and user friendly than any of the above. I've used it over the last 6 months and even during that time they've rolled out a significant number of upgrades and improvements.
3:33AM on 8th November 2012
Hey, you missed WireframeSketcher, another desktop wireframing tool: http://wireframesketcher.com
It lets you create wireframes using clean or sketchy styles; comes with lots of builtin controls and icons but can also be extended with custom controls; comes with stencils for mobile apps; screens can be linked to create interactive prototypes; results can be exported to PNG or clickable PDF and HTML. All graphics are vector based so that your results are always crisp and good looking.
Managing Director at User Vision
6:34AM on 8th November 2012
Hi Chris
Thanks for the summary of these. You're right, it seems every few weeks I hear about yet another good sounding wireframing / prototyping tool. Spoiled for choice now compared to when it was Omnigraffle, Visio and....pen and paper. Anyway someone has put together another good listing of these tools you might want to check out.
http://list.ly/list/1E-wireframe-apps-for-desktop-web-and-ipad
No doubt there will be another before the end of the year.
Ecommerce Director at King of Servers Ltd
8:58AM on 8th November 2012
Although not new, my prototyping tool of choice has to be Axure (http://www.axure.com/). I've been using it for years and have yet to see a more comprehensive wireframing and prototyping tool. One of it's greatest features is the ability to create pixel perfect prototypes simulating a finished, working site by taking a set of designs, carving them up and jigsawing together pages that appear fully functional, complete with all the interactive elements like dropdown menus, hover behaviours, form submissions etc.
Digital Strategist at CTI Digital
9:32AM on 8th November 2012
great list & I've used a few of those mentioned.. I guess like most things It's down to personal preference.. for me, pen & paper for low-fidelity wires & axure for high-fidelity prototypes. A nice post on fidelty here http://www.jamieclouting.co.uk/2012/07/prototyping-understanding-the-benefits-to-fidelity/
Director at Browser Media
10:15AM on 8th November 2012
Another vote for Axure for me. It is superb!
Online Service Manager at ARM
12:39PM on 8th November 2012
Yes, I am also a big fan of Axure. Particularly like the way you can autocreate a specification document for your website, direct from the prototype file. Saves lots of time once you have set the basic structure up. Very impressive!
Managing Director at Cranmore Digital Consulting Ltd
9:14AM on 9th November 2012
I use Cacoo, which is fine for relatively basic wireframes. Of course by the time I get to the point that I realise I need a couple of more complex wireframes, I have them all set up in Cacoo and can't face moving to another more sophisticated tool. And so the sorry tale continues.
But Chris's post has come at just the right time, I am about to start a new set of wireframes next week, I have only done one basic wireframe for that project so far, so now is the perfect time to leap into something new.
Also one of my New Year's resolutions (hey, remember those?) was to make more effort to use new tools - and I don't have long left to fulfil it.
Thanks Chris, Econsultancy to the rescue again.
7:25AM on 17th November 2012
That's very helpful and interesting.Great work!!! :)
Log in to post a comment