Good afternoon. Welcome.

So I'm Patrick Heynen. I'm a manager in the Cocoa Frameworks group, and welcome to Adapting to the New UI of OS X Yosemite. Let's get started. So Yosemite, yeah. So it brings a pretty fresh look to the Mac. The astute observers among you might have noticed there's been some changes in the visual department. Well, we're here to help you understand what has changed and why, sort of break it all down for you, walk through it and to get a better understanding of it, and then most importantly, how to get the most out of this new UI in your Cocoa applications.

So, how are we going to do this? Well, first we're going to talk about some fundamental design principles that went into the choices that resulted in the current design that you see in OS X Yosemite. Then we're going to take -- get into the tour bus and just take a tour of Yosemite and all the key pieces of -- that have changed that are relevant for Cocoa app developers, from a developer's point of view.

Then we're going to talk about vibrancy, which is one of these important elements, and just deconstruct that and get a conceptual basis for understanding what role it plays and how it works and what it does for you. Then talk about some elements that you might bring to your applications: fonts, colors or artwork and how they should -- -- what their role is and how -- some of the things that we've done to make working with them easier in Yosemite.

And last, but definitely not least, we'll talk about app compatibility and how to mitigate the risk of introducing this big design change and having your app work across different scenarios. Okay, so with that, I'm going to hand it over to my colleague, and we're going to get right into the design portion of this talk. Mike?

Thank you, Patrick. Hi, everyone. [Applause] So I'm Mike Stern. I'm User Experience Evangelist with Apple, and I am not an engineer. I'm a designer. So what am I doing here at this engineering session? Well, we're talking about the new design of OS X, and I thought I would just come here for a few minutes and talk about some of the high-level principles or design themes that guided and inspired the design of OS X Yosemite. Now, yesterday, we announced OS X Yosemite, and OS X Yosemite is the tenth release to OS X.

And in that time span, there's been a few really major UI releases for OS X. And as with every one of those releases, elements like the menu bar, windows, the dock have been refined to be friendlier, easier to use, more approachable. But they've also been redesigned to have greater utility and power and support more sophisticated and advanced workflows. Now, Yosemite is just another step in a continuous process of evolving OS X. So let's dive in and talk about some of the principles that were really core to this particular redesign. The first one is simplicity. Now, let's take a look at these app icons.

In particular, let's look at the calendar icon. Now, as before, calendar was redesigned, but it still very much looks like a realistic, three-dimensional object, with realistic highlights, realistic shadows, and even the texture of the paper. But some of the elements of the previous icon were removed, like the mini-calendar view or the metal rings.

Those elements weren't really necessary to depict a daily desk calendar, and by removing those elements, the new icon is more simple. It's less cluttered. It's more straightforward. And simplicity also influenced the decision to go away from using Lucida Grande as the system font and towards using Helvetica Neue.

Helvetica Neue is a simpler typeface. Lucida Grande is designed to evoke handwritten letterforms. Helvetica Neue, on the other hand, is designed to clearly and simply depict the letterforms and numbers, without any ornamentation. So it's a more appropriate typeface to use for the new design language. So what does that mean? Well, here's a comparison. You can see that the S is a little bit more geometric. It's a little simpler. There's less variation between the thickness of the stroke weight, between the thin and the thick parts of the letter.

The shoulder here, for the n has a smoother form to it. It's less of an abrupt transition. And fonts have a more consistent width to them. Now, the next theme is about consistency. Again, let's go back to the app icons. Now, from the beginning of OS X, app icons were rendered to look like they were three-dimensional objects that was sitting on a table in front of you. And they were rotated a bit, so they could be easily distinguished from documents or folders, plug-ins and utilities.

But over time, there was a little bit of a divergence going on, with every app sort of doing its own thing. And that lead to some variation, like icons that have a really strong perspective and keystoning effects. Or instead of looking like they were lying flat on the table, they looked to be sitting upright.

OS X brings a harmonization of the style of all the icons. So here, the realistic-looking icons -- you can see, they all have the same perspective, same light source, same rendering. And the graphical icons, these round icons, are also internally consistent with each other. The symbols at the center of them have the same embossed effect. The shape -- the convex shape of the form is consistent across all of them.

And let's go back to type. Again, Helvetica Neue is the new system font. And one of the things that this solved for us was an inconsistency that existed before. Over time, some apps, like Notes had started, to use Helvetica Neue as a content font. And apps like iTunes, iPhoto, iMovie, Final Cut Pro and Logic were using Helvetica Neue as a content font as well as a UI font. And this led to a sort of unfortunate mismatch between the system and those individual apps.

