Wednesday, June 6, 2012

A Brief History of Windows Icon Design (since XP)

I have been an icon designer for almost ten years now.

We started with Windows XP style, which had nice saturated colors and a style that made some icons look like toddler's toys. It was a great style and I know from many customers that they still prefer the Windows XP icon style over any other. Microsoft had a very detailed tutorial on how to create icons, with a color table, instructions on the perspective of the icons, the sizes, just everything. And this was the first time that icons on Windows made use of alpha transparency. We created about 1000 icons in that style (plus another 1000 icon combinations).

Some samples from our X-Collection (aren't they adorable)

Then Windows Vista arrived, trying to look less playful and more businesslike. The colors were less saturated and there was a reflection on every object depicted on an icon (I remember we had a reflection on a "Sponge" icon, can you imagine that?). Microsoft again released guidelines for the icon style, this time without a color list, but it was easy to create your own color theme from looking at the official Windows Vista desktop icons. The icons were very detailed which was quite a challenge for us who were use to the simplistic Windows XP icons, but after a while we were able to achieve some quite impressive results. Altogether we created more than 1700 icons and about 1000 icon combinations.

The same icons from our V-Collection

Now the next major version of Microsoft Windows is due to be released in a few months, featuring the new Metro design language. According to Wikipedia, Metro is a "refresh" from the icon-based interfaces of Windows. If that does not sound like a major challenge for an icon designer, I don't know what does...



Resources:
Microsoft's Windows XP icon design guidelines: http://msdn.microsoft.com/en-us/library/ms997636.aspx
Microsoft's Windows Vista/7 icon design guidelines: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511280.aspxcut
Wikipedia entry for Metro: http://en.wikipedia.org/wiki/Metro_(design_language)

No comments:

Post a Comment