TuneTagger Icon History

Tuesday, 2007-03-20; 23:26:00

The first working version of TuneTagger was nothing like the TuneTagger you see today. It started its life as an application called "CDDB Lookup Helper", with only one small window that contained exactly two buttons:

Original CDDB Lookup Helper Interface

It grabbed the info from the current song in iTunes, and looked it up via the web-based CDDB database interface. The "Exact Search" button forced the inclusion of the album info; TuneTagger only used the song and artist name if this was unchecked.

I quickly realized that if I really wanted to be doing this a lot (and I did really want to, since I was frustrated by the inadequate tagging of my iTunes library), I needed to have a panel that automatically looked up info whenever the song changed. At first, CDDBLH did expensive polling -- expensive not only in the sense that it polled the current song information every 5 seconds, but it did so via AppleScript. Again, after using it for a while, I also realized that it needed to be a constantly floating window. (CDDBLH's approval window was much smaller than TuneTagger's approval window, at this point.)

Making a window constantly floating is not as simple as checking a box in interface builder: you can set a window to be a non-activating panel -- which simply can't become the main window, but is otherwise quite similar to a regular window -- or a utility window, which floats above all windows but completely disappears when you switch out of the application. Both were unacceptable.

So I searched around for how to make a window constantly be on top regardless of which application is frontmost, and I happened upon this sample Apple code, FunkyOverlayWindow. This is where the current TuneTagger interface really started solidifying in my mind. The sample shows how to create a custom shaped window that you can drag around by any part of it. This seemed quite good for a number of reasons: they don't have a title bar, which is a bit of wasted real estate -- and I was quite concerned about real estate -- and they're much better usability-wise since you don't have to worry about where you drag to move the window around (well, except for buttons of course).

And that's when I decided that I wanted my windows to stand out a little bit, so that you could easily distinguish them from your other windows. (Incidentally, this is why I think that Apple's slight inconsistencies between window appearances is quite acceptable. Differing window appearances are a good thing.) From there came the white text on black idea that you see in TuneTagger now.

This brief recap of the interface of TuneTagger shows my train of thought over the years, and brought me to the point where I needed some icons for my program. It also explains why I went with a minimalistic, black-and-white design for all the icons in TuneTagger (except the app icon itself). Colored icons would ruin the appearance of the windows.

Your first thought when you see TuneTagger's windows is that they look kind of like Dashboard widgets. That wasn't an accident: I was thinking that I would make TuneTagger widgets that could be run exclusively under Dashboard. (I might still do that in a later version.) So the design of the close button was easy enough -- just look at Dashboard's close buttons. :) The up and down arrows in the approval and scrolling lyrics panel were a modification of those buttons; just whack off half of the white 'x' in the middle of the close button.

Three of the four opener panel buttons were similarly straightforward: the info, lyrics, and star buttons are pretty much exactly the same as the first iteration of the icons. The star's outline was originally a bit thinner, and the lines inside the lyrics button were a bit blurrier. But their overall design was unchanged. Here's TuneTagger's current opener panel:

TuneTagger's Opener Panel

The ratings star and dot icons, which are the only icons I didn't show you from the previous entry, can be seen here:

Ratings StarRatings Dot

Having five outlined dots or stars in a row looked a bit too busy, so I decided to make them completely white (at the suggestion of my icon designer Bryce, I believe).

The controller icon, though, is where it gets interesting. I settled on the final design only after going through a number of different designs. Because I had recently purchased an iMac G5 that came with an IR remote, my very first thought was to model it on the appearance of the Apple remote. Since TuneTagger had no use for a menu button, the first iteration of the controller button focused just on the circle of buttons on the remote:

First Controller IconFirst Controller Icon Small

At the large size, it looks OK, but it's a bit too busy. And then it absolutely becomes a mess at the smaller size, with the various symbols becoming squished and slightly hard to decipher. The other problem was that this was a circle, and it would be living next to a button that also looked like a circle -- the info button. I wanted all the buttons in the opener panel to have distinctly different shapes, otherwise it would look lopsided. So we changed the shape, and came up with this:

Second Controller IconSecond Controller Icon Small