So by changing to Helvetica Neue, now we have this consistency across the entire Mac experience. And another side benefit to that is there's more consistency between Mac and iOS. And the third major principle or theme of this redesign is about depth. We believe that software interfaces should feel, physically -- to have physical dimensionality, and that that should be really plausible.

That dimensionality helps you to focus on the things that are in the foreground and pay less attention to those things which are in the background. Now, in iOS, depth in conveyed through using translucency, for example, the Notification Center or the control center. And the elements that are within those UIs also have translucency -- meaning some of that background color is allowed to come through. Now, OS X picks up on this and uses the same kind of translucent effect for the Notification Center and other parts of the UI.

Now, in iOS, of course, we use motion effects to show depth, as well. So when you move the device around in your hand, things have a sense of parallax. And that's great for something that weighs as light as an iPhone or an iPad, but we're not about to encourage people to pick up their iMac and start moving it around to get the same effect. So it's still really important to use things like gradients or drop shadows to convey that sense of space and to correctly order things in the Z axis.

And the last major principle for this redesign is around -- designing around content, to be content-focused. Content is what's most important, not the user interface. So for example, one way to be content-focused is to just allow there to be more space for content. So now there's this unified toolbar that does what a titlebar and a toolbar had done before.

By unifying those elements, there's now more physical space for the thing that you really care about, which is the webpage itself. And deferring to content or allowing content to be the focus is also about having a user interface that's less heavy, less strong. So we've stripped away a lot of the textures and the highlights and the shadows, to have a simpler appearance.

That, in combination with the translucent window chrome -- the toolbar, in this case -- allows the content to really come through and affect the appearance of the entire screen. Again, it allows your content to be the center of your focus. So that's all I really have for you today. And now I'd like to hand it off to our tour bus driver, Rachel Goldeen. Thank you very much. [Applause]

Thanks. Thanks, Mike. Good afternoon. Thanks for being here. As they mentioned, I'm going to give you a little developer's tour of the new UI in OS X Yosemite. Let's start off here by taking a look at Finder, and I'm going to give you actually a mini-tour before the tour of the things that I'll cover. We'll take a look at the toolbars, again; the window control buttons; the new kind of segmented control; the sidebar, which is translucent now; and then we'll move over to Safari to take a look at what Mike just mentioned: the combined toolbar and titlebar.

And then we'll take a look at system preferences to show us an example of our animated controls: search field, radio buttons, popup menus and checkboxes. And after that, we will go over to Notification Center and look at our new Vibrant Dark appearance that's used here. And then the context menu, which uses the Vibrant Light appearance, as do popovers. All right.

Back to the top. Translucent toolbars. For anyone who's gone and installed Yosemite already, I'm sure you've played around with this and seen, as you scroll things up, you can just see them coming through the toolbar, and it gives you a sense of your content sliding under the toolbar. How do you get it? Well, all you have to have is an NSScrollView that is adjacent to the toolbar.

And then it happens automatically for ya. But if you don't have that, you can still get it by using this new window style mask NSFullSizeContentView WindowMask. Simply [inaudible] that in with your existing window style mask, and you'll get the transparent, translucent toolbar style. This can be useful for things such as toolbars or titlebars that show and hide over content that is not in a scroll view, or the scroll view's not right at the top.

Lots more details about this in tomorrow's advanced session, "Adopting Advanced Features of the New UI of OS X Yosemite." All right. Tinted Sliders, hiding away in the bottom right corner of this window. These are a little new thing on Yosemite. And to get those, you just need to have a non-directional slider, which is a slider that has zero tick marks.

All right. Now, let's take a look at the new window control buttons. As well as being flatter, you'll also notice that the full-screen button has moved into the green button. If you're sad about that, and you'd like the zoom behavior back, hold the Option key, and you'll get zoom behavior. I'd also like to point out that any window that can't go full-screen reverts to the old zoom behavior.

And then, next, the new kind of separated, segmented control. These are useful for things like navigation, like this backwards and forwards button here or other kind of incremental step operation, such as zooming. And this is easy to get by setting the segmentStyle to NSSegmentStyleSeparated. And it's nice to know that the style will automatically adjust, whether it's in a toolbar or in a window.

Now, I'm going to bring another window onto Finder, here. And we'll take a look at some of the subtle differences that happen between active and inactive windows. When a window comes forward and becomes active, the sidebar is translucent. But when it goes to the background, and it's inactive, the sidebar is opaque. So it's nice to know that the translucency is only in the active windows.

