Good morning. I'm Randy Ubillos. And I'm Sam Roberts. And this morning we're going to talk to you a bit about iPhoto for iOS. So this should be pretty fun. This is something that we don't get to do all that often, which is to talk about a little bit of the behind the scenes of one of the products that we make.

So this year, as you probably know, we introduced iPhoto for iOS, and it was a complete ground-up, fresh start of iPhoto done for iOS and done to take advantage of multi-touch. And that provided a lot of different considerations than when we do things on the desktop side. So--and it was a lot of opportunity to do things in a very new way, which was pretty exciting.

So we're going to talk about this morning two things. First one, we're going to talk about kind of a few different pieces of the UI. And where we kind of started and where we ended up and how we got there. And the process we use to refine parts of the application and to hopefully give you some insight into that and into ways that you can use that in your own applications.

We do this for every part of every app, down to the smallest dialogue and to the main parts of the application. We do this on a continuous basis, all kind of all over the app. And then the second part, we're actually going to talk about how some of the animations were done, how we put together the layers, how we set the animations up to accomplish some of the things that you see in iPhoto for iOS.

Now, contrast is interesting because contrast is taking the left half, the parts below the middle and the parts above the middle, and bending the middles of those portions either toward the center or away from the center. Anybody who's familiar with doing this in something like Photoshop, you'd use an S-curve and you'd bend the S-curve. And what that has the effect of doing is moving the lower and upper brightnesses of the image either toward the center or away from the center.

But what we found was that all of these things laid out along a single line. We had dark adjustments on the left, bright on the right, brightness in the middle, and then contrast in the two halves between that. So we could lay these out on a single line.

So what the first kind of design revision was to take and still have the histogram over on the side and laid this out. And we said, OK, you can touch this upper part of the histogram and pull it down to do highlight recovery and up to do white point adjust.

You can do shadows and black point by touching the bottom of the histogram. You can touch the center of the histogram and bend it up and down to do a brightness adjust. And you can touch either of these two areas and do a contrast adjust. Now, that reduces the number of points where you're touching.

But it also had the interesting side effect that now we have no affordances on this histogram. And people would look at it and say, oh, that's a nice histogram. And oh, no, you can adjust the brightness here. How do they know that? This went too far in the other direction. We actually didn't have anything that was obvious to adjust.

Now, the other thing here is that we have-- this is a photo editing application. And you'll notice the photo is occupying maybe 70% of the screen. And this is a really important point. With any kind of application, whatever the main focus of the application is, you want that to occupy as much of the screen as possible. It's one thing on a desktop application when you've got expecting someone to be working on a 20 or a 23 or 27-inch monitor where there's plenty of room.

Well, on mobile devices, especially phones, but even the iPad, there's not as much screen real estate as there is on the desktop. So you want to use that very carefully. And you want to give up screen real estate that you could put towards the primary focus of the application. You want to give that up very cautiously, only as needed.

So we looked at this and said, OK, we really-- what would be nice here is if we took this space over on the side and didn't use that for the histogram. If we took the histogram and instead put it down along the bottom. And you can see we have the same histogram, kind of the same areas to touch on there. But what the nice thing is about this is it gives us a nice, big, giant image. And it makes it so you can see your image a lot better.

Now we had this control down here at the bottom, and like the other ones that I've shown, we had a histogram in it. And so we kind of stepped back and said, "Okay, why do we need this histogram?" A lot of photography applications have a histogram in them, and, you know, why exactly do we need it? What's the important parts here? Well, a histogram shows you some interesting things about an image. Like I said before, this tells me that this image has some brighter blue parts, and the red and green parts are not quite as bright, which is interesting, but it doesn't really help you in terms of adjusting or fixing the image.

The part that's actually interesting for fixing or adjusting the image is actually just the end points of the histogram, where those end points are. What that tells you, on the left side, that tells me how close to black are the darkest parts of my image. And on the right, how close to pure white are the brightest parts of my image. This is actually what's useful in terms of image editing on an image.

So given that, we said, "Well, we don't really need to show the histogram at all. We just need to show the ends of what would be the histogram." So taking all that together, what we did is we combined everything into a single control. We've got a single control that has marks on it for 0% and 100%.