I believe this shape came out of looking at the Apple remote from the top down, so you see the thin rounded rectangle where the IR transmitter is embedded. (The actual remote is also black on the top, which was a partial inspiration for this set of buttons.) I think the right side of this is supposed to symbolize a hold switch as on the iPod. [UPDATE: Nope, after talking with my icon designer, he reminded me that this icon was supposed to be reminiscent of iTunes' mini-window, with the controls on the left and the info display on the right.] But it's not obvious what this thing is -- and I had to think for a few minutes myself to think about what that weird half-rounded rectangle was supposed to be. It's also still too busy on the left side.

The other problem is this one really didn't scale down. The rewind and fast forward symbols look like the symbol for railroad tracks on a map. So we tried a few variations of the small icon while leaving the larger icon the same:

Second Controller IconThird Controller Icon Small

Meh. Without the other playback symbols, the standard play triangle isn't obvious anymore.

Second Controller IconFourth Controller Icon Small

Again, meh. A play triangle that has a section of broken railroad track under it also doesn't really make sense. (Lol.) So we scrapped the idea of modeling the icon after the Apple remote, and came up with this:

Fifth Controller IconFifth Controller Icon Small

This is better. It simplifies the design, and is fairly good at the smaller size. But there's a lot of wasted space on the top and bottom of the buttons, and the square shape doesn't really make sense for the controller (especially since the actual controller window is wide and short, not equidimensional). Furthermore, a large square next to a large circle would still make the opener panel a bit lopsided.

At this point, I thought, "Well, modeling the icon after the Apple remote doesn't work, but how about traditional TV remotes?"

Sixth Controller IconSixth Controller Icon Small

This works well, and is the current design. It's fairly recognizable as a remote, given the shape of it being tall and thin. It's also simple, and it scales down to a smaller size well. Furthermore, since this icon doesn't take up the full width allocated to the button, it sits nicely next to the info button, which does use the full width. The opener panel doesn't look weighted to the left, as a result -- it's well balanced.

There was an intermediate design that didn't have the one button on the top. That made it look more like a calculator than a TV remote. We tried making alternating rows of three and two buttons, but that again became too busy, even though it would make the icon obviously not a calculator. I thought of the power button on most remotes, which is where the single button at the top came from.

Before settling on this one, we tried one other design, again modeled after the Apple remote:

Seventh Controller IconSeventh Controller Icon Small

This just looks weird. If you make the circle and triangle smaller, you can't recognize them at the smaller size. If you keep them at the bigger size, it looks like a genetically-unfortunate Apple remote that has really big buttons or is really short.

(If you're wondering about TuneTagger's menubar icons, those were pretty straightforward once I had the opener panel icons. Peter pretty much sent them to me as is, with some slight modifications coming later for the i, the direction of the thought bubble, and the horizontality of the star icon. The remote button in the menubar was Peter's idea, and I originally was opposed to it being so different to the opener panel button, but that one wouldn't work nearly as well at a small size. The stamp itself originally said "STAMP" instead of "TITLE", too, but you can't really read that anyway.)

The other icon that has a bit of an interesting/amusing history is TuneTagger's application icon. In contrast to all of the other application icons that I've thought of, this was the first where I didn't have an idea at the start. So this is the first thing I came up with:

First TuneTagger Icon

This was just a mockup; I wasn't planning to continue the black-and-white theme on the app icon. Nevertheless, you can see that I was attempting to evoke the image of a stamp on a piece of paper, and that it helped you tag your music with ratings. My icon designer refined it to look like this:

Second TuneTagger Icon

Now you can see the four things that TuneTagger helps you tag with (info, art, lyrics, ratings), but the words would obviously not scale, and was obviously unacceptable. I wasn't really too happy with even the direction where this was going. Here's a stylized version of the icon that makes it ever so slightly more obvious that it's a stamp:

Third TuneTagger Icon

Not really much of an improvement.

At this point, things took a turn for the funnier:

Ridiculous Carls Jr.-esque TuneTagger Icon

If you haven't seen those god-awful commercials with the ultra-close-ups of gross-looking burgers that are dripping grease and ketchup (good lord who thinks those are appetizing?), then consider yourself lucky. I take no responsibility for the idea for this version of the icon, but the stars in the previous icon do kind of evoke the Carls Jr. ads. This icon is just hilarious, though -- it came out of my icon designer's brain. :)

And then I had an epiphany. Instead of making the icon look like the ink of the stamp on paper, why not make it look like the actual stamping mechanism itself? So I mocked up the current design of the icon with my l33t AppleWorx skillz:

Mockup of Current TuneTagger Icon

The music file document icon makes it obvious that you're doing something with your music, the stamp evokes the "tagging" of your music, and the star is one component with which you can tag your music. And the final icon:

TuneTagger app icon

Here the star moved from the handle of the stamp to the music file itself. And you can see enough of the iTunes icon to recognize the document as a music file.

By the way, the dark blue color of the star is no accident. We went through a bunch of different colors, including various shades of brown, green, gray, after finally settling on blue. If I remember correctly, my icon designer disagreed with me on the final color of the star. [UPDATE: Nope, actually, his first instinct was dark blue. I made him go through a bunch of other colors before I went back to dark blue as well.] :) I still think the dark blue was the best choice.

So that's the history of TuneTagger's icons. As you can see, a lot of thought was put into this part of the interface. Getting something to look good is notoriously difficult, especially when you have to deal with different sizes, too. It's kind of amazing how the simplest designs can be the hardest to come up with.

Technological Supernova   Software Development   Older   Newer   Post a Comment