Paper Prototyping and 5 Analog Tools for Web and Mobile Designers

1stwebdesigner - Web Design Blog

Designers love analog tools. No wonder. These tools lets us physically interact with interfaces and speed up the design process, like paper prototyping. What takes hours in the digital world can be sketched out in a matter of minutes.

That’s why analog methods of prototyping are especially valuable right at the beginning of projects – when speed matters the most. Working with paper, or perhaps a whiteboard, can accelerate the speed of our learning loops. Sketch, feedback, sketch, feedback, sketch feedback – you can go through dozens of iterations in one day and you’ll set solid foundations for the rest of the work. Consider it kind of premium insurance. Getting rough feedback quickly can save you a lot of work.

No wonder, according to research by Todd Zaki Warfel, paper prototyping is still the most commonly used prototyping method! Yes, while we tend to disagree if we should code prototypes or just use prototyping software, the use of analogue tools in our design process is unquestionable! Honestly, I don’t know any designer who is not going through early stage paper prototyping sessions.

Of course in paper prototyping we pay the price of low-fidelity and while it might not be a problem for your team to discuss lo-fi deliverables, in my experience, it’s always a problem for stakeholders. To avoid misunderstandings and accusations that you’re playing with paper instead of working, just make paper prototyping an internal method for your team.

Analogue methods are supported by User Experience pioneers such as Bill Buxton, author of Sketching User Experience and Carolyn Snyder author of Paper Prototyping. They highly recommend breaking away from the computer once in a while and collaboratively work on the analog side of the design moon. According to them, paper prototyping:

  • keeps all team members motivated (as they can easily participate in paper prototyping sessions)
  • lets designers iterate quickly and gather feedback very soon in the process
  • gives designers freedom since paper has no boundaries

preview large goodprototypingbook design tools design tips design

And though many believe that the rise of tablets may end paper prototyping in the next couple of years, I’d disagree. The physical nature of paper prototyping, its speed and straight forward form (understandable by anyone), makes it unbeatable by any digital gadget. Tablet devices are just another medium of digital prototyping (perhaps better than computer, who knows…) than replacement of analog methods.

In recent years we can observe attempts to optimize paper prototyping by the creation of dedicated tools. I tried most of them and I’m addicted to some (UXPin, UI Stencils). They hugely improved my workflow. Dedicated paper prototyping tools gave me speed that exceeds everything that I tried before. I feel more professional with a well crafted notepad in hand than a crumpled piece of paper with messy sketches on it. This confidence helps me discuss my analog work both with teammates and stakeholders. Most of the tools that I present below have been around for couple of years and I guess they’re doing great.

My fingers are crossed for these brave entrepreneurs.

Have fun!

Note: At the end of article I listed some of my favourite printable templates – they are ready to use and FREE!

UXPin – Paper prototyping notepads

Popular paper prototyping notepads with an original idea. User Interface elements are printed on separate sticky notes, which let you quickly create prototypes and iterate by re-sticking parts of the interface. Additionally, notepads are equipped with a sketchbook (with printed browser/iPhone), project kick-off and personas forms, as well as diagramming, gridded, paper. Hard-covered, well-designed and beautifully crafted books are $29.99 with free DHL delivery to USA, Canada and EU, if you buy any 3 of them. Since people from Google, IBM, Microsoft use them – UXPin notepads has sort of become an industry classic.

Finished prototypes can be auto-converted into digital, HTML, wireframes by UXPin App and this is one of the coolest things I have ever seen in the User Experience Design field.

Phone Doo – Magnetic boards 

Little magnetic, erasable, boards let you quickly sketch your ideas, while keeping proportions of a real iPhone. Dotted grid also provides significant help in drawing interfaces. Whiteboard form makes them really iterative and agile-like. Imagine bringing these little boards to a scrum meeting and presenting your recent design work. People will be amazed! The small size makes them a perfect tool if you like to design while sitting in a cafe. Besides, they look so good. One pack of Phone Doo’s costs $15 + shipping via US Post ($15 for one pack to Europe).

UI Stencils

Precisely cut User Interface stencil help you sketch interfaces in an aesthetic way. Forget about messy sketches and create sketched beauties with straight lines. It really helps to communicate design ideas!

UI Stencils has created steel stencils for iPhone, Android, Windows Phone 7, Web and also several kind of special notepads with gridded browser, iPhone etc.

UI Stencils cost $26.95 + delivery (USA -> Europe, $6.50-$45 – depends on the delivery option)

Sketchbook – Sketchbook for Web & Mobile Design

Nicely crafted sketchbook with printed browser on every card. A simple, but highly useful tool that you can take with you to any meeting to quickly doodle an interface. It might not be revolutionary, but it’s certainly a “nice to have” tool. UX Sketchbook costs $12.95 + $13.95 shipping fee (USA -> Europe).

Behance Dot Grid Book

Simple notepad with a dotted grid on every page that is supposed to make it easy for us to sketch interfaces. $15 seems a little high for this simple book, but on the other hand it’s quality pays off.

Free printable templates

Kong Graph Paper

MBTI Sketching Paper for Ideation

MBTI A4 Sketching Paper

The tools listed above are more than enough to make your design process at least partially analog. If I can suggest anything, I’d recommend you try a couple of these tools, as well as the free templates, and check where they’re taking you. If you experience an increase in your process speed and a growing understanding of the design within your team, consider using them regularly!