On the left side -- or sorry, in the center, we put a brightness control. On the left side, we put a single control. When I drag this control to the left, I'm doing black level adjust. When I drag to the right, I'm doing shadow recovery. And the initial position of that knob is where the left end of the histogram is.

We do the same thing on the right side. So highlight recovery is dragging left. White level adjust is dragging right. And the initial position of that knob shows me the right end of the histogram. So we've been able to combine those six -- well, brightness in the center, but the six controls into the two on the two ends and put them in a much more usable configuration.

Then we also took the contrast knobs and put those in kind of the corresponding areas to where they correspond to in the image. And then we also -- the one thing that I talked about initially that we haven't shown so far is clipping. How do you show when an adjustment the user is going to make is clipping the image, is cutting off some of the darks or cutting off some of the lights? We actually do that by -- when the knob is dragged into that range, since the knob represents the edge of the brights and darks of the image, when we drag into the end zones, they glow red as you drag into them.

We do that all on a single control. And so what we're able to do is put this all down into the lower toolbar and have a single control that gives all these different operations. Let me just give you a quick demo of how that actually works in the application.

We'll switch to an image here. So we have this image, and if I bring up my exposure control, you can see that the ends of the control are not all the way at the 0 and 100% marks, because this image does not-- actually has a reduced range. The blackest parts of the image are still kind of gray, and the brightest part of the image is not pure white.

But I can grab these controls. If I grab the control here and move it up or down, when I move it down, I'm adjusting the black level down. As I move into the end area, you'll see that it starts to glow red, because it's not necessarily incorrect for someone to clip off some of the blacks. They may want to do that. You just want to warn them that this is an area where they have to make a creative decision. And when I grab the right side, I can bring that up to white.

And so you can actually see the difference between the original and the changed one as I've made those adjustments. Now, let me come down to another image here, which is really dark. And you'll notice on this image, the darks go all the way to black, all the way to the left, so the knob starts out all the way there at the left.

And the brightest parts of the image, the lights and such, actually go all the way to 100%. So here, if I grab the left-hand knob and I drag it to the right, what I'm actually doing is shadow correction. I'm not just bringing up the black level, I'm doing a shadow correction.

The nice thing here is that from the user's perspective, they just get to think about the dark parts of the image should be darker or lighter. And we do the right math underneath the covers to achieve that. We don't force the user to make the distinction, oh, in this case, I need to use this slider.

In this other case, I need to use this other slider. We merge that all together into a single control and make it really easy for the user to do that. So next thing I want to talk about is brushes, because we've got some nice brushes in the application.

So initial sort of stab at this was something that would look more like what a sort of desktop-like experience might be. We started out with, well, you can add these different bricks for the different operations. You can add a brick for lighten or darken. But that makes the user have to make those decisions as they go along and then actually add those bricks in as they work. And it complicates the UI quite a bit. So second stab was to just take the brushes that the user would most likely want to use and just make those available all the time so that they can just touch on one of the brushes and start using it.

Well, that's an improvement, but once again, we have the issue here that the image is not as big as it could be. So if we take those controls and move them down along the bottom, that's better. But now we're in a situation where we have these icons down here, and we're trying to represent in these icons that these are painting operations, and we're trying to make up icons for things like lighten and darken and repair, and it can be hard to get those to stand out.

So the thing that we came to was, as you may have seen, we've got these nice brushes that pop up. And these are very familiar looking to a user. One of the nice things here is that we decided that it was okay while you're selecting a brush to break the boundary of that lower toolbar.

As the brushes come up, you can see that the lower toolbar is the boundary of the lower toolbar. And you can see that the lower toolbar is the boundary of the lower toolbar. And you can see that the lower toolbar is the boundary of the lower toolbar. And you can see that the lower toolbar is the boundary of the lower toolbar. And you can see that the lower toolbar is the boundary of the lower toolbar.

The brushes go up above the toolbar. We dim out the rest of the interface to make the brushes pop. The user makes a selection, and then the brushes tuck down into the UI, down into the bottom bar there. Another thing that we did with the brushes was multi-touch is really powerful for painting.

It feels really good to use your finger as you're painting on the image. But in a lot of painting applications, there are a bunch of controls for things like like the opacity of the brush, the size of the brush, the softness of the brush, and that just complicates the experience.

So we step back and said, how can we make that easier? Well, first off, if we say that the size of your finger is constant, then we can just say when you zoom in, then your finger stays the same on screen, but now occupies a smaller portion of the zoomed image. So brush size is simply done by zooming in.

