Notecard Wireframing

May 15, 2013

image

Chances are, you probably have stacks and stacks of unused notecards lying around SOMEWHERE. Don’t know what to do with them? They’re a wonderful, super inexpensive, and a very flexible prototyping/wireframing tool!

If you “mess up” a card in your stack, no big deal — they cost around 0.002 cents each (I completely made that up but it sounds fair). Notecards are extremely easy to rearrange, transport, lay out, pin up, tape, re-create, you get the point. AND they’re the perfect size for mobile phone prototyping. Typical screen sizes on phones are about the same as the rectangular shape of a notecard.

image

You can use the back (blank side) for your drawing, and use the lined side for notes about the interaction of that page. This forces you to keep explanations brief — limiting the complexity you can press onto that page — and making for a more simplified user experience. This is the beauty behind mobile devlopment in the first place! The constraints placed on us when we design for mobile apps or the mobile web are what keeps design moving forward and brings a cleaner product to the end user!

So next time you’re hand drawing a storyboard in your sketchbook, look for some old notecards you have left over from that grueling art history class, and flip them, draw on them, collaborate over them. Use notecards to wireframe!

TL;DR: notecards are great. use them.