The popularity of the iPhone has yielded a comprehensive set of resources for designers to use to create prototype interfaces for iPhone applications. These resources include a rich set of stencils that can be freely downloaded from the web. Stencils are available for many of the most common tools that designers use to create medium- and high-fidelity mock-ups (Photoshop, Illustrator, Fireworks and OmniGraffle).
A notepad is still the most effective tool for low-fidelity prototypes (uistencils.com).
On iPhone mock-up workflow: I’ve always used OmniGraffle for medium-fidelity iPhone mock-ups. The alignment and resizing capabilities of the program make everything feel like it snaps together perfectly, especially when you use the resources listed below. The workflow in Photoshop feels a bit clunkier, but of course for fine-detailed control of hi-fi mock-ups Photoshop is much more robust. I like to create custom details in Photoshop and import them into OmniGraffle, or assemble an OmniGraffle stencil out of custom parts made in Photoshop. This way, I don’t waste time getting lost in a Photoshop unnamed-layer maze.
On mock-up stencil resources: There’s some overlap amongst the three OmniGraffle stencils, of course, but it’s worth having more than one; they complement each other, and each one seems to have something that the others don’t. Theresa Neil’s stencil works for medium-fidelity prototypes, and the other two are great for taking them hi-fi. When I need a more customized element, I use Mercury Intermedia’s UI vector elements so I can stretch and manipulate without worrying about pixelated images.
I’ve listed many of the popular available iPhone stencils and toolkits below. Please let me know if you find any that could be added to the list.
OmniGraffle
Ultimate iPhone stencil (Graffletopia)••
iPhone wire frames (Graffletopia)•
OmniGraffle Stencil Kit (Yahoo!)••
Adobe Illustrator
UI vector elements (Mercury Intermedia)•
Adobe Photoshop
iPhone GUI PSD (Teehan + Lax)••
iPhone design elements (Creative Tech Tips)
iPhone interface elements (320480)
SMS chat bubbles (DeviantArt)
Blank iPhone buttons (DeviantArt)
iPhone icon style kit (Keep the Web Weird)
Adobe Fireworks
Fireworks toolkit for creating iPhone UI mockups (Metaspark)
iPhone GUI as rich symbols for Fireworks (Jorge Correa)
Tags: Mobile