And let's take a closer look here, at the toolbar. A couple of things to note -- it's a good chance to say that the metrics -- we've tried to keep them as much the same as possible so that all of your old controls that are automatically moved to the new look, even without recompiling, should all fit in the same space.

And there's also some subtle things that happen when you use template images. These are a great way to take advantage of our automatic adjustment for state changes. And so I'm going to send this window to the back, and you can see the state changes in the template images, particularly that selected part of that segmented control. Look at the image. You see it completely change color. So you can take advantage of that by using template images.

And let's take a look again at the translucent sidebar. Once again, opaque here; translucent here. And how do you get translucent sidebars? Guess what? They're for free, if you've used an NSOutlineView or NSTableView, and you set the highlight style to Source List, which you can do in Interface Builder or in code.

All right. And to just show how easy it was, I downloaded a SidebarDemo, which was put together for OS X Lion, 10.7, and out of the box, it had translucent sidebars. Now, moving over to Safari to take a look at the new kind of toolbar that has a hidden titlebar.

Hidden window titles are achieved using this new NSWindow property: titleVisibility. And you can set the title visibility to NSWindowTitleHidden in order to get the effect that Safari has. And I'd like to point out to you that Safari has some special things that makes this work, one of which is that they have put the window title into the combined URL and search field.

And so you can still see the window title, even though there's no titlebar. Also, as Andreas pointed out yesterday, they've let room for users to click in the toolbar in order to move the window around. So you want to make sure you have room for that, if you're going to use this new style.

Moving on to animated controls. Search fields now animate very much like they do on iOS, with the magnifying glass and the placeholder text moving to the left when you click. Radio buttons have an animation, and one of the nice things about them is: as you select a radio button, the other one deselects and animates out simultaneously. It's a nice little touch.

Checkboxes, as well, are now animated. And this is a good time for me to point out that that first preference there -- double-click a window's titlebar to minimize -- if you leave it unchecked, which is the default, double-clicking a window's titlebar will zoom. So that's a little hidden feature for ya. And last, popup buttons. When you select a popup button and choose an item from the menu, it'll animate back into place in the popup button.

All right. Moving on to Notification Center and the Vibrant Dark appearance. Let's take a little bit of a closer look as what happens when the background changes. I want you to pay particular attention to those tabs at the top that say Today and Notifications and see how they change as the background changes. It looks very close to standard transparency, but we're actually using special blend modes to pull the color in a little more than just plain old transparency.

How did they get it? They used this new NSView subclass -- NSVisualEffectView, as well as the new Vibrant Dark appearance, which is an NSAppearance. So you can create an NSVisualEffectView, get the NSApperanceName VibrantDark appearance and set that on the effectView in order to achieve this look. Similarly, here's an example of the Vibrant Light appearance.

Same deal: NSVisualEffectView, but this time using the VibrantLight appearance, and you set that on your effectView, and you get this new Vibrant Light appearance. Lots more about NSVisualEffectView and Vibrancy in tomorrow's talk. And now, I will hand it back to Patrick, who will talk to you in more depth about vibrancy. Thank you very much. [Applause]

Thank you, Rachel. Thank you. Okay, so vibrancy. So as Rachel mentioned, it's not just plain old translucency. What is this vibrancy? Well, it's a pretty important visual building block for OS X, as you -- and it makes its way into many different applications and many different areas, both in light and dark. Most prominently in Notification Center, but also other places in the OS.

So what is it? What is this vibrancy thing? Well, I'm going to try -- and bear with me here, but -- I'm going to try to deconstruct it and break it down and sort of explain conceptually what it is and what it's trying to do, what its goal is, to help give you a framework for understanding what happens technically with your application.

So vibrancy is advanced blending on dynamic or adaptive backgrounds. So what's advanced about it? Well, I'm about to -- in the words -- the words of E. E. Cummings, I think -- I'm going to try to make the case that with vibrancy, two plus two can not only equal four, but we can actually make it equal to five.

In fact, it's all about making -- vibrancy can actually make the whole greater than the sum of the parts and things that you put into it. It actually can end up with something more interesting than the two things you put into it. So what two things am I talking about? Well, it's really all about combining foreground and background elements. Most of UI graphics is all about combining some foreground content onto a background, whether it's a button onto a window background, whether it's a piece of text onto a button or a window content background. It's all about combining those individual pixels in interesting ways.

