The Breakroom

In the early days of home computers with graphical user interfaces, icons were simply black and white, constrained within a 32×32 or 16×16 pixel square. Pioneer designer Susan Kare created icons for the Macintosh and Windows that were masterpieces of visual communication, and yet also somehow imbued with their own charm. These early icons set the standard for well over a decade, and continue to be relevant today. As the colour palette grew from 256 colours to millions, and alpha channels gave us even more flexibility, detail and surface effects began to overtake the clarity born of those original design constraints.

When OS X and Aqua arrived along with the new millennium, icon design eventually shifted into full-fledged illustration. Growing ever larger in size, icons had transformed into elaborate depictions of three-dimensional objects, often stunning in their polish and detail – and a single icon could now perhaps take weeks to complete. As mobile phone interfaces increased in sophistication, the trend spilled over to those devices as their makers strove to offer the same richness of graphical experience.

All of this changed when Apple revealed iOS 7 – a serious shift in design intent that shocked many users, designers and developers. Gone are the elaborate surface treatments and 3D effects. In their place, we find a carefully pared-down palette and design construction method. The simplicity and lack of ornament combined with the bold colour schemes struck many as almost child-like – which is understandable given the levels of detail and gloss that we’ve come to expect over the last decade.

For my part, I have a very positive feeling towards iOS 7, for one main reason: it brings computer iconography firmly back around to concentrating on communication rather than illustration – function over form. This is the realm of the graphic designer, where informed decisions about composition and colour create successful, strong symbology that will outlast trends, and is applicable over multiple uses.

So, where exactly does Alien come into all this? I’ll explain: when I first saw the iOS 7 designs, it immediately put me in mind of a system of symbols developed by artist Ron Cobb for the 1979 film Alien. Amongst the many designs and concepts Cobb contributed to the film, we find a set of icons intended for use as industrial signage onboard the film’s space-going tug “Nostromo”. The “Nostromo” spaceship sets constructed for the film are famed for their immersive and thoughtful design, and were characterized by an absolutely amazing attention to detail. Cobb’s “Semiotic Standard” iconography is visible throughout the film, a subtle touch of world-building that bolsters the perceived reality of the setting.

Quite a few Cobb icons are visible as part of the airlock set in this scene from the 1979 film. How many can you find?

The symbols themselves are wonderful examples of simple, strong icon design – Cobb’s innate feel for logical, sensible design shows in everything he turns his hand to, from giant spacecraft and their control decks down to beer cans and clothing labels*. The icons are clean and direct, colour-coded and adhering to a grid-based construction method. They are essentially the same design intent as Apple’s iOS 7 system iconography. Here are some of Ron Cobb’s original sketches for the icon designs (from the book “Colorvision”):

Several people have vectorised these designs in the past, but I became interested in the idea of trying to fits Cobb’s Standard to the iOS 7 construction grid and colour palette. I was curious to see how much or how little effort would be needed to adapt them. Not surprisingly, things went rather smoothly.

Aside from a few adjustments in proportion, the icons adapted quite readily to the new grid. I made use of Apple’s so-called “super ellipse” in several places. I made one major change, which was to slim the glyph inside the “Maintenance” icon, as well as losing the two diagonals involved. I don’t necessarily think it’s “better” this way, but it felt like the right treatment within the terms of the experiment – apologies to Mr. Cobb.

The iOS 7 versions of the symbols keep both their strength and their characteristic flavour. It makes me smile to think that 35-year-old designs can suddenly feel current and even trendy again. It’s tempting to say that Cobb was ahead of his time with his Semiotic Standard, but I think the larger point here is simply that good design is timeless.

(*it could be argued that this actually worked against him when it came to designing the alien creature itself)

Download the Semiotic Standard icons from the Iconfactory

Apple’s recent introduction of iOS 7 is understandably a shock to many people, especially after years of the textures, chrome and dimension of Aqua-style design. iOS 7’s flat approach presents a new challenge for iOS developers and designers; how do you make your app stand out in a crowded field of similarly styled icons with even less opportunity for differentiation?

As icon designers that means we need to be more creative, particularly at the concept stage and then craft the icon with an experienced eye for the ever-so-subtle adjustments that elevate it to beautiful, effective design. For those of us at the Iconfactory, designing for iOS 7 builds on over fifteen years of experience. Apple has created the foundation for flat but it’s up to the design and development community to push those boundaries in innovative ways. The ability to distill a concept down to its core ideals and remove everything that isn’t absolutely necessary to communicate effectively is both humbling and crucial as we move forward into this new era of mobile design.

Anyone who hones a craft makes it look easy when it’s not. Too quickly we perceive unqualified successes without considering the journey that it took to get there. That simple apple with the bite out of it took more than a few iterations. What we often take for granted is the exploration needed to reduce an idea to its essence, yet create something that resonates. We just know when it does. When looking at the final design we need to ask ourselves, is it beautiful in its simplicity and more importantly, does it create a connection?

If you assume that Apple’s flat style makes it easier and faster to create a great app icon, think different. Those tiny illustrations have a tall order to fill. At a basic level app icons are a tool for getting us to pay attention but we also want them to be beautiful images that make us say, “Wow, I want that.” Just because flat looks simple doesn’t mean it is. It’s not about the style. Fundamentally it’s about problem solving; crafting a small, unique image that creates connection with an app at a glance and makes us engage on a visceral level.

Get a behind-the-scenes look at what it takes to transform an iOS 6 icon to iOS 7 styling.