iPhone User Interface Design

After attempting to design iPhone user interfaces using several different methods I have finally found a home with Balsamiq.

There are several good solutions available to developers to design iPhone user interfaces. There are sketch book solutions, which allow you to start with an iPhone blank image. None that I found added any significant value to the design process for two main reasons: 1) there is no standard template that can be used that scales to the iPhone blank image templates and 2) lots of drawing and erasing as you attempt to design the perfect interface.

Then I tried several variations of templates that can be leveraged in Photoshop. Though they are freely downloadable, I found that my productivity suffered when designing an application because the templates were somewhat clumsy to use. That may very well have been caused my inexperience with Photoshop, none the less one still has to own Photoshop or a close proximation (Pixelmator) to leverage the templates. If you decide to go this route and don't own either product, Pixelmator is an excellent product for a fraction of the price of it's competitor.

The next alternative I tried was using a template designed by the Design Commission. This is a metal template that allows you to draw the outline of the template to get an enlarged scale iPhone and includes all of the design elements required to design an iPhone application. If I had not stumbled upon the iPhone controls from Balsamiq I would certainly be using this design template. Though the constant problem with drawing and erasing still exists this tool provides a good and inexpensive solution for designing iPhone applications.

After attempting several options for designing iPhone applications and getting frustrated with the process, I remembered the process I used to design web applications in the past. I have used Balsamiq extensively now for over a year and a half to design interfaces for Ruby on Rails and Grails but I only knew of templates for designing web applications. After a quick search I found iPhone controls for Balsamiq. After installing the controls into Balsamiq, I quickly found out that iPhone UI design could be fun and productive. Though the Balsamiq iPhone controls don't include all of the iPhone controls, through the other default Balsamiq controls it's easy to design an iPhone application that can be exported as an image with embedded design notes to leverage when constructing the application.

Below is a screenshot from the Balsamiq site showing all of the iPhone controls available. Each control has multiple configuration elements to suit your design needs.