And in fact, one of the lesser known features of the app is that if you pinch together to zoom all the way back out to seeing the entire image, if you pinch beyond that where the image kind of shrinks down and hold it there for half a second, the image will actually snap a little bit smaller. So it actually lets you make the image even smaller so you can make your finger work even on an even larger area. Subtitles by the Amara.org community So that was our way of allowing the brush to have a lot of different range to it.

The other thing we did is we set the brushes up to operate fairly lightly, and they overlap each other. The brushes keep, as you rub your finger back and forth, they keep adding to it. So instead of having a lot of paint applications where the brush is very strong, you make a swipe and then you end up having to erase almost immediately and then turn the brush down. We set them to work very softly. So the idea is that when you're going to change somebody's face, you just rub over it a few times.

It feels very natural. You rarely have to go back and erase. The other thing you run into with a painting application is that if you're trying to get something right along an edge, the problem you run into is that your finger is over the top of the edge that you're trying to get right up against.

And we looked at different solutions to that, like putting a circle around where your finger was so you could kind of see it. But that all felt like we were just sort of band-aiding the problem. Subtitles by the Amara.org community And what we ended up solving was down in the lower right we have this detect edges button.

We wrote some code that actually when you turn that on, wherever you touch, we pick up the color and lightness of the spot you touch on and we restrict painting from that point, for that stroke, to only affect things within a certain range of that lightness and color. So what it means is you can touch down on something. It's sort of like automatic color within the lines.

And you can just run your finger back and forth very quickly and it stays just fine. And then you can adjust on that color. So we let the application figure out where the edges are instead of forcing the user to do that. So that was some of the solutions we used for the paint function. So next up I'm going to turn it over to Sam to talk about color.

Good morning. Thanks for waking up early with us to talk about iPhoto for iOS. Color is a really important part about manipulating an image, and there's a lot of ways to do it. And some of the lessons that we learned when we created this feature for iPhoto for iOS, I think some of these lessons might be able to apply to some of the amazing apps that you guys are working on. So I'd like to share some of that with you.

Like I said, there's a ton of ways to adjust color. If you use Photoshop or any sort of professional image editing application, you know there are loads and loads of tools. And presenting our user, especially the iPhoto user, with a ton of tools to adjust color, that was the wrong approach. Our users, we knew they could get quickly sort of overwhelmed with a whole bunch of controls.

So our first challenge with color was to step back and say, "Okay, well, what are the most common things, what are the most common color needs that our users have?" And we narrowed it down to more or less these four controls. The first one is overall color, saturation, how much color do we want? And then we sort of found three other areas that were really common. A lot of people would say, "Well, I want the blue sky of my image to be a little bit different." Or, "You know, the skin tone of this image just looks a little off.

I want to be able to adjust that." And then, of course, also the greenery. So that was the first step was to say, "Yes, we have a ton of controls, but do we really need them all? A ton of functions? No, let's find the functions that work for the 80% case." This is something that we say a lot to ourselves. What's the 80% case? Let's solve for that. Let's not try and figure out one thing that's going to work for everyone.

So this was our first stab at color. And it's OK. The controls are few, but the controls are actually a little bit technical. As you can see, for each one of these areas, you sort of had to move on two axes to sort of adjust the luminance and then the amount of that color space.

That was cool, but that was a little bit complicated for a user. So our next step was to say, OK, let's take those four good ideas and let's simplify those controls. Let's do some smart math behind the scenes. I'm a designer, so I let the geniuses do the math, and I just designed the controls. And they figured out a way to say, OK, well, less saturation means this, more saturation means that. So we got it into sort of one, you could say, axis for each one of these controls.

So this is significantly simpler, right? If I want more color, I simply drag left or right on the saturation control over there, and I can adjust the color. So now we're starting to get somewhere. Now we have sort of an easier experience, which is what our customers want. But as Randy said before, we still have a problem with this design.

This is a photo editing app. The user started this app because they want to play with their photos. But we're giving them all of this Chrome, all of this UI, that's sort of getting in the way. I really want to drive this home. You guys are making great apps. And the main purpose of your app should always dominate the screen. Your users didn't buy your app for the Chrome, for the controls that you created. They bought it to be able to do what they want to do with their content.

