Topical and Tropical

Rants, Raves, and Other Mindless Babble

Wireframe vs. Priority Map

Posted on February 26, 2009 in Design | comment bubble No Comments »

Over the past few months I’ve been asked to do an increasing number of wireframes for sites and in process I’ve been doing a lot of thinking about how they should be treated. Usually what the wireframe entails is me reviewing the information architecture and drawing a bunch of rectangles and squares in an Illustrator document. No color is ever used, no fancy typefaces, just boxes on paper to show layout. Which is precisely where I think the conflict arises. When most of our clients see a wireframe document, they assume that things are going to be positioned exactly as is on the wireframe, and I as the designer, instantly becomes limited in how I can treat the content when it comes to execution. Instead of the wireframe informing the design, it starts to dictate the design, which I think is the wrong path to go down.

I’ve had this conversation with colleagues and I’ve started trying to get them to think of wireframes in a different way. Instead of it being a document that shows where content is going to be positioned on the page, I have been proposing that we treat them as more of a “priority map”. For example, in a recent wireframe I did I had the normal stuff at the top (universal links bar, header, main nav), then underneath that I had a large block for mission stories and to the immediate right in a second column I had a news block stacked on top of an events block. The mission stories block took up 75% of the width of the page, which was a decision informed by the information architecture and discussed by the project team as being the most important thing that we wanted to say on the homepage. News and events were secondary items, and thus only received the remaining 25% of the homepage real estate for that particular row of content. Now I look at that and say to myself, “Maybe I don’t want to put news and events to the immediate right of the mission stories block, but I know that I have to give the priority majority to the mission stories block. That’s the most important thing.” So instead of the wireframe dictating design, it’s informing it, and telling me which areas should get more visual emphasis.

Unfortunately it’s a hard sell to tell our clients to not think about wireframes as structured design layouts. They tend to be reactionary people who see something and immediately want to assume, or worse yet, turn into designers. Perhaps I need to take my concept of a priority map one step further and stay out of Illustrator. Perhaps the solution would be to cut out the rectangles and squares individually and then move them around in a very loose and free-flowing manner either with or without the client present. Whatever way I decide to do it, the most important thing is that clients understand that I have been entrusted by them to give them guidance as to how to most effectively display their content on their website.

So move over rectangles and squares and get ready for the scissors.