the wireframe gap

this past week i’ve been doing a lot of work either creating wireframes or in support of wireframe creation. wireframing is the fastest way i know to work out a thorny interaction design or layout problem.

we had hoped our designer would be able to take on the wireframing tasks but it appears that isn’t happening. it’s unfortunate but in reality we are so much closer to the content and the overall structure of the site that it was probably unrealistic to expect someone outside of the development team to be able to identify and solve the design problems that we have.

this means that during the time that i thought / hoped i would be getting up to speed with custom WordPress theme development using Underscores, I am instead trying to fill a gap we have between a mandate to make our site look like the company’s marketing site, and the reality of task-based intranet content that is both deeper and wider in structure than the marketing design allows for.

so… what is a wireframe?

oh, right. i usually lead with that.

in this case, a wireframe is a drawing of a web page done in grayscale, typically without any graphics or font choices. in cases where a wireframe is presented to a client, it acts as a way to get the client to focus on layout, navigation and functionality without being distracted by visual design choices that should really come later.

these particular wireframes will probably only be seen by the team and by our designer, not the client. the intent is to solve certain design problems or at least lay the problems out in such a way that our designer can understand the issue very clearly. possibly he will produce a comp (a static visual design) that follows the wireframe faithfully, or possibly he’ll have improvements or see problems that we missed and will help us get to a solution.

 the mechanics

i used to do all my wireframing with pencil and paper. the drawings were beautiful and it felt great to have no impediments to anything i wanted to design. i could think it and then i could draw it. I have giant, fabulous graph paper tablets from Edward Tufte’s shop that are a joy to draw on. what can i say? i like paper. i still break out the graph pads from time to time, like when i want to go very fast and ‘break’ a new idea.

i took a leap and tried OmniGraffle after several years of pencil and paper work. some of the people i worked with felt the pencil sketches were unprofessional looking (whatever), and OmniGraffle seemed to be the wireframing tool of choice amongst folks who do UX / UI design for a living.

it was a good leap to take. OmniGraffle is my primary wireframing tool now. There was essentially no learning curve. I use the Konigi wireframe stencils and I can bang out a wireframe in no time flat that looks polished. Wireframes are unfamiliar to many of our clients and they are usually delighted with the OmniGraffle end product, and immediately understand its purpose with almost no explanation. these wireframes tend to lead to very productive discussions.

the process

in this case we are working with content that is already in a web site. the nature of the content won’t change dramatically, but it’s clear that some of the site’s problems are due to the way the site navigates and how the content is presented.

to get started, i printed off examples of several of the existing layouts. most of these seem pretty straightforward to translate into our theme and i won’t bother with wireframing them – there’s no real gap there.

there were two fairly thorny problems that i was able to identify and visually organize just by tacking the printouts up on my walls and, well, staring at them for a while.

i did some research by looking at other sites with horizontal layouts to see if they’d handled similar problems. i love to crib ideas from world class designers. the intranet puts their ideas right out there where anyone can see them. you just have to make sure you’ve framed your design problem correctly so that you recognize a good solution when you see it. i was able to find a solution to the easier of our two problems in this way.

i then lead a workshop with the team where i walked everyone through the problems. for our most difficult case, we didn’t try to come up with actual design solutions on the spot, but talked through the different user stories where this content would come into play – things like “I am a developer and I want to see where else in the company I could move.”

i am a bit sad that i have to wait until a later sprint to actually work out some design solutions to the latter problem, but we’ve agreed it’s too complex and needs to be put off until after we’ve done some of the simpler work.

pot o’ gold!

hey, did you actually read all of that? welcome to the pot of gold at the end of this rainbow!

okay, not really. my writing is not a rainbow. i cannot provide any actual or metaphorical gold. only the final thought that if you find yourself facing a gap between what you have for a site and what you need to develop, that you consider wireframing as a way to fill that gap. it does not really matter if you are a designer. i am not. i am a developer, albeit one with some training and experience in UX / UI design. nevertheless, creating a wireframe is something that pretty much anyone can do.


Leah Buley – UX Team of One