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 →


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.

Email Join the Rohdesign Newsletter to receive updates on my sketchnote books, giveaways, appearances and more. Subscribe today!

Entries in Icons (10)

Wednesday
Dec292010

Postbox Icon in Cult of Mac's 15 Favorites for 2010

postbox-2-icon-512.png

What an honor! This week the icon I designed for Postbox 2 joins Things, Transmit, Reeder and Yojimbo in Cult of Mac's 15 Favorite Mac OS X Icons of 2010!

Here's a photo of all 15 favorite icons with Postbox highlighted:

cult-of-mac-15-hilite.png

From the Cult of Mac article written by Killian Bell:

Postbox - I love the Postbox icon for its clean, graceful design that represents the elegant user interface within the application. If you’re unhappy with the built-in Mail application on your Mac, Postbox is a great alternative. Featuring unified account groups that allow you to combine all of your email accounts in to one inbox; a quick reply feature that lets you respond to emails without the need to open a separate window; intuitive conversation views; and much, much more. It’s simple, clean UI is a pleasure to use and it’s well worth its $29.95 price tag.

It was great to see Jon Trainer's icon for Knapsack, designed by my friend Fernando Lins in the mix as well. Congratulations John and Fernando!
Friday
Dec192008

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:

Screenshot-Original.png

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:

bullfrog-touch-mr.pngbullfrog-touch-final.png

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!

Wednesday
Sep052007

Ecto 3 Icon Design

In the flurry of activity here, I've not had a chance to mention the release of the new ecto 3 application icon I've designed for Adriaan at Infinite Sushi:

;Ecto

Working on this one was quite fun, going through the sketch process, until we came to this solution of a box with items you might use for blogging inside. It was a different approach for a blogging app icon, but that's just what Adriaan liked best.

Fireworks & Upscaling
I designed the original icon as a standard 128x128px icon, then later in the process, Adriaan needed a 256x256px version for other uses. I took the opportunity to refine the details, like adding actual lines of text to the documents.

Because I used Fireworks' vector tools to build this icon, it was relatively easy to upscale the 256px icon from the original 128px icon. The initial up-scaled icon wasn't perfect, but good enough to save a god chunk time rebuilding the icon from scratch if it were a 128px bitmap icon.

Thanks Adriaan for working with me on this fun project! :-)

Friday
Mar232007

Journler Mini Review & Icon Design

Journler Icon DesignI've been using Journler a great Mac OS X journaling, tidbit-capturing, swiss army knife application for the past several months, and it's high time I share it here on the weblog.

On Thursday, Journler 2.5 was released, a major milestone for the app, including many new features, a new look and feel and an icon I designed with the developer, Phil Dow.

I love this multi-purpose capture tool, as I can store all sorts of useful information in one place. I can keep track of logo projects here, standard templates for emails, references to recipes and even links to external files.

I feel like I'm barely scratching the surface of Journler's capabilities. It integrates to iLife, I can capture images, video and audio, it uses of the 'Services" menu to capture information from other applications, and has a 'Journler Drop Box' folder for an easy way of importing or linking files to Journler.

Like NetNewsWire (another favorite app), Journler features a built-in webkit-based web browser, so I don't need to leave Journler to check out a weblink.

Here's a screenshot of how I have Journler setup:

journler.gif

Phil has a nice approach to purchasing Journler, with a donation option for personal use, and a $24.95 if you use Journler for business purposes. Not bad.

If you're a Mac OS X user, interested in finding a tool to capture the snippets of your life, a place to write journal entries, and more, check out Journler.

It's highly recommend, even if I'm a little biased about the icon design. :-)

Wednesday
Mar142007

HoudahGeo Icon Design

houdahgeo-icon.pngJust this week I've completed the application icon for one of my MakaluMedia clients, Pierre Bernard of Houdah Software, on his latest beta application HoudahGeo. In June 2006, I designed the icon for Pierre's first OS X application, HoudahSpot.

HoudahGeo allows you to geocode photos with latitude, longitude and altitude information. Take your photos, "pin" their locations on the earth, then export information to EXIF tags or Google Earth KML files, letting you can see the images in Google Earth.

Sketches
Pierre and I started working with pencil sketches, using a globe with photos stuck to the surface, and a satellite in orbit around it, as you can see below:

houdahgeo-sketches.jpg

1. In my first sketches, I focused on a single satellite, beaming information to/from photos on the surface of the globe. At this stage I hadn't worked out continents or exact placement of the photos, but knew I liked this general idea.

2. Here I played around with the idea of both a satellite and a camera orbiting the earth, and had by this round, started exploring continents and image locations a bit more. In the end, we discussed the camera+satellite option and felt the camera was redundant and not necessary to get the message across.

Production Icons
Next I went to production, using Fireworks to create the vector-based artwork. After a rough first draft, Pierre had an idea to try a pushpin in place of a satellite, though in the end, we felt the satellite just worked better.

With each successive revision, the earth was refined, satellite tweaked, highlights, glows and adjustments made. Here I've placed the first 4 revisions together to give you an idea how the process generally works:

houdahgeo-icons.jpg

The final adjustments and tweaks happened on icon v5, including a size up of the earth about 5-6%, lightening of the satellite's pulse glow and a few adjustments to photo locations on the earth itself.

Fireworks as Tool of Choice
The construction if icons using vectors in Fireworks, greatly assists in these kind of subtle tweaks. Because all of the elements are created as vector items, they can be easily sized up and down with no degradation of image quality, or moved around without worrying about re-applying masks or filters.

For comparison purposes, here is the final, winning HoudahGeo icon v5:

houdahgeo-icon.png

Thanks Pierre for choosing to work with me and MakaluMedia on your latest Mac application! I had a great time working with you on another fun icon project. :-)