Good morning.

This session is What's New in iOS User Interface Design. And I want to thank so many of you for caring about software design, for being here at nine o'clock in the morning to talk about this topic that's very important to us. If this were another company and if this were another developer conference, I might imagine a full room could be a session like this but it's not, we are Apple, we care about software design, and this is what this session is about. [Applause] So why don't you guys give yourself a hand.

I'm Greg Christie and I'm here to introduce Mike Stern eventually and talk about what the new user interface means to you as developers. I thought the keynote went great. I hope you guys all enjoyed it. You guys have been playing with iOS 7 for a day and a half now and so I thought it would be a really great way to start if we take a fresh look at Jony's words and the video now that you've used iOS 7 for a day and a half and can get some context into what he was talking about. So, I'd like to start with that.

We have always thought of design as being so much more than just the way something looks. It's the whole thing. The way something actually works on so many different levels. Ultimately, of course, design defines so much of our experience.

I think there is a profound and enduring beauty in simplicity, in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It's about bringing order to complexity.

iOS 7 is a clear representation of these goals. It has a whole new structure that is coherent and it is applied across the entire system.

We've considered the tiniest details, like refining the typography, to much larger ones like redesigning all the icons, and developing a grid system allowed us to achieve a much more harmonious relationship between individual elements. We've also incorporated a whole new palette of colors.

Distinct, functional layers help establish hierarchy and order.

And the use of translucency gives you a sense of your context. These planes, combined with new approaches to animation and motion, create a sense of depth and vitality.

The iPhone responding to your movements drives the parallax to create a whole new experience of depth.

In many ways, we've tried to create an interface that is unobtrusive and deferential. One where the design recedes and in doing so actually elevates your content. Even the simple act of changing your wallpaper has a very noticeable effect on the way your iPhone looks and feels across the entire system.

While iOS 7 is completely new, it was important to us to make it instantly familiar.

We wanted to take an experience the people know very well and actually add to it to make it more useful, to make enjoyable. To create it, we brought together a broad range of expertise from design to engineering. With what we've been able to achieve together, we see iOS 7 as defining an important new direction, and in many ways, a beginning.

I won't do nearly that well but. What's new in iOS 7? Well, everything is new. It's a 100 percent new pixels there. No pixel here has been used before in any previous release of iOS. A really great example to look at when we talk about what's new in iOS 7 and where we're headed is the Weather app.

It's not the most important app on the phone unless you really need to know what the weather is and it's not the most used app, but it really gives a great indication of what we're doing with iOS 7. You guys by now are familiar with the animated weather states, how they occupy the full display.

It's really interesting comparing old and new side by side and you can see a lot of what we were doing is maximizing the screen size, blowing out the edges, removing unnecessary edges and borders, refining the typography, refining the line work, really just creating a whole new immersive experience. The graphical ornamentation is now an intrinsic part of the application. It's not just tacked on. Okay? You can see all those things here in detail compared to that. It's really interesting.

Johnny touches on four key notions in the video and that's what we're going to talk about here today, because when everything has changed it's hard to know where to start, so we'll start with the simplest notion and that's one of clarity. Clarity simply put is being clear. In the Weather app we're very clear in terms of what the temperature is and what the current weather conditions are. We make the current temperature as large as possible, yet fit in a sound design with the rest of the information. Being clear means clearly indicating what's text and what's a control, what's content and what's a control layer.

Another important concept is this of deference, right. So what we're doing in our apps now is deferring to the content. We're letting photos be photos, web pages be web pages, email messages be email messages, but there's another side of deference. This is very important for you folks and that's that iOS now has a design that defers to your apps, okay? We're not putting a really strong visual imprint on the overall system so that your apps, if you're doing custom UI, will feel out of place on the system. Our UI is now getting out of the way, we're letting your apps be your apps and letting the customer's content be the customer's content.

Another way that we're reinforcing clarity and this difference between controls and content, is by our use of depth. You see this really strongly in the case of the Home screen. We're using this layering model and we're using layers and notification center and control center and within the individual apps themselves. Having controls exist on one layer, content exist on another. Finally, detail.

Detail really shows itself in terms of topography, using a consistent and coherent set of weights and sizes and in colors and in the iconography. Again, we're using a highly disciplined, controlled, limited set of colors yet it provides a very rich pallet and one that can express you know just the incredible variety of apps that are on iOS. This also applies to the Glyphs, things that appear in button bars, toolbars, those types of things. These have all been normalized with regard to line weight and shape and size. Paying attention to the details matters.

