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.
Jon Trainer has a post about the design process on his company blog.