Buy my Books!

The Sketchnote Workbook is a fully-illustrated book and video, showing how to use sketchnotes in new ways, along with advanced tips and techniques.
Learn about and buy the book →
Download a FREE chapter →
Watch a FREE video sample →

The Sketchnote Handbook is a fully-illustrated book and video, designed to teach regular people how to create sketchnotes.
Learn about and buy the book →
Download a FREE chapter →

Mike Rohde (Color - Square)

ROHDESIGN is the website of designer Mike Rohde, who writes on design, sketching, drawing, sketchnotes, technology, travel, cycling, books & coffee.
Read more about Mike →

SIGN UP! Get the Rohdesign Newsletter.

« The Little Extra Things Add Value | Main | John Harbor's Coffee House Lives On! »

Bullfrog Touch Logo & iPhone UI Design

outer-level-logo100.pngIn 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.

Bullfrog Touch Logo

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:

Bullfrog Touch Scores UI Design

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!

Reader Comments (2)

This is not to detriment your work (quite the opposite!) but I really prefer your mockup to the final :) Bigger buttons, more character. There also appears to be something you can do with the scores that isn't indicated on the final (or perhaps that feature didn't exist anyway).

The final one is certainly more professional, but I'm not sure about the color scheme (though it probably makes sense in the context of the rest of the app). Your mockup really clicks for me for some reason :)
December 19, 2008 | Unregistered CommenterPeter Cooper
Peter, thanks for the feedback and kind words! They're appreciated and encouraging.

I liked the darker look as well, but I don't know Jon's limitations and decisions completely, which effected the final design (e.g. the brown color, etc.).

To be fair, I had very limited time this spring to help Jon out with the UI, so I focused on the areas he needed most and that had time to handle at the time. I really wish now I'd had more time to spend with Jon on the UI design. Them's the breaks. :-)

That's one of the reasons I'd like to be even more involved in UI design for an iPhone application sometime in the future. I would really enjoy collaborating with a developer on the many screens involved — making sure they're consistent, simple and compelling.

Right now I've been very aware of learning the UI on the applications I use and test on the iPod Touch (that's one of the reasons I chose to buy the Touch in fact).

As for the score icons you mention in my mockup but not in the final — Jon mentioned that the link icon is used in the final application, but only for actual high scores. The scores in the image are the dummy scores from an early build, and therefore have no online equivalent to link to. An updated screenshot by Jon might not be a bad idea, now that there are actual high scores to show.

Thanks for the comment!
December 20, 2008 | Unregistered CommenterMike Rohde

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
All HTML will be escaped. Hyperlinks will be created for URLs automatically.