Wireframing on a budget

My co-worker recently asked me what the deal was with all the post-it notes that perpetually orbited me, getting lodged in my hair and coffee and such. My overly detailed explanation caused me to realise that I'd developed a trick (that perhaps everyone has been doing forever - I dunno) which might also be useful to others.


Whenever I have an idea for a mobile app I summon my ape-like drawing skills and scribble it down on a post-it note. Post-it notes were born for iPhone wireframing. If you want to try this at home, then you're going to need a bunch of sticky notes, some kind of device that makes lines, and a parent or guardian to supervise.

Take the drawing device and make a vertical line about 3/4 the way across the page. This gives you a mobile-ish shape to mock-up your design on, and leaves 1/4 of the page to jot down any notes. Errrm. That's it.

Actually, as an added bonus - the tiny weeny post-it notes are already mobile-screen size and they are great for sketching out rough idea and sticking them down the edge of your monitor as a reference (assuming that you, like me, don't bother doing real designs before you start coding).

And if you really want to nail down your user interaction you can accurately mimic CSS3 transitions by drawing each frame and creating a flick book. You can use the vendor prefix -post-it if you want to be future compliant.