Tuesday January 27, 2009

Rock The Dock (with Sifter).

A couple months ago, Garrett came to me and said, “I’m using Fluid to keep Sifter in my Dock, and the logo we did isn’t working out in that context.” He sent me a screenshot, and sure enough—ouch. Not a pleasant sight, that small diamond shape amidst other icons specifically designed for use in the operating system.

So we kicked around a number of ideas, including one that would involve redrawing the sifter in an entirely different perspective, but came back to the simpler idea of somehow altering or enhancing the existing logo. It’s not that there was a compelling brand reason for this, it’s just that the object definition, idea & physics of the logo are all there already.

Question: Do you like sketches with embarrassingly bad handwriting? Then peep this, my interweb friend:

Sketches of the Sifter Fluid icon

A number of different ideas came from sketching, but Garrett and I ultimately circled back around to the cleanest, simplest idea (and, go figure, it was the option we liked best before sketching even began): that of the sifter sitting atop a clear bin. Hey, it could happen IRL. As you can see below, the idea went through a series of permutations, some very pronounced and some very subtle. I believe there were about 30 “stages” from start to finish, though you only see the most differentiated changes here:

A few stages of the process of creating the Sifter Fluid icon

Parts of the original logo had to be changed to work as an icon; most obvious is the thickening up of the wooden frame. The original frame was simply too thin and appeared disproportionally small compared to the bin. The mesh at the bottom of the sifter has been simplified significantly to remove unnecessary visual clutter that was obscuring the pile of material in the center of the sifter.

The new bin & sifted material was its own challenge. It had to have some visual interest, but there’s not much that’s interesting about a plastic cube. The material inside the cube, logically, had to be mostly finely-sifted material; the pebbles giving interest to the material sitting in the sifter up top didn’t belong in the bin (and you can see I tried to slip them in at one point, unsuccessfully :). I had to rely on fine-tuned gradients and contrast to give the material shape, volume and interest. I think there’s enough there to satisfy viewers at both very small and very large sizes.

So there you have it. If you’re using Sifter with Fluid, you can download the new icon at NextUpdate.com. Enjoy!

The final Sifter Fluid icon

Commentary


Geoffrey Grosenbach » 3186 days ago #

Thanks for sharing your design process. It looks much better than the hacked-together icon I was previously using with Fluid!

My only beef…at first glance it looked like a tray on top of a black pyramid pedestal. I don’t use the Dock, so I only see it in the Command-Tab app switcher or in LaunchBar. It looks great in LaunchBar, even at 16px.

http://peepcode.com/system/uploads/2009/sifter.png

At any rate, great work and it’s nice to have an official icon to use with Fluid.

Tony Carrera » 3185 days ago #

Good work! Even though I did like the original, I can see the improvements and the aesthetics of the new icon.

If there’s one thing I’m not great at it’s creating logos/icons (as you can see from my personal site: tonycarrera.net the best I could do was a silhouette of my head, lol). That’s why I appreciate the “behind the scenes” of the design process like this one. Helps me learn and motivates me!

Anyway, thanks for sharing. Take care!

Jared Christensen » 3183 days ago #

@Tony – Thanks! I just realized I didn’t make it very clear—this icon doesn’t replace the Sifter logo; it’s just a modified version for use with Fluid.

« Older writing is available in the Archives.