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.

Contrasting pre-Leopard and Leopard styles

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.

Traditional icons vs. capsule buttons

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.

All Together Now

My friend and fellow British Mac developer Steve Harris has just released version 2.0 of Together, a classy digital scrap book of sorts that lets you store and organise just about anything. Version 2.0 require Leopard and looks gorgeous for it – check out the shelf!

Together showing it's tag browser

Delays, delays, delays…

Yeah InstantGallery 2 has hit further delays pushing it into December now – sorry folks it just can’t be helped. This is the down side of doing freelance web and icon work as well as software development, sometimes you just get hit with more than you can handle in a short period of time and it tends to put the squeeze on my software development efforts as that has the most flexible deadlines.

InstantGallery 2 & Leopard Compatibility

InstantGallery 2 is still slowly approaching with the end of November marked tentatively in my calendar as release time. Here’s a big sneaky peak:

InstantGallery 2 preview

Here it is running on Leopard. It will be fully compatible with Tiger too of course, it even detects which OS version you’re using and mods the UI slightly so it fits in better with the visual look of your system. The UI is evolving all the time so there will no doubt be a few more changes before release time.

Leopard compatibility

iKana, InstantGallery 1.7 and NewsLife should all run fine under Leopard. If you experience any problems after upgrading please send me your bug reports and I’ll get any necessary fixes out as soon as possible. They run fine under the lastest developer seed of Leopard though so I’m hopeful there won’t be any unforeseen issues.

Coming in iKana 1.5…

iKana 1.5

iKana has been very popular lately and I’m glad to announce that it will soon be bumped all the way up to version 1.5. New in this version is a vocabulary practice module, tab delimited word list importing and some general UI improvements including a shiny new application icon. It’s getting close to completion and will be out before the end of the September.

iKana 1.5's vocab module

iKanji

iKanji - Coming this Fall

I’ve started work on this and it’s already coming along well. I will talk about this loads more in the future, but for now let me say one thing – stroke animations. They’re really useful for learning kanji and iKanji not only has them, it lets you create them really easily.

InstantGallery 2 is still coming along too – sorry it’s taking way longer than I thought it would. It has to be of a really high standard though and it’s no longer the little one shot gallery maker it used to be. Please be patient 🙂