Paper Prototyping and 5 Analog Tools for Web and Mobile Designers

Posted in Tips, Tools, Web Design • Posted on 8 Comments

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

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!

1 Written ArticlesWebsite

Milos Nedved is a freelance UX Designer from Czech Republic. He’s just about to start blogging: www.Nedvedux.tumblr.com

8 Comments Best Comments First
  • Tony

    Sunday, July 29th, 2012 01:18

    1

    Nice post! I love sketching because it can enhance your knowledge to design carefully. For me prototyping is the best way to create a simple plan, easy to understand because you know how to place your ideas. I know it takes a lot of time but if you’re enjoying working no doubt of boring. Your post has lots of information in prototyping. Thank you for posting .

    +1
  • Marcin Treder

    Monday, July 30th, 2012 04:13

    3

    Hi! Thanks for mentioning UXPin notepads! We love paper prototyping and that’s why we’ve created our kits full of sticky notes :).

    I’m sure you’ll create lots of successful projects on paper and hopefully you’ll have some fun as well!

    +1
  • Nikhil Malhotra

    Sunday, July 29th, 2012 16:11

    2

    Very valuable article written.Superb points:)

    +1
  • Thomas

    Monday, July 30th, 2012 08:36

    4

    Awesome list!! Well done!!

    +1
  • Zeidan

    Tuesday, July 31st, 2012 07:36

    5

    Great post and well explained in how to use it. Thank you about sharing powerful tools for webs. free and opensource tool. In the long run, prototyping actually saves time.

    +1
  • Julius

    Saturday, August 18th, 2012 07:12

    8

    Awesome article! Now, I can start using this tools to save time BUT where can I find them? Is there any of these available in ebay? amazon? etc?

    It is a great help if I can get a direct link to it. Thanks much in advance.

    +1
  • parvin Akter

    Sunday, August 12th, 2012 06:58

    7

    Great article…..I used to do manual work for cross browser testing.. Now i will try some of the tools..
    Its awesome. This has helped me in testing various sites in my everyday.

    0
  • parvin

    Tuesday, July 31st, 2012 07:47

    6

    i’m really wondered to see this.It may be useful for my project.

    0
  • Julius

    Saturday, August 18th, 2012 07:12

    8

    Awesome article! Now, I can start using this tools to save time BUT where can I find them? Is there any of these available in ebay? amazon? etc?

    It is a great help if I can get a direct link to it. Thanks much in advance.

    +1
  • parvin Akter

    Sunday, August 12th, 2012 06:58

    7

    Great article…..I used to do manual work for cross browser testing.. Now i will try some of the tools..
    Its awesome. This has helped me in testing various sites in my everyday.

    0
  • parvin

    Tuesday, July 31st, 2012 07:47

    6

    i’m really wondered to see this.It may be useful for my project.

    0
  • Zeidan

    Tuesday, July 31st, 2012 07:36

    5

    Great post and well explained in how to use it. Thank you about sharing powerful tools for webs. free and opensource tool. In the long run, prototyping actually saves time.

    +1
  • Thomas

    Monday, July 30th, 2012 08:36

    4

    Awesome list!! Well done!!

    +1
  • Marcin Treder

    Monday, July 30th, 2012 04:13

    3

    Hi! Thanks for mentioning UXPin notepads! We love paper prototyping and that’s why we’ve created our kits full of sticky notes :).

    I’m sure you’ll create lots of successful projects on paper and hopefully you’ll have some fun as well!

    +1
  • Nikhil Malhotra

    Sunday, July 29th, 2012 16:11

    2

    Very valuable article written.Superb points:)

    +1
  • Tony

    Sunday, July 29th, 2012 01:18

    1

    Nice post! I love sketching because it can enhance your knowledge to design carefully. For me prototyping is the best way to create a simple plan, easy to understand because you know how to place your ideas. I know it takes a lot of time but if you’re enjoying working no doubt of boring. Your post has lots of information in prototyping. Thank you for posting .

    +1

Comments are closed.

174.129.74.186 - unknown - unknown - US