iPhone App Sketching Tools / 06.08.2009

by Suzanne Ginsburg

I’ve been experimenting with a variety of tools & templates for creating iPhone app designs. Balsamiq is clearly the most “sketchy” and well-suited to the concept phase. The templates for Omnigraffle, Fireworks, and Illustrator will create higher fidelity sketches. The tool you choose will depend on a number of factors: the type of application, the level of customization needed, and of course, your preference. Template links & example sketches shown below.

(Update: An IXDA peer asked, “Why not pencil?” I *always* start with pencil or pen, but I eventually move into some type of electronic format since it’s easier to share with remote teams. In response, another peer sent me this link to this neat iPhone stencil. Also found this iPhone sketch paper.)

Balsamiq
The web- and desktop-based versions both support iPhone templates and have a wide range of widgets and icons. They recently added the ability to “link” mockups, enabling you to add basic interactivity. I linked my sketches and created a quick video showing how users could interact with the UI–super easy & fast! The link below summarizes Balsamiq’s iPhone specific features.
http://www.balsamiq.com/blog/2009/03/01/iphone-controls-new-icons-and-much-more/

Omnigraffle
Graffletopia has a variety of iPhone templates but my favorite is the “Ultimate iPhone Stencil.” The collection has excellent coverage, plus text can be edited and buttons resized. You can also link your Omnigraffle sketches to add basic interactivity.
http://www.graffletopia.com/search/iphone

Fireworks
Blog*spark put together a toolkit for creating iPhone mockups in Fireworks. Aside from the phone background, all elements have been redrawn as vectors for easy editing. Linking supported by Fireworks (TBD what happens with Catalyst!)
http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

Illustrator & Photoshop
Mercury Intermedia also created vector based templates. Haven’t tried these out but their site visitors seem to like them! They linked to teehan+lax for Photoshop templates.
http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/
http://www.teehanlax.com/blog/?p=447

Filed under: iphone, sketching | Comments Off »

Comments are closed.