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.

« Boston Globe: PDA buffs go back to basics | Main | Digital Creativity Flow & Google »
Thursday
Jun222006

Designing the HoudahSpot Icon

Back in February, I came in contact with Pierre Bernard, a Mac OS X developer in need of an icon design for his search tool, HoudahSpot. Pierre's search tool is really an alternate front-end to the Spotlight engine, offering features such as live queries, manipulations of files within search results and an easy to use interface for searching with complex criteria.

Concepting
Pierre had ideas in mind for the his icon — his signature elephant, a set of binoculars, and sheets of paper. I was selected to offer alternate ideas, refinements and provide design guidance in bringing this icon to life. houdah-sketch-v1.jpgAfter some initial questioning about the application and Pierre's idea, I began as I always do, with pencil sketches in my Miquelrius notebook.

Sketches, Round 1
I felt there needed to be something tying the loose papers, binoculars and the elephant icon together, when I realized that if you were on safari, you would carry papers in a binder.

So, with this idea in mind, I sketched out a a heavy duty leather binder with the Houdah elephant icon embossed on the cover, and binoculars laying on top of the binder. Pages would be coming out at odd angles to suggest chaos often present on a user's machine. I also included a small compass to complete the image.

Sketches, Round 2
houdah-sketch-v2.jpgPierre and I both quite liked the binder concept from the first round, and wanted to refine the idea a little bit more. I sketched out a second round of pencils, exploring variations on sketch 5 and a runner up, to make sure we were going along the right track.

On this set, I moved the binoculars down and right on the binder cover to reveal more of the Houdah elephant character, removed the compass, which felt unnecessary. I then rounded the leather binder's corners and refined the paper positioning to be a little less chaotic. This second round sketch looked quite nice, with pretty good balance and proportions.

Sketches, Round 3
houdah-sketch-v3.jpgPierre had one more experiment to try before settling on the concept — sliding the binoculars off of the right edge of the leather binder, to reveal the entire Houdah elephant character. I created an abbreviated 3rd sketch exploring this idea, though immediately Pierre and I felt it threw the balance of the icon off. The binoculars on an angle, laying on top of the binder were better.

Color Comps v1-3
houdahspot-123.jpgNext up, , move ahead to the Mac, and start building the icon in Fireworks. First, I began in icon 1 with the binder, as I felt this element would hold the icon together. Using a photograph of leather, I modified it in Photoshop and Fireworks as the base texture, adding shade, reflections and seams. You can see I also began exploring documents inside of the binder. In icon 2, the binoculars were built using reference from Leica binoculars. In icon 3, I move to defining the documents in the binder in more detail, widened the binder and corrected the angle and skew of the binoculars.

Final Icons
HoudahSpot-Icons-Final.jpgNext, I brought the final icons from Fireworks into Photoshop, for final tweaks and export to .icns files which Pierre could bundle into HoudahSpot. Pierre wanted to remove the highlight on the left edge of the binder, and other small tweaks I found were made to the icon before final export.

I used the binoculars art from the master application icon file to create a complimentary document icon, using the leather binder texture on the top edge of the document to carry over the look and feel of the main icon to the document icon.

Conclusion
Pierre and I are both very pleased with the final application and document icons. They're warm and inviting, capturing the idea of HoudahSpot well. Yoram Blumberg, a German designer liked the icon quite a bit:

When I stumbled upon HoudahSpot at MacZOT.com my first thought was: «I really love that catchy icon, I don’t care what the app is for — I wanna add that icon to my dock!»

Thanks Yoram! :-)

Special thanks go to Pierre Bernard for choosing to work with me and MakaluMedia on this icon. His help and collaboration through the entire project made the HoudahSpot icon a pleasure to create.

I hope my description of my icon design process is interesting and helpful, especially for developers who are curious what goes into the development of an application and document icon. If you need an icon designed, drop me a line.

If you're interested in exploring an alternative approach to search on your Mac with the power of Spotlight under the hood, give HoudaSpot a try.

Related Links
Designing the endo icon
Kula 1001 Icon
MailDrop 2.0 Icon Story

Reader Comments (5)

Fascinating as always, Mike. I wish I had one tenth of your ability to use Fireworks and Photoshop.

One question: I notice that the binoculars are set at very slightly different angles for some of the icons. Did you have to redraw the binoculars from scratch each time, or is there some trick to faking the viewpoint?
June 22, 2006 | Unregistered CommenterNeal Dench
Excellent. I love how you show your sketches on paper. Did you create the icon at actual size, or was it created as a large icon and scaled down?
June 23, 2006 | Unregistered CommenterBrody
That is absolutely superb!
June 23, 2006 | Unregistered CommenterJohn Topley
Nice! Now I know the source of one of the slickest looking application icons on OSX. So much detail crammed into a little icon.
June 23, 2006 | Unregistered CommenterDerek Punsalan
I just love these walk-throughs Mike. Great job on the icon and thank you for sharing your process!
June 24, 2006 | Unregistered Commentermashby

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):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.