The Great Wireframe Debate

My previous article on wireframes sparked quite a debate to say the least. To be honest I wrote this article expecting people to react, because I was questioning their work process (and designers are usually passionate about their work).

But what I didn’t expect was how thorough and well thought-out all of the comments turned out to be. I wanted to highlight some of the most interesting points and answer them properly. So here are some of the arguments in favor of wireframes that people brought up most frequently.

Wireframes are a part of our process

I don’t have to spend as much time as I would with a high-def mock-up in Photoshop but can still get my UI ideas across (and get them pre-approved by directors, etc…) — Lorelai

One of the most common points was that wireframes are a valuable part of an agency’s design process and help kick off the project, get it approved by the director, get client sign off… However that’s missing the point: of course wireframes are an important part of your process, and removing them would cripple your workflow. But I was advocating for a different workflow altogether. I’ll admit that in certain circumstances implementing such a workflow is not practical, but I encourage you to give it a try on smaller projects.

Wireframes put an end to scope creep

The real issue and main reason for wireframes is usually streamlining the project process and negating the problem of scope creep and millions of unnecessary client changes. — Gary Hides

Many people use wireframes as a way to set in stone a list of features and avoid scope creep and endless revisions. My answer: get paid by the hour. If the client wants to add features, or remove some, or start everything over, well it’s their right as long as I get paid for my time (and it makes sense from a design point of view, of course). Once again I find that this is an issue related to process, and not wireframes specifically.

“UX Professionals” need them to do their job

You are also expecting designers to be usability specialists, content specialists, architects all at once. When you do that things are easily missed when creating a site because you are doing too many things all at one time. — Fred

Another argument was that wireframes are the medium through which information architects and usability experts work their magic, before handing off the whole thing to a designer to be made pretty. I’m not the only one who disagrees. All those things are part of a designer’s job description as well, and what’s more they are directly influenced by traditional graphic design, and even front-end coding. The right (or wrong) CSS3 animation can have a huge impact on a site’s usability, and so can colors, gradients, fonts… If you’re telling me that you’re considering all of that in your wireframes, then yo might as well call yourself a designer too and be done with it.

Wireframes encourage people to give feedback

Research has shown that mockups (especially those produced in a hand drawn or sketched out style) promote discussion on the site’s design, whereas polished mockups discourage it. — Jenius

Good point, but you could also educate the client. I know at least that none of my clients have ever had second thoughts about pointing out the flaws in my work, no matter how polished it might have looked. I’ll agree that if you don’t have that option, then wireframes might have their place. However, you risk ending up with the opposite problem: clients not knowing how to give feedback on something so far removed from the final product.

They let designers and developers meet in the middle

That is why Wireframes/sketches are such a great tool. You force designers and developers to solve a problem together unrestricted of any previous code base or designed mock ups. — Jochem

That’s actually a fair point. If you start out with a Photoshop mock-up, the project might be design-oriented. And if you start out with a prototype, it might be development-oriented. Wireframes are a neutral middle ground were non-technical designers and non-visual developers can meet.

However, for me the best developer is the one that enjoys checking out Dribbble every day, just as the best designer reads Hacker News and Techcrunch (substitue your own design and tech sites if you don’t like those).

In fact, I believe that one-man-army designers/developers like Marco Arment or Drew Wilson are precursors of the next generation, not just weird genius outliers. But even if you never reach the same levels of mastery in both fields as those examples, I believe it’s still required to understand enough about the “other side” to be able to communicate without the need for a third medium.

Wireframes let you plan out a site

You need to plan out the site, plan out pages and make sure nothing is missed and that is what wireframes accomplish. If you jump straight to design you make room for error — Vivie

This is perhaps my biggest problem with the way wireframes are often being used. A wireframe is a mostly static document that’s created very early in the design process, doesn’t look anything like the finished product, and cannot be interacted with. Looking at it, you can’t be sure what the finished product will look like or how it will work. Even a working, fully-coded prototype often turns out to have missed the mark by a mile when you finally see how real users use it.

So that’s why I disagree with wireframe being used as a plan. Read on to see how I think wireframes should be used.

Wireframes let you quickly generate ideas

In terms of raw efficiency, I prefer sketching with pencil, pen, marker and paper for wireframes (and sketches in general). It makes the process of getting things done far quicker and it kills the idea that what you’re doing in this state is precious. — Kevin M. Scarbrough

Finally, something we can all agree on. The main thing about iterating is that your iterations should be done quickly to encourage quantity over quality. Wireframes or sketching let you do just that, and if this is how you use them then I have no problem with that!

Recommended reading

A couple readers reacted to the post on their own blog, and I encourage you to check out their articles.

About Me

I'm Sacha Greif, a web designer freelancing out of Paris, France. You can check out my portfolio, and of course you should follow me on Twitter.