It matters a lot. Another thing that we're doing with regard to detail is we're finally exploiting the retina screens to their, you know, fullest capability. We've lots of single pixel details, single pixel lines that we're using and exploiting throughout the system. Okay? So here to walk you through the nuts and bolts of what we did and some of what you will have to do to bring your apps into the iOS 7 world is Mike Stern. He's going to walk you through some of these things. [Applause]

Thank you Greg. I'm really excited to be with you this morning to go into some detail about iOS 7 and some of the new apps like Mail and Calendar. We're going to compare how they are now with how they were before and I'm going to talk a little bit about why things have changed, the thought process that went into the new apps and I'm really hoping that you'll take from this hour some ideas about how you can make your apps more dynamic, easier to use and more delightful. I've got a lot to cover so let's dive in.

This was how the design for iOS 7 started. We started with a totally blank slate. We had to think about what's the most important thing that people care about. What's the content that they care about most? So in Mail it's this. It's the message, it's a single thing.

Of all else that you see in mail that's the most important. Everything else is secondary. And for what was added, it was added with really great restraint. We had to make sure that anything that was added to this was absolutely necessary. So eventually started adding things like date and sender but again it was secondary to what mattered most.

Eventually we added controls but we did so in a way that didn't interfere with your ability to read text. It doesn't take much to make these controls available and legible, easy to access. Now you've got to do a little bit more than that so color got added at a later stage just to distinguish controls from content.

Some background colors, a couple of crisp lines but at all times the message stayed present, it stayed front and center, it was the star of the show. Then this is the final design for Mail. As you can see when photos were added they were made to be as large as possible so that you can see as much detail as possible without having to pinch to zoom quite so much.

Now this focus in starting with type first, that really prioritized type for us and I don't think this will come as a big shock to anybody here, Apple has always been deeply committed to making the displayed and the printed word as legible as possible and gorgeous. So that's how dynamic type came about and there's a lot of stuff in dynamic type and I'm sure you guys have already heard quite a bit about it in previous sessions, but I want to focus on two aspects of that, scaling and styles. Let's start with text scaling.

Now a big part of legibility is the size of type. I've worked as an interface designer for 17 years and I've worked on countless projects and probably on every single one type was a big component of it, and you know I or my team would develop designs and we would show them to stakeholders, clients and you'd always get this diversity of reactions.

"I'm getting too old, my eyes ain't what they used to be and this is really hard to read" or you know, "make text smaller, it's truncating too quickly, there's not enough controls, I want to see more stuff because it's more powerful and I can deal with all of that complexity." And it's impossible to satisfy both ends of that spectrum.

How do you do it? You normally had to pick one size of type. I mean maybe you could build some kind of custom thing that allowed text to scale but it was prohibitively expensive engineering-wise, and the results probably would not be very good. Dynamic type is game changing because it allows for that and it's really easy to use.

You have a huge diversity of sizes to choose from and with the accessibility mode you can have, you know, massive text. It's really great. But simply scaling type, this is Helvetica Neue Light, which looks really awesome when it's big but when it's small it doesn't work very well. It's not very legible. The letter forms are very thin. They're very delicate.

So to resolve for that, to solve for that, you can make small type bold but that results in large type which looks heavy and cumbersome so this isn't very good either. So dynamic type dynamically makes text heavier when it's smaller and thinner when it's lighter. Has a range of about two weights.

As a result text has this great continuity. It looks great at every size, but of course we didn't stop there. Text that has more space between characters at small sizes is also more legible so dynamic type does that as well. It dynamically adjusts, very fine tune, sub-pixel level, the space between characters so no matter what size you choose your text is going to look great.

Now let's talk about styles. In printed publishing, typesetting, you know, word processing we have these categories for type like Body, Headline, Caption, and that helps you to establish a clear information hierarchy in your UI. Some text is more important than others so it should be bigger and heavier. Some stuff less so right? You guys are familiar with this stuff. You've seen it a million times and this is a really, really great system so we've made that a fundamental part of dynamic text-- type.

So this is the Inbox and all of this was designed using type styles. The Inbox, the title for the screen is the most important thing here so you know where you are, you know what you're looking at. Secondarily who sent it? At this stage in time that's the most important thing that you need to know so those use the heaviest styles.

