24 Jan The Origin of the Inimitable Icons.
Category: Apple, Design, Icon Design

I got some astonishing material in my hands today. It’s Apple’s material, and it is quite old – but I can assure you that the images are no less revealing and eye-opening. What I can’t figure out, for the life of me, is why Apple did not include this in the latest incarnation of their Human Interface Guidelines, as it is probably the best insight into the design of Aqua icons ever. Get a glimpse of the inception of Aqua inside.

What I saw first was a screenshot from OS 9, showcasing a folder we’ve come to know tightly on pre-Leopard OS X. I really didn’t expect to see it in a 3D studio.

aqua-folder-3d.jpg

As you can see here, this closely imitates the folder icon we had until Leopard. It appears slightly more curvy, but if you see these icons, that went with the first retail release of OS X, you can see it is, in fact, the very same 3D model being used.

osxicons.jpg

However, this isn’t really the thing I wanted to show you that reveals how our favorite aesthetic came to be. This 3D scene, unfortunately only available to me in low resolution, reveals many things.

OSX-HIG-icon.jpg

My heart skipped a beat when I saw this. If you can’t see what is revolutionary about this, I will detail it for you. In the top right, you can see an icon on a desk, in the exact angle we have come to know it. Below it, you can see a view of a human figure standing before a desk, looking down at the icon’s objects, and the light source on the desk. This 3D scene completely embodies all the aspects of the Human Interface Guidelines, even if you are not a user experience professional or designer. If anything, this post proves the amount of thought that has been put into our ‘aesthetically appealing’ interface may not be obvious at first glance.

Digg this!

Related:

    Office Trouble

    Armin Vit posted about the now-in-beta Office 2010 on Brand New, a blog about branding. Naturally, they showed off the new(-ish) Office 2010...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    The Origin of the Inimitable Icons.
    Matt Gemmell reviews Icon Resource.

    Matt Gemmell, legendary coder of Mac OS X source code and programming fame, has posted an expansive review of Icon Resource on his blog. I...

    IconResource Launches.

    The day has come, and Icon Resource, the biggest project I've spearheaded since the start of my own company has gone live. You can now go to...

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

11 Responses

  1. It’s interesting how the Leopard Dock seems to throw away all these principles and adds unnecessary shadow/reflection/perspective.

  2. 2
    Moitah 

    Wow impressive !
    They really studied that hard to get those icons right !
    …and now the Dock is reflective and in 3D, I wonder how it would look in a 3D environment in Cinema 4D…

  3. 3
    sebastiaan 

    Yes, it’s almost embarrassing how erroneous the dock is if you see this.

  4. 4
    John Hood 

    The GUI evolution of Mac OS X is now at odds with the minimalist form factor of Apple’s hardware! I wish they’d stop spending so much time in Photoshop and more closely follow their own HCI guidelines!

  5. Pretty sweet find! :-) It’s really interesting to see that the folder was made in 3D. A lot of the other icons are made in 3D i believe too, the chrome on the Safari icon for example was made in a 3D application, and the central blue/navigation area created in standard 2D apps (photoshop, maybe illustrator).

    Goes to show that it doesn’t really matter what tools you use. At the end of the day, it’s all about what you do with them.

  6. 6
    Raven 

    Wow, what a catch!
    Yet another reason to use OSX, as far as I’m concerned, is the aesthetic thought that goes into even the folder icons – to make sure that they’re 3D coherent is unusual enough, but to so obviously define how they ought to relate to a real space -!

  7. 7
    oomu 

    and I still love the dock, whatever the naysayer say.

    the dock is very visual, easy to use and beautiful to see.

    and I still prefer the dock on the left/right side.

  8. 8
    Hay 

    I’m wondering what the package is they made the icons in. It certainly isn’t 3D Studio (that was never released for Mac afaik), so maybe it’s Maya?

    @Leo Mancini: you can disable the new dock by opening a Terminal and executing this command:

    defaults write com.apple.dock no-glass -boolean YES; killall Dock

  9. 9
    Chris 

    The upper screenshot looks like Cinema 4D, and apparently is still used by Apple today. Bobby Andersen mentioned it in his C4 talk.

    The lower screenshot is Infini-D 4.5; you can sort of make it out from the upper right text. This was the last version before it was sold off and incorporated into Carrera.

    Wow! What a find! Where did you find all of this?

  10. 10
    Aku 

    All that just for an icon… Astonishing.
    BTW the links to the Human Interface Guidelines are broken.

  11. 11
    Rich D. 

    I had to keep an old Power Mac G4 with Mac OS 9 around, so I could re-render some of Cesar’s old icons (hard drives, etc.) in higher resolution for Leopard. Infini-D had a max render size of 2000×2000, and crashed every 20 minutes.

    It was impressive to discover how much thought had gone into the design process for the original icon set, and to see how icons evolved as skill sets on the team changed over time.

Trackbacks

Leave a Reply