Well, so let's do that. We have this beautiful poppy background. And let's do -- and traditionally, let's -- we have here a gray, a mid-tone gray circle that we put on top of this background. And we can just put it on there. Now, it's okay, but it kind of doesn't really blend well at all.

It kind of sticks out, in fact, in this image. Now, traditionally, the tool we would have at our disposal, to kind of combine it or blend it in some interesting way, would be transparency or using alpha or opacity. So here, I faded this gray circle by about 25 percent, maybe a little less. I'm not a designer.

So -- but you'll notice there's a problem with this. And it leaves a little bit on the table in terms of the resulting esthetics. Because what happens with transparency is, all you're doing is you're taking that foreground and the background -- you're just taking a fractional midpoint in between and combining those. And what it really ends up being like, is like -- is if you were taking that foreground element and punching a screen, like punching and building little holes in it, and letting the background seep through.

With the end effect that the background that does show through that foreground element ends up getting kind of murky and muddy and hazy. And as you make it more opaque, it just kind of gets darker and muddier. And it really doesn't -- the background doesn't really get to combine in an interesting way.

Well, what if we did this differently? What if we -- and the other thing I want to point out is that we're not really doing anything with the color information of either the foreground or the background when we combine them this way. Well, what if we approached the problem differently? What if we actually took the color information of the foreground pixel and the background element and combined them in an interesting way, where we actually were trying to preserve the color tonality of the background? And just using the actual foreground color as a hint as to how much of that color to preserve in a general sort of intensity level.

So that's -- what I'm illustrating here in this slide is actually sort of a burn effect, a burn blend of a foreground. Same circle, same actual gray value here. I have changed nothing about the foreground element. It's still that same gray circle. It's just that now I've combined it with the background in a more interesting way, where I'm using the gray value to actually direct how much of the color information to keep from the background, as well as the general tonality. What's nice about this is you really preserve the character of the background, as you can see.

And what's also very nice about this is it kind of works really well as things change. Now, we're changing the lightness quite a bit, as we go between the edge of that poppy and the center, but get this sort of general contrast ratio and general look of that composite. It's actually preserved pretty well by that blend.

And in fact, this design is very resilient to completely changing the background out for something different. So once again, I have changed nothing about the foreground element here. I've just changed it out, and now we have this lotus flower background. And you'll see that the actual combination is sort of roughly the same overall character, as a result.

Well, so okay, so this is a good illustration of the basic sort of foreground and background blending, using sort of a more advanced blend. But now, how do we build this up into what we see in OS X Yosemite today, to get these translucent materials? Well, now we need to combine with a different kind of background. So let's build up this light material here.

Well first, we just want to put a nice light tint layer that's transparent over the, over the background, to give us a nice sort of light substrate onto which to draw our UI. (Because we don't want to draw our UI directly onto your desktop picture, of course.) And then all we need to do to make it better is just blur it a little bit and to keep the overall color tonality and the rough shape of your background but still preserve -- but give a smoother rendering of the overall result.

Now, you notice, as I went through and built this up, I've changed nothing about the foreground element. All I've done is I've changed that background, that it's -- that it's being blended onto. And the nice thing about this is, is it still preserves that same character. As I'm going across and as the background is changing, the overall composition really preserves its character and still gives you some of that -- the important color information in the, of the background that's underneath and lets it shine through.

So in fact, I'd like to argue the whole can be greater than the sum of the parts when you're doing -- when you combine using the right blend modes -- and solve some tricky design problems. So what are these vibrant materials of which we speak? So Rachel enumerated some of the areas. So we have built up a couple of different styles, one of which can be seen in menus and popovers. Then there's the general Light appearance, which is what you see in the sidebars and source lists. Then there's the translucent titlebars. That's another vibrant material.

And of course, the Dark appearance, which you saw in Notification Center. There are a couple of key new vibrant system behaviors. What I mean by this is areas where your application -- even without taking any steps, you'll just automatically benefit from this new composition style that we're using. One of which of course is source lists. Then there's the translucent titlebar. Menus and popovers automatically get this, as their background. And of course, menu bar and status items in menu bars.

So how do you use vibrancy in your apps? How do you use it effectively? Well, once again, it's all about combining foreground with background in an appropriate way, in an appropriate and interesting way. Well, NSVisualEffectView is the view that actually is performing the role of this background. This is the thing that we built up in the slides before, with that white and the blur and the translucency. This provides us the substrate onto -- the canvas onto which we are going to draw. And it's offered in light and dark basic material flavors. This is stuff that you've -- that Rachel briefly demonstrated a moment ago.

