oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button Designing for Aqua

Introduction to 3D Rendering for Aqua Icons

by Alan Graham

After attending the Apple Worldwide Developers Conference (WWDC) seminars on working with Aqua, the Aqua feedback forum (also known as "The Bloodbath"), and a seminar on creating Aqua icons, I had hoped that all my questions and concerns about Aqua would be put to rest. Ha! Shame on me. While some questions were answered, it also left the door open to new questions and a whole new slew of issues.

For this piece, I am going to elaborate on my previous article, Creating Photorealistic Icons for Mac OS X. I will also try to decipher, in more detail, the Apple Human Interface Guidelines on icons (specifically application icons), then address some of the issues I have with them. After that, I'll go into another tutorial where I'll show you some basics on how to work with 3D rendering and how to get the right look for your 3D icon.

Icon Genres

I've touched on this subject before, but I want to clarify some of what Apple is looking for with icon Genres. One of the most important aspects of icons in Mac OS X is that Apple wants icons to be emotive. Icons should express an idea that communicates what the application does. For example, the icon.

The icon.

Here we have an icon in which pictures are arranged the way they would appear on a table or desk (or in my case, on the floor). The loupe in the icon helps to make it emotive by expressing this application is for viewing images. Remove the loupe and the icon says nothing. Remove the media, leave the loupe, and the same thing happens. You will also see that the media in the icon (the pictures) are arranged in a diamond or slanted pattern. According to Apple, the value this serves is only as an homage to the original diamond icon in the previous OS.

The perspective of the icon is intended to be "desk-like" and is positioned as if the camera is viewing the scene from an angle that would represent a person looking, as if standing or sitting at an elevated position. It is intended to be inviting and approachable, with vibrant colors. It includes a sample of the media it handles and a tool that expresses function. It tells a story.

Comment on this articleCreating icons that meet Apple's Human Interface Guidelines and support your own personal brand can be tricky. What questions or comments do you have as you explore this area of application development?
Post your comments

Also in Designing for Aqua:

The Aqua Designer's Toolbox

An Interview with Ivor St. John Clarke About Aquafying Office X

Designing a Great UI the Aqua Way

That sounds easy enough, right? Emotive icon, colorful, slanted, tells a story, yadda yadda. The point Apple is making is that any user, newbie or pro, would have little difficulty in predicting what this application will do once launched. I would beg to differ, however, that any user would know anything about what this application does. Unless you work in the prepress industry (or operate a pawn shop), I doubt that most people would recognize a loupe or even know what it does. For those of you wondering, a loupe (pronounced "loop") is a glorified magnifying glass.

I have a few issues with Aqua's Genres. I honestly don't think it works, and Apple is chasing its tail if they continue to pursue it. Here's why:


If you have an established brand, using an Apple icon instead of your brand is silly. Branding of icons is one of the greatest accidental marketing tools on the planet. You have an application that is instantly recognized by people everywhere, regardless of what language they speak. Do you want to alter your brand to reflect a Genre? Want to be just one of those word processing or imaging apps? Of course not, you want to stand out!

Apple suggests that you can place your icon's brand in the foreground instead of using a tool icon, and then placing a sample of the media that it handles in the background.

For example, placing images of photos for a photo-editing app. Okay, no problem, right? Wrong! Bear in mind that anything you place behind your branded icon means that in order to see that media image, you have to make room for it. This means that your branded icon must shrink so you can see what is behind it. Not a big deal at 128 x 128 pixels, but wait until the system shrinks the icon. Do you want to shrink your brand into an incomprehensible dot, or do you want it as large as possible? What seems like a lot of room to work with, becomes increasingly small as you add more items and then scale them.

A comparison of icon sizes.

Pages: 1, 2, 3, 4

Next Pagearrow