When the Icon Handbook was first released, back in 2012, it coincided with some rather more important life priorities and as such I didn’t market it as well as I might. In particular, the website was left half-finished, lacking a mobile view, SVG icons and a icon size reference chart that was rapidly going out of date. I’ve since not found the motivation to go back to it…until now. Smashing Conference in Oxford this week (more on that next) gave me a kick
I still have more plans for the site, but at least for now I’m not so embarrassed about the stylesheets, or outdated information. ALL the icon reference charts have been updated to reflect the missing new changes (Android xxhdpi and xxxhdpi, iOS7, Blackberry 10, Windows 8), and charts for Symbian, Meego and Ubuntu have been removed. Ubuntu will be back as soon as they send me the new info! I’ve also updated the Favicons page to add new sizes like Windows 8 Pinned Tiles, and remove things like Opera Speed Dial images that are no longer applicable.
If you haven’t bought a copy yet it’s on sale until the end of March, so now is a good time!
Hey folks! Can there be anyone who doesn’t have a copy of this valuable tome yet? Well, The Icon Handbook is 20% off until 7th April, so you can fill that icon-shaped space in your bookshelves!
This is a great opportunity to add more colour to your bookshelf with 20% off all Five Simple Steps books throughout July. Not only my own Icon Handbook, but also my current favourite Designing the Invisible by Robert Mills, and Andy Clarke’s labour of love Hardboiled Web Design. Then again, I can’t single out those when there’s Brian Suda’s Designing with Data and Mark Boultons classic Designing for the Web.
If you’re missing these titles in your library, now is your chance to see why I approached them to publish my book!
When I was writing The Icon Handbook, I had my list of first choices for people I wanted to work with. Chris Mills and Owen Gregory for Project Manager and Copy Editor, Gedeon Maheux from the Iconfactory for Technical Editor, and for the foreword… The Noun Project. All of which said yes! I absolutely love what The Noun Project are doing, there isn’t a comparable site for the quality of it’s curated collection of pictograms.
So when I was asked to write a guest post for The Noun Project blog, I was chuffed to bits! The post I’ve written, ‘Insights on Symbol Design’ contains portions from The Icon Handbook (and as such It’s another taster for the book), but was still written more or less from scratch, looking at considerations of pictogram design in particular.
Go to Insights on Symbol Design - The Noun Project
What a way to celebrate 10 years of Hicksdesign (to the very day) – my advance copy of The Icon Handbook arrives! I’m actually holding it in my hands! It has pages that turn with words (what I wrote) and pictures on them!
It looks and smells flippin’ gorgeous!
Excuse me, I think I need a sit down…
If you’ve been waiting for the print version to be available before purchasing, now is your time to pick up a copy!
Since publishing a section from The Icon Handbook as part of 24 Ways last December (Displaying Icons with Fonts and Data- Attributes) I’ve been involved in a few discussions regarding its cons, some of which have since gained workarounds, and it felt a good time to do a follow up post.
First of all, its worth mentioning the context of the article – it’s from Chapter 6, where all the various possible methods for deploying icons on the web are laid out. This includes creating icons with CSS, which isn’t something I’d recommend, but just may be a solution for someone out there and work well in a particular context. In the same vein, using fonts to display icons is just one of the options.
Lets go over the 2 cons that keep coming up:
Jon Tan states (rightly) that where matching unicode characters exist, the key should be mapped to that (such as the heart symbol for Favourites) and others that don’t to Private Use Areas where they have no associated meaning or content. This isn’t a problem with the technique as much as the current implementation of the fonts. Its solvable, although doing so will add an extra layer of complexity in specifying the correct letter. There’s also not going to be many icons that can be mapped of course.
Drew Wilson has improved this situation with his release of Pictos Server – a typekit style hosted service where you can choose only the icons you want in the font, as well as what letter its mapped to. It also helps another issue with the technique – that of icon choice. Adding a new icon to a font is complex work, but with 650 to choose from, its less likely to be an issue.
Another option here is IcoMoon which allows icons to be mapped to Private Use Areas in Unicode, thereby avoiding odd content altogether.
Screenreaders speak generated content
Using CSS to insert content has the side effect of the icon letter being read out by screenreaders. Not the worst accessibility issue, but confusing.
However Eric Eggert discovered that this can be avoided with the ARIA attribute:
For me, the biggest issue is pixel crispness. Unless you spend an awful lot of time hinting the font properly, you just won’t get the same crispness that you can achieve with a PNG.
Once everyone has high density screens this won’t be an issue, but in the meantime, I’m thinking more along the lines of SVG Sprites to implement my own icons and gain scalability.
The Icon Handbook is now available to buy. Here’s what it looks like:
This is a book that I’ve been wanting to write for a long time. Whenever I’ve looked for a book on this subject, the only available publications are reference guides that simply reproduce as many symbols as possible. Where books have gone into theory, they were published decades before desktop computers, and therefore miss the most relevant and active context of icon use. Sometimes the topic is covered as a part of a book about logo design, and amounts to little more than a page or two. So I’ve set out to create the manual, reference guide and coffee table book that I always desired.
It’s aimed at designers who already have basic vector and bitmap drawing skills. It could be that you only have to create a simple favicon, or perhaps you’ve been asked to work on a website or mobile app that requires icons. You might usually rely on a resource like a royalty-free icon set, which may provide common icons but probably doesn’t provide everything you need.
This book begins at the point when you need to create your own icons. Its purpose is to guide relatively inexperienced designers through an icon design workflow, starting with favicons and working up to application icons, as well as inspiring and providing a reference point for existing icon designers. It does not set out to teach you how to draw in a particular application. The aim is not to improve proficiency in particular applications but, rather, to show you how to create icons with the common toolset found in most of them, so you can be more versatile.
Here’s what you can find in the Icon Handbook:
Chapter 1: A Potted History of Icons
A short look at the history of icons, focussing on the the last century, and in particular how ‘icon’ came to mean more than religious painting.
Chapter 2: How we use icons
Looking at the uses for icons beyond simple decoration, how they help us navigate, give us feedback and express our mood. It also looks how not to use icons!
Chapter 3: Favicons
Starting with the simplest form of icons, looking at how to get crisp artwork at small sizes and the various ways favicons are used.
Chapter 4: The Metaphor
Working through the process of discovering if a metaphor already exists, and how to decide on the right one if there isn’t.
Chapter 5: Drawing Icons
Walking through the drawing process, working with simple pictograms and small colour icons, and looking at the pitfalls on the way.
Chapter 6: Icon formats and deployment
There are many different formats and deployment methods for icons, depending on the context, which can have a bearing on how we create the artwork. In particular I cover all the methods for displaying icons on websites.
Chapter 7: Application Icons
We finish on the largest and most complex of all the icons, which are more often than not, photorealistic works of art.
Handy reference, including: Common icon badges, overview of drawing and creation tools and a comprehensive icon reference chart.
Along the way, I talk to icon designers such as Susan Kare, David Lanham and Gedeon Maheux of the Iconfactory and many more about their process behind well known icons.
On top of all that, there’s some jolly nice eye candy in there!
Thanks must go to many people (the acknowledgments is 2 pages) but I must particularly thank the team that put this together at Five Simple Steps, including Emma, Nick and Mark Boulton, Colin Kersley and Sarah Morris. Also to the words team: my project manager Chris Mills, copy editor Owen Gregory, and technical editors Gedeon Maheux of The Iconfactory and inimitable Andy Clarke.
You can purchase the digital edition and/or pre-order the paperback which will ship around 30th Jan 2012. There will also be an accompanying website at iconhandbook.co.uk which will contain reference and code examples from the the book, as well as a blog with bits that didn’t make it into the first edition!
The Icon Handbook is ready and will available to buy tomorrow (Tuesday December 20th), from Five Simple Steps 3pm GMT! You can purchase the digital edition or pre-order the paperback which will ship around 30th Jan 2012. A proper blog post will come tomorrow, in the meantime, I need a good sit down and a cup of tea…
Todays 24ways article is Displaying Icons with Fonts and Data- Attributes, taken partly from Chapter 6 of the upcoming Icon Handbook, but rewritten to fit to the 24ways format. Instead of using the traditional route of PNGs, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique.
Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research.
Go to Displaying Icons with Fonts and Data- Attributes
…as we have a date! The Icon Handbook will be available to pre-order on December 20th!
More details will be released shortly, but the Five Simple Steps page has an introduction and table of contents to give you a flavour.
I’ve written my first book!
Its taken even more time and energy than I ever dreamed it would, but yesterday marked the very last chapter passing it’s final stages of being buffed and tweaked into a manuscript that people would actually want to read.
I started planning this book 5 years ago, and only the combination of Five Simple Steps, Chris Mills (A.K.A “Mills of Steel”), Owen Gregory and my technical editor, Gedeon Maheux of The Iconfactory has made it actually happen.
All the icon artists I contacted (bar one – but I shan’t name any names!) were enthusiastic and responsive, which made it a joy to organise. Many responses came with fantastic icon material that hasn’t been seen before – early ideas and process snapshots, as well some yet to be released.
More details of the book will follow soon, but for now, here’s a work in progress of the cover to (hopefully) whet your appetite!
Those nice chaps over at Iconfinder.com recently interviewed me about how I started, Icon Design, the upcoming Icon Handbook. Pop along and have a read if you’re so inclined!
Go to Interview for Iconfinder.com
Let’s get straight to it! I’m busy writing a book called “The Icon Handbook” to be published by Five Simple Steps, hopefully at the latter end of this year. It will be ‘application-agnostic’, looking at the process of creating icons for web as well as software. It will be a manual, reference guide and coffee table book in one.
For the last 5 years I’ve been wanting to write this book – I keep looking around for other books of its type on the market, but never find any. Now the conditions are right – namely a decent publisher that cares about the quality of the printed book, and the right team of people to make it happen!
Follow Five Simple Steps on twitter (and myself if you like) if you’d like more information as it becomes available!
Archives by tag:
website and logo design,