It's really clean and these styles allow you to create relationships between different types of text, so you can see the intent of how you're trying to establish that hierarchy. And of course these two features work together. Fine tune adjustments were made to every one of these pieces of text, every one of these combinations of style and size.

So the other thing that I want to point out is there's line height, which is the space between lines of text or leading. And that adjusts too so it's proportional. So the composition of your interface has great integrity no matter what the text scale is. These kinds of details are really important with visual design.

Now typography is really complicated. I've been a designer for a while and I've worked with some amazing designers who can make great icons, have a great sense of composition and color, good interaction designers but I've seen people struggle with typography. It's something that a lot of us as designers aren't trained for.

People go to school for this for a really long time and read books. There's a lot of details here. But luckily we have some really good type designers at Apple who have spent a lot of time perfecting type in iOS 7. So they've taken something that's extremely hard to do well and they made it really easy.

All right, let's move on. So let's talk about some of the differences between iOS 7 and iOS 6 Mail. Let's talk about bars. Not the ones you guys are going to go to tonight but navigation bars. Now obviously this has changed quite a bit. It's no longer this blue plastic material that's convex in shape and meant to portray some sense of dimensionality.

It's now this solid white color and it extends to the top of the screen to work really closely well, work well with the status bar so they work as one unified element and it's still really clean. It's easy to see everything what's inside of it. There's a lot of nice negative space there, white space. And the toolbar was designed to match both of those and as you can see it's blurring the background content. We saw that in the video before so it's not completely occluding, clobbering the content behind.

As a result Mail was more expansive. It goes from edge to edge, side to side, top to bottom and the message, the text and the picture, it comes to the foreground more. It's not stuck behind these two blue bars and that's what matters most so we're deferring to that through the UI.

Now we've removed the borders around buttons or bezels, as I might call them. Why did we do that? Well it's a really simple reason. When you get rid of that ornamentation you have more room to make text larger and more legible. Icons can be bigger and they stand out more, they're not competing with the border themselves for your attention. The Back button, it remains essentially unchanged. It's still pointing to the left side of the screen, it's still the same height, it still has the same label, it's really easy to use. You don't need the border so it's gone.

Now words really matter in interface design. You have to answer the question that your user is asking in the way that they've asked that question. So, for example, this status text, this isn't something that we particularly innovated but we improved upon it, we can make it better. The user is asking how current is this content? Rather than tell them the time of day we tell them how long ago this was updated. So I want you guys to think about that in your apps.

How are you phrasing things? Are things technical? Do people need to parse them and interpret them? Can you make it easier for them to understand? Can you speak with more clarity? We heard about this is Jony's video but it was really important to establish familiarity and that was true for the whole iOS and it's true for every single one of our apps. So let's look at some examples of that.

There's some really new, powerful new features that were added to Mail. You can add smart searches to quickly find mail with attachments or flagged messages, unread messages, you can add links to mailboxes you go to frequently. That's powerful stuff but it was added in a way that was logical, it was an extension of what people already knew before which is to go into this Edit mode, so it's really seamless.

Think about that with your apps. You make an app, you release it, people get to know how to use it, they get accustomed to certain things, location of controls and nomenclature, and then you do an update and you add some new features. You don't want to completely move things around on them. That makes people confused, frustrated, it's not a good thing.

Another great example of that is Action Sheet. So this is visually different. You can see we removed the borders around buttons here too and as a result it's much more compact and you can see more of the message still even when the Action Sheet is up, which is important. It's important to know what you're acting upon.

But a lot has remained the same. The order that these are in, the labels that we used, red still warns you about potentially harmful actions, the safest button is at the bottom and it's separated out from the rest and it's the easiest to access. It's a lot of important stuff that's remained exactly the same so it's instantly familiar.

Let's move onto Calendar. So as you can see, Calendar has changed as well. It's adopted a lot of the same design language as Mail so it's now open and less fragmented, but that's not what I want to talk about. I want to talk about that, that segmented control right there. I'm going to spend a little bit of time with this. In particular, I'm going to start with the Day and Month buttons in the segmented control.

Now as we know there's a hierarchal relationship between days and months. We all have that deeply engrained in us, seconds are in minutes are in hours are in days, I hope I get this right, are in weeks are in months are in years are in decades, centuries. It's really important that the information hierarchy of the data inside of your app is respected by the interface. The interface is a natural fit for that. I'll explain more about what I mean.

