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.
August 11th, 2007 at 8:49 am
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?
August 11th, 2007 at 11:45 am
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.
August 11th, 2007 at 12:58 pm
[...] RSS « Design Technique 6: Wireframes [...]