This is a special appeal on behalf of Marcus Lillington. Marcus doesn't get out much and desperately wants to go to SXSW next year. This will only happen if our panel is selected and for that we need your vote. Give an aging popstar another chance. Vote Lillington!
Quick and dirty wireframes
Published on: 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!
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
Post by Chad Crowell on December 6, 2007 4:52 PM
Post by Jason king on December 9, 2007 10:31 PM
Post by Duncan on December 14, 2007 9:01 AM
Post by Rob on December 21, 2007 2:23 PM
Post by vicky on May 19, 2008 11:47 AM