SleepMute for Mac OS X, the utility that automatically mutes and unmutes your Macs sound, is nearly two months old now, and I've finally got some time to write about it. One of the big differences for Tangerine Element on this project was hiring a professional icon designer. I had done all the icon work on iTimeZone for iOS, and it didn't turn out to bad. My graphics skills hit the wall early on that part of the project and it was a hard slow climb up the hill to ship what I did.
Get It Started
I find that to keep motivated when working on my own apps, I have to have a good idea of what the icon will be. I started with the following image that I cobbled together from desktop wallpaper and my take on the Mac OS X speaker icon on the menu bar:
Having this temp image though was like writing an application definition statement. I had a very clear idea and intentionally limited the scope for 1.0. The only problem was I had the wrong name!
Google-Fu Failure
When I started work on SleepMute, the app was actually named IdleMute. Before I wrote a line of code, I bought the freely available idlemute.com. Who ships an app today without buying the domain?!? Once I owned idlemute.com, I wrote code and tested willy nilly and didn't think about it again. I was seconds from sending the first email to the icon designer (more on him in a second) detailing what IdleMute 1.0 was and what I wanted in the icon when I did another search for the name and boom, similar functionality apps on other platforms came falling out of the woodwork. Clearly my googling skills failed to reveal these apps when I first started the project. In the end, I am much happier with SleepMute than IdleMute. IdleMute was what I defaulted to as a developer, and really matched Windows terminology, which still depressingly pops out of my head sometimes. SleepMute more nicely aligns with Apple's terminology shown to users.
The Professional
I was on a real tight timeline to ship SleepMute before work on another project got crazy, so finding an icon designer that could start immediately was a key factor. After looking around for a while, I found Andrea Austoni.
Andrea was great to work with. I gave him my prototype logo and provided the following direction:
What I was going for what something in what appears to be Apple's new template for Mac apps as shown with the Mac App Store icon. rounded circle border, minimal 3D, easily convertible into pure 2D if needed. For the SleepMute icon, I was trying to take the muted speaker in the Mac OS X menubar to draw that visual connection to muted sound in OS X. Then having Zs coming out of the speaker, common iconography for something sleeping, was supposed to show you know a sleeping speaker. My plan was to scale up or down the Zs, at 32, I had 2. I put them on a night sky background because I didn't want just a black background.Armed with that information, he created this sketch:
I loved that Andrea created concepts I hadn't even thought of before. We narrowed the sketches down to 3 to take to the next level:
I selected the lighter orange one which matched the Tangerine Element company colors better, then we made design tweaks.
Final
The main change from the earlier concept was the switch of the far outer and riveted rings for better contrast in a number of situations throughout Mac OS X.
Conclusion
Andrea has his own blog post about our experience working together, with a hint to showing icons correctly in Mac OS X 10.6 Snow Leopard. I enjoyed the process so much and the results, Andrea is working on an icon redesign for iTimeZone for iOS