Quick and dirty wireframes
Posted in Usability on: Thursday, December 6, 2007 by Paul Boag
I am currently in the process of wireframing an internal project that we are working on at Headscape. It occurred to me that despite the fact that wireframes are a fundamental tool of web design, they are not something I have spoken about before.
What is a wireframe?
Fundamentally a wireframe is a tool for rapidly prototyping a website. They roughly approximate the layout, content and hierarchy of a web page as well as the relationship between pages. Effectively you are building a rough version of the site.
Wireframes don’t look attractive. They are not designed as such. Rather they give a sense of how things will be organised on your site. In many cases they lack colour and imagery, although there is no reason why they should. However, they do show visual hierarchy through layout, font size and shading.
What benefits do they provide?
So why produce a wireframe? Well there are a number of good reasons…
- They act as a reference point for the designer to work from, demonstrating the relative importance of various screen elements.
- They can be used to test with. This enables you to ensure users can navigate a site and find key content on a page.
- They help flush out the details of a site that are often missed. These include things like password recovery and error handling.
- They help to define interactive elements such as AJAX and Javascript in a way a static Photoshop mockup cannot.
- They help the client to visualise how the site will work.
- They identify navigational issues which need resolving.
How to create a wireframe
Once you have recognised the benefit of producing wireframes the next question becomes how exactly do you build them? The answer is largely dictated by two factors; the time available and the complexity of the website.
If you are really strapped for time then simply sketching out some key pages is better than nothing. Even these can be used in testing and shown to the client. However, a sketch does not show interactive elements or the relationship between pages.
If you have a little more time you could produce key pages in a tool like Omnigraffle or Visio. Better still is powerpoint which allows you to link multiple pages together, so creating a basic navigable site.
However, probably the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work.
Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality. The only time I do use this approach is when building a site on our content management system. In such situations it is as easy to rapidly produce pages in the cms as it is in Dreamweaver.
The key to wireframes is for them to be quick and disposable. Wireframes are the place for you to experiment and try out new ideas. They are the place for testing and adaptation, not for being overly precious.
If your site is a simple one then using sketches or a tool like Visio will probably be enough. However, if it is more complex with a lot of pages or interaction then consider using an HTML wireframe. In short use the right tool for the job!
6 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Something we all do that comes off as “just part of the process”- thanks for revisiting. As a freelancer, I am always trying to find efficient and effective ways to perform tasks like this- not my favorite part or really the fun part- but I hadn’t thought of using DW, what a quick way to do it.
Its very true, in this stage, the method is of zero importance. Getting a representative final product is the goal. I usually use Omnigraffle but I’ll fire up the old DW and give it a shot.
Wireframes – a great tool, thanks for the article!
I recently created my first set of wireframes for a small website, using PowerPoint. It only took an hour or so.
The wireframes really helped me give the clients an impression of how their website could work. We printed them out and referred to them constantly at our meeting, passing them round the table, scribbling on them and amending them in pencil.
I’m now working on the first draft of their website, building it with backgrounds in shades of grey to match the look of the wireframes. Later on we’ll have to tackle the issue of what the design should actually look like but at least we’ll know the functionality is right!
OmniGraffle will also allow you link to other canvases, files, URLs and even run scripts, just like PowerPoint.
Select an object, then use the Action panel to add a link. When you’re in presentation mode it will let you navigate your document like a web site.
You could even add a navigation bar on the master template and share that across your canvases. Is there nothing this program cannot do?! (Apart from run on Windows!)
Has anyone used Axure for prototyping and wireframes? It seems like a pretty nice tool.
There’s a 30 day trial available on their site:
http://www.axure.com/
I’ve used Axure a couple of times now, for prototyping mainly. It’s a good tool put it has it’s pitfalls too.
It’s great for creating examples of dynamic elements like sign up forms and in-line messages etc but printing a specification document to support your prototype is a complete no-no if you’re using these features, you just get 200+ pages of gobbledegook! But if you’re not bothered about having documentation you can print out it’s quite a powerful tool.
Overall it’s worth trying as it can cut down hours wireframing the traditional paper way.
Hi there. I wonder if you’d be interested in testing my little wireframing tool called Balsamiq Mockups? http://www.balsamiq.com/products/mockups – let me know and I’ll send you a license, I’d love your expert feedback on it!