So this is the Month view and as you can see if I want to get to today I don't have the button there in the bottom to press, so how do I get there? Well, I simply press the 12. Now before I do that I want to have you guys pay attention to where that red dot goes.

See how it just splits open? That animation reinforces that feeling that you've dove into that day and the week stays around at the top so you can use that as a control, which is really elegant. And we conceptualize hierarchy visually from top to bottom, right, that's the way we typically think about it. Look at the order of things. The Back button shows you the month, the week below that, the current day below that and then the hours below that. It's perfectly complementing our mental model of hierarchy. So it's a really nice design.

Now I also want to talk about animation and moving across days. So this day picker, or this week view, sticks around. So if I want to see what I did on Monday we get that lateral animation. It gives us a really nice intuitive sense of movement through time.

And if we go to Friday, again, it just goes in the opposite direction. So we always have our context. It really feels solid. We're oriented inside the application and that's really important. The opposite of feeling in context is feeling lost. It's really easy to get lost in someone's interface.

So, oops, went too fast. So in iOS 6 and before there was this swipe. You would swipe anywhere on the Calendar, to move - to move to the next day or the previous day and so we extended that to the week. It's really natural. It's really powerful. So now I can also animate to the next week to see what's going on there. So the next thing I want to talk about with animation is that making really good animations is kind of a tricky thing. It's really delicate yet there's a lot of subtlety to it. You're trying to reproduce the feeling of real life.

So the next thing we'll do is go back, step back through the days of this week and I want you to pay attention to how the animation works. You don't just go from point A to point B. You go to point A to point B and you overshoot and come back. Let's look at that.

See that little bounce? That bounce adds a sense of physical realism. We get this kind of intuitive sense of how the mechanics of this work. And that imparts a sense of liveliness. Not through the visual design but through how things respond to our touch interactions. And this kind of stuff you can do with UI dynamics. That physics engine that we've built in, you can apply that to your apps to make them feel more deeply lifelike. It's great stuff.

So now we want to get back to the Month field and how do we do that? Well we press the Back button and as you just saw the animation is the opposite of what we saw before when we went into the Day. And that's really important too with animation.

You want to make sure that your animations are symmetrical. I've seen tons of apps where getting from point A to point B there's one type of animation but coming back again it's a different type of animation or there's no animation at all, and that's deeply bizarre. You want to make sure you have symmetry in animation.

Now the great thing about this new design is that it's scalable. So now we can do something we couldn't do before using that segmented control. We can go back up to the Year. Let's watch as that animation happens because this is really keen. The whole screen shrinks down to where the Month is now.

Your eye follows it so there's no doubt where, how you get back to where you were before. You feel in context the hierarchy is really clear through that zoom out animation. And what's really awesome about this is that that same approach to animation applies to when we exit Calendar and go back to the Home screen. So let's do that now.

The Year shrinks down to the app icon. If you accidentally press the Home button and you want to quickly go back to Calendar, it's really easy to do that because your eye tracked to the app icon. That kind of rigor, systematic application of animation throughout the platform, throughout iOS 7, is really important and I think there's something to take away from that with your apps. You want to be consistent. You want to be rigorous. It leads to a really cohesive user experience and it's really important to have your app stand out from the rest. Let's watch as we dive back in and just see it all come together.

[Silence] It's really fluid, really natural. All right, now Greg talked about clarity. A big part of that is starting with functionality and thinking about how to design your application so it's a pure expression of that functionality. You pick up the phone, you look at the app and you immediately know what this is capable of doing, what this is for and how you're supposed to use it.

This is a theme you're going to see in a lot of these apps. So this was the third button in that segmented control. This is the List view. Now the List view is kind of useful but what was really powerful about the List view is that you could search it. Searching is really useful but you wouldn't know that by the fact that it was stuck in the List view unless you lived in the List view all the time, you would be missing the fact that you could search Calendar.

So to rectify that Search was put at the top right corner so it's immediately available at any point when you're using Calendar. And you can apply that too to your app. I mean what's the really important functionality in your app? Is it placed in the right location? Is it understandable? Can people find it? Now getting rid of clutter is a big part of that. If there's less things competing for someone's attention, they're more likely to see what matters.

