Thursday February 28, 2008
The Fine Art of Wireframes
Introducing the Sketch as Legitimate IA Tool
As an Information Architect, I spend the majority of my day developing information flows, creating thoughtful ways to display content, and determining how to successfully communicate this design direction to clients. One of the most successful tools in my belt is sketching: the ability to cleanly hand-draw wireframes, widgets or even screen designs is an art form which is worth its weight in gold (or Euros). A sketch should be timely in creation, easily understood by the client, and low-fidelity � including only the most pertinent details. It should also be thoughtful and thought-provoking. Sketching, through its hand-crafted nature, should also invite the viewer to participate within the creative process� this is one of the most important aspects of sketching. A sketch should help open up a dialogue that will eventually lead to the creation of finalized, high-fidelity wireframes.
Increase Focus and Understanding of Creative Direction
I find that there is something gratifying about taking a pen in hand and working an idea out on paper. The use of pen and paper often forces me to slow down and really contemplate the elements of my design. It was the ongoing pursuit of thoughtful design that originally attracted me to the world of Information Architecture. I have always been somewhat hesitant about rushing to the computer without taking enough time to truly contemplate a proposed design direction.
Breaking Down Barriers
I’ve recently been working on a major redesign of a popular travel industry site. One of the particular advantages of working with this client is their eagerness to embrace a sketch as a valid deliverable within the creative flow. I routinely present them with sketches of wireframes and proposed design directions. The sketches and the team meetings that ensue often lead to even more sketches, and then final presentations of more formal wireframes.
I tend to free-sketch ideas and annotate the drawings with comments. The dialogue often resembles schizophrenic banter where I openly question my design decisions. I’m not sure if the banter is a requirement, but I find that there is something useful about including written critique. Some might find it preferable to ask a colleague for critique; I�ll leave that decision up to you.
I find that presenting a sketch of a proposed design direction to clients gives them a more consumable design deliverable; the inherent imperfections of the drawing magically break down the barrier between consultant and client, and actively invite participation in the creative process. In contrast, presenting clients with a high-fidelity wireframe as a preliminary deliverable often gives the client the perception that the wireframe is complete, shutting down the creative dialogue.
My fear has always been that without the pursuance of craftsmanship and thoughtful design, Information Architecture might go the way of commercial illustration: delivering “pretty” illustrations with little or no actual relationship to the subject they are representing. Using the sketch to conceive design direction not only sets a cognitive foundation of good design, but also demonstrates to the client that real, non-superficial design work is taking place.
Tools of the Trade
There is a secret society in the 404 Experience Design group that collects unique pens and quality sketchbooks. I can neither confirm nor deny my membership in that sub-culture, but for those who might be looking for specific “tools of the trade”, I am including that information here. My sketches are created using a Pilot Precise V5 Rolling Ball ink pen and a Behance Dot Grid Book . I chose the Dot Grid Book for its relatively large size, paper quality, and the exquisitely designed dot grid pattern (which I prefer to Tufte’s graph paper). When not using my Dot Grid Book, I tend to have a plethora of Moleskin Pocket Plain Notebooks separated based on use: I have one for each client, one for personal sketching, another one for sermon notes and commentaries, etc. (Those of you who appreciate using a Moleskin might also enjoy this site.)
In Conclusion
One of the greatest advantages of sketching is that it can become a foundational tool which can easily be used to more fully explore your design treatments and architectural studies. The ability to hand-craft wireframes might take some practice, but the benefits gained from their use in client presentations can be priceless. High-fidelity, computer-generated deliverables can be a perfectly adequate way to present your ideas, but there is something liberating about being able to break out a pen and paper and clearly record creative ideas without the use of a computer. Likewise, there is also a special credibility gained with clients when your deliverables are handcrafted and unique�especially when they excite and empower your audience to participate in the creative process.
Comments on “The Fine Art of Wireframes”
EMC helps organizations create superior IT environments, from infrastructure solutions all the way up to software development and user experience design.
Learn more…About This 404er
T. Scott Stromberg
T.Scott is an info junkie (banned by his wife from Half Price Books) which is reflected by his career choice as an Information Architect. He has a love for good design and thoughtful alliteration. When not working on projects for EMC, he can be found relaxing in his studio while listening to classic jazz and attacking a freshly primed canvas with a palette and paintbrush.
- Recent entries by T. Scott:
- The Fine Art of Wireframes
- Luis Stole My Elephant Gun
- The New Bauhaus
Great article. If I could just draw like that…
Are there any gidelines how to start a web sketch? What information and flow do you cover on your sketches?
Absolutely spot on. In my mind drawing the craft of design to our clients is crucial. We are working in an age when the ability to deliver a digital product quickly has rendered the importance of our work questionable. Whether for good or bad, we still seem focused as a global culture on the reality that good work takes time and can be felt in product or process or both. Your sketches are ideal examples of process revealing care and craftsmanship.
I have been convicted lately of my instant draw to the large mac screen instead of the pen and pad. Your article here reminds me what I have been needing to get back into for some time. Carry on!
@Blaz – Thank you for your comments. I’m not sure if there are any guidelines to sketching. I tend to create them much like I would a high-fidelity wireframe. One of the big differences is in mindset…I think you have to attack the sketches accepting that they can be imperfect. I think that in working through the imperfections you truly gain important insight into the true nature of the design process.
As far as information flow I tend to concentrate on the areas of the design that I think are not working. This is a subjective decision based on past trial and error and more intuition than anything else.
As long as you can make sure that: 1) your paper drawings only need to be seen by a few people at a time, all of whom you can visit in person at a moment’s notice, 2) the paper will end up in a recycle bin and not a trash can, and 3) your idea for what goes on screen can fit in the same space as the paper will allow (web pages are potentially a vertically infinite space), then yes, I agree.
Otherwise, paper has some serious disadvantages. But I am also impressed at T. Scott’s comic-book-level drawing ability.
“Introducing the Sketch as Legitimate IA Tool”
Was it not a legitimate IA tool before?
My background was illustration, so it always seemed like a natural first step to sketch-out pages, grids, and layouts before I started on the computer. Is this weird?
@Bryan J Busch – It is my opinion that sketching should give the “sketchee” the freedom to explore ideas without feeling fettered by some of the restrictions faced in the final high-fidelity wireframe. Screen size proportions are something that I tend to instinctually monitor unconsciously based on years of working within that space. As far as scalability of presentation that is easily handled with a scanner and an output devices such as projectors and Webex. Still let me iterate that my discussion on sketching is more about concept development rather than final deliverable…although it has always been a goal of a close group of my compatriots that we sell ideas from sketch only.
@Joshua Blankenship – It is weird but such is life ;)
@Bryan J Busch – Hopefully Nathan will be blogging soon about his means for sketching with guides for what will actually fit on the screen.
These are fantastic. Is it possible to have a tutorial on how to sketch them?
Perhaps a “photoblog” of sketches, or maybe even a Flickr group for UI sketches? Hmm.
Overall, I really enjoyed your approach in this article. Your sketch examples are strong and you cover your thought process very well.
As a designer, I always spend time on paper before hitting the screen. Like Joshua, it just feels like a natural step, but your sketches are exceptional. Sketches can consolidate big conversations or be used to guide clients into more refined solutions.
Obviously, you wish more clients would be attracted to the solutions that you can deliver… and sketching is a great opportunity to add into a project. Maybe, the sketching you are doing seems like a very normal extension of the 404 process. Sure, the look fantastic, but you may need to unpack the ‘story’ of how the process affects the project. (Make a brochure.)
Since sketching seems like an obvious step in an IA project, start sketching about oddball things. Do a sketch that outlines the 404 process, how the team works, or how the team approaches a project. Do sketches about abstract things… don’t limit yourself to the interface… sketch about company processes… maybe 404 team processes… even if it is “how coffee is made” in the morning. (Make an anti-brochure.)
Figure out how sketching can become something unique… that you can pass in front of any valuable client. Maybe passing something to them that is so off-the-wall that they make the connection with the value… the client has the “aha!” moment… instead of only worrying about how to guide them into appreciating it in some limited way.
———
Hope that makes some sense. I have been wanting to leave a comment for a while, but never knowing exactly how to spin my thoughts.
Sketching is a learned process. There are three truths here:
1) Looking a more of T.Scott’s sketches or a flicker stream will not make you a better sketcher, it will give you ideas of how to use your sketching skills.
2) Like dribbling a basketball, reading, riding a bike, and photoshop, sketching is a skill that is developed, learned, and maintained. You need to practice to learn it; nothing replaces “pencil” or “brush” time as necessary to get it to and keep it at this level.
3) Everyone can get it to this level if they are willing to put in the effort.
So why doesn’t everyone’s sketches look like these? Because there are no shortcuts. It is effort applied via passion. And that makes it like almost everything else in life. . . Me? I find my 15-30 minutes a day and practice. It helps to have a spouse and child that love to sketch also, but find the time and enjoy it. The best part T.Scott fails to mention: not only does it help at work, it lowers the blood pressure when you do it for fun!
BTW — My wife looked at your Bio and thinks your my long lost twin. . .
Sketching and showing concepts is a way of communication I could not live without.
I am amazed that other in my field can do large landscape design projects with sketching out concepts and sharing the design process with their clients.
Nice work, and I enjot seeing the “thought” process.
Good stuff Scott. Your diagrams are fantastic.
I too have been using a sketch journal for Enterprise Architecture for over eight years. I wrote an article for diyplanner.com" on keeping an analog work journal. I’ve found them very effective for sharing ideas with various teams. Eventually I’ll do a Visio diagram and put it up on the wall.
…dave