stevenclark.com.au

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.

This entry was posted on Saturday, August 11th, 2007 at 3:55 am and is filed under design, web standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.