Paper prototyping tools?

October 5, 2008 4:13 PM

I'm interested in doing paper prototyping for interface design. Learn me on the best tools for the job.

These images by Cultured Code were particularly inspiring. That's pretty much exactly what I want to do, but I'm a little fuzzy on the details. For example, in the first image there appears to be some sort of thick cardboard cut down to the shape of specific UI elements - what is that, and where can I get it? Can anyone recommend a particular type of pencil that might be better for sketching than a good ol' #2, or will any pencil do? What's up with those markers? Help me fill in the gaps!

posted by SamuelF to technology (5 comments total)

It looks like that's just a piece of bookboard cut down to the size of the iPhone screen and the sizes of the application bar and text areas. I assume they made them with an x-acto. I've never used sucha thing, but it would do a nice job of making pretty wireframes with consistent sizes.

For pencils, it's a personal preference. For paper prototypes, I prefer mechanical pencils, a dark one like an HB and a lighter one like a 4H of 6H (those are lead hardnesses, not name brands.)

The markers are a nice touch. I like PrismaColor markers. They dry quickly and don't smell as strong as Sharpies. You can also get them in countless colors.
posted by advicepig at 4:54 PM on October 5, 2008

You don't have to draw your wireframes with a pencil and paper. A lot of folks use Visio, which is a basic autocad-like program. Here's an iphone stencil : http://graffletopia.com/stencils/358. I've also seem them done in PowerPoint, Word, etc.
posted by xammerboy at 5:36 PM on October 5, 2008

advicepig: Ah, bookboard! So that's what it's called. Thanks for the pencil/marker info, too. I'll check those out.

xammerboy: You're going to send me in to fits. I have to - HAVE to - use Visio at work for mockups, ones that should be done in Photoshop. It's maddening. Plus, I'm an Apple guy, so I avoid Office apps like the plague.

As far as doing digital wireframes: there's a certain je ne sais quoi to doing paper mocks that I like. I find that digital mockups are more useful once I have the basics wireframes and flow done on paper. That's just me, though.
posted by SamuelF at 5:54 PM on October 5, 2008

The thing about paper prototyping is that you can use anything, anything, for it. Nothing fancy, no special cards necessary. Heck, when I did prototyping for a class, I used cardboard from a cereal box and string. And Sharpies and regular mechanical pencils. The main point is that you shouldn't be spending too much on paper prototypes. A nice utility/X-Acto knife will be useful, as well as scissors, but really good ol' school supplies should do.

Ok, so I did prototypes for a class, but it should hold true in the professional field. Some of the examples my professor showed me were really scrappy looking stuff from actual companies.
posted by curagea at 6:55 PM on October 5, 2008

I like graphed or storyboard paper like this or this.
posted by cocoagirl at 7:37 PM on October 5, 2008