This was really central. So as soon as we sort of realized that, we got that image much bigger on the screen. Gosh, this felt so much better. We put those same controls down along the bottom. Now we're really talking. I've got this big image, simple controls. Here we are.

But-- The benefit of continuing to push our UI brought us to a place that we wouldn't have seen otherwise. Something that we constantly say is simplify, refine, repeat. Simplify, refine, repeat. That's really important. If we hadn't have kept doing that, we wouldn't have gotten to this. Because we realized something. As soon as we had that big image-- I was using the app one day. And they said, you know, I just want to edit this part of my image.

And I was pointing to that part of the image and I said, "Wait a minute, we have a touchscreen interface here. We have an amazing piece of hardware. We've got a nice big photo. What if I could just point to the thing that I want to edit and I could edit it right on top of the image?" If we had a smaller image, that wouldn't be realistic. If we had complicated controls, no one would ever try to do that.

But now, you just simply tap on a part of the image, drag, and you get to adjust the image. It's really simple. And as you do that, you can see at the bottom there, the controls of sort of the area that you're tapping appear. In other words, they show you sort of an educational aspect of the UI. It says, OK, if you drag up and down, you can adjust the saturation.

And if you drag left or right, you can adjust the blue skies. And we repeated that, of course, for each control. So if I tapped on some of those green areas, you would get the green control at the bottom highlighted. And then you could just drag left and right. Put some controls on top of your content. That's where people want to go.

That's where you should put some of your controls. And speaking of repeating, we were able to bring this idea back to the exposure controls that Randy was showing you earlier. So you could simply tap on a dark area of the screen. Or a dark area of the image. And drag up to adjust your shadows.

This is where design that's simplified, refined, repeat, keep doing that, can get you to a space where the UI almost disappears. And there's very little space between the user and the content, the function that they want to do. So I want to show you how this color control works. So can we get the iPad up? Great. So let's go over, let's clear out the controls.

Let's go to my color controls. And here we have an image. You can see the controls have come up on the bottom there. And I could drag these down at the bottom very easily and adjust the amount of color in my image. But the cool part is I can say, you know what, I want that blue sky to be better.

So I can just tap on the blue sky, my control comes up. Now there's a little bit of subtlety that I want you to notice here. You can see there's two axes. But we didn't want to complicate things by having both axes available all the time. So once the user starts to move in a direction, you're going to see the other arrow sort of disappear and the arrow that I chose sort of move with me and then fade away. So, for example, I'm going to drag to the left and you're going to see the saturation arrows sort of fade away as I do that.

And now I'm adjusting the blue of that image so I can get a nice, deep, beautiful color. This is the power of putting the control right where the user is. So I can see that the user expects it right on top of the photo. So let's try it again. This time we're going to do some exposure work. Let's see, where's that good lighthouse photo? Let's play with this one.

In fact, let's reset the exposure on this one. And that bottom area you can see is a bit dark. So as you would expect, I can simply tap right on that area and drag up to fix the shadows. It's really simple. It's really simple and it almost feels magical to the user. And that's what we want. We want an easy to use, fun interface. Just tap on your image. It's really powerful. So that's the color controls.

So let's talk about effects. I love effects. I take mediocre photos, and those photos look awesome with some really great effects. Let's be honest, we all do that. So effects are really important. There's a couple of other people here who take mediocre photos. Great. So the first thing that we started with with effects was a bunch of really beautiful-looking effects, right? So some really nice vintage looks, some black and white, some really creative sort of manipulations with the color. Really gorgeous, gorgeous effects.

And we set ourselves up with three challenges. This is something that you guys should be doing with any piece of UI that you're presented with. Figure out, all right, how can I make this great? What are the challenges? What can I set as the goal as I create this UI? Okay, so the first challenge-- well, the first challenge was actually, you know, pretty simple. We wanted to say, okay, how can we get all of these amazing options available to the user? So I'm gonna give you guys a quiz. And you're all smart. You're all very smart. I'm willing to bet you're gonna get this right.

Let's say I have 24 amazing effects, all right? In fact, here they are. There's a grid. You can see there's six of them here, and you can see just the bottom of the next seven, eight, and nine effects. Here's my question. Which six effects are gonna be the most popular? Yeah, these six.