And the important thing about NSVisualEffectView and what it does to your applications, is it takes care of all of the steps needed to make sure that, as the content -- either underneath your window or underneath the view, inside of the window as it changes -- as you scroll things around, as you drag windows around, as your background changes -- it's going to automatically update as the content underneath changes. You don't have to worry about any of that; all of that is handled for you.

So let's move on to NSAppearance. So NSAppearance is -- in this equation -- is the one that's taking the role of the foreground element. And it's going to drive both the selection of the foreground content, as well as drive some of the blending behavior. So it's offered in two appearance variants: NSAppearanceName VibrantLight and then NSAppearanceName VibrantDark.

And what its role in life is, is to provide sort of a panoply of colors, controls and template image treatments that are appropriate and suitable for vibrant rendering when deployed in VisualEffectViews on vibrant surfaces. Now, this is important because, as you saw in the earlier section on vibrancy, selecting the foreground element -- now the way things combine is very different than traditionally. So selecting something appropriate for vibrant rendering is very critical. And so we need alternate sets of these design values -- alternate versions of these foreground elements, to get the right result on these vibrant surfaces.

So as I said, it's really the -- NSAppearance can really be thought of as the thing that helps select and identifies your foreground content source and makes it appropriate and locked in for vibrant rendering for that material. And once it's in effect, then AppKit can automatically pick up the appropriate colors, pick up the appropriate template treatments -- pick them all up and do the -- and pick up the right blend modes, especially, appropriate for the view and the material you're rendering onto. Okay. So how do you do this? Well, let's actually try to do a demo here. Little bit exciting.

Demo one. Okay. So -- so what we're going to do here is -- we have a very, very, very simple application that's basically just an image editor -- an image editor with some adjustment sliders here. And what I'm going to try to show you is how simple it is to just add some vibrancy into your UI and how little effort it takes.

So all we're going to do is we're going -- what we're going to try to do is we're going to try to take a VisualEffectView and put it inside of that little inspector and re-host the controls inside of it to give it a vibrant appearance. So let me go ahead and do that.

So the first thing I'm going to do is I'm going to create a VisualEffectView, initialize it with the inspector's frame, and then I'm going to set its appearance to be the VibrantDark appearance. Now, the next -- and then the only other thing I really need to do is I need to re-host the -- take out the existing content, the controls out of the existing contentView and put them into this new fxView and then, place it as the contentView of the window. So that's all I'm doing here. This isn't really directly relevant to the demo, but I just put it here for full honesty and full disclosure here.

So a key thing to see here is the appearance being put on here, and you see, presto change-o, I have not only some nice, dark vibrant material, but I also have, you know, alternate slider -- alternate controls. That app can automatically select different artwork that's appropriate for vibrant rendering, specifically for the dark material. The text colors have inverted, and everything is updating dynamically. And all it took was deploying that VisualEffectView. Okay. So back to the podium.

Okay. And that was a very, very cursory demonstration. For a lot more details about all the ins and outs of VisualEffectView and some of the more advanced techniques of using them to build some of the -- build UI similar to some of the things that we have in our system, please go to the in-depth talk tomorrow: "Adopting Advanced Features of the New UI in OS X Yosemite." Okay. So let's move on to fonts, colors and artwork. These are the elements that are typically the things that you as an app developer might choose -- make some specific design choices and provide material for.

So let's talk about fonts first. So what's new in fonts? Well, how about the system font? That's not that big at all, is it? It's not a big change at all. Actually, it is. So this is -- here's an illustration of the Mavericks menu bar, which is Lucida Grande.

And here's what it looks like today with Helvetica Neue. It's actually a pretty significant difference. It can be seen even more dramatically if you compare the two side-by-side. You'll notice it's quite -- the sizing characteristics are a little bit different, but in general, it is a lot crisper typographically and sort of a cleaner layout.

So let's talk about this new system font. So it's Helvetica Neue, but it is not just plain old, your mother's Helvetica Neue. It is a specially optimized version of Helvetica Neue that has been optimized for OS X. And what do I mean by optimized? Well, any time you put a font -- for updating a system font, one of the key two things to balance are aesthetics and layout compatibility.

Now, if aesthetics were all we were concerned with, we would just render the font exactly how the type designer originally envisioned it and try to do our best job in rendering the individual letterforms, and leave it at that. Well, the problem is, if we're switching the system font, this means we're updating the typography in applications that haven't been modified and may not even be aware of it.

