Lately I have been showing a ‘hidden’ icon, prominently, on Icon Designer which has a veil on it. Some more very up-to-date people are quite aware what application it belongs to, others weren’t sure but excited. Now, all will be revealed. Prepare for a journey into the mind of an icon designer, and into the interesting process of this branch of graphic design.
It was a sunny afternoon in the end of my last term on the Academy when I got an email from Brian. His company, ExtendMac, was known to me for being on major portals and news-websites with a preview of the new FTP client Flow (check out the awesome website!). Back then it seemed promising to me, and it’s recognizable and catchy name had stayed in the back-alleys of my memory. Brian wanted me to show him what I had in store for his application in terms of icon design work.
As an icon designer, the primary interest you have is to be in line with your clients’ demands. This always means there are some factors that weigh in as the most important points anyone wants to see back in ‘their’ icon;
A good icon should;
– Be appealing and in line with platform style.
– Relate to the application in a metonymical or metaphorical way.
– Communicate application and company branding.
These three points are absolutely critical. It’s very possible to find a metaphor that works just right for your application, but then, you’ll have to put it in a form that everyone can understand (between all cultural differences and attributed meanings that have accumulated across the globe). I could have thought of a waterfall for Flow’s icon; however, waterfalls only relate to Flow in a metonymical way, ánd it’s very hard to produce an icon of a waterfall compliant with Apple’s interface guidelines and my own sense of ‘right’ that works in the dock, in your Finder and even in a 16×16 pixel rectangle, without losing the photoillustrative style that you all have grown so accustomed to in my work.
So as an icon designer, I was hit by the conceptual phase of working on the Flow icon. If you take a concept like “Flow”, it is so broad in nature that you are able to think of hundreds if not thousands of semi-related images and concepts. Many pages of sketchbook were penned full of notes, ideas and sketches up to the point where I figured I had enough. Making mental maps always helps, so you can sketch out all the words and bits that come up when you conceptualise, forcing you to push beyond your initial mental horizon.
After a few days of conceptualising I chatted with Brian online. I showed him some things that I had brainstormed about and were most interesting. I linked images of concepts from the internet, a few sketches and we spent the day talking about it.
I showed him images of M. C. Escher’s work, a great Dutch artist (perhaps one of the greatest) who had a splendid masterpiece in the form of his ‘waterfall’; a building carrying water upwards which falls down and up at the same time; an oddity of space. Images of complex flowcharts, fluid dynamics, and other physical constructs were thrown back and forth. It was our first real conceptual ‘meeting’, and it was incredibly fun and eye-opening for us both.
After the concave, we decided that it would be a good idea to start some digital work. Interestingly, my usual toolset of digital authoring applications was expanded with some mathematical applications for exploring such interesting topics as dynamics. One of the things I started graphing was the Lorentz Attractor. To quote Wikipedia;
[the Lorentz Attractor] is a 3-dimensional structure corresponding to the long-term behavior of a chaotic flow…
It’s quite noted for its butterfly-like shape, which appears elegant and corresponds to the noted “Butterfly Effect” of Chaos Theory. Brian, who just at the moment of writing asked me if that line on Wikipedia was my inspiration for using it as an icon (it wasn’t, I hadn’t even read the Wikipedia page, actually) also found the attractor a very intriguing object.
I made several mockups in the time that followed. Road traffic, fluids, mathematics, and electronics were themes in the elementary images I presented to Brian. A lot of ideas were discussed and some dismissed, while other were encouraged. In this conversation, I also sent Brian a few images and files I made with Grapher.app, a mathematical graphing tool that comes for free with OS X.
After a few of these images, I came to an angle (in three-dimensional space, like a viewport) of the Lorentz Attractor we both loved.
This version, beautified and cleaned up in Photoshop, was in the first set of mockups. I still think it’s remarkable how close we were to our current design. After playing around with the possibilities for the mockups and generating actual icon files, we decided it didn’t really work that well on white in this form and started exploring other ideas. We did find the concept behind it very fitting and the shape a gorgeous thing, so we kept it in mind.
In this phase, I send Brian an image of something that had just entered my mind and made in a short timeframe. We were playing more with other concepts in this stage, and hadn’t ruled out any mockup but the least promising ones. I bet you’ll recognize this particular icon I whipped up.
Yes, the War on Bad Design browser icon was once a one-of-many mockup (albeit a quite nice polished one) in this process. To further illustrate how we had explored in this stage, I dug up this image of another mockup, made with the icon I showed earlier.
Yeah, we’ve been a lot of places. The amount of visual material in the directory of this ‘design case’ is so much that I couldn’t even consider making a gallery out of it. We have explored many mockups with variations (and with the great input of Adam and Brian it was a joy to decide on new directions to go) and after experimenting with the ideas we had, and having made eight distinctively different icons I made another icon, which we all recognized and instantly loved;
What this image shows, already, is that the silhouette of this particular shape is very strong. I made a desktop image after the icon was made and it used the bare outline of the shape – although the ‘Flow’ wasn’t visible, it was immediately apparent that it was the icon in question. Such a unique outline shape is very favorable for an icon, and upon coloring the icon, we found it was truly an extraordinary icon, yet it managed to fit in with the rest of the system icons. The icon, once colored, is truly unique. If the Dock was a voliére (a birdhouse, in good English), the Flow icon would be a paradise bird.
It may seem the colors just jumped onto the icon, but quite the opposite is true. In designing the icon, we have been through possibly every color and color combination there is, always trying alternative or unseen ideas to find ‘the best thing’. The sweet spot was eventually found with our ‘hue wheel’ palette. The colors truly emphasize the motion of the icon in this form, and catch the eye. It’s a bright palette that matches the Mac aesthetic in many ways, yet still maintains an incredible richness of colors.
What we found so fitting in the attractor icon was that it is the most complex behaviour, formulated in simple symbols. It is, quite like Flow, a simple solution to a complex problem. Flow is an application that is fantastically straightforward in its user interface. There is nothing to be distracted by, and everything you see is geared to do what you want at that moment. First using it is almost uncanny because you simply won’t have to think before acting. It does what you want, when you want it.
The icon is tailor-made for Flow, and we are still very happy with it. While ‘mindless’ eye candy like the ‘war chart’ I made is very pleasing, both the depth and beauty of the Flow icon keep pleasing me far more. The many ways of visually adapting this concept to the application were enlightening for me, and eventually lead to something that I’m incredibly happy with.
