Designing for the iPhone 3G: Tips and Tools

Last April I posted a simple iPhone wireframe stencil to Graffletopia, an online stencil community for OmniGraffle users. 18 thousand people have downloaded it. It is time for an update- get your new iPhone 3G Stencil here. Unzip it and put in in your Library > Application Support > OmniGraffle > Stencils folder.

I’ve also included some tips and tools I find useful while designing iPhone applications.

Design Basics

Start with the iPhone Human Interface Guidelines.

Paper and Pencil Drawings

So fast, so simple. Grab a sketch pad and the iPhone stencil kit. I hope they make a magnet set next.

Digital

1. My favorite wireframing tool,Balsamiq Mockups, now supports iPhone UI elements

2. iPlotz , another wireframing application, also provides iPhone controls
3. Try my new iPhone 3G stencil

High Fidelity

1. Mercury Intermedia’s vector images

2. teehan+lax’s psd images

Interaction Design

1. Download the Touchscreen Hand Gestures v2 on Graffletopia, inspired by Dan Saffer, author of Designing Gestural Interfaces, O’Reilly Media December, 2009.

2. Todd Warfel did a great presentation last month in NY called Prototyping in the Wild. He had some cheap, quick and fun ideas for prototyping iPhone apps- mostly involving cardboard, markers, paper and tape. Cut a life-size iPhone out of cardboard. Place it over your design sketches. Your clients or test group can flip through the screens to experience the app. Hint* add notes like “pull to left” or “slide up”, or create a Common Craft style movie to pitch the concept.

3. Balsamiq Mockups can now be combined with Napkee to make working prototypes. I have not tried this for an iPhone app yet, but I am optimistic.

Best Apps Showcase

1. Check out O’Reilly’s Best iPhone Apps site for inspiration

2. There is a new book on the market Best iPhone Apps: The Guide for Discriminating Downloaders. I haven’t personally checked it out yet, but will over the weekend. It is bound to have some good examples in the 220+ pages.