Jon Hicks, a veteran in icon design and best known for the Mailchimp and Firefox logo, has finally released his book about icons: The icon handbook.
There are only a few books written about icons – two of these were released recently: Susan Kare’s Icons book (2011) which is mostly inspirational and Rockstar Icon Designer (2011) which is for the dedicated icon designer who wants to improve her skills.
Jon Hicks’ The Icon Handbook is somewhere in the middle where he combines large images of the best icons made, interviews with top icon designers and useful practical information as well as short tutorials. He never goes into much detail and most topics are covered by no more than a 2-3 pages. His passion for great design really shines through; the book itself looks gorgeous with great fonts, many full colored pages, and with a nice square format it’s pretty enough to be a nice coffee table book. Several pages contain only a single icon blown up to largest scale possible where you can enjoy all the little details.
Who’s it for?
If you’re an inexperienced icon designer, this book will help you get started and at the same time serve as inspiration. For a very experienced icon designer you probably won’t learn much new, but will enjoy seeing the many of the best icons printed in full scale or reading the interviews with the industry’s best designers such as Susan Kare, Drew Wilson, Wolfgang Bartelme and Jono Hunt (Iconaholic) among others.
Here’s a review of the 7 chapters of the book:
1. A Potted History of Icons – An introduction to icons and how humans started using symbolic language on cave walls and later in Chinese writing and hieroglyphics. In the 20th century we see how the modern use of symbols get standardized with Otto and Marie Neurath’s Isotope collection. No history of icons would be complete without mentioning the Xerox UI and Susan Kare’s work for Apple in the early 1980’s. Jon includes a short but interesting interview of Susan Kare. Since Jon Hicks himself is an important figure in icon design it seems appropriate that he tells a bit about his own background and how he started working with simple 8-bit graphics on his first computer.
2. How we use icons – The second chapter goes into more details by showing interesting cases such as the challenges McDonalds had with creating icons that were understood worldwide, to the Jon Hicks’ own challenges of creating the new emoticons for Skype. The chapter also gives some good guidelines on how to determine when you should use icons in interfaces and when not to use them. All cases are spiced up with quotes or short interviews with the people behind the icon design.
3. Favicons – This is the first chapter that encourages you to get your hand dirty and create your own icons. You’ll get a good overview of when favicons are used e.g. in top of browsers, Google TV bookmarks, iPads home screen etc. and what sizes the different use cases requires. Jon Hicks never shows how to draw the icons in details that you can expect from a classic tutorial – the chapter will be more inspirational than educational. It shows some great examples of what makes a good favicon.
You can find an extract of chapter 3 over at .NET magazine.
4. The Metaphor – Probably the most important (and sometimes hardest) thing in icon design is finding a suitable metaphor. So having a full chapter about choosing the right metaphor is really valuable for any designer working with icons. What many tutorials online miss is often the process that surrounds the process before actually designing the icons. This chapter takes you through the whole process from tips on how to get the right information in the design brief, how to find appropriate metaphors, sketching, the difference of ideograms and pictograms and choosing the right colors. Again, to spice it all up the chapter includes an interesting interview with Stephen Horlander, who is responsible for designing the well-known orange RSS icon.
5. Drawing Icons – The chapter consists of guidelines for tools, tips about sizing, how to achieve balance and consistency, recommendations about the level of details, colors etc. It never goes into too many details but gives you a good idea of what to be aware of when drawing icons. Between the guidelines you’ll find two tutorials; one for drawing a book with vector shapes and one for a 32px done the pixel style. Both tutorials are for Illustrator, but you could complete them with Photoshop.
6. Icon formats and deployment – Definently the most technical chapter, but also the one with the most “depth”. Most designers will probably learn a bunch of new stuff about formats that will be helpful in the years to come – both for icon design but also design for apps and web in general. You’ll learn about the pros and cons (quality, scalability, file size) of all the possible ways to get icons on a screen: Tiff, SVG, Canvas element, pure CSS, icons as fonts etc. Jon also shows a nice example of how to show different icons at different screen resolutions with HTML and CSS that you can copy/paste.
7. Application Icons – In much contrast to chapter 6, this chapter is much more about inspiration. Most pages are filled with the most beautiful app icons out there and show in the largest size possible letting you drool over the amount of details put into them. This chapter revisits topics from the previous chapters such as choosing metaphors, perspective and process. There are four real nice interviews here with David Lanham, Gedeon Maheux from The Iconfactory.
You can buy Jon’s book at http://www.fivesimplesteps.com/products/the-icon-handbook or read more at http://iconhandbook.co.uk/