Presenting our effects as a grid wouldn't have helped the user. So that was one of our first sort of big challenges, was to figure out how do we get all these effects to the user in a way that they're going to be able to see all of them. We couldn't expect that they would explore around and see, oh, okay, well, I found the 45th effect and I love it. We couldn't assume that.

The next one, and actually, this was the hardest one, and I really encourage you to do this as you're creating your apps and creating a piece of UI for something, for a function that might be complicated. And this one I can blame on Randy, actually. Randy said, "Okay, Sam, you can design this UI, but here's the requirement. I want the user to be able to choose an effect and refine that effect in 10 seconds."

But it would have also given us complexity. Power and complexity, that's not what we're after. What we want is simplicity and power.

So why is this complicated? Well, it's three sliders. But not only that, the user would be required to understand that you had to balance these three sliders to always equal 100. So it's not like they could just adjust one slider. They'd have to be constantly adjusting all three to get the look that they want.

And guess what? There's a ton-- you guys are math geniuses-- there's a ton of options out there. And it would take forever for them to see all of the different possibilities. So we said, OK, how do we solve this problem? Well, with those three channels, we sort of plotted the possibilities out on a graph.

We said, "Okay, well, here's a whole bunch of really nice looks. We'll plot them on a graph, draw a line between them, almost like a timeline." And that actually turns out a lot of really, really great options. Okay, so just sort of left and right, you can see the different options.

We take that, actually make that the UI. So, in fact, one swipe from left to right brings you through all of the black and white mixing possibilities. So what did we do? We took three controls that you had to understand the balance of, put them all into one control, and allowed the user in just a few seconds to swipe back and forth and see over a hundred different mixes of this. In fact, we called this the happy accident UI. I always go through this and find one that I never would have thought of, and I love the look of it.

So this was taking a complex idea and really, really simplifying it down into one easy to use control. And this control worked elsewhere. So for example, we have another one called Aura. Aura's a really neat effect. It allows you to sort of highlight the strong colors in your photo or sort of demote, you could say, those same colors in your photo.

And so again, we took that same sort of plot the monograph idea, creates a bunch of different images, and then of course, you can simply swipe in between them and get over a hundred different permutations, a hundred different options of that same effect. One control. One control. Hundreds of possibilities that you can see in just a few seconds.

This is the kind of UI that people love. It's so easy to get a great result. This is what every piece of UI that you guys are working on, every single piece, strive to make it as simple as possible. I promise you, your users will love you for it.

Now, I know what you're thinking. There's a few effects, well, you can't really fade between, for example, vintage effects. And you're right. We don't fade through vintage effects, but the good news is, the same piece of UI can be used in sort of the same way. For example, we have four options here. We just call this sort of a discrete version of the effects card, and you can swipe left or right. And in this case, you're selecting a specific effect.

OK, so we figured out how to refine the image. So that was the first challenge. Now, if you remember, one of the other challenges was, OK, well, how do we present all of these options so we don't ask the user to scroll through a bit? Or through a big, gigantic grid, or through a list that we can't assume that they're going to do? Well, the answer is actually already in front of us. As you saw at the top of the screen right now, in fact, there's a card that came across.

We used that card idea and created sort of like a swatch book. So when the user goes into effects, they're presented with a swatch book of effects. And you can see little previews in there, which is great, but you can also see sort of the category name. And even better, that category, the card that you click on, folds back down. And to the bottom of the UI, and that becomes the UI that you use.

So now we've solved the second problem. The first one was how to refine. The second one was, OK, how do we get all these options in front of the user as quickly as possible? All right, so the third one was a timing issue. So let's do a demo and let's see how easy we have it.

So let's find a nice image. Let's go with this one. And I'm going to clear the effects out. Okay, so let's bring up the effects. You can see that this animates up. And by the way, stay tuned because Randy's going to come back up and talk to you about some of the fundamentals of animation and how he got some of these really nice little UI animations to work. Really, really useful. So I presented with my different options.

I think I'll choose black and white for this one. And watch this. In one swipe, I can see all the different versions of black and white. In fact, here's the one right here. I love it. I can even tap and get a nice vignette. I can even do some on-screen controls, just pinch on top of the image to get a stronger vignette. And now I've convinced myself that I'm Ansel Adams.

