31 Jul
   Filed Under: Announcement   

I have been meaning to make this post since a month now and I never did. It’s been sitting around in a drafts folder, with me making changes every few days but never large additions. Now I am committing myself to finishing it.

globec.pngCocoia has become my full time occupation. Although we know vacation months in the Netherlands, I can assure you I have none. Earning my living through the design that I do has been satisfying, exciting, dangerous, and fun, and it is truly bringing me to the place of my ambitions. What has been extremely satisfying is the response on the work I have done, ranging from gratitude because you’re feeling like a website is turning into a daycare when I crash the party with aircraft carriers, tanks and jet fighters or kind, encouraging, thoughtful and input-rich emails, blog posts, messages and comments. I celebrated my 150st blog post with the outpouring of my memories on the Flow icon design process, which Google crawled in minutes (!).

moneyc.pngHowever, life as an independent (internet) design studio has its monetary uncertainties, and as my demands grow, my hardware grows insufficient, incapable of handling the tasks I throw at it. I work on a Core 1 Duo Macbook Pro, which isn’t very swift for the hard-core work. So let me be honest and cut to the chase; Cocoia, and thus, I, needs money.

No, I am not going to beg you for donations, I won’t throw you adsense stuff – this blog should remain full of free, quality, nag-free stuff. However, creative ideas that benefit you and me are good to explore. One of them is my new stock icon set; it’s comparatively priced very low (especially considering the high-resolution counterparts inside) and all future add-on packs are free for license holders.

But I have more ideas. Here is a rundown of what I am considering in the last summer months.

In the next few months...

Iconizements are little advertisments on freeware icons. This may sound like a bizarre idea, but most icons I produce need a bit of stock layout or other visual material which I then make up myself. You could imagine the brand of the ‘Designer Icons’ TV icon being yours. Or something similar; an icon I could make in the future of a document can feature your content. It’s a total package that shows you on the download page as a sponsor of the icon set, and an oppurtunity for people feeling generous or just feeling like their public image can use a small boost. It’s not as far overboard as commissioning me for a whole icon set, but also not as cheap as donating a dollar. You can contact me for information about placing an iconizement in the future.

My applications are still being developed. Not being able to release them to make a living means I have to (not to worry, it is my great passion and craft) do design work on a freelance basis and give priority time to that. I do plan to release one of my applications around Leopard’s release – which one, I’d rather keep in the dark. Being overly optimistic about release dates is the least I can afford in my current situation.

Actual product advertisements are a thing I am considering as well, in the style of the Deck. If you look at the MacThemes frontpage, you can see what I mean by that. I might even offer complimentary ad design, so if there is interest for this let me know – These are all options I am considering, but there should be a reasonable degree of demand.

Naturally, I think all options are only interesting if they benefit you and me; a good living for me means the freedom to spend some time on freeware icons for you and other quality content. Let me know what you think, unabashedly, of my future plans in the comments or over email.

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

While my goal was to release my first stock icon set, Noble, today, problems with setting up the payment services have once again foiled my plans. I will now have to wait five to seven days to put it up. However, I found a use for the time we have to wait. First of all, you can now take a look for yourself.


Here are the 32 and 16 pixel versions. If you want, you can go take a look at the 48 pixel versions, and the very nice 128 pixel versions! (Big image alert!). Now, on to the contest.

Four free licenses for Noble, worth €99,- can be won in the contest.

I want to see what developers, stock icon enthousiasts and general audience needs in a stock icon set. What is missing that you want to see included? Send me your top requests and motivation at this address (be sure to put an “@” in there, eh, ’tis against the spambots), and in five days I will pick the four people who have hit the nail on the head.

A license constitutes royalty free use for life, with future requested icons (add-on packs) sent to you for free!. Of course, the requests will be honoured in the future and posted on the blog for people to enjoy (and verify that I did, in fact, give people the packages ). What are you waiting for? Send me some suggestions!

Edit: All submissions must be in before August 4rth, 2007. Submissions sent after this date will not be considered. Winners will be notified before August 7th.

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.


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.

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!


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.


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.






Interface Builder






System Preferences


Font Book


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.