Wireframing: Tips, Tools, and Techniques (Pt 1)

Alt Desc

Wireframing isn’t just a pen and paper process any more.
picture: Chocolate Tools by Janne M

Wireframes are an indispensable part of the website creation process. They provide a quick and easy means of communicating aspects of the site, ranging from information architecture to page layout, and they allow everyone involved to consider and, hopefully, agree upon all the fundamental aspects of the design.

EDITOR’S NOTE: This article is part 1 in a 2-part series about wireframing. Be sure to check out part 2 this coming Thursday!

A consensus has arisen over the importance of wireframes during the design process. However, no clear consensus has developed about the best tools or techniques to use when creating wireframes. A plethora of different ways have cropped up. So many that it’s hard to know the best way to go about it. A definitive answer to this seems some way off, and so it could be a while before any one tool becomes the standard.

In the these two blog posts, I’m going to look at some of the relevant tools, techniques and tips available. In this post I’ll give an overview of the tools, while the following will cover some tips and techniques to smooth your wireframing process.

Tools

Alt Desc

picture: Chocolate Tools by Janne M

Fireworks

When Adobe acquired Macromedia a few years ago, no one was sure how Photoshop and Fireworks could be reconciled within the same family of products. There was so much overlap between them that it seemed a case of either/or. Quickly, however, it became clear that Adobe was going to push Fireworks in the direction of wireframing and, as a result, the two would complement each other nicely. Adobe intends designers to create rapid, clickable, HTML wireframes within Fireworks and then—once tested on users and approved by the client—move onto creating hi-fi imagery within Photoshop.

And as it turns out, Fireworks is a really great tool for creating wireframes. Through a combination of layers, pages, behaviours, symbols, and an inbuilt library of standard web design elements, it’s possible to quickly create wireframes that can be exported as clickable HTML. The HTML is not the type you’d necessarily want to use on a live site, but it does the trick for a client demo.

The learning curve is moderate but once you’ve got your workflow down it’s possible to create wireframes that leverage common elements, enabling easy insertion and rapid updates across multiple pages. This is a godsend when trying to maintain and quickly refine a set of multipage wireframes.

To get a better insight into how this might work, Adobe have some nice Fireworks wireframe tutorials that are worth reviewing.

Google Drawing

This is a reasonably new option for wireframing. As with a lot of the Google tools, it’s a got a limited set of well worked out features. You can create free form vector shapes, edit fill colour and stroke, insert images, and select from a nice vector shape library. You can group objects, set order (z-index), and group select by click dragging. Basically, it’s akin to a really pared down version of Fireworks, but the lack of layers and ability to lock objects makes it a little fiddly. Despite this, Morten Just believes it beats Visio & Omnigraffle.

5 reasons Google Drawings beats Visio and Omnigraffle

  • It’s live. The entire team can work on the same document and see each other’s work instantly
  • The wireframes live in the cloud, no sending files around, no outdated documents
  • The risk of losing data is zero. It saves for every edit you make
  • It’s free
  • Most people already have a Google account, so no sign up required

Best of all, Morten offers up a number of templates / stencils within Google Docs to enable really rapid prototyping.

The work flow for this revolves around the idea that you access the templates provided by Morten, make a copy and then edit away. The working page area within Google Drawing is conceptually divided into two, the canvas and the gutter (the area outside of the canvas). Morten has created numerous handy stencil shapes (scroll bars, popup windows, close buttons, search boxes etc) which you copy from the gutter and then paste onto your canvas. It’s a little circuitous perhaps, but is still a really nice setup given the constraints of Google’s fledgling drawing app.

While I prefer the workflow for Fireworks a little better, the work of Morten Just highlights a key benefit of the Google Docs platform: the ability to collaborate and share resources. As Google fleshes out their product a little more, and as people share resources, Google Drawing is likely to become a viable wireframing tool.

Best of the rest: other wireframing tools

Alt Desc

Picture: tools of the trade by Muffet

Pencil Project

An opensource Firefox plugin with built-in stencils, multi-page documents and background pages.

  • Platform: Firefox Addon / Linux & Windows
  • Price: Free

FlairBuilder

Nice wireframe tool focused on interactivity.

  • Platform: Cross platform via Adobe AIR
  • Price: $99 outright purchase, or $24 per month

Creately

Collaborative tool for creating UML, process flows and wireframes.

  • Plaform: Flash enabled browsers
  • Price: $5 – $10 per month

iPlotz

Creates clickable, navigable wireframes. Also good for collaboration and task management.

  • Platform: Flash enabled browsers and Desktop via Adobe Air
  • Price: Free limited function demo. $99 per year for single user online (volume discount available). $75 for desktop version

Balsamiq

Popular tool for creating wireframes with a nice hand sketched aesthetic.

  • Platform: Cross platform desktop
  • Price: $79

Mockingbird

Great web based tool currently in Beta. It’s completely free at the moment but I’d guess they’ll introduce some sort of premium version at some point.

  • Platform: Browser
  • Price: Free