Now that was less than 10 seconds, right? This is why you guys should keep looking at your controls. The controls that you think are good, keep going until they're great. I promise you. Your users are going to thank you for it. All right, let's try one more photo. How about this one? This is a fun one with the elephant. I'm going to choose a different effect.

And by the way, I can just open up the cards by just tapping on the little hinge here. Again, Randy's going to explain that. We'll choose the aura effect, and I can drag left and right. I can bring it to the left to sort of mute some of those colors.

Or if I bring it to the right, something kind of neat happens. It just highlights those strong colors. So by the end of it, I'm only showing you those beautiful silk fabrics on top of the elephant. So that's effects. We think effects turned out pretty cool. All right, so let's go back. Thank you. Let's go back to the slides.

And let's talk about moving from the iPad to the iPhone. You guys are eagle-eyed, and you notice that every comp that we've shown you has been for the iPad. And indeed, when we started with this project, we wanted it on the iPad with a big, amazing screen. But then there was the point where we said to ourselves, "Guess what? I take a lot of pictures with my iPhone.

I think we need to have this app on the iPhone." Now, different apps should be thinking about this a little bit differently when you go from one device to another. Not every app should do the same thing. So I want to talk to you about why we made the decision that we made.

We could have gone down the path of saying, this is a great app. We want it on the iPhone, but there's just too much stuff. Let's make it a simple app. Maybe we'll change the UI to make it really, really, really simple. And, you know, users will just have to go find an iPad if they want some of the cooler stuff. Like, nah, we won't do brushing or any of those effects.

You know, the truth was is that iPhone is one of the most popular cameras on the planet. There's a lot of people who want to edit their photos right on that same device. So the option of saying, let's do a dumbed-down version for the iPhone, it just wasn't realistic. So we had sort of a challenge in front of us.

How can we get all of this power, all of this power, down on this tiny little screen that can fit in your pocket? Well, if you've been listening to me, you've been hearing me say, "Simplify, refine, repeat." You'll probably hear it a few more times, just so you know.

That process has many benefits, and one of them is that when you move from one device and you need to bring your application down to a different device, you're going to have a much easier time if you've simplified those controls. If you have complex controls that you can just barely fit on the iPad, you're going to have a problem when you get to a smaller screen. Since we had gone through this process of getting these controls simple, we had actually a surprisingly easy time getting it to work on the iPhone, and it's really powerful. Every single feature that's on the iPad is on the iPhone.

So, how did we do it? Well, there were actually a couple areas where we had to rethink things. So, for example, you've seen the tool controls on the iPad at the bottom. You have this little tool bar. You can see there on the left, those are your, you know, sort of tools that you can select. And then when you select one, those tools sort of flip over on the right.

Well, on the iPhone, we don't have enough room for that, so we had to think of something different. So there's those tools for the iPad. On the iPhone, what we did was we sort of had a collapsible tool bar, you could say. So you can see the little control on the left there, the little sort of tool box icon. You tap the tool box and the controls come out.

You select a control and they go away. So this was sort of a simple--we realized that the answer wasn't particularly complicated. We just needed to make sure that we were doing the right thing. Cramming a whole bunch of controls on the iPhone would have been the wrong thing.

Some of the other areas where we had a little bit of a challenge was portrait. So on the iPad, we have controls that work in both landscape and portrait. We knew that we needed to have the same thing on the iPhone. On the iPad and portrait, we still have a pretty good amount of space. So for example, these really great exposure controls that Randy showed you, they can fit on the iPad in portrait mode just fine.

But on the iPhone, there just wasn't room for them. We didn't want our users to have to, you know, use tiny little fingers to get things to work. So the solution actually wasn't very complicated. We split the controls up. So for example, there's three at the bottom that you can see: highlights and shadows, then the brightness, and then the contrast controls. You tap one of those, an overlay comes up above it, and you get that very control.

We did the same thing on the color controls on the iPad. We have those great sliders at the bottom. We just split them up onto the phone. The reason I want to show you guys this stuff is because I don't want you to force your users to relearn a UI when they go to a new device. If they go from an iPad to an iPhone, don't ask them to relearn something. Use the same ideas. If the exact same control won't fit, use something that they're going to know how to use right away.

Now the final one that I want to leave you with was brushes. So brushes, we love the brushing feature and we absolutely had to have it on the iPhone. And we could fit those brushes really beautifully in landscape on the iPhone, but in portrait was really the problem.