Now we can search, we can see the list, it's really straight forward. So while we're talking about Search, let's spend a second with these two icons. I'm going to give you some free advice. Okay, it's going to cost you $1,600 but I think it's totally worth it. These icons work really, really well.

You guys all know, I don't know all of you but I know that you know what these mean, Search and Add something, whatever that is, depends on the context of the application you're in, but it totally works. And it works because you've seen these icons a million times and every time you've pressed one of those icons it responded in a really consistent way. It allowed you to search. It allowed you to add whatever.

Most icons don't fall into that category. Now I've made who knows how many icons in my time. More than I care to even think about. And I think I'm pretty decent at making them but I can't tell you how many times I've made an icon and I thought I did a really good job with it and then I showed it to someone and they didn't know what it meant. It wasn't clear. They guessed but they guessed wrong.

And I suspect that it might be the same with some of your apps. If you have icons in your apps, you'll look at them and you'll know exactly what they do, exactly what they represent, but it's important to show them to someone else who's never used your app before and ask them, tell them to tell you, "What does this mean?" What does this do? You might be really surprised to find the answers you get. It's often more clear to use text. So for example this is the Inbox icon that we had in the previous version of Calendar. Sorry, I see people craning their neck. It's a little tray with an arrow pointing to it.

Now this actually is a good icon. There's nothing wrong with it. It sort of extends the Mail Inbox model, we've always had this tray for that. But we have more space with iOS 7 so it was much more clear to present this command as text. There's no ambiguity there. Sorry, for those that can't see it, it says Inbox in text.

And also just another thing, in a bar like this it's better to just have all text or all icons. If you mix the two it can get kind of confusing. All right, Notes. I want to talk about realism for a second. This was Notes. This was Notes from iOS 6 and actually all the way back to the first phone.

And it had this really clear notepad motif, this theme. It looked like a legal pad of paper. And the team that made this did a really good job of it. It was a great attention to detail, the textures, the torn paper edges, the way the lines there move slightly over to the left to convey the sense of depth, the typeface that's legible, the handwritten font, the icons that were custom designed to match the style of the notepad and the way the page curled as you went from the next to the previous note or went through notes, really sold the idea that this was a legal pad.

But why? Why do this? Well to explain that we have to go back to 2007. We're going to take a trip back in time. It's 2007, there is no iPhone, you don't know what multi-touch means, you've never used a device like this. You haven't heard about swipe, you haven't heard about pinch, you haven't heard about rotate, that's not in your lexicon, it's not in your vocabulary, you don't use those terms.

So when these apps were being designed it was really important that to make it easy, to pick one of these up and be successful with it, accomplish tasks that you want to accomplish, that it should be immediately familiar. So real world objects were used as the basis for the app UI in a lot of the apps that we saw. A legal pad is so ordinary. Everyone knows what it's for. Everyone knows how to use it.

But sometimes when you use a real world metaphor as the basis for your UI it doesn't really scale. So for example, you can't search a notepad. So when you add that it starts to ruin the illusion. Things start to breakdown. So this is the new design for Notes.

It's so much more clear what's important here. It's the content of your notes. That's front and center. It's not about the style of the app. It's not about showing you how great you can represent a legal pad of paper. It's about what matters, the Notes. But you can still see that it's been stylized, it has a theme but that theme serves a very different purpose now. It's meant to impart warmth and personality and character. And great detail went into making this just right. We have this letterpress text effect and the paper texture is really realistic. You can see that when you zoom in.

Now let's talk about clutter. As you'll see there's a difference here between these two versions. There's something missing in iOS 7 and that's the title. Now we've always advised have a title for your screen, have a title for your screen, it's really important and 99 percent of the time it is really important so don't just go remove your titles with reckless abandon.

The title tells you where you are and what you are looking at, but did it matter here? Notes is such a simple application. The name of the application is its title. It tells you what you're going to be looking at here. There's no ambiguity. You don't know. Those aren't emails or something else. These are notes. So there is no point in showing the title so we didn't.

Same is true when you're looking at an individual note. Previously it was just generated by the first line of text so it was always totally redundant. What's the point of doing that? There is none so the title is removed. And one last thing about Notes is color. Now you'll see that the color, you'll see this yellow color in Notes and that's the tint color of the application. That color serves two purposes here. One, it indicates things that are interactive and two it helps to stylize the look and appearance of your app.