So we have to think about things where, like, the layout may change, because ultimately these fonts have different size characteristics. So the version of Helvetica Neue that we've deployed has been specifically tuned to sort of balance this tradeoff, to try to strike a good balance there, to make sure that we still get the aesthetic win that we're really looking for with this clean typography. But not at the cost of application compatibility.

So let me go into that with a little more detail and explain. So here's -- here's an emulation of the Finder item -- app menu item that you might see on the menu bar. And this is it rendered in Lucida Grande. And you can see here, sort of approximations of the interglyph spacing, here.

And now, as I switch this to Helvetica Neue, there are some interesting things going on here. Because you notice the overall thing is shorter, but actually, if you look carefully, some of the letters actually got bigger, and some of them got shorter. So it's not a straightforward thing as saying, "Oh, yeah, Helvetica is -- everything is just going to get shrunk by a certain percentage." No, it's much more subtle than that. It can be content-dependent. Some things are getting winder. Some things are getting shorter. Some things are getting more consistent, where they were inconsistent in Lucida Grande (between the capital letter sizes and the lowercase letter sizes).

So it's a complicated equation. So that's why it was important to optimize these metrics appropriately, so that they solve this compatibility problem in a useful way. Here, you can see the two on top of each other, and you can see more dramatically this difference. You see the F, in particular, is actually shorter in Lucida Grande, and it's wider -- sorry. It's thinner in Lucida Grande and wider in Helvetica Neue. But almost all the other letterforms, except maybe the D, are actually considerably shorter. So layout compatibility -- that's a big topic. It's an important topic.

And what do we do about it? Well, for unmodified applications, one technique that we've applied is to apply layout compression if there's a danger of the texturing clipping, given the existing balance. So for example, if you have a text field that was sized just so to just fit just perfectly on Mavericks, you know, there's a chance that that same text field, if no measures were taken, would get clipped with the new font.

Because some string choice in there was causing the overall layout to be longer. Well, in those circumstances, we're just going to apply a bit of an interglyph compression, to try to make sure that it fits, so you at least see all the information, that there's no information loss.

And as I'm -- and this is active for apps built against 10.9 or earlier only. So this is an important takeaway here, because this compression mitigation that we do does not apply if your app is targeted and built against the 10.10 SDK. So what does this mean? This means that you don't have to worry about your existing applications having problems with your users. But when you're going forward, we encourage you to really look carefully at your text in your applications and make sure that you're using either auto layout or that you're really sort of comparing and testing, making sure that the widths of all your text elements is optimized accordingly.

And I also want to mention that this compression technique that we apply is not a silver bullet by any means. And one shouldn't think of it as the cure-all. And the reason is, is because layout compression does not come without a significant cost, which is that it can really affect legibility. And that's especially true on 1x non-retina displays, where there's few pixels to work with for every glyph. And every pixel's doing a heck of a lot of work, and if you're compressing things together, it can really make things suffer in terms of the information legibility.

So how do you use this new system font? How do you make sure your app is using the appropriate type? Well, thankfully, we have a whole bunch of system font selectors to choose from. And that's what we encourage you to use, to make sure that you're using the right things.

So if you're doing this in Interface Builder, rest assured that, you know, if -- as long as you stick with the standard font selections in the font popups that show up in Interface Builder, you should be okay. Otherwise, we encourage you to use the system font selectors. These are the ones that are in NSFont.

An example -- there's many more, but I'm just picking a few to highlight here -- NSFont systemFontOfSize, NS boldSystemFontOfSize and a new one, actually, labelFontOfSize. Actually, that's not, uh, I don't think that's necessarily new. (There's another label thing coming that's a little bit newer.) So all of these selectors will make sure that the appropriate UI font -- the one that's optimized -- has been selected and is going to be used as appropriate for UI.

Important takeaway here, and if you remember nothing else about this font sections talk is: please do not explicitly set your font, either in code or in IB, to Helvetica Neue, you know, as a literal string. Because that's the actual document content font. That's the not-optimized version. You'll get very unexpected results, and it may make your application less compatible going forward, as we continue to improve upon the typography of OS X.

Okay. So colors. So colors are an often underappreciated element of UI, which is a shame, because if you actually look at most windows on most applications, about 90 percent of the pixels -- if that, you know -- are actually composed of color fill. So they're actually a pretty important part of building your UI. And it's especially important now, in this day of multiple appearances in different sections of your applications.

