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.
CriteriaThere 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
- 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
- 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
- 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
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).
- 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
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.
