You are reading a MIX Online Opinion. In which we speak our minds. Thomas Lewis Meet Thomas Arrow

Opinions

11Comment Retweet

Should We Kill Wireframing?

May 13, 2009 In Design By Thomas Lewis

Should designers stop wasting time and budgets with wireframes and go straight to design comps?

A tempest stirred on 37Signal’s blog when they posted an entry called Why we skip Photoshop. It is a good read that turns convention on its head (which those guys are prone to do) but what was interesting is all the discussion that came from both sides as to should designers skip the pixel-perfect design comp step in the web design process and just do it all in HTML.

I took a look at what both sides were advocating. I then put on my lower-middle management hat and begun pontificating: Why stop there? What if we stopped with all the wireframing as well? I thought managers could then drive down design costs and we could get to what the typical manager or client want: What is my site going to really look like?

Ok, if you know me, you know that I have been stringing you along. Should wireframes be a part of the design process? ABSOLUTLEY YES! But, in difficult times of tightened budgets and timelines, I can imagine many a pointed-haired boss or client wondering if they could drive down their costs by getting rid of a step or two in the design process. I think this is wrong and here is why:

Wireframing helps focus the conversation. The last thing you want to have to deal with is “I don’t like that color. Those bullet points, can we make them actually bullets? Hey, we should use that font that I use in my joke e-mails I send around…yeah, Comic Sans!” With full design comps from the start, you are more apt to get feedback that is superficial. With wireframes, you can get them focused on the structure and how content should be prioritized.

Wireframing doesn’t have to be expensive. The cost is not from the tools, you can easily use pencil and paper. It is the time it takes to do the job right. This time used is not as expensive as a change request made after you have design comps and doing the actual work. I find that wireframes help prevent issues that arise later or expose missing items (like the Sign Up or Purchase page).

Wireframes are a great mid-project deliverable for feedback. No manager or client wants to sit down for business requirements gathering and then go into silence mode until the day the site goes live. Most don’t want to wait for the design comps. Wireframes provide a good opportunity to get sign off on the direction as well as get feedback earlier in the project. Around here, wireframes are put up on a big board for all to look at. They not only provide stakeholders to get feedback,but also cross-teams will stumble upon them and might spark something.

I have to admit,I do enjoy looking at wireframes. In fact, I find myself hanging out at I <3 wireframes. Also, Microsoft is getting into the business for Silverlight and WPF applications with its offering of Sketch Flow.

My question to you is this. Which side of the fence are you on? Do you find wireframes valuable or an endeavor that you would rather skip? Have you been asked by a manager or client to skip wireframing? How did you deal with it?

Write a comment and tell us what you think. Subscribe to our Twitter feed if you want to stay in touch with us.

Follow the Conversation

11 comments so far. You should leave one, too.

fjpoblam said on May 13, 2009

Wireframing is NOT AT ALL expensive. I hand-code. I run a small-time shop. Wireframing is part of all my client websites. It greatly simplifies my work in both site creation and site maintenance. Client requests for updates seldom take more than a few minutes. Client request for a vast site revision (look-and-feel) rarely takes more than a weekend of multi-file search/replace. Semantic xhtml+CSS does it all. Wireframing FTW.

Scott McAndrew said on May 13, 2009

Great post Thomas. There''s not just the ''tempted'' out there... there are organizations that don''t wireframe or don''t wireframe enough of a site or application to chase out all the demons. Planning (wireframing) and solidifying understanding with not just the client but with internal teams prevents costly iterations in subsequent design, or worse, coding phases.

Paul Alexander said on May 14, 2009

In rich application design and development, it''s a fatal error to avoid wireframing. Clients often don''t think they need it, nor are they willing to pay for it. Too many feel the exercise should be taken up during creation of the visual style and thereafter, the visual composites that form the major screens/views of the experience. As a manager, you owe to your clients to teach and enlighten them into your process that includes this vital part of the envisioning. It''s one thing to skip wireframes during buildup of a simple web site, but in technologies like .Net 3+, you need to identify in the wireframes a) can a control actually be built atop the target platform to match the expectation, b) can it be styled to reflect the desired look/feel of the application experience, c) are we truly creating a different, useful UX, and most importantly, d) does this absolutey solve the business problem. Powerful wireframes come from Designers and IA''s skilled in motion testing, static visual design, artistry, and inventiveness. Don''t skip the step to answer to blog''s question. In the case of budget constraints given a new application space, consider scoping back the Scenarios to be explored, and solve the core ones first.

Think before coding said on May 14, 2009

I''m totally on the wireframing side !