Now you'll want to pick a tint color for your iOS 7 app and you'll probably pick something that works well with your brand or your app icon. So if your logo has green color, make a green tint. You know any color is going to work well. You can use purple, red, yellow, orange, green, blue, everything expect for white, I don't know. Let's move onto Safari.

So with Safari I want to talk about iconography. Now as you saw we've redesigned all of our icons. So these five icons they look visually different and that's because they're five of a huge set of icons that were fully redesigned for iOS 7 and they were redesigned so that they matched each other.

They're straightforward, front on, they have thin delicate line features, the curvature of the shapes is really consistent. A lot of care and thought went into making this system hang together. Now I know a lot of you guys don't make a couple dozen apps and whole operating system, but even if in your app you only have two icons you have to make sure that they work well together. I can't tell you how many apps I've seen in my experience where icons just look like they were pulled from different sources or made by different designers.

And the problem with that is it makes your app look cluttered and incoherent and we're really sensitive to that. We have a really high bar for that kind of consistency. We've seen a lot of great software in our time, all of us, and so when we look at every app we measure them against that.

Now it wasn't sufficient to just make icons match each other, they also match the clean, crisp typeface that we use as a system font. That's also really important. We wanted to establish an overall aesthetic for iOS 7 that really hung together well. That also can apply, you know let's say you're making an app about the U.S. Constitution, you don't want to use marker felt with the parchment texture, that would look really corny. You want to pick a font that's appropriate.

But although the style of these icons has changed so much has remained the same. The symbology of the icons is identical, arrows for back and forward, open book for bookmarks, the order that they're in and the location on the screen, they've all stayed the same so your muscle memory still will serve you really well, it's really familiar.

Let's move onto Weather. I want to talk about affordance. Now this is a $5 word and I know a lot of you know what it means but I've heard different definitions and for anyone who doesn't know what it means, let me define it just so we all share a common meaning for this.

So take a door for example. If it has a handle on it, it affords you the ability to pull it. If it doesn't have a handle on it, it affords you the ability to push it. All physical objects have this quality. They afford you a different way of manipulating them, of interacting with them.

We learn this stuff from our earliest ages of childhood development. It's how we interface with the world. So interface, it's really important in your user interface design to think about this stuff and be conscious of these visual cues that we use to understand how to interact with things.

So with that in mind, I want to draw your attention to this. There's this blue rounded rectangle in the background of all this data that we saw in the previous version of Weather and it was there for a very specific purpose. It looks a little bit like a card, like a playing card right, business card. The affordance of a card when it's sitting on a table is something that you can take with one finger and swipe it around, so it's perfect to indicate to people that they can do this.

And when it flips around that feels natural. Cards flip around. It's really straight forward. But there was a third element which none of us were familiar with, which is this page control. We had to learn the meaning of that and it was a really easy thing to learn. I mean it only takes a couple minutes but that didn't exist before.

So with that, do we need the card to tell you you can swipe? In fact, now swiping is so natural for us when we use an iPhone or an iPad that we just try to swipe everything. We try to pinch everything, rotate everything, we play with it. It feels comfortable. We expect these gestures to be there.

We don't need it. We got rid of it. It was an unnecessary ornamentation and as a result there was more space to use for displaying what really matters here, the information about the current weather conditions. It's amazing what taking over that little amount of space accomplishes, 640 pixels to display data.

So you can make text larger and it be more legible. You have room for additional information like the current weather conditions. Now that background does a really good job of telling you that it's snowing or it's raining or it's going to be sunny or whatever, but if there's any ambiguity whatsoever, that text nails it, Takes all the guesswork out of it. So again information is expressed as clearly as possible and often times that's done with text.

As a result Weather is a simple, beautiful app that's really easy to use. Its form serves its function. It's a pure expression of it. This is clarity in design. Let's move onto the Compass. Now I love the Compass app but I want to start with a little bit of discussion about realism. Now this is going to be a little bit redundant but I think this is kind of important.

The previous version of Compass looked like this kind of nice looking thing that you would find on a yacht or something. I don't know, I've never been on one, but it was really carefully crafted and it was really attractive, pretty, but was it necessary to make it look like this so that we would understand how to use a compass? Was it necessary to design it this way so you understood what this was for? No. And did it limit what was possible with Compass? Yes. Let's look at why. So in the center of the dial there's this four points adornment and this capstone and that took up quite a bit of space.