12 Responses to “The Great Wireframe Debate”

  • Tweets that mention The Great Wireframe Debate | Attack Of Design -- Topsy.com

    […] This post was mentioned on Twitter by Web / Graphic Design, Mike Archer, Sheepy, Simone D'Amico, TemplatesBox.com and others. TemplatesBox.com said: The Great Wireframe Debate: My article on wireframes sparked quite a debate to say the least. To be honest I wro… http://bit.ly/es0w2g […]

    22 Feb 3:13 pm
    Reply
  • Jenius

    Oh no, already posted?! I was going to write up a quick defense article myself tonight. I’ll still do it and send it your way, and maybe you can update or something when its done.

    Either way, thanks for this thoughtful followup! Here’s my response to what you wrote on my quote:

    You said:
    “…none of my clients have ever had second thoughts about pointing out the flaws in my work, no matter how polished it might have looked”

    This wasn’t my point. With a wireframe, you are not looking for design criticism, which is why there is no design involved at all. You are more seeking criticism on SITE STRUCTURE and layout. Presenting a full design, as you mentioned yourself, often does get comments from clients, but on the design rather than the layout. And if they do respond by asking for major layout changes, you are going to spend way more time changing things around than you would with a wireframe.

    I said that wireframes promote discussion on the site’s design, but I now realize that I somewhat misspoke. What I meant was that wireframes promote discussion on the site’s structure and layout.

    23 Feb 1:36 am
    Reply
    • Sacha

      So “layout” is not part of “design” for you? Maybe it’s a question of vocabulary, but if by “layout” you mean where each element goes, then I believe that is very much a huge part of design.

      And like I said before, I have my doubts to whether it’s a good idea to consider layout independently of other design elements like typography, colors, etc.

      23 Feb 1:49 am
  • marc d

    content organization, information architecture etc. can/should be done using mindmap software.It’s collaborative/easy to update.
    For the rest it really depends on your team resources/skills.
    There is no perfect solution here!

    25 Feb 2:32 pm
    Reply
  • Beth

    For small sites, what you say is probably true. But your advice scales poorly.

    The most important function of wireframes has nothing to do with layout or design. What it does instead is it allows you test before you build, in order to establish a usability baseline, a control that you can A/B test comps and prototypes against.

    (…you ARE testing your designs, right? RIGHT?)

    If you’re not doing usability testing before you hit the design phase, you either have to test (a) the comp or (b) the prototype. Either way, there are now hundreds (thousands?) of variables that can affect usability. Just try then to figure out what’s gumming up your conversion path.

    And re: genius one-man (person!) army outliers: Genius romantic, nineteenth-century Wagnerian ‘total art’ types are in development more commonly called cowboys. And I love cowboys, I just don’t like working with ‘em when I’m developing or project managing. :D

    26 Feb 11:43 pm
    Reply
    • Sacha

      Now that’s what I don’t understand at all. There are hundreds of variables affecting your conversion path when you test a prototype, so you’d rather just ignore them all and test static wireframes?

      What does that accomplish exactly? How do you know that all those pesky real-world factors won’t have an influence on the layout and invalidate your test’s results?

      And regarding A/B testing, I don’t usually do it. But it’s for practical reasons, not because I’m opposed to it.

      27 Feb 1:17 am
  • Etienne

    I would definitely agree with most of the points argued here but i’d say some of them like “planning your site” or “designers and developers meets in the middle” falls into the prototype category.

    Check out another interesting (provocative) article: “why wireframes belong to the past”

    http://blog.justinmind.com/he-future-of-wireframing/

    http://www.justinmind.com
    @just_in_mind

    28 Feb 10:58 am
    Reply
  • Pick of the tweets – 20th of February 2011 | UX ponderings by anna

    […] the post sparked a few discussions in the comment section and there is a follow up post on it here. I haven’t read it and don’t intend […]

    5 Mar 2:21 pm
    Reply
  • Ian

    Sacha, Really enjoyed the post! Some very important issues raised – especially “clients not knowing how to give feedback on something so far removed from the final product.”

    I have recently written an article that you might enjoy – it’s about the use of static mockups to simulate dynamic interfaces in advance of HTML5 “Fluid” UIs becoming more widely used:

    http://fluidui.com/2011/03/18/is-static-enough/

    Cheers,
    Ian

    4 Apr 1:22 am
    Reply
  • Pick of the tweets – 20th of February 2011 | Be back soon

    […] the post sparked a few discussions in the comment section and there is a follow up post on it here. I haven’t read it and don’t intend […]

    7 Aug 8:29 pm
    Reply
  • Tweet-Parade (no.8 Feb 2011) | gonzoblog.nl

    […] The Great Wireframe Debate – My previous article on wireframes sparked quite a debate to say the least. To be honest I wrote this article expecting people to react, because I was questioning their work process (and designers are usually passionate about their work). […]

    26 Sep 8:58 pm
    Reply
  • louis vuitton bags gallery

    7. Teach them to find beneficial in consumers they do not like- Even unfavorable encounters will be applied to tutor them to the well worth of showing grateful. , “PollyAnna”, the Walt Disney movie ,comes to thoughts, where she performs the game referred to as “Glad” and finds several items for which she will be grateful in all scenarios she comes across.

    7 Jan 8:56 am
    Reply

Leave a Reply

This field is required

This field is required