iPhone app Sketching Tools

Posted: June 8th, 2009 | Author: suzanne | Filed under: sketching | Tags: , , , , , | 2 Comments »

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/

balsamiq_test

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

omni_test

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/

fireworks-test

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


2 Comments on “iPhone app Sketching Tools”

  1. 1 Tai Toh said at 2:42 pm on July 2nd, 2009:

    Thanks for the great post. Another iPhone stencil that I find useful are part of a comprehensive stencil-set from the Yahoo Pattern Library. They have stencil sets for Omnigraffle, Visio (XML), PDF, PNG and SVG.

    http://developer.yahoo.com/ypatterns/wireframes/

    Again, thanks for the great post.

  2. 2 Ollie said at 11:58 pm on September 10th, 2009:

    We recently released the sketch template we use to design our iPhone apps.

    The template is based on a grid which is equal to 10px height, and has tick mark indicators of status bar, nav bar, tab bar and tool bar and keyboard.

    You can download the free template at http://bit.ly/13y61H

    Hope you find it useful!