Thursday April 10, 2008

Sifter.

I have been fortunate enough to work with friend and designer extraordinaire, Garrett Dimon, on a number of projects now. Last time I was honored to develop a logo for Garrett’s new company, Next Update. This time? Sifter.

Sifter is Next Update’s flagship web application, a bug and issue tracker. I’ve been happily following along as the app has been developed. The very public way in which Garrett has shared the design process — openly discussing insights into problem-solving, revelations and twists and turns — has been refreshing.

There was a bit of a lull between the Next Update logo and this project, but not much. Almost immediately, a small group of Garrett’s dotcomrades began brainstorming names for the app (that was really all that was standing in the way of the app identity). We were looking for a good “theme”, not much unlike 37signals’ successful outdoor-adventure product naming theme. It was finally decided that a “tool” theme was not only appropriate given the nature of the applications but would clearly lend itself well to identity ideas. A sifter was the tool chosen to represent the bug & issue tracker, as the general purpose of the tool is to let some material sift through the mesh but catch larger material in the tray.

As usual, Garrett gave me complete creative latitude to come up with the Sifter logo, with the single constraint of making sure that the style could be applied to and maintained in the identities of web apps created down the road; a suite of apps, if you will. I started out with some sketches, but they were pretty rough since I already had in mind what I wanted to do:

First stage of Sifter logo

I decided to tackle an OS X icon style for the logo, an ambitious goal considering I had never done such a thing. Still, I was convinced that the shape of the sifter was simple enough that I could pull it off, all the while learning the valuable skills I would need to create latter logos (Plow, Hacksaw, Belt Sander — no, I keed). So off I went:

Second stage of Sifter logo

The sifter started off with a fairly odd, non-perspective look, thanks in part to Adobe Illustrator’s not-quite-3D capabilities. For a time, I thought it would work out but it became clear that the lack of depth and perspective was just going to look weird. Adding perspective would complicate my efforts, but the complexity was what was going to make it interesting and more realistic:

Third stage of Sifter logo

It was a subtle change, but I think it made a huge difference.

There were still a number of details to work out, but my big next problem was to figure out how to visualize the material being sifted through the mesh. This was probably the hardest part of the design, and we kicked around a lot of options:

Fourth stage of Sifter logo

The shape of the material had to be simple so that it would not appear as a blobby mess at smaller sizes, but it had to have a certain amount of texture and detail to it to make it obvious this was a pile/stream of small material that could “sift” through the mesh.

I finally decided that a small, kind of squashed Hershey’s Kiss-shaped “mound” was going to work out best:

Fifth stage of Sifter logo

The shape was simple enough to be seen at smaller sizes and not muddy up the other clean lines in the logo, and actually lent itself well to the stylized look that the logo was taking on. Adding pebbles to the mound pushed the style further in this cool new direction:

Sixth stage of Sifter logo

With the adjustment of a few elements, some punched-up contrast in the wood grain and some details added to the pebbles, the logo was done!

The last hurdle was deciding if the logo should just sit in limbo on the page, appear to float above a surface or sit on a surface. Ultimately, we opted for the “sitting on a surface” option, which actually really helped tie the logo and the type together. Speaking of type, we’ve continued using Serifa BT as we did for the Next Update logo.

So there you have it. I’m pleased with how this logo turned out, and all the painful, tedious and valuable lessons it taught me. I look forward to seeing it plastered on koozies, mugs and t-shirts someday! :D

Commentary


Jeremy Johnson » 3534 days ago #

Very nice, now where’s the one color version for the t-shirt ;-)

Nathan Smith » 3534 days ago #

Hotness. I love the attention to detail, even down to the bolts attaching the (unseen) handle on the far side of the sifter. And, for your first OS X style icon, it turned out beautifully.

Matt Donovan » 3534 days ago #

I really like the typography. What font is that? Egyptienne? Teh logo is teh hotz.

Hamish M » 3534 days ago #

Looks fantastic, great work Jared! And thanks for sharing your creative process.

Jared » 3534 days ago #

Thanks, all!

Jeremy: It already uses one color… FULL! ;)
Matt: The only font used is 2 weights of Serifa BT.

Natalie Jost » 3534 days ago #

Somehow it’s tremendously comforting to see an “e” in Sifter. Also very cool to see more “type” type serifs in logos. I’m always in awe of logo design… takes great talent… and WORK, clearly!

Luis Garcia » 3533 days ago #

I really think I could have done better myself, but I guess you did an alright job too. You and I will need to meet up sometime so I can teach you a few things about 3D design. I see many faults in your design. ;-)

Jared » 3533 days ago #

Luis: I’ll call David Bowie, and you rent the abandoned warehouse and hire the crazy DJ. It’s a design-off, Blue Steel style.

Josh Walsh » 3528 days ago #

Thanks for sharing your process here. This stuff is fascinating and you’ve done an excellent job.

Eoghan McCabe » 3521 days ago #

I case you didn’t get the message from previous comments: it’s frickin’ tasty! Good work, dude.

Brian Flanagan » 3504 days ago #

What’s up with the typeface on the Sifter landing page?

Ricardo » 3502 days ago #

I like these posts where the author explain the process involved.
:)
Good work.

Trimox » 3500 days ago #

Excellent article, thank you.

« Older writing is available in the Archives.