Three weeks ago, I set out to create a new ThisService icon.
I had some reasons for why I wanted to do this: First, the current one, though originally shaped, was really just something I threw together. Recall that the first ThisService product cycle, from idea to beta to icon to 1.0, took two days. It has held up, but in my opinion just barely.
Second reason: the icon used shamelessly copied AppleScript and command-line tool icons. I can get those only in the maximum resolution currently used in Mac OS X, which is 128×128, and when the maximum resolution for Leopard is 512×512 and the thumb rule is to always work, at a minimum, at twice the target resolution (1024×1024), that becomes a problem.
Third reason: I wanted to.

So I started out with a few experimental layouts based on service scripts being ‘bars’. This didn’t turn out half bad as far as looking good goes. However, it demonstrates perfectly the perils of working at 1024×1024. I had fit way too much stuff (not to mention legible text) into that icon. When you shrunk it down to 128×128 (which in the current version of Mac OS X, again, is the biggest icon), it was just a cluttered mess.
I didn’t know where to go with it, so I dropped it for a few weeks. Walking away from a project can be useful. You can approach the problem again with a fresh mind.
So yesterday, I took a new shot at the icon. I realized that even though I don’t think the original icon is a good icon, it works. So the first thing I did was to rebuild the icon again, although using some ideas from the bars.
The bars ended up turned into iPhone-app-like blobs; one for shell scripts, represented by the magic #! insignia signifying the start of a UNIX script, and one for AppleScripts. I still didn’t know what to represent AppleScripts with, but after a while, I settled on “tell app”.
I showed this to a few people, and Peter Hosey gave me two bits of feedback: the AppleScript part should use a script icon and the arrows should go the other way. I argued that the arrows go the right way (from the Services menu to the executable and AppleScript icons) since the services generated actually does “call out” to the scripts. He argued that this was true, but that it was nevertheless baloney - what ThisService does is put services inside the services menu. So I created a version where the arrows go the other way, and contrary to the icon I had already created with the arrows in the other order before, it ended up looking better. Maybe because the arrows weren’t the size of Texas this time.
I still didn’t want to incorporate the script icon since I don’t have a sufficiently big version of it. Peter argued again that the largest icon I’d have to make now would be a 128×128 icon, and that by the time I’d need to put out a 512×512 icon, Leopard would be around, and I could use its script icon. I ended up taking his advice on that end, too.
After all that, I woke up today and realized that it’s still not good. There’s a lot of empty space. On a lark, I decided to remove the arrows, blow up the size of the menu item, blow up the individual blobs and place them in a different arrangement. This ends up looking quite nice:

There’s still at least one flaw in there: the center pixels are completely transparent, and thus non-clickable. If you click in the dead center of that icon, you click ‘through’ it. But the icon, on the whole, feels better to me. Services are such an abstract concept that they are hard to think up an icon for. I almost went with the cog wheel, which already means three distinct things in Mac OS X alone (cog wheel + arrow = action/context/right-click menu; steel blue cog wheel = advanced preferences; cog wheel on purple folder/playlist/album = “smart” folder/playlist/album). And to add insult to injury, there’s no name or icon for what I call standard scripts either (scripts commonly, but not necessarily, run on the command line).
Making an icon for ThisService - especially one that looks good, accurately depicts the concepts involved, feels simple, feels like a utility rather than a creative application, doesn’t look cluttered and is usable - is a challenge for me. But that’s what I love about programming, creating user interfaces, writing help books and designing icons: making it great on its own and better when the pieces all come together, and the art of adjusting the pieces and your vision for the entire thing when it looks like they won’t come together like you thought.
To solve the unclickable center problem, what about arrows pointing up at an angle from the inner top corners of each of the bottom boxes to the top bar?
By http://openid.aol.com/wittigjr · 2007.08.22 18:35
Yes, what about those arrows? ;)
I’ve considered adding a bunch of things, not just to solve the unclickable center part (which can be solved by applying a very, but not entirely, transparent blot of white or any color underneath the entire icon), but to make the icon look more like one entity. I haven’t decided yet on which to choose, but I have mocked up a few that I didn’t like, and I’ll probably end up mocking up a few more before this is over.
Still, I would not have any problem to let go here and use that as the final icon. Another reader said that there’s a difference in one order of magnitude between the original icon and the final icon, something I personally agree with.
By Jesper · 2007.08.22 18:52