So being the designer that I am, I went through a whole bunch of options. I had them sort of fanned out in different ways. I had them, a kind of strange rotating option. I had them angled at a different way. I had all these options and I walked into Randy's office and I said, "Okay, well I have a couple solutions for you for this problem of showing brushes when you're in portrait.

I want to show them to you." And Randy looked at me and said, "Oh, I already solved that." You solved it? Can I go home early? What does this mean? What do you mean you solved it? He said, "I just put him on the left."

So I want to talk a little bit about animation design.

And we're just going to start out with the toolbar and actually jump right back to a demo. So what I'm going to do here, switch back to the demo machine, is I happen to have a special version here that has a magic WWDC demo switch. And you guys don't have that? So what I'm going to show-- now, here's a feature some of you may or may not know about. I'm going to double tap here with three fingers.

And I can then zoom in and pan around in the UI. This is turned on through the accessibility settings on the phone and the pad. And it can be really useful for zooming in on your UI and taking a look at different parts of it. Another thing-- I don't know if you can see this or not. This is something-- I bought a couple of dozen of these and passed them out to all the engineers and QA on the team.

This is a little 10x magnification loop. You can pick these up online for a couple of bucks. Passed them out to everybody. With the high resolution screens that we're dealing with on iOS and now on the Mac, these are invaluable. Put them up on the screen, peer through it, and you can see exactly right down to those tiny little pixels what's going on.

This is another way to do it as well. So let's choose a different image here. So let me just show you on the toolbar here. So toolbar kind of rotates around. We actually went to a bit of work. What I've done here with that magic switch, this slows down all the animations by a factor of 10. So when I go ahead and tap and show the tool here, you'll notice the tool rotates.

And it doesn't just rotate. It actually rotates and then goes a little past and kind of ratchets into view. So those little details, when it's at normal size, you don't really notice it, but it definitely adds to sort of the realism of this sort of 3D look that we were going for in the application.

Now let me go ahead and give you a demo of the brushes. And another feature of this special version that I have here is that what it does is it's actually going to move the brushes up.

and so you can kind of see how they all go together. Now, one of the things we've turned on here, one of the options on a CA layer is a border color and a border width. And so you can enable that and it can be very helpful to allow you to see where your layers are on screen, even if they have large transparent portions of them.

You can see how far they extend and it can be a real time saver and problem solver to work with. But in this case, it actually lets you see what's going on there. Now, if I touch on one of the brushes, there's several things that happen. There's the center point down at the bottom, which we actually just animate the center point from the original position from the nib up to a central point. We change the angle of each brush.

And then on the text, you'll notice the text stays perfectly horizontal as the animation is happening. So we're just applying the opposite angle to the text as we perform the animation. So when I tap on one of the brushes here, the text stays together, the anchor points just move out.

And then we actually change the view ordering, or we change the clip to bounds property on the toolbar and the ordering of that view. So when we tap on one of these to start the animation, we bring it to the front and then animate the center points together as it comes up. Like that.

Now, one of the things that you'll notice, when I tap on one of these brushes, there's actually a subtlety to the animation. So I'm going to tap on the lighten brush. And as I do that, the one I've tapped on is actually going to get a little bit bigger. It's going to pop as it's coming down. And the shadow is actually moving accordingly.

So as I touch that, you'll notice that lighten brush actually extends outside the boundary of the other layer there. So there's actually this extra animation that's done when you touch on a brush to confirm that that's the one that you touched on. But there's a complexity there in that we've got two different animations going. And one animation is the one that's changing with the angle. And the other one is that pop effect that happens. We can go back to the slides.

So there's actually a really easy way to do that. You let Core Animation do the work for you. So if we had this one view with the animations on it, if I tried to put two different sets of animations on that view with potentially different durations, different offsets in time, that can be really complicated to work that all out.

The easy thing to do is to simply insert another view. Now, this is a view just for geometry purposes. There's no drawing that actually takes place in this. But what it means is I can put one set of animations on one view, the other set of animations on the other view, completely different durations, different offsets in time, and just let it run. And Core Animation will do all the work of combining those things together for you. And you can extend this to as many views as you want to do compound animations. So let's go back and to the demo machine. I want to show you one more thing here.