So we have system colors in Cocoa, and these are what we urge you to gravitate towards. And by system colors, I mean two things. I mean literally the colors provided by the system, in terms of the color selectors in NS color [inaudible], but I also would like to emphasize that you should think of colors as a system of colors, not just as a set of numbers that you might pick out, you know, from a designer like, oh, RGB 128, 142, 136.

No. Think of them as a system, as in like, "what is the semantic color that would be appropriate to use here?" And this is where system colors can really help, because many of the standard colors -- like for example, NSColor controlTextColor, NSColor secondarySelectedControlColor and, you know, there's a whole host of others -- have been adapted, have been optimized to make sure that they work in all areas and under all appearances in the new UI. And they may also change in the future, so it's just a good way to bulletproof yourself.

For textual elements in your UI, we also would like to encourage you thinking of laying out your UI in sort of an information hierarchy. And by that, I mean you might have some sort of primary sort of information elements or labels and then, you might have some secondary supporting information. You'll see this pattern in many different applications in Yosemite. And we've introduced some new color selectors specifically to help with this. The two color selectors are labelColor and secondaryLabelColor.

And the nice thing about these is they've been specifically designed to work well on almost any context that you might put them on, whether it be menus (which have that light vibrant appearance), regular windows, Notification Center and its dark UI. No matter what you do, it will look correct.

