Designing for the iPhone 3G: Tips and Tools

September 16, 2009 — 14 Comments

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.
iPhone3G

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.
Physical_stencil

Digital

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

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

High Fidelity

1. Mercury Intermedia’s vector images
vector_goodness

2. teehan+lax’s psd images
iphone_gui

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.
touchscreen_gestures

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 skecthes. 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.
frame-02-800

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
Best IPhone Apps

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.

14 responses to Designing for the iPhone 3G: Tips and Tools

  1. 

    Great article and an awesome template! (However, I think the link to the iPhone 3G Stencil got lost somewhere along the way?) :)

  2. 

    And here’s a great paper iphone notepad: http://notepod.net/

  3. 

    I recently released our FREE iPhone App Sketch Template which we use to design our iPhone apps.

    Includes grid equivalent to 10px, as well as tick marks for Navbar, Toolbar, Tab bar and Keyboard.

    Available as a 300dpi A4 JPEG. Hope you find it useful!

    For more info visit: http://bit.ly/13y61H

  4. 

    That is inspirational post. Never knew that view can be this speckled. Thanks for all the devotion to put forward such useful information here.

  5. 

    I recently saw the Apple Ipad. Is it going to dominate the 3G Iphone?

  6. 

    The processor chip is labeled as slightly newer model number however it and the GPU are most likely the similar pace as the 3GS. The old Contact with the similar Processor and GPU since the 3G was faster. Apart from having the clock pace turned up higher the Contact has much less software programs to run because its not a phone. It should defeat any iPhone to day in overall performance.

  7. 

    I strongly recommend to have a look at our product App Cooker. It has been designed to make this in the best way possible.

Trackbacks and Pingbacks:

  1. Designing for the iPhone 3G: Tips and Tools | Konigi - September 17, 2009

    […] for the iPhone 3G: Tips and Tools Theresa Neil updated her iPhone 3G stencil set for OmniGraffle at Graffletopia, and posted a few tips and tools that might be helpful to iPhone […]

  2. » EverydayUX morsels (September 15th – September 18th) | EverydayUX: Everyday User Experience by alex rainert - September 19, 2009

    […] Designing for the iPhone 3G: Tips and Tools « Theresa NeilA great iPhone stencil kit gets updated. […]

  3. Alternativa Links #4 | Alternativa Coletiva - September 19, 2009

    […] Designing for the iPhone 3G: Tips and Tools […]

  4. iPhone Stencil for your applications @ Design, Photography, Blog | Bryhl.com - November 26, 2009

    […] to Graffletopia, an online stencil community – and now here is sharing it at his own website. Download it here and don’t forget to read his description. This post was good enough to be […]

  5. Free Mobile Devices Prototyping Templates – Best Of | HowDoDesign - February 8, 2012

    […] iPhone 3G Stencil (Omnigraffle). Another complete iPhone stencil kit with extensive icons and buttons by Theresa Neil, kindly available to everyone in Omnigraffle format! […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s