Fire Starter
Tuesday, November 07, 2006 15:30 
I always had the hope that the name "Disco" would be an internal work name. But as the project came along we all realized the strength of the name. Especially in light of the effort we made to make the app "fun" to use. But he prospect of having to create an icon for an app with that particular name wasn't going to be very easy.
Obviously the corny stuff like just a disco ball, colored lights, just about the whole Saturday Night Fever prop department passed our thoughts. At some point we thought about changing the name to something simple and descriptive such as Inferno, AfterBurn and what not to make it easier to create a visual identity. But instead of making it easier on me, that side track only made it harder to create something interesting and unique. With all respect, making yet another "disc with fire" icon wasn't going to be a real challenge.
Clearly, choosing a name for your project isn't easy. I think many developers underestimate the importance of choosing a good name for an application. There are many things to keep in mind, such as choosing something that is not yet in use, or choosing something that is copyright- or trademark-able. Choosing a name that is catchy and sticks to your mind, or one that is completely unused and very descriptive is hard. A combination is obviously best, but certainly not easy.
Back to the icon. So as is clear by the above I did not want to create the obvious for the stated reasons. Disco is not an average app, so we didn't want an average or corny icon. Which left me with quite a challenge.
Early on, even while we where researching and deciding on the final name, I sketched down a version that combined both the name and the functionality. Normally I would only focus on conveying the functionality, but as pointed out earlier I wasn't convinced that would result in something that would embody what Disco stands for.
So a disco ball with flames it was. I asked, my good friend and colleague at Madebysofa Hugo van Heuven, to create a 3d model of a disco ball for me as a starting point for the icon. He created an amazing photorealistic model and rendered over 10 differently lighted versions that we then combined in photoshop to create the basis of what was going to be the Disco icon.
3 months later, on a trip in France, I finally sat down to work on the final look of the icon. I had been doing a lot of research into how to approach the flames, and initially I wanted to do realistic flames, but for some reason that didn't feel good. It was too easy. I also spent a lot of time sketching out the directions of the flames, I wanted the flames to be very vivid and alive as if they where trying to grab the ball. I worked 2 days on getting the flame shapes to look like I wanted them to, when finally deciding the 3 flame was simply best.
Because I didn't want to create realistic red/orange/yellow flames, I already decided that the flames where going to be look like plastic, partially inspired by the Speed Download icon. I found myself choosing between a dark blood red color or just going with the black I used to set up the flames with. And I think looking back, choosing for the black flames fits best with the whole black/white theme of the application.
So there you have it. A very butchy dark rock and roll icon if I may say so. An icon that, even when used small, stays remarkably easy to recognize. And best of all, because it's such a simple and intricate (read unique) shape it was very easy to create a 2 color logo version for the website and print materials. I especially like how the basic shapes could just as well have been a disc with fire. It's funny to see how an object shape can be filled up with something that is entirely different from what one would expect.
The icon is just one piece of the puzzle. It's one very important part of the over all branding that makes Disco so unique. If you want to make a difference in the Mac software scene these days, focusing only on complying to interface guidelines and feature sets will no longer cut it. We are certainly not advocating the creation of applications that lack in functionality but look beautiful, creating an app that has great functionality is and should always be step one. With Disco, we tried very hard to make the application as simple to use as possible while adding tons of new and existing features under the hood. For some further reading, I'd suggest that you check out Jason Harris's post on balancing UI and features, available at MyDreamApp.com.
Edit: Some people have asked asked me why the icon "is so small", well the icon isn't. It uses the same canvas size as any other icon. It's just that compared to a circle or a rectangle the Disco icon will "seem" small. You can read more about this subject in my blog post about the creation of the Camino icon.
21 comments Add Comment Email post Digg post
-
At 7:20 PM,
Jack said. What was really catching about the icon was the photo-realistic disco ball and just the overall attention to detail.
The icon conveys to me that Disco isn't just some cheesy app created for the sake of eye candy but it's something serious with a lot of craftsmanship behind it.-
At 7:25 PM, cocoacupdotcom said.
Thank you for all of the how-to's.
These articles are really helpful for budding designers.
Your work is appreciated.
c.-
At 8:49 PM,
said. Excellent eye-candy tutorials.
BTW, All of your work looks great!-
At 9:22 PM, Lowell said.
Just a little typo; in the last sentence of the second paragraph, it reads "But he" where it should read "But the".
Thanks so much for all your work and posts about them, I enjoy all your articles alot.-
At 9:40 PM, SWL said.
Seriously... that's a KICKASS icon.
Nice work!-
At 9:55 PM, Tom said.
My favorite icon in my dock to date; and this post is as good as a response if any that I've heard to Paul's UI musings, which Jason's post is more or less based on.
-
At 12:28 AM, cpr said.
The problem is that even those who lived through the horrid '80's don't recognize a disco ball when we see one (never having seen one then)...
-
At 12:35 AM, Derek Kepner said.
I have been following the development of Disco on discoapp.com. I must say that when they teased us with the icon mask on the blog, I knew for sure it was going to be a disc with flames. Like you said, the outline has the same shape as a disc with flames. I bet a lot of people were taken by surprise when they saw the disco ball.
Nice work,
Derek Kepner.-
At 2:13 AM, said.
Thanks Jesper for posting this. Just looking at the photoshop screenshot has been educational. I was hoping to hear why you guys made the icon small, but perhaps another time.
-
At 3:06 AM, Charlie said.
Yeah, definitely best icon in memory. How much would you charge to develop an icon for my app? Take a look at spanningsync.com, think about an icon and an estimate, and let me know at charlie.wood@spanningpartners.com.
(We have an office pool going on when we get the first cease-and0-desist, and whether it will be from Apple or Google.)
-c-
At 12:49 PM, said.
Very, very good looking icon. And as far as I can remember, the best I've seen so far, for any app. Big up! But I have to say that it looses visual quality in small sizes. It looks perfect in 256x256 Px and also in 128x128. But then it becomes crappy. Maybe you have to overwork the small size completely (reducing details and stuff).
-
At 4:29 PM, said.
you should give us the psd!!
-
At 11:45 PM, Rüdiger said.
Very cool stuff! Very interesting how this works - THIS icon rocks!
-
At 9:44 AM, Emir said.
Standard of your icon work is well above any other independent designer's out there, Jasper, but there's just a tiny teeny thing that bugs me about this particular icon.
Sorry for the critical note, but why that black little outline around the edge of every single flame?
Like the drawing professors in freshmen year used to say "let some transitions happen". It appears like the icon was finished, then someone took a pen and outlined the shape after the fact.
I think that strength of your more successful icons has a great deal to do with the fact that they allow for little blending. Like AppZapper, or Undercover -- Pure genius! Those sort of edges, in my opinion, make the whole shape more interesting, integrated and organic, let alone the goodness of how the icon interacts with differently colored backgrounds. Outlined, the icon and the desktop live in they own countries, vowed never to cross each other's border. And by this I don't mean make flames transparent, I just mean to express my personal prejudice towards outlined shapes, I guess.-
At 1:21 PM, Jasper Hauser said.
emir: When working with purely black and white in an icon, you will need to use contrast lines to separate objects from each other. In this case it was mostly used to separate the flames from the disco ball. I also used it for the more general purpose to separate it from any background.
Where the Appzapper icon objects separate itself themselves because of color contrast, the disco icon objects can only separate themselves based on luminosity contrast.-
At 1:19 PM, Ines said.
Very nice icon. I love it!
-
At 5:06 AM, said.
I read what you said in the last paragraph about the smallness and I understand but that's not important. I think it *Looks* way too small and that always bothers me when I look in the dock...
-
At 7:17 AM, said.
Great job done, keep it up!with the best regards!
-
At 11:47 PM, said.
Your article is very informative and helped me further.
Thanks, David-
At 2:45 PM, Respiro, the logo designer said.
Awesome icon. The black flame works great with the disco ball.
-
At 4:36 PM, Pink Panther said.
very good! congrat...