The presentation layer is a single layer when you look at a whole project distance, but once your in it, it''s composed of a lot of different sublayers.

Here again you should apply separation of concerns principle.
Usability and appearance have different goals and each one should first be thought in isolation. Idealy it should not be done by the same person.

I think that Paul is right, WPF (an Silverlight) seems to offer powerfull wireframing tools since you can create your wireframe, test it, then style/animate it...

The problem with HTML is that styleless HTML is far to poor to get a simple idea of where your going. You cannot style it efficiently without affecting the whole structure... So people try to skip this important wireframing step.

Jeff Putz said on May 14, 2009

Back up the soul train here... the 37s post doesn''t suggest that you drop wire framing entirely. They have in fact made other posts that suggest paper sketching or white boarding is the fastest, cheapest and most efficient means to get where you''re going.

What they''re arguing against is the ridiculous and pointless mock ups done in Photoshop. I''ve worked in shops that do this constantly, both in client/agency situations and for internal stuff. They''re useful for about 30 minutes and then end up so changed that all of the work was thrown away. It''s particularly true for UI work. There''s no value in the PSD.

Of course, that''s why I argue that "designers" should also be HTML people, not Photoshop monkeys. Otherwise it''s like suggesting that a carpenter not know how to use a saw.

Thomas Lewis said on May 14, 2009

Jeff, I think that is what I said in the first paragraph. I took it a step forward to ask the question if we should consider removing the wireframing step.

Jason said on May 15, 2009

Ultimately, flat wireframes are throw away. Why not just wireframe in html? You also get the added benefit of exploring interaction design early. Is it because ''designers'' shouldn''t have to know some html? Is it because we need to cling to the outdated waterfall, phased approach? Make it real! Do it early.

Wireframes set things in stone. I think we all know it just don''t work that way.

Paul Alexander said on May 15, 2009

Interesting thoughts, but some more comments. We need to keep two things separate here - Wireframing and Design Comps. Each is completely different and has its own flow. IMO, ya can''t design before you wireframe.

The former should be done on whiteboards or minmalist tools. We''re trying to define the general layout of the data. In no way should these have color, smooth edges, or other visual appeal. Face it, our apps are data driven and we can''t avoid understanding these nuances and UX challenges. I would argue that leaving out collaborative whitebaording with pen/paper in sessions with a group of people is not desirable.

The latter, design comps, is where mood boards should come into play - where the designer presents pleasing ideas/concepts with color - from which to create the interface based on the approved wireframes. Key words here..."wireframes". My point above is that often folks think you can avoid wireframes and do this step in the initial interface design. Wrong, couldn''t be more incorrect. Beyond the mood boards, we get the Photoshop/Illustrator files depicting the interfaces. So yes, Jason, trying to explore UI/UX in design tools is crazy until we''ve done so with the good ole fashion whiteboard/easel.

Wireframing, therefore, is entirely necessary, but should only be done in black/white, hard edges, no style. Interface design cannot play until this step is solidified. I''m on the wagon looking for a silver bullet to solve these dilemmas, and totally agree that the entire UX cannot be explored in black/white.

Don Burnett Expression MVP 2008-2009 said on May 15, 2009

I wouldn''t be without wireframes, it''s like storyboarding for the client it''s an old friend. The old saying the devil''s into details, it brings clarity and direction and brings you closer to something the client can initially sign off on directionally (in the longer term)..

Clients get an idea of direction and are more likely to be on-board. When you have a complete idea of where to go.. Most designers won''t be without a moleskin notebook either, it''s not something that will go away at this point in technology..

Dan Harrelson said on May 18, 2009

The inherent problem with both visual comps and wireframes are their lack of interactivity. These artifacts come from days when web sites were a collection of static pages wired together with links. Today we are designing web apps that include motion, transitions and pages states. Modern RIA design is better served by a interactive prototype than a wireframe and visual comp.

Cristian Pascu said on May 27, 2009

You''d better have lots of money or good reasons to skip wireframes/prototyping. Coding is expensive, especially in larger organizations where there are not always coding ninjas available.

Also, I think it''s pretty much a matter of tools. If the tool at hand allows you to capture as much information as needed, keeping in the same time the balance between interactivity, graphic design and detailing level, than why not prototype/wireframe when it''s much cheaper to do so?

There are many tools outthere, but please allow me to point you to this wireframing/prototyping tool called FlairBuilder (http://www.flairbuilder.com). It basically lets you create highly interactive prototypes with a plain wireframe look''n''feel. It has an online demo that you could try right away: http://www.flairbuilder.com/demo

Cheers,
Cristian