« John Harbor's Coffee House Lives On! • Main • The Little Extra Things Add Value »
December 19, 2008
Bullfrog Touch Logo & iPhone UI Design
In May 2008, Jon Trainer of Outer Level software came to me with a then confidential project — designing an icon and a UI screen for a top secret iPhone native application called Bullfrog Touch.
I've worked with Jon for years — designing the Outer Level logo, and creating an icon for LicenseKeeper, so I was happy to help translate his popular Mac OS X app Bullfrog to the iPhone.
Bullfrog Touch Logo Design
The first challenge was creating a new logo for the Bullfrog Touch application. I needed to incorporate the existing Mac OS X Bullfrog cartoon icon, created by Jordan Langille and adapt it to the iPhone. With the bullfrog icon on the left I chose Arial Rounded Bold for the Bullfrog font, applying a bright green glow in Fireworks.
In the open space to the top-right of the Bullfrog text, TOUCH fit perfectly. I stayed with Arial Rounded Bold in all caps, adding jumbled alignments to visually suggest a bullfrog's jumping action and for a bit of contrast.
Bullfrog Touch Score Screen UI Design
Next challenge Jon needed help with visually was the scores screen. Jon had a rough idea of what he wanted, provided in a mockup screenshot I could use for reference:
Using Jon's sample as a rough starting point, I began researching screens on my iPod touch and online, to see how Apple and other developers had dealt with UI elements, fonts, colors, sizing and so on. After the research phase, I built a mockup in Fireworks, right on top of Jon's original sample screenshot:
My goal was to make the scores screen clear, easy to read and use, while maintaining look and feel of the new logo into the UI design.
Jon was happy with the results, using the mockup and exported files as a reference for the final application UI. The colors and button styles and some of the elements were changed, resized and tweaked, but are still pretty close to my mockup.
Here's my original mockup next to the the final Bullfrog Touch scores screen:
Conclusion? That was fun, I want to do it again!
It was an interesting and enjoyable challenge working with Jon on this iPhone UI design project. I look forward to helping others on future iPhone app projects to keep exploring this fascinating new UI design space.Bullfrog Touch was chosen as one of the best iPhone/iPod touch games to give as a gift, in the TidBITS Gift Guide 2008
Jon Trainer has a post about the design process on his company blog.
Thanks Jon!
December 19, 2008 11:15 PM | Icons | 
add to del.icio.us
Rohdesign is the site of designer Mike Rohde, who writes about design, sketching, writing, mobile computing, technology, travel, cycling, books, music and more.
