Designing toolbar icons for Leopard

With its new dark window theme Leopard requires a shift in icon design for things to look right. In particular older icons designed in the 10.0 – 10.4 era often look blurry and indistinct. Why is this? Well often it’s due to drop shadows, vague outlines and colours not being strong enough to stand out well against the darker grey background. Luckily the fix is fairly simple but it may require reworking your icon artwork quite a bit in some cases. To get the best results in Leopard use bold colours with subtle gradients, dark, sharp borders and avoid Aqua gloss as it’s starting to look dated now. Excessive anti-aliasing and drop shadows are best avoided too as they make the edges of icons indistinct.

I’ve made my feelings about capsule buttons pretty clear by now, but it’s worth saying again to avoid using them. There are a number of reasons for this, both aesthetic and from a usability stand point. Using capsules somewhat necessitates grouping icons which limits the user’s ability to customise their toolbar, this may have a negative impact on their workflow. In cases where you do need to group controls it’s better to use a segmented control using the unified button theme as seen in the Finder’s View control.

In capsule buttons icons are reduced significantly in size from the glorious, large 32×32 pixels OS X pioneered back down to the miserable 16×16 size commonly used in Windows. Obviously you can’t convey as much detail in 16×16 pixels and you’re working on top of a two tone background which also has design implications. You’re also not gaining any additional space by using capsules either as the buttons themselves consume the same amount of space as a regular 32×32 icon would while providing less useful visual information to the user. Small icons are often much better conveyed with simple monochrome glyphs as Safari nicely demonstrates. With capsule buttons you’ll feel compelled to use colour and drop shadows and other visual flare to stand out from capsule itself and it all becomes a mess like in Mail app.

When is it appropriate to use small monochrome icons like in the Finder or Safari then? Well I’d say when you’re trying to convey simple ideas. It’s easy to just use arrows to convey back and forward actions like in a web browser, but for more complex actions, say ‘post to weblog’, you really need to use colour and all those extra pixels will make life considerably easier for your icon designer and users alike. It’s important to think carefully about the items that will appear in your toolbar before you start down either path as the two styles don’t really co-exist very well.