Natalie Pyron | Product Marketing, Product Planning & UX in Seattle

Rapid Prototyping: Paper Before Pixel

Category : Blog Jul 28th, 2012

It can be tempting to launch Illustrator, Photoshop, Axure, [enter the name of your favorite digital design tool here] when you’re assigned a new UX project, especially if you’re a pixel perfectionist working in a fast-paced environment.  You have tight deadlines to meet, stakeholder approval to win, and revisions – well they are certainly expected.  So you may think that you’ll save time by going straight to your digital device to create wireframes, but I urge, resist the temptation.  Start with good ol’ pen and paper. Sketch, discuss, repeat.

Why does this technique work?

  1. You’re focused on problem solving rather than beautification. Pen and paper clears distractions so you can think through what you’re trying to accomplish – including how you’ll support both business and end-user goals – and identify potential challenges upfront, rather than get caught up with proper alignment, color palettes, etc.
  2. You’re more willing to experiment. Sure, you can hit delete on your keyboard, but the rawness of pen and paper is more freeing.  Digital wireframes, while grayscale, are higher fidelity and therefore appear more final which can constrain creativity.  Sketching empowers you to explore, evaluate and refine immediately. For example, set a timer for 2 minutes.  Within those 2 minutes, see how many different ways you can layout a home page for a music site just by sketching.  I came up with five.  I’m not committed to using any of those five layouts, but at least I was able to discover what may work better than another and all before drinking a full cup of coffee.  To compare, it can take me a full 2 minutes just to layout a grid in Photoshop.
  3. It enables quicker feedback loops and collaboration between business owners, technical teams, and even end-users so you can lock down requirements and capabilities early in the development process.  In fact, I’ve found that sketched storyboards are one of the most efficient and effective tools to not only guide user experience discussions, but to validate concepts, stimulate new ideas, scope implementation, and determine priorities.  It helps answer questions like: “Is this feature really needed?”, “Can this be implemented?” …”and is this the best way to implement it?”.  It forces the team to think through use cases, scenarios, and the functions necessary to support a user’s goal.

Here are a few of my favorite sketching tools:

UI Stencils

iPhone UI Stencil Website UI Stencil

Simple but handy, the Design Commission has created stencil kits for website, iOS, Android, and Windows Phone design.  The stencils include standard UI elements and controls that are frequently used.  I’m not sure I’d call it a time saver, but it does keep your sketches tidy and more importantly, clear.  While made of stainless steel, they’re a bit thinner than I originally expected but fortunately you can store them in the accompanying plastic protector.  The kit also includes a Zebra pencil which I absolutely love and you can print templates from the UI Stencils site.


Konigi Printable Templates

Konigi Wireframe Template Konigi Storyboard Template

I think Konigi offers the best set of printable paper templates.  They have a single wireframe template with or without notes section, 8-up template for thumbnail sketches, 6-up template for storyboards, or a simple dot grid format.


Ecosystem Notebook

Ecosystem Notebook Ecosystem Grid Notebook

Because great ideas often come at the most random times, every designer should carry a notebook with them (or a stack of napkins).  Moleskines are classic, but once I discovered the Ecosystem notebook series I haven’t turned back.  They’re not only attractive and functional, but environmentally-friendly and made by local manufactures.


Pen or Pencil

Some debate using pen over pencil to sketch.  The argument is that with pencil, you’re more likely to erase, re-draw, and second-guess.  Pencil can also smudge and become messy.  By using a pen, you’re more likely to think through the idea, commit, and move on to the next idea.  I believe in using whatever your comfortable with to get ideas on paper so you can evaluate and learn quickly.  I personally use both and in fact use color coding to make call-outs and distinguish interactions.  Sharpies, Sakura Micron Pens, and Zebra mechanical pencils are my go-to.


Last Tip

Prep your various sketches for stakeholder review by organizing and adding annotations to them on one large sheet of paper, also known as sketchboards.  If you’re working remotely, you can also scan your sketches to create a virtual sketchboard.  This technique helps narrate your design decisions and structures the discussion so stakeholders can see the full picture and comment.  Here’s a video that provides additional detail on sketchboarding:



Leave a Reply