In the early stages of conceiving a site, web and UX designers will create wireframes–a digital blueprint which lays out the structure, priority, and hierarchy of a website without yet worrying about the graphical nuances. While most of this work is done with software such as OmniGraffle, designers’ earliest, roughest ideas are often sketched out by hand.
For the interactive design team of guitar maker Fender going computer-free is essential; it’s not just the earliest concepts that get the hand-drawn treatment. Instead, the team sticks to pen and paper throughout most of its wireframing process: from the process of mapping out a web page’s layout, anything from the header and footer boxes to specific boxed-out sections in the body of a page. Making a digital investment early on makes it harder to let an idea go later on in the design process, so the interactive designers at Fender are encouraged to think through a concept before tinkering for hours in Photoshop to make it look pretty.
The team doesn’t get its hands dirty with computers until much later in the process, during the visual conception and coding stages. Cycling through hand-penned drawings promotes early collaboration with non-designers who might never use Illustrator or Photoshop. Anyone can wireframe with pen and paper, and that’s especially important since even company stakeholders contribute their own input during the wireframing phase.
“You don’t want to jump into Photoshop when everyone is sitting around the table throwing out ideas on paper,” says Mike West, interactive design manager at Fender.
In later stages of web design, software tools are a better option than pen and paper, but only when it’s time to refine a solid concept. Wireframing, however, is supposed to be mutable.
Everyone from the Fender CEO to the engineering team can throw ideas around before investing in digitizing the concept. “It gives us the ability to sit in a room and break down barriers. Sit around a big table and throw around ideas, have them participate. And everyone can grab a pen,” says West.
Fender typically plays with five to six ideas in a collaborative design session and will integrate them into a couple of ideas to move forward with. Doing it this way, West has found that his team ends up with more solid ideas in the final design stages, since the early collaborations filter out most of the other ideas.
West essentially needs to introduce new hires on his interactive team to pen and paper, and gets them all started with a sketch kit called the Inkwell–a pen-and-paper kit designed for web designers, by web designers. The newbies need a few trials of getting used to the idea of sketching by hand and collaborating with other people first before following through with a visual solution. But it’s a quick learning curve.
Fender’s interactive design team used their hand-drawn approach as part of the process for its new American Design Experience site. But as with other Fender site redesigns, the interactive team kept its computers closed even after the cross-departmental discussions finished. West and his team put their artistic skills to use during the creative sketching sessions, to get an idea of the site’s graphics, using pen and paper one step beyond wireframing.
“We’re actually drawing a guitar. How would it–would there be a shadow underneath it? Where would the buttons live, and what kind of graphical elements would you have on that?” says West. After those creative sessions, the team refined the site’s concept digitally and moved onto coding the real thing for the web.
For new interactive designers, pen and paper can help retrain the design mind. It’s an unassuming tool that lets you ideate fast and gets you out from behind your computer screen. It’s why the folks at Fender are sitting around with bags of pens and blocks of paper. West makes sure everyone on his team has them.