In search of the ultimate wireframing tool

Monday, January 30th, 2012 at 19:13

Over the past year I’ve made a lot of wireframes. This post is about some tools I’ve used and my findings.

I realize I’m coming from a slightly odd perspective here: I know how to work fluently with the Adobe Creative Suite, as well as write HTML/CSS (and some basic JS) fluently, whereas most dedicated UX practitioners can’t do either.

Criteria

There are the things I find important in a wireframing tool:

Productivity: this is the #1 most important criteria: how productive does this tool make me? Does it have many shortcuts? It’s for this reason I don’t use any web-based software for wireframing. All of them have terrible shortcuts (bye bye Mockingbird and Mockflow!)

Handoff: if somebody else has to work on this wireframe, do they have an easy way to do it, what is the knowledge required? Your local project manager, client or dedicated UX practitioner might not be the Photoshop and CSS wizard you are and some projects require the wireframe to be editable by anyone. Some examples of easy-to-edit formats are Visio, Powerpoint and Google Docs drawings.

(It’s worth noting that if an app has a good “handoff score”, it probably doesn’t have a very good productivity score. E.g. a Google Docs drawing is great to hand off to someone with less specific tool skills, but sucks to be productive in)

Copy/paste ability: how easy is it to copy and paste text from the output file? Bonus points if the output file is the same file you need for the next “phase” (e.g. both wireframe and design are done in HTML and CSS).

As a testament to how important good copy/paste ability is: I once got a 10-page wireframe for a pretty well known Belgian usability expert that was an uneditable JPG, and was not able to get the source, so I ended up typing all of the text again. This happens all the time in business, and no, it’s not funny.)

Prettiness: I like to deliver a pretty product. Even if it’s a wireframe, I want it to be neat and clean. It should look like some thorough thinking went in it, not like someone slapped it together in 5 minutes (this is because, actually, some thorough thinking goes in my wireframes). Some software (e.g. Mockflow) makes it impossible to deliver a pretty products since their defaults are so bad (see: Powerpoint 2003).

Interactivity: how capable is the software of showing the interaction design in a good way? How easy is it (if possible) to make clickable wireframes?

Graphic tools: if the wireframing tool has vector drawing tools, that gives me a lot more freedom in drawing custom shapes. Using a tool that does not give you an easy way to draw any shape (e.g. HTML/CSS) is bound to lead you on to some very boxy designs.

Libraries: How many (good) libraries are available for this tool? Some tools like OmniGraffle and Axure have a lot of readily available templates and stencils (see: Graffletopia and Axure Widget Libraries page)

The wireframing tools I use:

HTML and CSS aided by a little bit of JS and PHP

  • Great for websites obviously; gets rid of a lot of “double work”
  • Very productive, can easily require a file with PHP, change it, and the change will be applied everywhere
  • Obviously links make it very easy to create a clickable wireframe
  • Not very pretty: hard to do anything custom: bound to lead to boxy designs (you can fix this in the design phase but for me the wireframing phase is very much an idea phase too)
  • Handoff: sucks, few people deciding over wireframes are fluent with HTML/CSS
  • Easy to share: just send over a URL
  • Good for: big websites, web apps, stuff with a lot of text, stuff with common interactivity (modal boxes, tooltips hovers)
  • Bad for: projects with a lot of custom shapes; projects with a lot of custom interactivity; projects where it’s really clear what you’re going to build

OmniGraffle/OmniGraffle Pro

  • Works best for anything with a “special” interface: e.g. wireframing for something like a GPS. The iPhone/iPad stencils from zurb are great.
  • There’s a very easy way to draw arrows, so good to explain a lot of custom flows
  • Performance is OK, gets bad sometimes with a really big wireframe
  • Handoff is bad, nobobody seems to use this software, files are in proprietary .graffle format, you export to PDF to show to client
  • I haven’t tried the Pro version yet.
  • Good for: custom interfaces, native app interfaces, custom flows
  • Bad for: websites, anything with a lot of text, interactive prototypes

Photoshop

  • Big plus: the text you use for wireframing is already in the document when starting to design
  • Warning: requires solid shortcut knowledge to be productive
  • Easy to get lost in the tiny details when they’re not important while wireframing
  • Harder to manage multiple documents than illustrator. When you have to make a global change you can go and apply it a lot of documents
  • Harder to share multiple pages: you have to make a separate screenshot of every file
  • Good for: small websites, promotional websites, simple projects (1 pagers)
  • Bad for: anything bigger than a few files

Illustrator

  • Used Illustrator to wireframe for the first time this week, works pretty well
  • Since it’s a vector tool, easy to build a library of shapes and widgets
  • The artboards are great for getting a good overview of what you’re doing
  • Big minus: relatively unstable and crashes often with large documents
  • Warning: requires solid shortcut knowledge to be productive
  • Love that I can just open the pen tool and draw what I want, I think this will lead to more original design solutions
  • Good for: most wireframes really, too bad it’s so unstable with large documents

The wireframing tools I don’t use:

Aside from the web-based tools, here’s some wireframing software I don’t use, and the reasons why:

Axure RP

  • Expensive ($589 + $149 yearly) (yes, Photoshop is also expensive, I already own it though)
  • I couldn’t find any good (i.e. not ugly looking and has extensive amount of relevant widgets) widget libraries out there…: guess you have to build your own
  • Obviously a Java app: performance blows. Creating a new document greets you with 10+ seconds of beachballing. Ugh.
  • The standard output is extremely ugly.
  • Some positives though: you can employ some interactivity to your wireframes, and I bet it’s good for large projects with a lot of repetition (i.e. websites with tons of repeating functionality)
  • The prototype output nets you files that are hard to copy/paste text from (because of all the absolute positioning involved). (To be fair this depends on who made the file and how clean he/she worked).

