• Share on Google+

Prologue

I use Gmail Counter, a Safari extension for Gmail users written by Elia Cereda. If you use Safari, and Gmail, I strongly suggest grabbing it. And not just because I designed the icon ;)

As with all designers, when I see a design that could use improvement (in my eyes), I want to improve it. As Gmail Counter is a free extension — which I assumed was/is written by a single developer in their spare time — I thought I could help. It would give me a real reason to dip my toe into icon design; something I’ve been putting off for a long time.

So, I contacted Elia. She was happy to have me help out. Thus began my first proper icon design.

The Icon

I had identified some features I thought were good visual references to Gmail Counter’s functionality, namely, the coloured notification bar, and the red badge telling you how many unread emails (Gmails?) you had.

The design is similar to an iPhone icon; square with rounded corners. This works for an extension because it represents a small application or plugin (through the popularisation of iOS [and other mobile] devices) as opposed to a large application like Photoshop or Microsoft Word.

The design features the Gmail logo — very recognisable, especially among Gmail users — and has a red counter badge in the top corner mimicking Gmail Counter’s Safari toolbar icon badge. There is a miniature version of the coloured notification bar which visually shows the interface of Gmail Counter — what the user interacts with when they use the extension. The coloured bar is a great visual descriptor for an icon because it is simple, so it works at very small sizes.

Gmail Counter assigns different colours to each sender you receive email from in the notification bar. As I used the extension, I really enjoyed the mature colours it displayed. I thought using a nice dark aqua colour for the bar this would be a good way to really show off Gmail Counter’s beauty and further differentiate the icon from other similar extension icons.

The word “Counter” appears in the coloured bar, representing the snippet of text you see when using the extension (the first few words of your new email message). Clever use of space was important for this (or any) icon, because you can have as little as 32×32 pixels to show a lot of information. Combining the coloured bar, the text snippet, and the Gmail Counter name in the same space worked well in this case.

Epilogue

I’ve really enjoyed creating this icon. I love the care and refinement you need to give to each of the output sizes (100x100px, 64px, 48px, and 32px) because simply scaling down the icon will not produce a clear result at smaller sizes. You really need to go into the pixel-by-pixel level and adjust colours and contrasts to give the clearest result at a specific size. It would be painstaking work if it wasn’t so much fun :)

Creating an icon for a good cause also helps. Maybe I should offer a few more free icons to application developers in need? Until I get better at it :P

Update

I made it onto Apple.com!