Differentiation
Friday, May 26, 2006 16:00
In the early days of 2005 I was working with Austin Sarner on a project called WidgetKit, which was intended to be similar to the then non-existent DashCode. Austin decided to stop actively developing it as he figured it wasn't an app that would sell well enough. Never the less, the application icon for WidgetKit was made.
I just can't keep myself from being a bit surprised by the fact that the Dashcode icon from Apple resembles the WidgetKit icon I made closely. I'm not accusing anybody here, since I have no idea when the icon was created, and it really doesn't matter, but the similarity is striking none the less.
One of the most important things I learned while creating application icons is to use visual differentiation. When starting on a project I always take some time to look at similar applications and their icons to see what I could and should not create. I tend to look at strong visual elements I can use, and I look for key attributes I should stay away from. The important thing is to ensure that your icon doesn't resemble a competing application's icon, but there is no need either to reinvent the wheel for every icon. It is important to stay away from a situation where users could become confused about about what application they are looking at. That also explains why it's so difficult to create a "new" icon for applications such as word processors and image editors, since there must be hundreds already.
working on the Camino application icon I was confronted with a similar situation. On the one hand, I wasn't one of the biggest fans of the Chimera icon, but I knew that I couldn't make yet another globe/sphere-ish or compass like icon. Too many other browsers already used that style, which meant that using it would create a situation where users no longer would be able to distinguish it from the other browsers.
The same applies to the work I did on the Camino toolbar icons. The goal was to enable users to differentiate the application not only from the application icon but also from the toolbar icons. Users that have requested for Camino to use more Safari/OmniWeb/FireFox like icons don't understand the underlying problem.
When creating icons and an interface for any project, you want the ensure that what you make will fit within the system's look and feel, but will also differentiate the application from other applications.
A group of applications that would all use the same toolbar icons, window style, and window layout would be very annoying as users would no longer be able tell at a glance what is what. It's a difficult balance to maintain, and it's one of those things that make icon design so much harder than people think.
The differentiarion rule also explains why Apple isn't afraid of trying new interface looks every time they release a new version of their Mac OS or iLife suite. They know that visual differentiation between applications allows the user to find his/her way through the system. Too many people think that that the User Interface Guidelines are a law, but in reality it's nothing more then a "guideline" or a rather good starting point.
Update: I just uploaded an screenshot of the UI of WidgetKit. Some have asked me if we ever released WidgetKit, the answer as written in the text is no. Oh and please do not hesitate to comment on grammer and spelling improvents ;)
Update 2: Perhaps I should have clarified two things from the start. On the one hand Apple could have known that I created an icon that looked similar to Dashcode because it's been on my icon website since last year. But I don't expect them to check every website to see if anybody made something similar and like I indicated, it doesn't matter because WidgetKit never came out as a product. On the other hand I do think that Apple did less of a good job at differentiating the Dashcode icon from the xCode icon. I for one added a big page curl, I used a tool that clearly has a different shape, angle, and placement. But I left it out because I didn't think it was interesting.
21 comments Add Comment Email post Digg post
- At 4:36 PM, said.
The Widgetkit icon looks better than Dashcode's.
when will WidgetKit be released ? or is it hidden somewhere ? ;-)- At 8:30 PM, said.
Did you ever publicy release your WidgetKit icon? You're right in that there are some very striking similarities, namely the center circle with three dials and points around the ring of the main circle. Not that it's a problem, but if your icon was released it seems that Dashcode's icon designer used it as a starting point.
In terms of differentiation, one thing I think your icon does better is differentiate itself from the Xcode icon. It has a slightly more rectangular shape, and the pencil you chose is more different from the hammer than the ruler in the Dashcode icon. They are both very good designs, but at a quick glance at the dock I imagine the Xcode and Dashcode icons will be harder to pick between.- At 12:00 AM, said.
Sounds like Sour Grapes! As an Icon Designer, You must understand the limitations in attempting to capture the concept of an Application in a small graphic representation, and the concept of a Blueprint representing an Application, that "creates" something, is hardly unique and owned by Yourself. If Apple copied You (Who's over at Apple these days, Mike Matas?), then You copied Apple's XCode. By "Dashcode being distributed on the web", are You referring illegal Torrent "distribution"? Very Professional on You behalf! The Application has not yet been "Web" distributed. If You had bought a MacBook this week, You would have made mention of that - yet You did not.
- At 12:12 AM, said.
The "center circle with three dials and points around the ring" is basically the icon for Dashboard itself, the only difference is the icons (as in the Apple Dashcode icon) replace the points. The blueprint idea was already used in Xcode. Its not really too surprising these would look similar.
- At 12:13 AM, said.
so hang on...
let me get this straight...
you copy the original look and feel of the 'xcode' icon, right down to some of the detailing on the 'blue-prints' - and then when apple take a lead from their own 'application building' icon and apply it to their 'widget building' icon you somehow make the link back to your icon?!
erm...- At 12:19 AM, said.
Hey get me straight here, I'm not saying that apple did something wrong. I used the look and feel of the xCode icon. But you don't get the point of the post. I'm only saying that it's bad if 2 icons look so alike. In this case it doesn't matter as WidgetKit was never released.
- At 12:58 AM, said.
So, if Your point is "it's bad if 2 icons look so alike" as You say, then why did YOU "use" the "look and feel of the xCode icon"!! You just shot Yourself in the foot, wit Your response. Had WidgetKit been released, maybe Someone over at Apple, would have taken issue with You using the look and feel of xCode. You copied xCode, They clearly copied You, dont copy Them, and They wont copy You.
- At 6:19 AM, said.
Jasper,
Not the most astute post written about differentiation.
You borrow visually from XCODE to create WIDGETKIT. Then you write, "I just can't keep myself from being a bit surprised by the fact that the Dashcode icon from Apple resembles the WidgetKit icon I made closely."
Then you do your post - if not yourself - a disservice by using your CAMINO design as an example of the difficulty of differentiation. In that post you wrote, "We also borrowed the .Mac globe look..."
Borrowed? It is practically the .Mac sphere laid over your compass/globe icon.
While differentiation is difficult - difficulty practically defines differentiation - which would have no meaning if it were easy to do.
That said, after reading both articles and seeing how you point out that Apple's DASHCODE resembles your WIDGETKIT which ultimately resembles their XCODE and when you admit to "borrowing" the .Mac icon for the Camino icon I am not sure what to truly glean from what you have written.
You point out, "They know that visual differentiation between applications allows the user to find his/her way through the system." Yet, you chose to create something that does little to differentiate. Funny.- At 6:23 AM, said.
Why are people trying to make up things that are not there? Maybe I'm thick but where did he accuse or even suggest any one of copying? Can't we just all get along?
- At 7:36 AM, said.
I get a much different vibe from this post, it seems. I see this as a great example of how someone would approach "differentiation" while trying to maintain "overall look and feel". You have XCode for "designing and building applications" with it's hammer and Application blueprint icon. What better way to represent an app that designs and builds Widgets than a Widget blueprint with some other piece of drafting/design hardware?
Thus, you get differentiation, in that the two icons can be visually distinguished, but you establish the drafting/designing theme among your construction apps. That the same thought process seems to have occurred in both cases probably means something rather profound, but I'm tired and running low on batteries.- At 9:21 AM, said.
Thank you Matt for pointing out the point.
- At 11:01 AM, said.
Not only did you copy the Xcode icon's basic conccept of blueprints, you copied the Dashboard icon.
All the Dashcode icon design did was use the same basic blueprint element, flipped it horizontally and used some of the elements of the Daskboard icon on it with a t-square.
I swear what is with you whiners thing Apple totally copied your ideas when they release a new (old) piece of software?
Apple was working on Dashboard long before you even heard of it. Get over yourself.- At 12:07 PM, said.
*grammar*
- At 1:32 PM, said.
ouch!
there are some insane comments here...
the author SAID HE USED xcode icons AS A START
like apple use xcode and dashboard as A START
and it's GOOD.
GOOD to give users a way to recognize the relation ( an xcode for widget)
and after he EXPLAINS you have to DIFFERENTIATE
differentiate IS NOT to do an PLAIN BIG YELLOW sturf to be different. DIFFERENTIATE does not mean "to do a plain original weird stuff with pink and yellow mouse". it's just mean to add some differences.
it's to add PERSONNALITY. and it's not easy. you have to keep the aqua feel, to convey Meaning to your icon and be yourself. not easy.
and NEVER he said apple copied him
he's just "surprised" and NEVER he said apple copied him
it's impossible. they never released their widgetkit ! NEVER
did you see the widgetkit icons before ? no. apple neither
but, with the same principle apple use and him they got a pretty similar icons.
it's normal, it's GOOD.
I don't understand why some people want to create disputes or polemics , are they crazy?
thanks for the story Jasper. it was very interesting and I like your works- At 1:40 PM, said.
What I like is that despite both icons follow the same basic idea (combining the blueprint of a dashboard icon with a tool) they look very different. Both icons could very well be used together without the user being confused.
- At 1:50 PM, said.
Agreed, michel :)
Chill out folks!
I quite agree though that it was totally expectable that two icons inspired from the same other icon and being used for similar applications would look the same. But then, Jasper really was not complaining of anything here:
I'm not accusing anybody here, [...], and it really doesn't matter.
Peace out!- At 1:54 PM, said.
I agree with your points about differentiation within an overall look and feel. Yet I actually use UNO to enforce the Mail.app style look to most applications, including Safari and the Finder. Why? Because somehow I've always thought brushed metal went too far. It doesn't look sufficiently clean to me. And the worst is when you have a bunch of windows open from both styles! Yuck.
I do however leave the iLife suite to their customised brushed metal theme ... I'm not entirely fundamentalist about this. They just look wrong somehow in clean grey.
Your point stands for icons and toolbars.- At 4:47 PM, said.
This is definitely an interesting read, but I agree with other posters who said they don't understand why you seem surprised that Apple's Dashcode "resembles" your Widgetkit icon. Apple clearly used the xCode icon for its inspiration, not your icon. The inclusion of the Dashboard plan and elements is logical and entirely appropriate.
This seems to be a classic case of "why did they have to do it this way?" syndrome common in icon design. The answer more often than not, is because its either the best way, or the way that makes the most sense/communicates the idea most effectively.
And as for UI guidelines not being "Laws", this is definitely true now, but only because Apple itself started breaking its own rules it set down for OS X when it was first launched. There was a hard push by Apple to have developers and designers follow strict rules for how desktop & toolbar icons looked. Anyone remember that all utility icons were supposed to be mostly grayscale? But Apple threw this out the window pretty quickly, and then the appearance of other UI elements went with it. And now we are at the place we are today. With GarageBand using faux wood, and the Pro line of software having slick, dark UI's. I'm not saying its bad, I personally like the look of these other apps, but they are all over the map for user experience and that certainly isn't working in Apple's favor.- At 12:04 PM, said.
My only problem with the Widgetkit icon is the white pencil. A blueprint was produced using a contact process that resulted in a negative image (developed by British astronomer Sir John Herschel in 1840). It was the equivalent of the modern photocopy (or CAD print), and so white pencils were never used to create the drawings.
- At 5:50 PM, said.
It's a great icon, why not put it up for download?
- At 3:08 AM, said.
But I bet white pencils were used to annotate them…