Ignite Blog Mock

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.

Related Posts

11 Comments
  • Mockup Tiger
    Posted at 17:14h, 05 February

    I will be using Comic sans as default for my wireframe software but also in hunt for free web based sketchy fonts. Users can ofcourse change the font to Arial or something of their likes.

  • Mockup Tiger
    Posted at 17:14h, 05 February

    I will be using Comic sans as default for my wireframe software but also in hunt for free web based sketchy fonts. Users can ofcourse change the font to Arial or something of their likes.

  • Stiv Tividad
    Posted at 01:51h, 07 February

    I have never tried Balsamiq (not sure if it’s for free) but currently I am using Cacoo. I love your article. Will share this on Facebook for some friends to see. Thank you!

  • olivia hayes
    Posted at 15:25h, 07 February

    Good call. I like the ability to change the font to something else that will receive less derision from my co-workers 😉

  • olivia hayes
    Posted at 15:25h, 07 February

    Good call. I like the ability to change the font to something else that will receive less derision from my co-workers 😉

  • Ven Ganeva
    Posted at 16:35h, 10 February

    I recently wrote an article about the value of wireframes here if it helps people? http://corporateedge.com/blog/stop-kill-wireframe/

  • v3nnyg
    Posted at 16:35h, 10 February

    I recently wrote an article about the value of wireframes here if it helps people? http://corporateedge.com/blog/stop-kill-wireframe/

  • Lisa-Marie Leitner
    Posted at 20:03h, 18 March

    I adore Balsamiq as much as you do, but i also enjoy working with Mockingbird. Unfortunately it’s not free anymore, now that it’s out of beta. Nevertheless – great online tool. And great article btw.

  • Lisa-Marie Leitner
    Posted at 20:03h, 18 March

    I adore Balsamiq as much as you do, but i also enjoy working with Mockingbird. Unfortunately it’s not free anymore, now that it’s out of beta. Nevertheless – great online tool. And great article btw.

  • FirecatSue
    Posted at 20:12h, 30 June

    Great article, Olivia, thank you. We’ve wireframed for years, but have been increasing the number of clients we share the WFs with. I found your article while trying to find a better way to describe the wireframing process, and the “Let them know what is helpful feedback” advice is gold!

    I’m honing my speech about what wireframes are – what they are intended to convey — “The site’s bone structure and navigation” and relative importance, but not predictive of layout, color, visual design elements. We find they are most helpful when we run through personas and scenarios.

    I need a similar speech before showing website design moodboards – “these aren’t intended to show a page layout – just some elements we’re making sure properly reflect your brand and set the right mood and tone…”

    I use Balsamiq Mockups as well – have used Visio, Illustrator, Powerpoint and Axure as well. The latest version of Axure has a “sketch it” type function that takes a higher-fidelity mockup and makes it look less formal and black and white.

    Powerpoint is actually a good choice when you’re collaborating on WFs with folks who don’t have any of the other tools – and there’s an easy way to make those go “black and white” to support that ultra-sketchy look.

  • FirecatSue
    Posted at 20:12h, 30 June

    Great article, Olivia, thank you. We’ve wireframed for years, but have been increasing the number of clients we share the WFs with. I found your article while trying to find a better way to describe the wireframing process, and the “Let them know what is helpful feedback” advice is gold!

    I’m honing my speech about what wireframes are – what they are intended to convey — “The site’s bone structure and navigation” and relative importance, but not predictive of layout, color, visual design elements. We find they are most helpful when we run through personas and scenarios.

    I need a similar speech before showing website design moodboards – “these aren’t intended to show a page layout – just some elements we’re making sure properly reflect your brand and set the right mood and tone…”

    I use Balsamiq Mockups as well – have used Visio, Illustrator, Powerpoint and Axure as well. The latest version of Axure has a “sketch it” type function that takes a higher-fidelity mockup and makes it look less formal and black and white.

    Powerpoint is actually a good choice when you’re collaborating on WFs with folks who don’t have any of the other tools – and there’s an easy way to make those go “black and white” to support that ultra-sketchy look.

Post A Comment