By getting rid of that we could put a level right in the center. That makes Compass more useful. It's a direct tradeoff between the desire to have this ornamentation and the desire to have more functionality. So the decision is really clear. Making it more useful is important. As a result Compass is clean it's elegant. It's the expression of what a Compass should be on this device, not what a compass should be on a boat.

And also when you turn and face a different direction, the letters stay upright so they're more legible. Again, if we had done this with the previous Compass, it would have totally ruined the illusion. Those two things are at odds with each other. A little bit more about color.

So you notice there's this red color in Compass and there's something really special about that red. That red is the same red that we saw in Calendar. It's the same red that you'll see in Stocks. It's the same red that you see in Stop Watch. It's the same red you'll find in a lot of places.

This color pallet was designed to be carefully balanced to be clean and vibrant, beautiful, and our products use these colors with great restraint. You don't want to just arbitrarily pick different application. It makes things start to fragment and fall apart, and that too applies to your app. If you use color, use it with restraint. Carefully select colors that look really good and don't just arbitrarily pick different colors at random. It's going to make your UI feel fragmented, incoherent.

All right, Settings. Now Settings is a great way to see how all of the UIKit controls have changed. So I encourage you to open up Settings and play around and look at some of the different controls that are there, but I want to focus on three of those today.

Switches. Now Switches have changed a lot. Instead of using text to show you that the switch is off or on, you see there's just a nice solid color which is expressing that information. And the reason why that can work is because it's consistent with so many other controls that you'll see in iOS 7. Selection is shown in this consistent way so each control reinforces how selection is indicated.

Date Pickers. Now these have changed quite a bit. No longer do you see all of this glossy, different colors of blue, glass, inter-shadows, highlights and all this stuff, all this ornamentation. What you see instead is some clean text which has been distorted in such a way to suggest that these are printed on wheels and because of that you get a sense that you can just swipe these up and down to change the values.

Kind of relates to this concept of continuation. Our mind has to make sense of why these are being distorted and we make sense of it by thinking about then as being on a wheel. Now we don't need these strong vertical dividing lines to separate the values. A little bit of negative space will do the trick just fine, and which value is selected is really easy to see because it's darker text, it's right in the center, it totally obvious.

You don't need that blue glass to show you what the current value is. And as a result of these changes, it works really well inline. You don't have to go to a separate view to adjust the date or adjust the value of time in this case, and that's important too.

Going to a separate view means you lose your context. Perhaps there's some information in the previous view that you need to make the decision in the view that you've just gone to and now you're going to have to go back and forth and memorize. Displaying something inline allows you to stay in the context you were in before and swiping up and down is really easy.

This is an example of a simple design that has tremendous depth. And finally, Back buttons. Now, to get back previously you would press on the Back button. That makes sense and you still do that but now with the iPhone, I don't have one on me, I can't show you, you swipe in from the left edge and that allows you to get back as well. So let's look at how that works but pay close attention to the Back button.

See how it just slides over and morphs into the title? It's kind of an obvious thing. So intuitive. It clearly shows that parent child relationship and clearly shows you that you're moving from one level in the hierarchy to another. It's really elegant. I like it. All right, Control Center.

Now, you've heard a lot about Control Center, I'm not going to repeat all of that, but I want to talk about layering. We can see here we've brought up Control Center and we're looking at the very top of that and we know that we're at the Home screen because we can still see the app icons behind.

That transparency it provides this sense of depth and the colors coming through just reinforces that sense of depth, and that's important because you bring up the Control Center in all of these different applications. I brought it up here in Mail and I know that I'm still in Mail so when I dismiss the Control Center I'm going to be back in Mail or Compass or Calendar.

My context is maintained. And you guys can apply that to your apps too. You can use layering to bring in things that people need quick access to and then they're going to dismiss and go back to where they were before, but their context is maintained. It's really fluid. It makes things really easy. And it just looks pretty.

All right, last but not least, the Home screen. Now as we saw, the Home screen has remained structurally the same as it was before and why not? It's a really great interface. So all the interactions about deleting app icons and swiping between Home screens and reordering and that, it's all the same, but the icons have changed so we'll spend a little bit of time talking about these icons. Gone are the heaviest of textures, the stripes, the light rays, the glossy overlays and the photo realism.

