Explorers

I still remember the excitement when Google Chrome announced the Canary channel for those who wanted to live on the cutting-edge, for those who loved to experiment, tinker and explore. With the promise of fast updates, a continuous release cycle and an open environment, IO.JS gives me that same excitement today, which is why I’ve become extremely keen to contribute something of my own to the overall mission of this project.

With the help of the feedback I got from engaging with the IO.JS community on GitHub, I’ve designed seven logo concepts so far, each with a unique take on what I think IO.JS stands for and how the world should look at it.

For my eighth and final concept, I decided to go back to the roots of the IO.JS mission outlined by Mikeal in this post and seek a better interpretation than any of the concepts I’ve done so far.

⬢

I think this quote captures the spirit of IO.JS, which is to be more open to change, to influence and be influenced, to explore and discover. And I chose to base my last concept on this interpretation — of Isaac, Ben, Bert, Fedor, Trevor, Chris, Colin, Mikeal, Rod and other contributors of IO.JS as fledgling explorers, out on a mission to embrace as well as drive change.

⬢

Arguably, the greatest journey man has ever made is our historic trip to the moon and back and that was the first place I turned to for inspiration. A launch vehicle combines incredible speed and laser-like precision in the service of its mission to explore and discover. Combined with the voraciously tested code and scale and scope of the mission, we can see the many parallels between a launch vehicle out on a mission and a project with immense potential as IO.JS, which now leads me to reveal to you my final concept… Explorers.

From my participation in the IO.JS GitHub community, it was clear that hexagons were a crowd favourite and that was the one of the biggest constraints I had to work with in this concept.

Hexagons are popular in design and hexagons in almost every possible permutation and combination have been used up in the service of brands everywhere. Thinking up a new interpretation in this well-trodden path, while simultaneously finding a way to fit a rocket inside a hexagon was the hardest part of the design process. Many, many, many attempts were made before landing on the final design.

The final construction has a hexagon base harmoniously split into a 'rocket body' and an 'exhaust plume'. The 'porthole' along with a 'hatch handle' is used to spell out "IO".

Given the wide variety of media and platforms that IO.JS needs to play nice with, in the course of its life, the challenge of keeping a logo in tune with its surroundings becomes impossible to ignore. While the skeuomorphic, full-color logo can handle almost all use cases on its own, it’s well supported by an additional flat version along with a monotone version, and between the three of them there’s enough flexibility to cover all stylistic use cases.

⬢

A simple palette of reds, browns and yellows (paying homage to JavaScript’s yellow logo) form the backbone of the IO.JS color wheel. The palette can be whittled down to just four colors for most use cases.

The logo is designed to scale from 15px browser favicons to 50ft billboards. In Understanding Comics, Scott McCloud talks about Iconic Abstraction: removing detail in turn enhances the impact of the detail that's left over, leading to a more powerful image.

The same approach is applied here: detail is added or removed from the logo as necessary to keep the brand recognizable at all sizes. In the favicon, for example, all details except the 'body' and the 'exhaust plume' are thrown out to keep the resulting icon recognizable at that small size.

Montserrat, a Libre sans typeface created by Julieta Ulanovsky, gives IO.JS a bold and friendly typographic foundation. Inspired by the hand-drawn lettering on old posters, signs and other letterforms in Julieta’s neighbourhood of Montserrat in Buenos Aries, the Montserrat typeface provides the same functionality as typical Display fonts like London Underground’s “Johnston” typeface, making it the ideal choice for headlining the IO.JS brand.

The multiple IO.JS logo styles developed above — toned, flat and mono — along with the different size variations from favicon to Retina make the design versatile and applicable to a broad range of scenarios, a selected few of which are presented below.

⬢

Any fledgling movement needs to spend a lot of time on the road evangelizing to audiences everywhere. Conference banners and event signage thus hold special significance for IO.JS and the following are a couple of interesting cases where we can see the logo helping our case; the logo is able to call attention to itself even in “busy” public spaces, which was a key area of focus when coming up with the design.

⬢

IO.JS needs to have strong web presence from day one. Each point of contact with an eyeball, from GitHub and StackOverflow to blogs, social media and the IO.JS homepage itself has potential to develop into a long term commitment and needs to be managed carefully. As Firefox has shown time and again, having a well-designed brand that users can rally around is a highly valuable asset. Here are some web based scenarios where the logo can make a significant difference.

There is a new breed of JavaScript projects that use modern design to emphasize the quality of their development efforts. Yeoman, Grunt, Ember, Docker and Bower have well-designed logos that are imbued with a lot of character, a symptom of the amount of thought that went into their design. It's no coincidence that these projects are highly popular with developers everywhere.

My goal with this concept is to put IO.JS in this class by giving the concept a strong, yet approachable character while paying careful consideration to all aspects of logo design to ensure it provides a powerful springboard for the thousands of hours of development effort that is to follow.

⬢

Great things start small and it is my hope that this logo concept will be the seed for something that is bigger than all of us.