Dev Blog

FreshBooks iPhone Application GUI

by jaco on February 11, 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.

Download the FreshBooks iPhone GUI PSD v1.0

16 Comments (add comment)

Anand Chhabbi says:
Mar 29/10 1:28 am

Hay thanks ….
It’s really looking nice

ramesh.S says:
Aug 11/10 2:34 am

THANKS..ITS TOO GOOD STUFF….

Katie Osborn says:
Sep 7/10 11:58 am

Will you be making an app for Android OS?

Apr 25/11 9:37 am

[...] remakeiPhone KitSony Ericsson Xperia X10Meizu M8 PSD with UIMatte iPhone UISamsung CorbyLG KS360 psdiPhone Application GUIGoogle Nexus One TemplateMotorola Droid PSDGoogle Nexus PSDHtc DreamHTC Touch Diamond PSDHTC Hero [...]

May 6/11 9:51 am

[...] iPhone Application GUI [...]

Jun 27/11 10:28 am

[...] iPhone Application GUI [...]

Jun 29/11 6:43 am

[...] iPhone Application GUI [...]

Jul 12/11 11:17 am

[...] iPhone Application GUI [...]

Oct 28/11 2:05 pm

[...] FreshBooks iPhone Application GUI iphoneguiv1.jpg [...]

Oct 28/11 2:05 pm

[...] FreshBooks iPhone Application GUI iphoneguiv1.jpg [...]

Nov 8/11 5:31 am

[...] iPhone Application GUI [...]

Leave a Comment ( *required)

*
*

*

Search