The Safari icon, for example, has been greatly simplified. Safari is represented by a compass and it doesn't take much to communicate the concept of a compass, to depict that image. All you need is a red and white needle, circular dial and maybe some tick marks. That's it. If you start to add other stuff it becomes busy and heavy. So you don't need the cardinal directions of North, East, South and West. You don't need the globe background. You don't need the glossy overlay. You don't need the specular highlights and the drop shadows and all that stuff.

The result is a cleaner shape that's easier to identify. It's simpler. There's less stuff coming at you. And when you see this along a bunch of other app icons that all have a bunch of ornamentation it becomes hard to find stuff. Now we've been providing this advice for some time now and now we're kind of listening to it. It's really nice to find a clean, simple shape and just one color. Makes app icons stand out really well. And of course the color that's chosen matches the tint color from the applications. You want to have that kind of consistency.

Now, many of you might ask, well, if you're simplifying, getting rid of all this ornamentation, what about the gradients? Why don't you just use a solid color? That's going to be a lot simpler. Well, perhaps, but it turns out it's also really boring. Vibrancy, life, that's important. Those are really important values and these gradients they add that but in a subtle way, but it still makes it so much more visually interesting. Now these icons they're simpler but the approach to designing them wasn't simplistic. So to demonstrate, I'm going to replay that video that we saw at the very beginning.

It's kind of a nice video. All of our app icons were designed using this grid, this template, to give them consistency and composition. So they're connected at this really deep level. This template, it's really balanced. I spent some time recreating this and I got to appreciate the subtlety of it and why all the lines are placed where they are and how the circles work with that and it's sophisticated stuff. It's kind of cool. I was impressed.

But as a result of following this template our icons share things like this blue dot in Stocks aligns perfectly with the corner of that intersection. The circular shape of the Safari icon matches perfectly with the iTunes Store icon and the Photos icon. Alright I'm running low on time so I want to go quickly forward. One thing to point out, you guys should all be aware of this, the app icons are now a little bit bigger, so you don't want your icons to scale, be best to deliver all work at this size, 120 by 120.

So all of these icons they have colors, they have different features, but everything was done with great restraint. If it didn't help to communicate the meaning of the app, what its function was, it was removed. If it didn't help to differentiate one icon from the next and help them stand out, it was removed. And as a result it's a simpler set of icons. It's easier on the eye.

So some final thoughts. The values that were at the heart of iOS 7 were clarity, deference, depth and detail. Let's talk about those because I think if you guys take anything away from today it should be this. It's really powerful stuff. Clarity. We saw what clarity meant in Compass. It meant doing nothing more than showing you information and express functionality. Nothing more and nothing less.

Deference. Deference in Mail meant making sure that text is large, resizable, legible and gorgeous, and photos are large so you can see the detail. Depth. Now I didn't show this before but I think this is really cool so let's look at this now. When you swipe up to see the Camera and you let go, see it bounces a little bit? And it bounces differently based on the height you drop in from. You can even slam it down and it really bounces.

That provides such a sense of physical realism. Makes it so much more lifelike and believable. You guys could do that too. UI Dynamics, with its physics engine, is going to really enable people to do some amazing stuff here. The Home screen and the way we have these distinct, functional planes that are separated from each other and respond to the movement of the device. And detail, detail brings it all together.

So you've seen what it meant for us. You've seen what these new tools allowed Apple to do with apps in iOS 7. How are your apps going to have more depth? How can you use behaviors and motion effects and transitions and layering to improve the experience of your apps? How are you going to be more deferential in your apps? What do users care about most? What's the content that's most important to them? How can you get out of their way? And clarity.

What's the functionality of your app? What's the information you're trying to express? How can you do a better job of that? How can you prioritize things and make things simpler for people? Now, this is a really exciting time to be doing interface design and talking about it and thinking about it, for you developers making apps. There's some amazing new tools in iOS 7 and we've applied those to the apps that ship with the devices. But we're just scratching the surface.

There's 800,000 apps in the App Store, 6 million developers, some of the brightest minds in the world are spending all of their time, you guys, you're spending all of your time using all of that brain power to do some amazing things with your apps. What are you going to do with this stuff? It's really exciting because we're at the precipice of that. We're at the beginning of a whole new phase of software development for mobile devices.

I have no idea what you're going to make but I know it's going to be awesome and I'm really looking forward to when we come back together next year and seeing what was done over the course of that year. It's going to be mind-blowing. So go out there, make some cool stuff and let's regroup in a year. Thank you very much.