skip to content rich footer

stevenclark.com.au

subscibe to the StevenClark.com.au rss feed

Design Technique 6: Wireframes

The problem with jumping in without planning a web design, even a very small web design, is the further you go along the development process the more expensive it becomes in time and resources to fix the problems. This is a fundamental truth of all software engineering - it is much much MUCH cheaper to scribble out an idea on a pad page than it is to fix the issue after you’ve released a software product. Web development isn’t any different. A common design technique called wireframes might be something you find useful when designing your site.

Wireframes come in a number of flavours depending on your personal taste and may vary depending on individual projects. Some will prefer to use XHTML wireframes - they are like HTML storyboards which add the positioning of elements and layout of the design. Some wireframes will be developed in software like Illustrator or Word or Portable Document Format (PDF).

I like to view wireframes at the paper and pen level where I can discuss, scribble and throw away bad ideas before committing the result to either software or an XHTML wireframe.

What you can do to wireframe your site is to very early sit down with your client and get their perspective - it usually helps to include them in your process so they’re on the same wavelength. They might suggest a banner at the top and a right navigation bar on a fixed width page layout for greater than a thousand pixel resolution. You can quickly scribble that idea into a picture and show why that is such a bad idea. Alternatively you can create a series of these page outline diagrams, which is what wireframes really are, and write notes about profiles of intended users for the page and where the page navigation will link.

This is a high level look at the design without thinking about colour, font or distracting visual design elements. Keeping it simple is key to the use of wireframes so don’t use too much detail. Sometimes when you share them among the team they get annotated with all sorts of memos and ideas but I’d probably look at them as evolving into richer artefacts by that stage.

The idea of wireframing is broad and your use of them might be different depending on the project. Different designers use their own methodologies as well so be prepared to discover better ways of doing them. In the big picture our work as web designers is to create a solution for our client’s business problem. Design techniques like wireframes give us an ability to develop more effective solutions than simply jumping in with arbitrary design decisions.

You should find that creating web sites with some sort of process will more times than not save you time and your client money, too.

Articles are licenced under a Creative Commons Licence but copyright of images is retained by © Steven Clark 2007 - 2008

3 Responses to “Design Technique 6: Wireframes”

  1. Matt Robin

    This process sometimes comes under the name ‘Prototyping’ as well.

    I’ve got some links to good articles on this - would you like them? Is it helpful if I added them here in another comment, or mailed them to you Steven?

  2. steven

    Yes Matt, prototyping is a broader term which I’m going to go into down the track… its more a generic term for anything from providing a site using pieces of paper (person behind passes the relevant sheet /screen depending on button push selection) to high fidelity prototypes which might be made in software and appear like the real thing but limited functionality.

    But its a good point you make. A number of the techniques I mention will in some way be prototyping techniques - wireframes, html storyboards, paper based prototypes, mockups.

    Wireframes are really useful when you want to talk to the site owner / client though. Really useful because they can’t say “but I don’t like that font” and “can’t we have the navigation on the right in HOT PINK like a site I saw last week”? Another trick is even when you go to the next step keep anything on the page in greyscale because colours can be a major distraction not only to how you move forward but also to the client who will ring at 11pm on Friday night and demand to know why that border around each paragraph is RED?! God forbid one would work on the prototype and incrementally improve it wot!

    K gotta run. Glad you noticed the series (there’s a lot of cross overs with these techniques and people develop hybrids that work with their process in many cases). Cheers mate.

  3. » Blog Archive » Design Technique 7: Prototypes - StevenClark.com.au

    [...] RSS « Design Technique 6: Wireframes [...]

skip to top of page

Currently Reading

Andy Clarke's Transcending CSS: the fine art of web design has been sitting on my bookshelf for several months and I've finally made the time to read it from end to end. My favourite thing about this book from the outset is that it's a designer's book, rather than a technician's manual, for web designers. The artwork and direction in Transcending CSS is enhanced by the attention to detail in the feel and texture of the book itself, the size of it's pages and the feel of the cover in your hands. It's definately a book that affords the act of being read. Looking forward to it.