Using quick mockups to prototype iPhone apps

7 Comments

I constantly get ideas for new iPhone apps and like to show people mockups to get their feedback. I needed a way to compile entire apps into browseable flows that I could show to my friends on my iPhone. I also wanted to update the designs on the fly. Thanks to a few great, mostly free online tools this is actually really easy.

A couple of people who noticed what I was doing asked me how it’s done, so I thought I’d share the process:

  • I assemble the layouts in OmniGraffle. Set the canvas size to iPhone resolution at 320×480 pixels and use one of the free stencils out there containing the basic iPhone UI elements, such as Ultimate iPhone by Patrick Crowley. (If you’re creating a web app, the iPhone Webapp Wireframes stencil by Theresa Neil will help get you started).
  • You’ll probably need Toolbar icons such as these ones by Glyphish (or, try this more limited common toolbar icon set).
  • For more UI libraries, see iphonedesigntools.com (Photoshop and Illustrator libraries only, no OmniGraffle version yet).
  • For Home screen buttons, try this Photoshop template or use this browser-based icon maker.
  • Now for the fun part: once you’ve completed the layouts in OmniGraffle, export to PNG and upload the folder containing the images to Dropbox (you’ll need to create an account if you’re not yet a Dropbox user). Then, access the folder using the Dropbox iPhone app — and voila, you can view and browse the 1:1 mockups on your iPhone screen in a convenient, easy to update format.

Comments

Feed   Trackback Address
Petri Partio
June 2nd, 2010 at 8:39 am (#)

If only Dropbox wouldn’t re-compress the images. Now I get degraded quality and I’d like to view my mockups pixel perfect.

Any alternatives other than email?

Mathies
June 10th, 2010 at 11:25 pm (#)

Using Omnigraffle for mock-ups is an absolute delight! Just wanted to share a link for more stencils to use with Omnigraffle: http://graffletopia.com – enjoy!

Brian Hayashi
June 16th, 2010 at 11:01 pm (#)

Two fun tools for prototyping are Balsamiq Mockups and then Unbounce. Balsamiq is an AIR-based platform for creating mockups, it has drag’n’drop iPhone UI elements and it will export to PNG.

Unbounce is fun not only because it’s simple to draw pages, but it has an A/B comparison engine running in the background so you could prototype three different UIs, and see how different layouts lead to different outcomes.

(BTW, glad to hear you’re going to be advising SuperFeedr. Lots of implications when dealing with feeds instead of discrete events. We’re very lucky to be living in these interesting times!!)

Jyri
June 16th, 2010 at 11:11 pm (#)

@Petri I haven’t found image compression on the Dropbox iPhone client a problem. Make sure the mocks are exactly the correct size to prevent scaling/stretching?

Jyri
June 16th, 2010 at 11:36 pm (#)

@Brian thanks for the pointers. The times are interesting indeed. There’s a LOT more data flowing across services than there was a year ago. That means new opportunities for big data startups such as Superfeedr.

Paul
July 9th, 2010 at 2:24 am (#)

thanks. needed something like this for dissertation data collection. p

Frank
December 21st, 2011 at 7:02 pm (#)

Try App in Seconds – http://www.appinseconds.com

Get’s sketches and screen designs on your iPhone very quickly, no technical knowledge required. Seriously easy. Great for showing ideas to clients, research participants and friends. Cheap too!!