30 Jul
   Filed Under: Commercial Work, Design, Icon Design   

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.

27 Jul
   Filed Under: Design, Icon Design, Personal Work, Popular   

So, apparently the latest seed of Leopard has a revamped System Preferences icon. Don’t go requesting the ADC members to upload it, that would be wrong. I have gone through the hassle of making a new icon based on the design. A little present, if you will!

sysprefspreview.jpg

Download it here.

Edit: TUAW hit :). Hello visitors, don’t forget to check out the other freeware icons for OS X at Icon Designer. Also, if you are interested in icons for use in Leopard applications, I have released a Leopard-ready stock icon set at the Icon Store.

26 Jul
   Filed Under: Announcement, Commercial Work, Design, Icon Design   

It was quite an effort, and I am still tweaking and testing, but I am pleased to show one big thing releasing the 30th. Check out the brand spanking new Icon Store for a preview of Noble, my upcoming stock icon set. Noble has been made specifically for resolution independence and the Leopard aesthetic.

noble.jpg

Very soon!

12 Jul
   Filed Under: Icon Design   

A response to all your responses.

It’s been a while, and in between all the copious client work (noticed the veiled icon on Icon Designer? First one to guess what app it’s about gets gentleman’s honour!) I thought it would be nice to do a blog post after all the releases. I think I’ve been quite silent since the Designer Icons set.

The War on Bad Design icon set has gone ballistic. It’s been in Apple’s Top Downloaded (of all categories) and it’s now on InterfaceLIFT, where it has also gained a place in the first page of the most downloaded files. Reception has been fantastic and I’ve gotten thoughtful emails, comments, or instant messages with kind words. Now that the submission process of the Designer Icons is underway, I hope it will be as well received as my last set.

Time never stops, however, so the design of icons goes on. Apart from the various applications that will soon open shop showing off my design, the Designer Icons set has gotten considerable input in terms of what icons should be ‘designer-ified’. Here’s a list.

iChat

Newsreader

Browser

Terminal

Xcode

Interface Builder

Preview

iPhoto

iMovie

iTunes

Adium

System Preferences

Photoshop

Font Book

iCal

Keynote / Powerpoint

There are some others slated, of course, but I will guarantee you this much. Some people have also been asking for some insight in the creative process. Well, I’ll write up more as my portfolio unfolds itself, even some very nice, long, articles about icon design that I will release eventually, but for now, you can get some tips for improving icon design or starting it.

I start my day with a cup of coffee, my RSS reader, and a browser with a random selection of icons every time I open it. The Macthemes forum and all work that is being done out there (deviantART, interfaceLIFT, etc.) is a great inspiration. Experimenting is key on making better designs, so I always sketch and dabble in Photoshop to see if I can express miscellaneous ideas that bubble up in my mind.

I’ll touch on the creative process more in a few days, but until then, you can still expect nice releases and perhaps even technical posts.

09 Jul
   Filed Under: Design, Icon Design, Personal Work   

With a small Icon Designer update, I present to you without further ado, the seven first releases of the Designer Icons set. It will be split up into three consecutive releases to give me time to tweak every detail.


designericons-preview.jpg

Click the preview above to go to the download page and send any of your desktop screenshots, warm input, or greetings to me via my vcard or email address on Icon Designer. I hope you enjoy it!

04 Jul
   Filed Under: Design, Icon Design, Personal Work   

A tad silent around here lately, just want to show you there’s some very cool stuff in the pipeline apart from all the predictable developments of this month.

Picture 15.png

The set will be called “Designer Icons” and will be available from Icon Designer as soon as it’s ready.