The first icon set I designed for the Android platform proved to be a real challenge. Google’s idiosyncratic interface choices taught me a lot about perspective and size optimization. I also improved my already tight integration of Photoshop and Illustrator.

Here are the icons:

And here is a detailed account of how they came to be, including my full workflow.

The task

I was hired last November by Greg White to design icons for the Android and iPhone applications of his company, Free411.com. Free411.com offers free telephone directory assistance (4-1-1 is the telephone number for local directory assistance in the United States and Canada).

I always enjoy working with clients who know what they want and this was such a case.
Greg provided me with the complete list of items I had to turn into icons. The list included the Android launcher (main) icon, the iPhone icon and 18 icons for the Android app’s interface.
Greg had also collected some icons he liked, to serve as starting point and he sent me their logo in vector format so I could adapt it for Android’s and the iPhone’s main screen.

Android launcher & iPhone icons

I created both icons directly in final form, i.e. avoiding the sketching phase.
That’s not standard practice. I always submit sketches to my clients first. If they approve the graphic metaphors I proceed with the actual icons. In this case, though, sketches were not necessary.
It was clear from the start that the main icons would feature Free411′s logo arranged in a square. Normally I would have created a full-blown icon but in this case it would have been hard to represent the concept of “free telephone directory assistance” without going very abstract. That would have been silly since the company’s logo was already established and it literally spells out what the application does.

Android launcher icons are strictly three-dimensional. They have to conform to a rather unconventional perspective grid that, in my opinion, cripples any design no matter how good it is. It’s very hard to draw in that perspective and almost all icons come out crippled, ruining the user’s experience.
I wrote extensively on the woes of working with Android’s perspective grid in a recent article. I also compared Android’s icons with the iPhone’s (far superior in my opinion).
It’s quite a fetching read.

For the Android launcher icon I rearranged the words “free” and “411″ and put them on a white square (that’s a standard element in Android’s default menu, used for two-dimensional icons like YouTube’s).
The iPhone icon was created by simply placing Free411′s new logo arrangement on a sunburst background (taken from the company’s website) to fill up the 57px square. Quite simple.

The graphic metaphors

The icons had to represent the various categories of the services indexed in the directory. Some of the items were: banks, travel, groceries, hotels, cars…
I decided that all the icons would be three-dimensional and would conform to the infamous perspective grid I talked about before. That’s not a requirement for icons inside an application but I wanted them to sit well next to the launcher icon.

The graphic metaphors were in most cases already spelled out and would graciously turn into 3d objects. For some, though, I had to recur to the square arrangement used in the launcher icon.
Here are the sketches I submitted to Greg’s approval. They were all drawn with my Intuos 4 tablet in Illustrator CS4, using the Blob Brush and the Eraser.

For the taxi icon I could have drawn a yellow cab but it could be confused with the “Cars” icon so I took the square badge and wrote the word TAXI on it, accompanying it with the traditional checkered pattern. By the way drawing that red car was the hardest perspective task I tackled recently. I must have drawn it 10 times before it looked almost ok. It still looks a bit weird, doesn’t it?
The “Towing” icon was initially imagined as a tow hitch, but it was almost illegible so I created another square badge that looks similar to a road sign. In retrospect that’s a clever choice. This taught me never to force three-dimensionality and realism on icons that just want to be simple.
The same rationale was employed for the “Gas” icon.
The “Dep. stores” icon was initially envisioned as a 3d mall but that wasn’t iconic enough so I made the shopping bag.

It’s important to remember that Greg was all the time giving precious input. Not only was he able to take a fresh look at my work, he also helped me focus my designs. That’s what good clients do. Design should always be executed as a dialog between the two interested parties.

The final icons

With the graphic metaphors approved and a solid perspective training under my belt I proceeded to create the final icons.

They were all drawn in Illustrator using simple paths (I used a detailed view of the burger on my Services page).
The shading was achieved with simple gradients and custom shadows, i.e. not the default drop shadows that Illustrator provides. Rather, I drew and blurred the shadows myself to have complete control over them. I also used a lot of clipping masks.

Conclusion

I am very happy with the result, considering this was the first time I designed for the Android platform. This job was an outstanding training opportunity for me. I am working on another set of Android icons at the moment. The facility with which I was able to approach this new job is a result of that training. I will never like Android’s clumsy perspective but I can say I am well equipped to make the best of it.

Finally I’d like to thank Greg White for providing the chance to grow as an icon designer and to have fun designing all kinds of little objects.
Read the kind words Greg wrote about our collaboration.