27 Jan What Is A Wireframe?
This is a question that comes up a lot, mainly because more agencies are incorporating a formal wireframing process, and more are choosing to show them to clients. Anyone who has ever built or designed a website will tell you, wireframing always happens in some form or fashion. Whether it’s done on the back of a napkin or sketched on a whiteboard, wireframes are simply a skeleton of the site you intend to build. Much like the blueprint for a house, they illustrate the architecture of the site, as well as detailing the functional bits and pieces.
Everyone wireframes a little differently – sometimes they’re fairly casual and used for internal purposes only, but there are also plenty of wireframing tools out there that can help make them presentable for client eyeballs. We happen to use Balsamiq, which is a program that I love and only took me about an hour to learn. It’s got a sketch-like look to it, thus indicating “Hey! This isn’t a design, so don’t critique the font/color of anything!” although that doesn’t prevent my co-workers from constantly remarking on the Comic Sans-esque font. Whatever, haters. I’ve done a quick mock-up for you to see.
We make notes on our wireframes, one set for the programmers that focus on functionality, one set for the content team, and a final set for the design team. That way, we end up with a complete document that roughly outlines the whole project, and even someone who hasn’t been involved in the process can look at it and get the gist.
Wireframes are crucial internal documents for ensuring that we’ve thought through every single moving part and piece. But what happens when you want to show a wireframe to a client? First of all, take out all of the notes and tech jargon. You can convey that if you need to, but you don’t want to distract from the client’s understanding of what the site does. Secondly, walk them through it– use the blueprint/architect analogy and walk them through each piece with the same level of detail as if it were a room in the house. They need to know where the toilet is going to be, not how it’s going to sound when it flushes, dig?
Finally, give them a little guidance on feedback. Let them know what is helpful feedback (“I’m not sure if the video we’re making the centerpiece of this site is going to be ready on time. Can we replace it with a photo?”), versus what is unhelpful feedback (“Why are these lines all liney? Is our website going to be liney?”), because some people will have never laid eyes on a wireframe before.
Anyone have wireframing experiences to share or a tool that they particularly adore? I’d love to hear your thoughts in the comments.
