Yesterday a client asked me to do an initial design for a fairly complex site, with the caveat “Don’t worry about functionality. Just show us what it will look like!” Which isn’t an unusual thing to hear early on in the web design process, but it’s always a bit of a disappointment. After all, function drives design, and should determine the choices we make in every step of the process. How do I start when my client doesn’t see the necessity of discussing function from the very beginning?
This sounds like a job for….sketchy wireframes
Boxes & Arrows recently posted a great article about sketchy wireframes, i.e. wireframes that are created digitally, but which look somewhat rough and hand-drawn. The unfinished look and feel helps clients understand that what they are seeing is high-level overview of architecture and strategy, rather than a design treatment, while the digital assets make it easier to revise and iterate than traditional paper sketches.
Clearly, my clients are very focused on design at this stage, but I need to be able to talk about functionality choices from the start. Sketchy wireframes can get that discussion started without leading us off into irrelevant details.
Why Wireframes Are Important
I wireframe every site that I design, though oftentimes only in rough sketches on paper or a whiteboard. Drawing out page elements helps in a number of ways:
- Nothing gets left out
It’s always frustrating to design a site you love, only to be asked later to come back and shoehorn in 4 new items that weren’t in the original plan. Wireframes help you and the client keep track of every link, button and callout that needs to be included. - Makes problem areas obvious
Once you start wireframing, it quickly becomes clear which areas of function and interaction haven’t been completely figured out. This often results in a longer wireframing process than planned, but it pays off in faster design and development down the road. - Gets clients on board
Some shops don’t like to show wireframes to clients, but if handled correctly (see above: sketchy wireframes) they can be a great way to finalize content choices and solve functionality problems early on, without time-consuming design revisions. And because you can make changes to wireframes quickly, you can update clients frequently and keep them engaged in the site’s progress.
Wireframing like a rock star
(video by Michael Leis)
Leave a reply