Archive for June, 2010

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.