Here’s a Safari icon set that explores new compass concepts for your favorite browser! After months in the making and with a ton of help from people on dribbble and twitter I’m finally releasing this set for everyone to enjoy.

Something that started out as a doodle on my iPad grew into a cascade of late nights studying compass concepts and exchanging ideas with designers and good-folk alike. Sometimes you just stumble upon a fun notion and you gotta run with it, in this case it was as simple as the idea of why the Safari icon always had to depict that one type of Compass. A few months later, and I’m finally wrapping up 10 fun new compass iconsfor you guys to put in your docks.

played around with some early rough sketches

I’ve decided to show some more high res artwork and give some justice to the many hours spend by reflecting a bit on each icon below, but if you just want to skip that and get the download, head straight over to the Goodies section and download the set. If you like to look at big icons and read some more words, read on.

It all started out with a remake of the original Safari icon

The Compasses

First off, I owe a huge thanks to the community for giving me feedback and feeding me ideas for this project.
My awesome followers over at twitter has directly inspired several of the icons in this set and sharing the progress over at dribbble was a tremendous motivational boost.

A more dated look for your browser.

So after initially just setting out to create a fresh take on the existing Safari icon, I quickly struck a rich creative vein - the idea that the concept of virtual navigation and browsing the internet didn’t have to be restricted to the representation of just one type of compass. We’ve used, and still use, an abundance of different compasses depending on our situation, so it was time to start browsing the web for compasses.

The concepts quickly became less about realistic objects, and more about creating a theme in each icon - here’s a professional black look, something I imagine a soldier carrying around. I have no idea what he would use a leveler for though.

As with all personal projects, the fun is that there’s only the limits that you set for yourself - which basically meant that if a compass idea started forming, it wasn’t as much about “would this compass exist in real life?”, but more “would this be a fun icon to do?”

Started moving away from the original template and playing around with new shapes.

As the low hanging creative fruit started to run out, people started suggesting other types of compasses that pushed the concept further.

A GPS-styled (hello Garmin?) navigation.

As if the hundreds of compass pictures that was clogging up my desktop wasn’t enough, I started getting deeper into maps and cartography, using them for backgrounds and getting inspiration. If you haven’t noticed before, mapmaking is such an elegant art, displaying a high level of information in a digestible format. I think most interface designers agree that it’s something we try to achieve every day.

Concepts even got a bit silly, like this pirate themed one. I have no idea how the sundial got there, but someone suggested it on twitter and I thought it was fun.

As the compass ideas kept flooding in, I tried to mesh and combine concepts that I thought would be a challenge to do, technically. Common for several of these icons is the attempt at modeling particular textures or obtaining a specific effect.

The challenge in this one was to create a larger depth and a higher level of realism in the reflections.

In one icon the challenge would be to create a realistic reflection, in another it was mimicking a particular material, like water in the, truly back to basics, floating needle compass:

I looked at countless of glasses of water to get the refracting light right

So as I progressed through the set, the reward became setting up a particular challenge, wether it was a texture or just conveying a “mood” and then trying to solve that in something resembling a compass.

For the basic textures I used a slew of Photoshop filters and for some of the more realistic stuff I scoured the web for pictures and references, warping, combining and editing them until I got the result I was looking for.

Never stop doing what you love

Even though this project often ended up being pushed aside for a ton of “real” work, I kept coming back to it - sneaking a night here and a few hours there. And it’s personal projects like these that remind me that we can’t loose sight of the things we like doing. Creating something, just for the fun of it, to test your skills and to challenge yourself to collaborate, take inspiration and breathe life into a concept is such a vital part of being a designer. Especially when freelancing or working on large multi-month projects, we tend to forget the thrill of just creating something, letting your ideas run free, safe from a budget restraint or a looming deadline. Cause let’s face it, most of us got into this for that feeling and sense of achievement you get from nurturing an idea, receiving creative input and the stamina to see it through to the end, wherever it takes you.

Go Download them!

Enough talk, I Hope you enjoy these icons just half as much as I enjoyed creating them. Head over to theGoodies section and download the set.

Pixelresort

The Internet features a multitude of search engines, for instance, inconfinder.net, which gets you icons matching your query. It happened that we have been approached by the project’s creator Martin Leblanc, who requested a logo. Turbomilkers were extremely pleased by this range of events and zealously went straight to work.

As a rule, search engines have a simplistic and even minimalistic design, which makes a logo pretty mush the first and the foremost graphic object. We decided that it would make more sense to make a logo as an icon. But what metaphor to choose? How do we show an icon search? So we started sketching.

A bloodhound, a sheriff folder with a magnifying glass and an anteater (since icons are as small as ants) all competed for being the logo’s metaphor. Sounds crazy!? But we went even further!

A series of sketches with magnifying glasses. First comes a magnifying glass — the symbol of search. Icons are rather small as a rule, and magnification obviously comes in very handy. “This is it!” — we thought. But again we kept digging.

Robots are what we need when we are talking about search and cooler logos. Thus, the metaphor covers three attributes of an icon search engine: a magnifying glass for search and a symbol of minuteness of icons, and a robot as a symbol of arrangement. We showed the icons to the client and Martin responded: “You know, guys, we like the robot idea very much also.” So what we had to do is to color the robot and add textures.

The picture became rather disturbing: as though an orange square with hands and legs (an icon) had been hiding for a long time and a giant robot has finally found it! Note the level of detail of the robot — it’s a pity that a lower resolution does not show all the gears and bolts.

Later we added the project’s name in a stylish but simple font. Everyone was happy!

Every site has a 404 error page. Its purpose is to tell the user that he landed in the wrong place. It is unnecessary to scare the user by some alarming page, though the message should be clear to all. Some time ago we created a character for the icon search engine conveniently named Iconfinder, now it was the time to create an illustration for its 404 page.

We decided to emphasize on the story line succession and picked the one-eyed robot for the illustration. The idea was to depict the robot in some funny way to show that the robot is not in a great shape or something went wrong. The most sensitive visitors should exclaim: “OMG! The robot is sick! Poor kid!”

We have come up with various setups with the robot not feeling well and drew some sketches.

Robot cannot find an icon because he decided to get a snack in the midnight (which is very unhealthy BTW)

You wrote a search query but no response followed. Perhaps the robot was simply asleep.

The character slipped on a treacherous banana peel. (Do not step on a banana peel. It is extremely dangerous.)

The robot is tired and it needs a recharge (as an option – a power-stoned junkie-robot).

The Iconfinder has caught cold in the catacombs of its vault and now drinks tea with jam.

The robot is in the active search mode.

Something awful has happened (we don’t even want to think about it).

We showed all sketches to Martin LeBlanc, the author of Iconfinder and he picked the sketch with the robot affected by cold. All we had to do is to draw the final illustration. Prior to that, we thought a bit and decided that it should not be a colored picture but an outline drawing – do not forget that we are on an error page and a user should not be here in the first place. The final version of the illustration appeared like this:

And to fully exploit this opportunity, we want to show you the anniversary illustration for Iconfinder. Iconfinder has turned 3 years old and we want to extend our congratulations to its creators. Here is the picture in its full glory: