Ladies and gentlemen, please welcome User Experience Technology Manager, John Galenzi. Well, good morning. Welcome to session 130. It's the last day at WWDC. It's been a great week, I think, and certainly from the feedback we've gotten from you. This is a really exciting session. This is a session about usage of Aqua icons and the design philosophy behind them. And document icons and application icons that communicate purpose and function have always been really important on the Macintosh.

And that's particularly true on Mac OS X, where the quality of icons is extremely high. And as you'll see in this session, the incredible attention to detail is unprecedented. And if you think about the good, better, best Aqua adoption scenarios that I outlined in session 111 on Wednesday, quality icons was not one of the things that you leave to the last minute. It wasn't one of the things that you sort of leave, you know, if we're going to do a really fantastic product on Mac OS X.

Delivering a quality icon for your application and for your documents was down there in the good scenario. So for every application on the platform, you should be delivering a great icon for your application and documents. So to give you the scoop on this, I'd like to introduce Imran Chaudhri, who's from the interface design team at Apple.

And Imran is really the guy who's driven the vision at Apple around Mac OS X and the icon story that we have to tell. So this guy is incredibly creative. He's a fantastic designer and really is an icon, get it, for the group. So come on up on stage, Imran. Look forward to hearing what you have to say. Welcome.

Thanks for coming out today. How are you guys doing? Right? It's the last day of the session. Lunch is about 90 minutes away. Like John mentioned, Aqua is fairly new in many aspects, especially with icons. Icons are a very important part of your application. They are the first thing your users will see, and also they sometimes serve as the face of your application as well.

With the many advancements to Mac OS X has come a new icon direction. Many of you out here today are already developing applications, and you might be familiar with some of the new things that we've been doing. I know some of you are just getting started. Hopefully all of you will find this somewhat interesting.

So I'm going to start talking about our new icon direction in two terms. The first being philosophy and the second being design. In Philosophy, we'll be looking at Photo Illustrative Icons. These are Icons that sort of present a realism. It's what we've adopted as our house style. It's how we fashion our icons within Aqua. In emotive icons, we'll be looking at icons that express Something beyond the symbol, the basic symbol. Icons for the first time can express feeling.

In genres, we'll be looking at a new concept for Mac OS X, and that is the ability to classify your applications and organize them. It's a really, really simple way of really identifying what type of application something is. And in families and icon types, we'll be looking at the different types of standard icons and the families that make them up.

In designing icons, concept and communication are two very, very important fundamental elements in getting your message across. There are many different types of materials that you can use to render your icons. We'll be looking at different rendering styles and how we use them and what's appropriate in the Aqua sense. Perspective and shadows have a lot of meaning in Aqua. We'll look at what that means. Tools. Once you've got all your icons designed, how do you get them into a format the application can understand? We'll be looking at that.

So this first image is an image of the Aqua icon in its 128 by 128 glory. Where we started out from in Mac OS was a 16 by 16 and a 32 by 32 pixel icon. In Mac OS X we introduced the 128 by 128 icon and this was done for two reasons.

The first being the ability to show a really lush preview in the final image. The second which is the more interesting reason and that's to be able to dynamically scale an icon in the dock and in the finder. Today I'm happy to announce that we're going to be shipping the 768 by 768 icon.

You can buy this at the Apple Store now. Okay, that's a bit of a joke. We brought this up because we wanted to examine this icon in great detail. This icon, which is the preview icon, it's an icon for an application that allows you to view images. This really embodies... Every aspect an icon in Aqua can achieve.

It's really what started it all for us. It's got 32-bit vivid color, lines and curves are realized through anti-aliasing. You can get brilliant curves this way. Shadows give a sense of depth and translucency gives a sense of realism to objects like the glass in the loop in the corner there.

The photo illustrative style that we've got, as you see, is a combination of stylized illustration and image. The intent is to Deliver an object that is somewhat believable. Unlike cartoon type objects or icons of the past, photo-realism or photo-illustrative as we tend to call it within the team, tends to communicate in a different way. It sort of lays down the foundation of something that we call emotive.

The emotive nature of this icon can be described as... well, I guess if you were to just look at this thing, the pictures are arranged like they would be on a table. They are like they're being used, like the viewing... the viewing... You've been using the loop to look at the images and it really sets the scene of someone who's actually using this thing. It communicates the activity of looking at pictures. It's really, really effective.

It's what makes this icon emotive. It's also what makes this icon not emotive. This icon is a really, really universally understood symbol. I'm sure many of you have seen it, well, the men of you have at least seen it on the bathrooms all across your travels. This icon is a really, really basic symbol. By no means is it emotive.

What I mean by that is that in the context of it being on the bathroom door, it communicates men's bathroom. You take it out of its context, it no longer communicates men's bathroom. Being flashed here on the screen right now, it's just saying "man." That's all it's communicating.

For it to be an Aqua icon, it would have to be emotive. It would have to communicate that it's a men's bathroom outside of its context, no matter where it would be. And so if you were to re-render this thing, If you were to re-render this thing, it might look something like this. Which... kind of looks like me a little bit. I think the trajectory is a little bit off, but... But the head's close.

The emotive nature of this icon is so clear. You can totally tell it's a man and it's someone relieving himself. It's the emotive nature of the icon. So that's what emotive icons really are. They're icons that tell a story. They're an extension of the basic, basic symbol. And they're generally universally understood.

So, what we've been talking about so far, the photo illustrative quality of our icons, Emotive nature of the icons are all building blocks to something that we call genres. And genres, like I mentioned earlier on, are a means to classify applications. This slide here represents a bunch of applications that are somewhat mixed, but looking at them you can tell that there's some common themes on there. You can see some have vivid colors, some are muted, some are angled, some are straight.

Um... There's obviously two different things going on. If you reshuffle them, you'll see that immediately there's a sense of order. The top row is one particular genre and the second is another one. And you can tell this because the ones in the top are obviously full of color.

They have a consistent angle to them, while the ones on the bottom are muted and they're generally straight on from a perspective. This sort of thing really makes sense in the context of the doc, where you can find a whole bunch of applications, as many of you have been finding out.

Here we've got a slide that has the icons shuffled. If we reorder them simply, you'll see that it's really, really clear to pick out two types of things going on, two genres, as we like to call them. That's kind of like the dynamics, the mechanics, rather, of how these things work, how the genres work. How we employ them on X is through something that we call the user application and the utility application genres. These are the two genres that we have defined for Aqua.

In the user application genre, we build upon everything that we've known about the Mac OS. So here is an image of the Mac OS, original Mac OS application, not the original original, for you purists out there, but something that pretty much is close to the original application diamond. And to the left of it is the new translation, the Aqua translation.

The original Macintosh diamond was a one-bit symbol that was really, really heavy in meaning, yet light in feeling. And when the Mac made the transition from black and white to color, all that was simply done was the icons were sort of injected with color in a really dumb way, like they would in a coloring book. The translation on the right hand side is paying homage to the diamond. You can see a subtle reference, a similarity to the diamond and the tool being the pencil and the pen. The translation is now achieved in more of a photo illustrative, emotive, Aqua fashion.

So, things that define the user application genre, applications that define the user application genre are apps that tend to create or view media. And these are apps like TextEdit, a word processor, or Preview, an image viewer. And they're frequently used by your novice user on a day-to-day basis, kind of like Mail. It's a typical app.

So these applications are common in the day to day productivity and recreation of most of your users. Visually, the genre is defined by a desk-like perspective. We'll talk about that in a second. They're designed to be approachable, friendly, if you will, because they are typically used by your novice user, and for that reason they're inviting.

They're made inviting through the use of vibrant color, and they communicate in a emotive nature by the relationship to the media and the tool. We'll look at the media and the tool in detail in a moment, but media can be anything from paper, film, to CDs, et cetera, and the tool, which in this case, as you can see, is the pen, can be anything that supports or makes that idea actually more solid.

So here's a real technical drawing of the perspective. If you can imagine, If there's an icon sitting on the table and your viewpoint is the camera at the top, it might look something like this.

So looking from the camera, through the camera, you'll see this. And this is a crude drawing of the text edit icon. If we were to replace and swap in the icon in line, it would look something like that. So that's an illustration that hopefully gets across the point of the particular perspective for the user application.

Here's a view of all perspectives, or the entire perspective. On the bottom again we've got the table, the camera on the outside. Looking through the camera on the top left, you'll see the icon, and on the top right, it's fully rendered. So, some example applications of the user application genre. The first is, um, TextEdit, we've looked at that earlier on.

But something really important to note about it is that the relationship between the media and the tool really speaks to the Activity of writing. You'll see that the paper has been fashioned. It has a small letter that's been written on. And the tool is sort of a very special tool, like a writing pen. And it really communicates. This is something you can write with.

Sketch, PDF viewer, the glasses reinforce the action of reading.

Preview and Stickies Stickies does not have a tool. Sometimes the media plays such an important role, it doesn't actually need a supportive tool. Remember that the role of the tool is supportive, it's to reinforce the action. In the case of Stickies, it's such a well-known media, it doesn't actually need a supportive tool.

In the case of Sherlock, where we sort of push our own The same thing is clear. There's a relationship between the tool and the media. The media is a little bit pushed, but that's because of the well-established brand as Sherlock. A lot of you out there have really, really strong brands and you might be asking yourself, how do I communicate a tool when my brand is so strong? What we've done is we've gone in and looked at in a simple exercise, an internal exercise, what it would mean to use your brand as the tool to reinforce the concept of the media. Remember the user application is one that creates media or views media.

So the media plays a very, very important role. These are some sample applications. By no means are they shipping apps. It's something that we've done internally. But you can see the examples on screen right now. Quicken, Palm Desktop and Sound Jam all communicate what the app can do by using the brand as the tool.

So, the relationship of the media and the tool is so tight, and we thought we'd try and play with it for a little bit. Two well-known icons that we've got are the preview and mail icon. What would happen if we were to mix up the media and the tool?

So if we were to take the ink stamp icon, the mail icon, the hello from Cupertino portion, and the loop from preview, we might have something that looks like this. And what does that communicate? It could be an application that lets you send postcards, right? But if we were to flip that around, you might have an app that is for stamp collectors or something.

A group of apps that process the media that is normally created by the user apps. This could be something like Stuff Expander, perhaps. Normally, these apps maintain and monitor attributes of the system. Things like terminal process view come to mind. They're used infrequently by your novice user.

And they work in the background, they work in the back end. Because they're used infrequently by the novice user, they're probably technically complex. The visual cues that define these apps are a shelf level perspective, different from that of the user app, a limited use of color, very muted use of color to convey a serious tone.

Let's take a look at some of those. Oops, we'll look at the perspective first. The perspective is straight, it's dead on, like we were looking at in the user apps where we've got a desk level perspective. Here we just have a straight on perspective. The image at the bottom The camera is straight on, one to one. At the top left you'll see what it looks like if you look through the camera. And then at the top right, what it would look like if it was rendered in that perspective.

Here's a group of applications that represent selections from the utility application genre. You can see that they're all straight for the most part. They have muted color. They're very serious. They communicate one simple idea. They're not layered objects like the user applications where you've got a tool and a media. It's just one simple idea. A note about the perspectives.

For the most part, things are straight on, but as you'll see in the case of the printer, the print center icon in the top left for you and the bottom right, There's sort of a raised frontal perspective, so if I go back to...

So you have a little bit more of an interesting composition so you can communicate that element in a much more successful way.

So up until this point we've been looking at applications and what it means to be emotive and photo illustrative. There are other aspects to icons on X. Those can be illustrated when we start looking at the families. Families are, again, they're a way to relate objects to the application icon. It's actually an old concept, but we've just sort of carried it forward in Mac OS X.

So here in this illustration you'll see that the document icons at the bottom relate to the preview icon. They're branded, if you will. They all communicate some relationship to the preview icon. The next image, the iTunes family. You'll see that the MusicNote brand is carried off into every aspect. There's a preferences icon at the bottom, a playlist.

and a sound document. But it all communicates iTunes. The relationship is clear. So, with the document icon, like we did with the application icon, the application diamond, we built upon what was already there. But this time, gone are the black lines, gone are the restrictions of 45 and 90 degrees, and in comes the subtleties and the dimension of the dog ear created by shadow.

So, with the document icon, like we did with the application icon, the application diamond, we built upon what was already there. But this time, gone are the black lines, gone are the restrictions of 45 and 90 degrees, and in comes the subtleties and the dimension of the dog ear created by shadow.

So the relationship to the application and the document is made through using the media on the document itself. So you'll note the document icon has the media from the preview, but the tool has been removed. And that's to communicate a sense of media that's been created. The tool again reinforces the idea of the application, not the media. So therefore, it makes sense to just remove the tool. there.

We call that labeling. The image up here on screen communicates a preview icon that is a kind of JPEG. So the difference that you'll find is, This information, the supplemental information, is integrated within the document. It's not appended to the document as a placard. It's really just sort of integrated in a clean manner, and it doesn't clutter up the document at all.

In the case of the preferences icon, we've got two elements that describe the preference. On the right hand side, we've got the branded element of iTunes. And on the left hand side, we have the element that describes it as a preference file. And this relationship is made clear by this next slide.

You'll see that the music notes from the iTunes application icon are branded on the right hand side, while the light switch draws a reference to the system preferences icon on the left hand side. So branding is a very, very important function of a lot of the document icons.

Looking at device icons in 10, you note that the items on the top row are of a pluggable nature. These are drives that are external but are sort of hot pluggable drives, things that can come and go, physical drives, if you will. They're branded in a way that they indicate the bus that they're mounted on. So we've got the FireWire drive, the USB drive, and the SCSI drive. And drives below that are drives that are internal in a sense that you can't really see them or it's not that important to see them.

We've got with the blue globe iDisk, next to it is the internal hard disk.

A note about the internal hard disk. Because what we're trying to do is communicate physicality to these objects, It really communicates the internal hard disk. It really gives you a sense of what it looks like from the inside. Although people may never see it, it's probably a good idea to let them know what it really looks like. With devices, it's about the physical nature, it is what it is, versus what it should be or how it feels with the application icons.

Looking at removable media, the focus shifts from the device to the media itself. So you don't represent the zip drive or the CD-ROM drive. It's really more of an intimate relationship about the media itself. And here we've got a selection of different types of media. Floppy disks, Zip disk, Jazz disk, DVD, and another CD, it's a compact disk, and a PC card. You'll note though that the perspective is different from that of the "So hard, pluggable, or internal devices in that it's straight. And that's because that's what your relationship is with that type of media. You normally hold ZIP cartridges in your hand and CDs in your hand.

So, looking at toolbars, this is an illustration of the Finder toolbar. Something that's important to note is that unlike the other icons that we've been talking about this far, especially the user applications, which are layered objects upon objects, items in the toolbar are designed to be singular objects. So they communicate the action with one icon, one object.

I'll get to the contradiction in a minute. The computer communicates what it is. The home is a single object. The heart is a single object for favorites. And the three objects that represent applications are fashioned in a way to really communicate a single object. So they really form an A. So it's read first as a single object, then in closer detail, close examination, you'll see that it's made up of three.

And also, there's a singular color usage for all these objects on the toolbar. The computer is predominantly dark blue.

The perspective for items on the toolbar are similar to that of items in the utility application genre. They are dead on. And that can be illustrated in another crude drawing like this.

You'll see, again, if we were to look through the camera like we have been at the bottom and look in the top left, you would see something like the home in that perspective. And then on the top right, what it would look like if it was rendered out in that perspective.

There's quite a bit of function that comes to designing a toolbar. The singular item icon, the attention to form, and the singular color usage all plays a great sort of functional purpose in that it really makes it easy to pick out objects on the toolbar at a quick scan.

In this illustration, you'll note that objects can be broken down into really easily understandable primitives. In the computer, we've just got a square. In the home, there's a triangle that sits on top of a square. In favorites, there's just a simple heart, and the apps can be communicated as a triangle. It really makes it easy to quickly scan through and pick something out based on its shape. And then that's reinforcement. It's reinforced by the other elements as well.

So, in practice,

Elements on the toolbar within an application should be consistent and use common elements. We say that because using consistent elements through color or repurposing elements allows for each application to develop a sense of character. In this case, you'll see that the Mail toolbar reinforces the language that was started or originated by the application icon by using stamps and the color of blue is carried all across the toolbar. Objects on the right hand side are a little bit different because they have different functions, yet they still relate visually in terms of color. And a little stamp element in the corner as Materials are a really new concept for Mac OS X. We've never looked at materials.

What I mean by that is that we've never really looked at what it means to communicate, say, the plasticity of the CD in iTunes or any of the other details. We study a lot of real world objects when we go off and we render our objects. And that's to fully communicate the realism, to Reinforce the photo-illustrative nature and to really So there's really no question when you come across these things what it is.

If we were to look at some of them, the middle icon is an icon for Sketch. You can see it has pieces of tape, Scotch tape. You can almost see the 3M logo in there. The stickies It really has a sense of the sticky type of paper where there's glue on the back and the way it's frayed up on the top because it's only glued on the top portion of the paper. The glass loop in preview and the metal brim around the Sherlock magnifying glass really gives it a sense of weight. You'll know how that feels when you pick it up.

And the battery monitor, which we call the AquaCell inside. really communicates a sense of glass. A note about transparency-- we tend to use transparency in a meaningful way. The only time we sort of break away from that is in the case of the battery monitor. And that's because it communicates a function. The transparent battery allows you to examine the level of your battery, your battery level, any time you want.

So it's actually a functional usage of transparency there. I don't know if you can see, there's some bubbles that are inside the battery right now and they sort of communicate the batteries in charge mode, which is reinforced by that glyph on top. So we study a lot of real world objects.

It's a bit of a quick walkthrough on certain things, but I guess the idea that we'd like to get across is that A lot of attention is paid to items in the Aqua Icon family. We spend a lot of time on these things and we imagine that many of you will. I've been told that a lot of you have been asking about icons, application icons, and have been told that some of them need work and some of them are really, really good.

A lot of you out there are really amazing at doing this sort of thing, but some of you might need some help. We have on site here, I don't know if they're still here, but they have been all week, Icon Factory, which Apple has invited to come and consult with developers. They do some amazing work.

You can always sort of

So now that you've actually, say, gone out and rendered these icons, and you've got gorgeous resources, how would you put them to use? There's a number of ways that you can get your icons into a format that the application understands. They need to be in a format called ICNS.

And there are a few tools that convert resources into an ICNS format. A few tools that we've got listed here are Icon Composer. That's our own tool. Icon Builder is a tool by Icon Factory. It works within Photoshop and only works on Mac OS 9 at the moment, or in Classic. Iconata is a new tool by a company called Fabricata. Iconographer is by Emscape Software also a fairly decent tool.

So once you get these icons into an ICNS format, the thing to do is to have them point to the The application through a plist. You can do this in two forms. The first is an Info.plist, and that's for packaged apps through app packaging. And the second one is a plist resource, and that's for single file applications.

You can get all the information that you want on this sort of thing through the developer website. I'm fairly certain there's quite a bit of detail that's gone into on any sort of documentation about that. That's what we've got for you today. There's a few extra resources that you can use here. Thanks for listening.

I think we're going to do a bit of Q&A since the nature of this stuff is probably things that you've got questions with. Thank you. Let's just go through some more, a couple of last slides about where to get some more information on this stuff. And while that's happening, if the members of the HI team who are going to be on stage for Q&A would come up.

So you can get a lot more information about this material actually that was talked about in this session in the new version of the interface guidelines that are available for download today. Actually they went up on Wednesday I believe. And the URL for that is there. As well as for general information about creating a great citizen on Mac OS X, a great citizen product on Mac OS X, you can hit the general page which is developer.available.com/ue.

And there's connections to or links to a Carbon and Cocoa related technical documentation on how to create great dialogues and toolbars and this sort of stuff. There's a human interface design discussion list which is listed up there. And actually there's a single URL at the end here that you're going to be able to visit and get links to all this information.