Balsamiq mockups

  • The sketchy feel doesn’t do it for me
  • Also, Adobe AIR based, found it slow to work with, might give it another chance to see what they’ve been up to

My conclusion

The answer to the ultimate wireframing tool question is a bit disappointing: “it depends”. There is no ideal wireframing tool, most tools suck, and some tools are better for some jobs than others.

17 comments to “In search of the ultimate wireframing tool”

  • Roel Van Gils says:

    Great writeup. And yes, of course it depends. As with everything else in life ;)

    I’ve been using http://itunes.apple.com/be/app/swordsoft-layout/id438034858?mt=12 lately. It looks and feels a lot like Balsamiq, but it’s cheaper and faster (it’s not Air based).

  • If I may make 2 suggestions:

    1. Fireworks has symbols and sets for most interface elements. Some useful links are here: http://speckyboy.com/2011/11/07/wireframing-prototyping-with-adobe-fireworks-resources-and-tutorials/

    2. check out this http://keynotekungfu.com/ which is a set to templates for Apple’s keynote.
    I myself prefer sketching on paper (with a pencil) for the initial stages, then go straight into html/css, things like Bootstrap or Zurb Foundation can speed this up immensely. Nice writeup!

  • Why not give Fireworks a try? I know you don’t like Fireworks, but it does exactly what you describe. You can export your Fireworks project to separate image files, a PDF doc, clickable HTML files,… You can easily cut & paste text from it. It is fairly easy for non-Fireworks people to edit stuff, it’s reasonably priced, great shortcuts,… And a big plus, you don’t have to switch to Photoshop once you want to start visual design. I’ve converted many Photoshop fans to Fireworks over the years, but I don’t seem to be able to convince you ;)

  • I’ve never thought about FW as a wireframing tool, but then again I use PS for wireframing sometimes >.<.

    It seems to do a lot of what I need. I never owned FW, this is why I never really tried it. I’m sure there’s a 30 day trial somewhere… will give it a shot on my next project!

  • Welcome to the world of Fireworks! Also keep an eye on http://www.extendingfireworks.com, it just launched today. Especially http://www.specctr.com seems very promising and time-saving.

  • Excellent article. Great stuff in the comments too. http://keynotekungfu.com looks very interesting, shall give it a try.

  • Nice overview, though I don’t agree with your reasons to write off Axure RP.

    • Expensive: it’s a time saver. Get some experience with it and it pays itself back in a jiffy.
    • Performance blows? Java app? Not on my laptop (Macbook Pro mid 2010 – i5 2,4GHz – 4GB)
    • Standard output is extremely ugly: Can easily be changed. The standard output of, let’s say, Illustrator is an empty page. You decide what the output looks like!

    The other arguments totally depend on how you use it. It also took me a few tryouts until I was convinced. But for prototyping (slightly different than wireframing), there’s no better tool.
    Don’t let it mislead you. It’s very easy to start using it but it takes some time to get very productive with Axure.

  • @Bram I expected this disagreement :) maybe if I have done a large wireframe in it on a faster computer I will become a convert, but for now I don’t like Axure. Thanks for the comment!

  • I have used Pencil (plugin for Firefox) a few times for quick wireframing. Did the job for me to get the story across. Quite like the ability to create my own library of reusable bits and bobs.
    http://pencil.evolus.vn/en-US/Home.aspx

  • Nice overview. Except for Balsamiq I’ve used all the tools you’ve mentioned and have used most of them for projects.
    I think it really depends on the context for each project, the level of fidelity required etc.
    I also think you should give Axure another try because it’s really useful and time-saving. Performance somewhat blows indeed but the Mac version seems to do better than on Windows. Been using it for a few months now and really love it.

  • Hi Johan, You might want to try Keynotopia.com. It offers wireframe + high fidelity (pixel perfect) libraries for Apple Keynote (our favorite tool) and PowerPoint (one of your current favorite tools). The wireframes do not look sketchy like Balsamiq and you can turn them into high fidelity (pretty) interactive prototypes with just a few clicks. No need to know how to code to make them interactive and no need to be a pro designer either (+ shortcuts enabled through the tools). There are more and more UI libraries with every update (lifetime free) but so far are already very comprehensive. You can view templates and reviews at Keynotopia.com and let me know if you have questions :)

  • Depending on the purpose of the wireframes and the fidelity that is required I tend to switch between paper/html and omnigraffle.
    If collaboration and feedback is important you could take a look at keynote/iwork.com or something like invisionapp.
    Btw, the year in your website’s footer needs a +1.

  • @Ilias re: year – oops, what a n00b mistake. Fixed it so it gets updated automatically ;)

  • Nice writeup. You might also want to try a personal favourite: InDesign :). And I’m not just saying that because of the Upstatement post about Boston Globe. It really is good for wireframing!

  • I tested a lot of them too, ended up using Fireworks.
    It has almost all things needed for websites (master pages, 9-slice scaling,…) and there are a lot of nice wireframe templates on the web.

  • The “pretty well known Belgian usability expert” will pay attention to make his wireframes more copy/paste friendly in the future.
    Point taken. Thanks. :-)

  • Pieter Van Waeyenberge says:

    Hello

    I agree with Bram: no lags on Axure here, plus you create/manage generic masters (design once!), you can make a highly advanced click model with cases (eg. for contingency scenario’s, etc …), you can annotate/document components, …

    So if the company pays, consider it :-)

    btw – Hello Bart :-)

    Cheers,
    Pieter.

Comments are closed: It's not possible anymore to comment to this post. After publication you can comment for 2 weeks. If you still want to comment personally, find my contact details at the contact page or send me an e-mail.