Why Fender’s Interactive Design Team Wireframes Its Site By Hand


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 theInkwell–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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

My Daily Journal.........

Everything from my world to yours'......:)

The Perks of being Different

Just sharing some experiences :)


Confessions of a book-traveller

Digital Art Blog

Digital Art Blog — by Alex Markovich. Only new photos, drawings and music since September 1, 2017. E-mail: MarkovichUniverse AT gmail.com


मुखपृष्ठ मच्छिंद्र माळी



Pen Paper and IT

This is my corner of the Net where I can relax and share my thoughts

Dear Dharma

Advice on almost anything…

Human Life Run

Mistakes Are Reality Of Life.


New Perspective on Life


Machhindra wordpress

indahs: dive, travel & photography

cities - cultures - ocean - marine life

The Beauty Along the Road

Discovering Beauty in the small details of our lives


A personal comprehensive compendum of related personal thought, diary, articles geared towards championing and alleviating the course of humanity towards the achievement of a greater society whereby all the inhabitants of the world are seeing as one and treated equally without any division along religious affinity, social class and tribal affliation.This is all about creating a platform where everybody interested in the betterment of the society will have a voice in the scheme of things going on in the larger society.This is an outcome of deep yearning of the author to have his voice heard across the globe.The change needed by all and sundry all over the globe starts with us individually.Our world will be a better place if every effort at our disposal is geared towards taking a little simple step that rally around thinking outside the box.


A great WordPress.com site

Ashes of Life

A journey to discover my own writing voice

The Blog of Travel

Motorbikes, dogs and a lot of traveling.

%d bloggers like this: