FreshBooks iPhone Application GUI
February 3, 2009
I was tasked with designing the FreshBooks iPhone application. The first thing I discovered was that Apple makes life unnecessarily difficult for people trying to design applications that match the iPhone style. They don’t have any ready-made GUI resources available for mockups. Even worse, their stock controls in Interface Builder don’t have all the visual options available that they use in their applications. Want a big red or green button like the ones in the clock application? Sorry, no can do. You will need to create your own.
This forced me to take screenshots of the stock iPhone applications and chop them into pieces in order to create mockups. The results were similar to the stock applications, but they felt dreary. They did not feel like something FreshBooks would create. They were too dark and ominous. We realized we were missing the opportunity to create something that would be distinctly FreshBooks—something bright, colorful, and fresh.
So we went back to the drawing board. While we wanted to keep the iPhone design guidelines, I also wanted to infuse the application with the FreshBooks brand. A new graphical aesthetic was needed; one that could be applied to all future FreshBooks applications, widgets, and gadgets. What we ended up with is very similar to the standard iPhone GUI, but makes use of a much fresher and bolder color palette.
In order to streamline future work on the iPhone application a proper set of reusable GUI elements were created. We are now making these elements available to all our 3rd party developers to help you with your creations. This set of GUI elements should make it painless to develop iPhone applications that look great and fit the FreshBooks brand.
This file only includes the iPhone GUI elements that we needed for the FreshBooks Time Tracking application. For additional elements take a look at the Teehan + Lax iPhone GUI PSD or, if you use a Mac, the Ultimate iPhone Stencil for OmniGraffle.