Tall Tree Wireframe Tool

Super simple wireframing tool with low difficulty curve.

  • Platform: Browser
  • Price: Free

OmniGraffle

The go-to diagramming tool for the Mac. Not dissimilar to Visio in that it’s more than just a wireframing tool and is also great for flow charts, org charts etc. A new iPad version has recently been created and it opens up a whole world of touch screen diagramming loveliness.

  • Platform: Mac & iPad
  • Price: $99

Cacoo

Real time collaboration tool for creating sitemaps, UML, network charts, and wireframes. Produces diagrams that look very Web 2.0

  • Platform: Browser
  • Price: Free (Premium service being introduced in 2010)

WireframeSketcher

Great option if you’re a developer already using eclipse and want to dig into some wireframing.

  • Platform: Eclipse
  • Price: $75 (Volume discounts available)

Visio

High-end diagramming tool. Hefty in price, size and feature-set. Quite technical and probably overkill for wireframing in so far as it can do so much more. It’s a good program though and if you’re working in a .Net environment it really comes into its own.

  • Platform: Windows
  • Price: $250 – $1000

Each of these tools have their ups and downs, and their appropriateness is going to be dependent on your project and work flow. I tend to favor Fireworks and OmniGraffle, but your best bet is to find one that serves your needs and stick with it, since knowledge of a program will always outweigh feature sets when it comes to usefulness.

We’re going to continue the discussion on wireframes a little further within a subsequent post. In Part 2, we’ll examine a few different wireframing techniques and round things off with some tips.

About the Author

Neal McGann

Neal McGann is a User Experience producer specializing in conversion testing and usability. He has a B.S.C. in Applied Science, and an M.A. in Interactive Media from the Dublin Institute of Technology. Neal works for VKI Studios.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Dear god man, what about Axure?

  2. Chris Gilfoy November 2, 2010

    Would also highly recommend Axure – far more apt for large projects.

  3. Can’t wait ti part 2!

    I’d like to know how is your workflow, if you use OmniGraffle & Fireworks simultaneously, or if you choose the app according to the project type.

    Right now I’m using Mockflow (similar to Flairbuilder), but I’m considering switching to Fireworks.

  4. I see all your stuff LTR (Left-To-Right) aligned… aouts!

  5. You can see detail review and comparison of all wireframe and prototyping tools

    prototypingtool.com

  6. What about using MS Expression Blend for wireframing? Is that too much too soon? (Unless you’re specifically building for WPF/Silverlight, then it’s probably ideal, right?)

  7. Nice article, but at the same time this topic had been covered so many times that you could have easily skipped the best tools section. Still, can’t wait for the next part. Oh and I will give it a try to Google Drawing.

    PS: The link for “a number of templates / stencils within Google Docs” is not working, please check.

  8. You might want to have a look at http://www.antetype.com too. It’s still in Beta but free to try (just register to get the beta download link).

  9. That’s quite useful -thank you. I’ve always used Illustrator for wire-framing and never bothered figuring out what Fireworks were for. Now I know. :)

    • Well, Fireworks is OK for clickable protoypes, but to answer the question of ‘What is it for’, its purpose is webdesign.

  10. Nice article, I’ve not tried the Google suggestion, but I would add that not everyone has a Google account. And Oops! You forgot one of my favorite tools, good ‘ol fashioned paper and pencil (or napkin, if in a restaurant or pub). :-)

  11. Luis Catarino November 3, 2010

    Nice list of tools. I think wireframing is an important and key part to the success of any project.

    Another great tool to use is SketchFlow http://bit.ly/buwZbI+ from the MS crew (part of Expression Blend 4). SketchFlow allows for annotations to added to the wireframe and added into the project. Well worth a look and the cost.

  12. Luis Catarino November 3, 2010

    Apologies, correct link is http://bit.ly/buwZbI

  13. True Focus November 3, 2010

    Microsoft Sketchflow (part of Expression Blend) facilitates interactive feedback too…

  14. Oh jeeze, the Google Doc with wireframing templates is down. It’s not even that the link is wrong, the link in Morten’s original blog post no longer works. I’ll see if I can find another one.

  15. Nice article, although I agree with Swain0 and Chris that Axure is missing.

    We wrote an article on wireframing and prototyping for .Net Magazine not too long ago. If any of you are interested here’s a link: http://www.netmag.co.uk/zine/develop-tutorials/create-the-perfect-prototype

  16. Axure! It’s been my saving grace for really involved projects.

    I just used Google Drawing to help a client quickly visualize a homepage.

    Great tip :)

  17. Given that Omnigraffle is an industry standard I’m suprised it took such a backseat.

  18. Seriously, no Axure???? You just lost all credibility.

  19. I second the miss of HotGloo. It’s design and ergonomics is hard to beat, and by using some advanced technics you can create sweet interaction models, too.

    Although iPlotz is new to me, and is something to consider… I don’t like its aesthetics, but the toolset is pretty convincing.

Related Posts