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

21 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


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 [...]

Sep 3/14 10:54 am

Hi there, after reading this remarkable article i am also glad to share my familiarity here with friends.

Oct 3/14 10:56 pm

Howdy! Do you know if they make any plugins to help with SEO?
I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success.
If you know of any please share. Kudos!

Oct 22/14 1:06 am

nadruki na koszulki
furniture store
yahoo directions
sleep deprivation
ed gein

Nov 9/14 9:29 pm

Greetings from Idaho! I’m bored to tears at work so I decided to check out your blog on myy iphone during lunch break.
I love the information you present here and can’t wait too take a look when I gett home.
I’m amazed at how quick your blog loaded on my phone ..
I’m nnot even usng WIFI, just 3G .. Anyways,awesome blog!

Leave a Comment ( *required)