Sofa's blog about design, code everything else.

I'd like to briefly explain what Kaleidoscope does, for those of you who haven't heard of it yet, before diving into the real subject of this post. Sharing some of the design thoughts that went into creating the Kaleidoscope icon.

Compare files with Kaleidoscope

When working together with many people on the same project files, version control is something you will just want to work with, hence why we created Versions. Once you have your files in a version control system you need to review and compare them. Enter Kaleidoscope. It's deliberately not integrated because we wanted to make comparing files accessible to anybody who had revisions of a file, regardless of whether they used Time Machine, Versions, Git or a home made CMS.

Kaleidoscope has many unique features that set it apart. Not only does it compare text, providing you the most readable diff you have ever read and giving you three different layouts to choose from. But it also allows you to compare images, giving you the smoothest image viewer we know of and 4 different layouts to aid you in spotting differences.

An icon, a Kaleidoscope?

Back to the real topic of this post. It begs the question, why not just use an actual kaleidoscope for the icon, right? Well it did cross our minds and we actually gave it a shot. But a laleidoscope isn't a very memorable object, it's a long tube which isn't suited to make an icon out of as it has to use a square canvas as best as possible. But the visuals a kaleidoscope creates are unique. And so that's why we focused on it's unique characteristics instead of the object: playful, colorful, triangular, circular.

Sketchy

We started research into Kaleidoscope back in the summer of 2008, serious development started early 2009. I made the sketch shown on the left in early spring of 2009. I think it was made at the Sofa office, but I'm not entirely sure, it also could have been during the annual Sofa getaway to France in March. As you can see, there were a couple of subjects that already played an important role:

What's interesting to me, looking back at this original sketch is that it contains all the important concepts that ended up being present in the final icon. Similar to the original Checkout icon sketch.

Entangled

Since the functionality of Kaleidoscope is quite abstract, it had no useful real life equivalent tool or object we could visually refer to, the only two options we had were to either invent some kind of device to depict or to come up with an abstract logo type object.

We tried for some time to come up with a kind of device that could represent the application's functionality, but after having tried it every way that made some sort of sense, we ended up collectively deciding it wasn't going to work. Instead, everybody seemed to be charmed by the logo shape from the original sketch. And so we set off to explore turning that abstract logo into an object that would work as an icon in our Docks.

As the story always seems to go when designing a big app icon these days, it required a lot of detail. I couldn't just draw some lines to make up the shape, I had to actually figure out how to accurately build the entire and individual shapes to make it really work.

Additionally, to really get a grip on how the object was constructed and how the shading had to be applied Hugo created a 3D version of the logo (which we later re-used to create the teaser trailer), while I retired to my corner of the office and had a lot of fun using plasticine to try and create my own model of the logo object. But given the fact that the object has an infinity theme going on and is pretty much an impossible object, depending on your view angle, it wasn't very easy to create the 3D model.

Polish

Interestingly, the Kaleidoscope icon has two contrasting features that you see rarely in application icons. The first is it's seeming simplicity, it boils down to not much more than and intricate triangle. Which greatly helps it's recognizability, and suitability for use at any scale. And it uses every color imaginable, not something you see often either.

We ended up having an icon pretty early on in the development cycle, and so had plenty of time to take a good look and reflect on it. Something I really like, mostly because when you are in the creation process you are so deep into the subject matter it becomes progressively more difficult to discern good from bad. The pixel pushing geeks that we are, we ended up creating several tweaked variations.

The first "final" iteration was somewhat soft/matte, and so we made it more glossy/aqua looking. Making it as lickable as a lifesaver. And finally, these changes are very hard to see, it was further cleaned-up by making the strokes less heavy, saturating the colors some more, lightening some of the shadows, and simplifying the highlights.

Before you go off and do something else, make sure you download Kaleidoscope and give it a try! We are pretty sure you will find it to be an excellent addition to your toolset.