30 Jul Designing Flow’s icon: Our favorite Attractor.

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.

makingflow.jpg

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.

visz.jpg

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.

graph.jpg

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.

firstflow.JPG

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.

flowchart.jpg

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.

flood.jpg

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;

floworiginal.jpg

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.

flowicon.jpg
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.

flow-main-screenshot 1.png

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.

Unrelated posts:

    Bricky Shirt

    By no means a replacement of the Cocoia Exploded Settings tee, but I wanted to wear this and I was told others enjoyed it as well. Represent the...

    the Cocoia WWDC shirt

    It's often said that there is great value in having a distinct shirt at WWDC, and while I'm not very preoccupied with that notion myself, I do...

    Redesigning Steam for Mac

    Steam for Mac will be available for download in a week's time. Steam, for the uninitiated, is the world's largest gaming platform, serving in...

    The first Photoshop icon.

    While I was doing some research for one of my upcoming projects today, I found the very first Photoshop icon. It's actually a tiny little photo...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses

  1. 1
    Raven 

    My lord, the Flow icon is yours? I’d been wondering… wow. Nice!

  2. 2
    soho 

    I immediately loved that icon – and also didnt know that you designed it. So sweet! :)

  3. 3
    hanna 

    Like he said, when I saw it, I took a step back. Its one of those icons that really hit you with its beauty. You get so used to so many good icons on the mac. But ever now and then one icon just steps out from the rest. This is one. I haven’t been blown away for a long time, this is special one. To be honest I haven’t been that impressed by your re-inventions of already made icons.

    But this is another story

    Look forward to seeing some more client jobs.

  4. Cool icon and cool story. I came here from Adam Betts’ website, cool that you worked with him.

  5. 5
    drak 

    Very good icon, yes

  6. I looove so much to read long posts like this one !

    Good work, as usual…

    Keep it going !

  7. 7
    Ankur 

    Colorful, elegant and smooth. I really like your work.

  8. 8
    Stealth43 

    Dude!

    I knew this was you as soon as I saw it. Definitely your style, and hits every point in HIG! Great work!

    Stealth43

  1. [...] While I’m busy with Flow development myself (which, as any beta tester could tell you, is going quite well), this design is thanks to the hard work of Adam Betts. Of course, you can also see Flow’s icon is prominently displayed throughout the site, which was designed by Sebastiaan de With. On that note, Sebastiaan has written a great blog entry on the process of working with me on the Flow icon. You can read it here. Over the past months I’ve come to know both Adam and Sebastiaan as not only great designers, but great people too. Cheers to you two! [...]

  2. [...] I also did some of the app toolbar icons and Sebastiaan did a simply fantastic job on the application icon.  You can read about his work progress on the icon at his blog, Cocoia Blog. [...]

  3. 11
    Shiny Things - The Apple Blog (via Pingback)

    [...] Then I found out that the Flow icon is his too. On his blog, there is an interesting post on just how that came about that may well be worth reading for those of you interested in design. (And on Macs, aren’t we all? [...]

  4. [...] one thing about Flow that gets me though is the icon. Cameron pointed out Sebastian’s own post about how he designed it. If the Dock was a voliére (a birdhouse, in good English), the Flow icon [...]

  5. [...] [Cocoia Blog - Designing Flow’s Icon: Our Favorite Attractor] [...]