My iPhone interface design tools

I have been doing iPhone and iPad interface design for quite some time now. During that time I noticed several fantastic community designers sharing their design sources, creating free icons and interface elements, … You can buy optimized sketchpapers, stencils and lots of other things to help you designing stunning iPhone application. I have been using several tools & assets for a while now, and I thought it might be interesting to talk about the ones I use daily.

01. Sketching

The iPhone Stencil Kit. ( 24,95$ )

I always start my interface design using the iPhone stencil kit I bought from uistencils.com. This kit contains an optimized iPhone UI Stencil and pencil. I also bought the iPhone sketch pad, which is a printed cardboard with printed iPhones on both sides. Perfect to start sketching and brainstorming on paper!

02. Digital design

From the moment I have the rough wireframes and interface structure in mind and on paper, it’s time to open Adobe Photoshop. My first action is opening a few psd files that will help me putting together the interface. Let’s see what I’m talking about!

Teehan+Lax

This is probably one of the most popular iPhone GUI psd’s out there. The guys from Teehan+Lax did a great job putting together all the important iPhone interface elements. Created with love and passion and free to use! All elements are designed with the exact dimensions and recently they even added an iPad GUI version as well!

Metasparks’ Fireworks iPhone GUI kit

This template is entirely vector based and is made to use in Adobe Fireworks. This approach allows you to quickly create mockups, as you can easily manipulate the interface elements on screen. I usually work in Photoshop, but this file comes in very handy as it contains a few elements which I can’t find in the Teehan+Lax PSD. Small assets like the ‘reply’ icon etc.. Either way, these 2 iPhone GUI kits should get you up and running in no time.

03. Icons

It’s very time consuming to create all your custom icons yourself. That’s why it’s handy to know that there are several free iPhone Interface Icon sets out there. These are the ones I use:

Glyphish

The Glyphish icon set contains 24-bit PNG images used as a mask to generate selected and unselected button states. They are carefully optimized for use on toolbars and tab bars in iPhone & iPad apps.

App-Bits

The App-Bits iPhone icon set holds 64 toolbar icons. These buttons contain beautiful shaded portions to give added depth and to highlight icon features. And just as the Glyphish set, they are free of charge.

04. Visual Presentation

Dropbox

There comes a moment that your client wants to take a look at your design. Presenting a nice and clean overview of the interface helps the client to understand what’s going on. You can dive deeper into certain pages or key elements of the application, answer questions personally, .. Besides this keynote presentation, I make sure the client sees the design on a real iPhone too. That’s why I like to use Dropbox. I simply stash all the screenshots I want to showcase in a Dropbox folder and I use the Dropbox iPhone app to get them on my screen. This way I can showcase the design on a real iPhone, anywhere, anytime.

Go ahead!

That’s it for today, Go ahead and start designing your killer iPhone application! Feel free to let me know which tools, sources and assets you use and if you have a design to showcase.. just shoot it into the comments!