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
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
Picture: tools of the trade by Muffet
An opensource Firefox plugin with built-in stencils, multi-page documents and background pages.
- Platform: Firefox Addon / Linux & Windows
- Price: Free
Nice wireframe tool focused on interactivity.
- Platform: Cross platform via Adobe AIR
- Price: $99 outright purchase, or $24 per month
Collaborative tool for creating UML, process flows and wireframes.
- Plaform: Flash enabled browsers
- Price: $5 – $10 per month
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
Popular tool for creating wireframes with a nice hand sketched aesthetic.
- Platform: Cross platform desktop
- Price: $79
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
Super simple wireframing tool with low difficulty curve.
- Platform: Browser
- Price: Free
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
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)
Great option if you’re a developer already using eclipse and want to dig into some wireframing.
- Platform: Eclipse
- Price: $75 (Volume discounts available)
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.
Ready to get your feet wet in Interaction Design? In this article we touch briefly on all aspects of Interaction Design: the deliverables, guiding principles, noted designers, their tools and more. Even if you're an interaction designer yourself, give the article a read and share your thoughts.