So what about control text? What about button text, or other things like that? Well, the good news there is the control text -- Cocoa is going to make sure that control text automatically adapts to any particular control state that your control may find itself in. So actually, I would encourage you to -- unless you have a really compelling, overriding reason to do so, please let the Kit provide the coloring for any textual elements on your buttons and images. (I'll get to images in a second.) Because there really are such a wide range of interaction and control states, and our designers have very carefully selected colors and stylings for each one of these across all the different appearances.

And doing so, this will let the -- the Kit provide the optimal appearance, including adapting to the vibrant NSAppearances. Here you can see in the example of what label color and secondary label color look like across the Light and the Dark vibrant appearances. And you can see that they sort of preserve their design intent -- they're being primary and secondary.

They're both vibrant -- the secondary one is a little bit more so; that is, it's letting a little more of the background through. It's a little more translucent. It's picking up a little more color of the background. But it will preserve -- it will be a right design choice on any of these appearances, including the non-vibrant appearance, the regular aqua one.

Okay. So the last item here, in this section: artwork. So artwork is one of the other important elements that you might want to integrate into your application. And for this -- the thing I want to mainly highlight is template images. Template images can be an excellent way to get maximum flexibility out of your artwork and have it be resilient across a wide range of UI scenarios in your application.

So what are template images? A brief review. Template images are image resources where the image content itself is just providing the shape of the control, of the element that you want to depict. It's providing no color information. It's -- I mean, you can put color in there, but it's going to get ignored, because it's basically just the shape that is critical.

And then what happens is, that makes it possible for AppKit to transform it, with a context specific appearance. It can take that shape, and it can render it in a translucent gray when it's disabled, or it can render it bright blue when it's selected. And it can make all these design choices and style it in a way that's appropriate for a specific appearance and for a specific interaction state.

Okay. App compatibility. So Mac OS X Yosemite does bring some big changes to your app's look and feel. And even for apps that really haven't made any changes, the visual differences can be quite significant. This is Dictionary here, and even though this is a pretty straightforward application, you can see that the differences are notable, both in terms of the general aesthetics, as well as the layout of some of the elements.

Well, so what does this mean for your app, and how to think about having your app work on Yosemite? Well, first and foremost, we'd really like to encourage you to make your app as awesome as it can be on Yosemite and take advantage of as many of these new UI experiences that we've provided the building blocks for, including but definitely not limited to VisualEffectView and vibrancy. But what about deploying on Mavericks? You know, it's quite legitimate to want to have an application that works both on Mavericks and on Yosemite, so that you can have -- support all of your customers.

Well, having it both ways can be quite challenging, given the changes that we've made in the design of OS X. As a case study, I'd like to show Xcode here. Now, this is Xcode running on Mavericks. And notice the tab, which was carefully designed to blend in very well with the titlebar material. Well, here we go in Yosemite and change the titlebar material, and suddenly, everything doesn't match.

Well, that -- this is an illustration of the challenges that an app can face if they have to support both the old UI language as well as the new. Well, we all know this had a happy ending because this is in fact what the Xcode that you're living with right now looks like Yosemite, because Xcode actually did make an optimization to make sure that it looked perfect for Yosemite release.

So what techniques can you use to set yourself up for success, in the face of these big design changes? Well, first and foremost, we encourage you to stick with the system, and what we mean by that is, where possible -- unless you have an overriding reason to do so -- stick with standard controls, stick with standard template images, stick with the system colors, stick with system fonts.

All of those things will be automatically managed and adapted appropriately by AppKit across both platforms and will look reasonable. Like for example, the entire titlebar or all the control -- all the font selectors, all the colors. They'll automatically resolve themselves to the appropriate thing on each platform. Now, there are many cases where that may not be sufficient, and where you actually do have to write different code. Like, for example, the selective tab change in Xcode. Well, you can also use runtime checks to tailor your code and resources for each design.

So let's go through two techniques. There are more, but these are two primary ones I wanted to show you for what you might be able to do. Well, the first thing could be a symbol check. So let's say you have an application that's actually got a deployment target of 10.9. And you want to potentially introduce some vibrant UI, but you know you can't just directly reference that stuff on, you know, on 10.9, because it doesn't exist.

Well, what you can do is you can do -- using the standard weak-linking behavior, as soon as you have a deployment target set to 10.9, you can always just check to see if an important symbol -- like in this case, NSAppearanceNameVibrantDark -- is non-nil. And only if it's non-nil, then you go ahead and use that code and set up a VisualEffectView, for example, for a piece of your UI that can be vibrant in Mavericks. Now, the nice thing about this code is that it automatically brings in the vibrancy when that application is running on Yosemite but does whatever it needed to do before on Mavericks.

Another approach is to do a version check, to sort of check what runtime environment am I on? This is a little more straightforward, a little more old-school. So this is the standard technique that we recommend for doing that, at least for Cocoa applications, trying to do Cocoa-type work.

Compare the NSAppKitVersionNumber against the pre-published constants. Make sure you get that greater-than sign correct. Don't put it the other way; you'll end up with rather surprising results. And then this would allow you to, for example, select different image resources or go into totally different code constructions across one version of the OS versus the other.

Oh, I missed that build. So in general, what we'd really like to encourage you to do is look for opportunities to freshen your design in as many places as possible and freshen your design everywhere. We really think that a majority of your customers are going to -- a majority of your users, I should say -- are going to be on the Yosemite design, in Yosemite in the very near future.

And it's going to be -- and if you do have to make a choice about updating your design and you're worried about changing things on older platforms, I would also like to encourage you to: when in doubt, favor the new visual style. What I mean by that -- and actually, Xcode is an example of this as a case study -- It's okay to go and bring some of the elements that have been introduced in -- elements that have been introduced into Yosemite and bring them back into your Mavericks app UI design language.

So for example -- and I don't mean like, obviously, the whole translucency thing, because that doesn't work on Mavericks. But in terms of button shapes, button glyphs -- your icon, for example -- it is totally okay, and it actually works out reasonably well to take some of these simpler, cleaner design styles that are featured in Yosemite and to have them show up on your buttons or in your window titlebar in your application on Mavericks. So that can help relieve some pressure.

So we're getting close to wrapping up here. So I just want to recap what we talked about today. So we have this -- there's a brand new user interface design for OS X. We've walked through that. We've talked a little bit in trying to understand the components of vibrancy and what role it plays and what it does for you. And we talked about adapting your applications to these new features. Please -- put yet another plug in for the advanced session, for more in-depth exploration of using NSVisualEffectView, using vibrant materials and some of the tips and tricks of getting these UIs together with alacrity.

So in summary: lots of excitement, lots of exciting design changes coming to OS X. And if there's one message I'd like to leave with you, it is that the Cocoa frameworks can help guide you through all this change, and please avail yourselves of their services. For more information, we have our excellent Developer Evangelist right over here with the fancy sneakers, Jake Behrens.

And I encourage you to email him if you have any questions. And there are many related sessions, including the "What's New in Cocoa," which happened earlier today -- uh, actually -- yeah, earlier today. Today is Tuesday. There's also the advanced talk tomorrow. I also want to point out the "Creating Extensions for iOS and OS X," which happened actually, it's concluding -- it happened just an hour ago. And the reason I mention that is I think they talk about Notification Center extensions, which is one of the places where you use the Dark Vibrant appearance.

And there are also some there-- ah, are some Xcode sessions, some Interface Builder sessions that I encourage you to go to, where they're not going to touch directly on some of this stuff, but it's very important to see some of the new features that have been exposed in the new UI and Interface Builder. And if you haven't gotten enough of my not-an-engineer colleague, Mike Stern, he's having a talk right following this one, called Designing Intuitive User Experiences. And you can get more design wisdom. And with that, I'd like to wrap up and thank you.