So I'm going to go ahead and switch over to effects. Now, so on the effects, we've got something similar in here, where the effects are actually going to come up to a different position than normally that you'd have in the UI. And we have the same red outlines around the views. One of the nice things about Core Animation is that it makes it really easy to take real world objects and animate them. We've got these cards, and we set them up.

We just set the anchor point at the point where that pin is. And then when we set an angle, the card rotates right around the pin. So if you lay out the animations such that they're similar to the real world object in the way it moves, it makes it much easier to actually perform the animations.

Now, we've got a couple of things here. If I select one of the cards, like the first card, the artistic card, you notice all the other ones fall down. And this is a detail that you don't normally see in the UI. The resting position of all those cards is not all straight down. It's slightly off.

They're offset from each other. And what that does is it gives you that nice little kind of fanned effect at the tail ends of the cards right around the pin. And you get a very realistic sort of effect by just being careful about where the resting position is on the cards.

Now, if I bring the cards up, one other subtlety that I want to show you here is that when I choose a particular card, when a card deck folds like this, it folds in two parts. So when I touch on a card, you've got the cards collapsing together and then the other cards moving apart. So we just had to split the animation up into two pieces.

One piece animates all the cards that are going together in the stack, and the other one animates all the ones that are going down below. And we just set the timings on those so that they look like they're moving at about the same velocity. So it looks like the user is just sort of fanning a card stack all at once.

So that's some of the animation that we did. One last thing that I want to talk about is some stuff that we did for the UI layout. One of the things on the UI layout is that we said that it's hard to know exactly how your user may want to work with your application.

Some users want to see this grid on the side. Some users don't. They want to have the image as large as possible. Some users may want to dedicate more space to the grid and some less. So we allow you to grab the top of the column and change the number of columns. This is really well received by users.

But one of the things about making a choice of putting something like the column on the left, the grid column on the left, is that's sort of a bias towards left-handed or right-handed people. And so some people are going to find it very convenient and some people won't.

And then there are just people who like to have the grid on one side or the other. So we said, okay, fine, we'll just make it so you can grab the column and move it and swing it to the other side. And so the user has complete control over how the interface lays out.

Now, there are a couple of details here. When we swapped the user interface, we found that the grid button was the only one that was in the grid. And so we wanted to make sure that the grid button was the only one that was in the grid. And so we did that.

And then we swapped the user interface. You'll notice that up in the top toolbar, we have some controls. We have a grid button that we want it to be next to the grid. So when you swap the interface to the other side, those two groups flip around and the grid button stays near the grid. And the same thing happens down at the bottom.

The tools stay Now, another detail here is if I switch over to Portrait, one of the things you'll notice here in Portrait, we set it up so that you can adjust the size of the grid down here. And when you've got a grid that you can see several rows, it makes sense for us to do the scrolling up and down.

But we wanted this to come down and get to a single row. Well, when you get to a single row, scrolling up and down doesn't work very well, because you'd only be seeing a portion of two rows there. So as soon as we get to a single row, we start to go left and right.

But as soon as you pull this up-- oops-- as soon as we pull this up, then we go up and down. So it's making sure to take care of all those little details of how the interface is going to be used by all your different users is really important.

So to wrap up, Sam talked before about simplify, refine, repeat. And this is something that we can't stress enough. You need to keep doing this over and over, and then do it some more. Another important thing is to come back to things with fresh eyes. We do that all the time.

You get really focused on a particular problem. You're doing this refinement. Put it aside. Work on another piece. Then work on another. But make sure to go back to the first one, because you've learned things along the way that you now want to apply back to that first thing.

Another big one, and this is a term that comes out of sort of the finance world, is sunk cost. The amount of effort that you've put into something in the past is not the reason for it to go into your application. The fact that you just spent two weeks coding something, that's not the reason for that to make it into the application. The reason for it to go into the application is because it's the right thing for the application.

It's a very easy trap to fall into. I'm sure we've all done it. You just spent two weeks writing something really cool. The back of your head, you know, maybe it's not exactly the right thing. There's a little bit better idea someplace. But you just spent two weeks on this. Well, your competitors aren't going to care about the two weeks that you spent on that. You shouldn't care about those two weeks. You should do what's right for your application.

And that leads to, you should be throwing away good work. Because this means what's left is great work. And great work is what you want to strive for. And what that leads us to is, in your application, good enough isn't. Great is what you should be shooting for. Thank you very much.