Wireframes – Worth Their Weight In Gold

I will never start from scratch in Photoshop again. Seriously.*

Stacks of Wireframes

(*Okay, maybe that's hyperbole, but I bet I'll do it less frequently).

Like a lot of folks, my standard web design workflow started by opening a new file in Photoshop (or your design program of choice) and getting a basic guide structure put into place. I generally started by designing the header region of the site because of its obvious importance in laying the groundwork for the visual direction. I then would fill in the primary navigation items and start resolving details like the feature area and the rest of the homepage content. By the time I had hit the footer I was ready to at least start thinking about how I was going to build out the page.

All that's changed now.

Before interning at Viget, I had no idea what benefit could come from wireframing a site (nor any real clue what UX designers actually do). I think this sentiment is shared by lots of people and is the topic of many debates. Are wireframes really worth the time and effort? Why?

Absolutely - as long as you're doing it "right."

For me, the biggest shift was understanding the actual goal of wireframing. In reality, I needed to be thinking in terms of content. I thought a wireframe was simply a dumbed-down version of a comp, filled with boxes, X's, and lorem ipsum copy. That's because I was thinking about it from a visual designer's perspective. I was already thinking in pixels, styled horizontal rules, and type choices.

The Problem With NOT Wireframing

Like many other young, inexperienced, or otherwise unenlightened designers I ended up letting my visual design solution try to inform the content on the site. (e.g. "This heading looks best when there are only 24 characters - can we change the copy to accommodate?"; "We need to keep blog titles to one line only."; or "Can we come up with a third section of copy on the About section so this 3-column layout will work?") As a visual designer, it took me some time to realize that while my design would be the first thing that people notice, it's NOT the reason that users are visiting the site. I needed to find more respect for the content I was designing for - not the other way around.

Another problem I found myself struggling with was "forgetting" a piece of necessary information and (because I was so committed to my design) making compromises in its implementation or inclusion. Yet another instance of design informing content.

So What?

Like any other approach or workflow there is a continuum of what makes sense to include in any given project. Not every site will need a detailed content inventory, site map, or dedicated taxonomy system for tagging and classifying data (but big projects probably will). Likewise, not every project will need every page comped as a unique PSD file. But, by putting even a cursory effort into wireframing and UX considerations, I believe that I will save time in the long run.

Wearing Different Hats

I now try to compartmentalize my process in such a way that I spend some time thinking about what content needs to be represented across the whole site, what content will be represented on each page, and what the relative hierarchy of that information is on a page-by-page basis. This can be done quickly on a whiteboard and translated into detailed sketches or refined interactive models in Omnigraffle - or not. It all depends what deliverables you'd like (or need) to create and how much time you'd like to spend.

My Happy Place

I like to have detailed sketches to design from. Starting on a whiteboard and translating onto paper makes me feel empowered when it's time to put on my "visual designer hat" and start working with pixels to create the actual design. I feel like a chunk of my brain that would normally be multitasking is allowed to focus solely on being creative. For me, that's a great feeling.

Give it a Try

I'm sure people will always continue to be varied in their feelings about or approaches to wireframing. But, if you fall into the same camp that I did and never thought about splitting your process - give it a try. You too may end up changing your tune.



A quick and dirty whiteboard wireframe brainstorming session.

Whiteboard wireframe

Translated into a detailed sketch with notes regarding page content.

Detailed Wireframe Sketch

And finally, translated into a finished design comp.

Design Comp. from Wireframe

Ethan Geyer

Posted in Article Category: #Design & Content