The trouble with icons

SAPO Messenger box iconIn my work I do a lot of icons. Not counting the countless emoticons I’ve created over the past two years, I’ve made about 160 different icons for an instant messaging application.

The application is SAPO Messenger, an XMPP client developed by a loyal team of a few dedicated people.

As we move on towards version 5.0 (and, hopefully, an English version), I am completely redesigning the user interface. Not only in what pertains to interaction logic and interface usability, but also at the graphic level. Colors are being revised, window styles redrawn, buttons improved. And then there are the icons.

I’ve been battling myself over which icon style to go for, and the fight is between an illustrative-style, strong stroked, linuxey, kind of thing or a cleaner, more realistic, stroke-less Mac-style thing.

The box above is a clear example of how good these mainly value based images look. But drawing without the help of a clear defined outline isn’t easy, and you really have to get the value changes down, in order for the forms to read well.

But with icons there’s always an extra obstacle: readability at small sizes. As with this box, most icons become unrecognizable at 16×16 pixels, and if it’s already a work of patience, attention and detail, to get the big icon to work, it becomes even more so, when you go so small.

And, of course, 16×16 is the most widely used size in the interface, due to its space-saving.

Several options are available to me right now: I can redesign the icon completely, so it reads at a small size; I can make a different version, that echoes the larger size, but is readable at smaller sizes; I can also study a way of integrating at least 24×24 pixel icons into the interface, thus eliminating the smallest size, which is really hard to draw for.

I love doing illustration, and that’s why creating icons is so much fun: you get to do a clearly defined illustration of one object, that has to convey a message. It’s illustration at its most concentrated form; just pour some cultural references and mix 😉

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.