Wednesday, August 04, 2010
Why Wireframes Rock
If you are a designer and are like me, you’ve been going directly to the Photoshop “drawing board” as square one for designing a website. You may have done the obligatory napkin sketch, but nothing serious when it comes to planning out the architecture of the site. After all, you’re on a tight schedule and you need to get this thing done, like yesterday. And then, once you have a steller design concept or two, you show your client what you’ve done.
And then, once you have a steller design concept or two, you show your client what you’ve done. They are ecstatic to see pretty pictures and start getting pumped about how this new website is going to bury the old one alive and bring them loads of business.
So you say “hooray!” and buckle down to start getting the thing coded. Here’s where all the real design questions start arising - the questions you should have answered before you even set eyes on Photoshop - the questions that have to do with information design, not artistic design; but, let’s be realistic - no one with creative sensibilities enjoys drawing the outlines half as much as they enjoy coloring them in.
I’ve come to the conclusion, however, that we designers need to do ourselves a huge favor. That favor is called “wireframing”. It is what we think of as the boring, non-creative drudgery that is often referred to as building prototypes, mockups, etc. Do you read instructions when putting together a piece of furniture? Do you lay out all of the pieces and gain understanding of which piece goes where before building? Do you make sure all the materials are there so you’re not stuck in te middle of the project only to discover that you can’t finish because something fundamental is missing? Neither do I. But if I applied this kind of discipline toward building a website, I might actually enjoy the project. Things might actually go smoothly. I might actually smile occasionally during the development phase.
Many others discovered this need for wireframing long ago and are using tools that make it easy—and even kind of fun. If you are in the process of becoming a mockup convert, here are some tools we’d recommend:
1. Pencil and paper - you can buy this at your local office suppy store. No, seriously, all you need is a pad of paper and a pencil with an eraser. Paper prototyping is quick, cheap and very flexible. It’s a great way to get started with your clients in conveying ideas and concpets. Here is more information on using low fidelity mockups to convey the bigger picture.
2. Balsamiq - software that costs $79 for a single-user, multi-computer license. Sketch-like, drag-and-drop elements give a “rough-draft” look and feel to your wireframes. The benefit here is you can avoid those “can you make it look more edgy” types of conversations that inevitably happen with clients who are shown overly detailed mockups early in the design phase.
3. MockFlow - available either as software or a web service at $59/year. More detailed prototyping allows you to refine your information flow and has clickable navigation elements.
There are a lot more tools out there. The purpose here is to get you focused on pouring your time and energy into the planning phase of website development. Do it, and you will find double rainbows in all of your skies.
(0) Comments •