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 up to accomplish some of the things that you see in iPhoto for iOS.

So we'll start out on the UI progression side. So iPhoto for iOS is a photo app and a number of different things you want to do for photography. And one of the big ones was exposure. So exposure is comprised of a number of different elements. So we took a look at it and said, OK, what's important when you're working on the exposure of a photo? So you've got brightness and contrast.

You've got black point shadow recovery, white point highlight recovery, generally would have a histogram, and then you want to give someone an indication of when the image is being clipped. So we said, okay, what's the simple way to do this? Well, the simple way to do this is lots of sliders. And lots of sliders, histogram up at the top, and we've seen some applications that have taken approaches similar to this. This is not necessarily a great thing in a multi-touch sort of world. And a lot of times it's not really what the user is interested in. The user doesn't really care about what brightness or contrast is. They just know they want the dark part of the image to be lighter or the light part to be darker. And they want you to figure out -- want us to figure out how to make that happen. So we looked at different things we could do. One thing you can do is just go with kind of a brute force graphical approach to this. And that would be something like this. Take and put a histogram up. We kind of turn it on the side for space. And then looked at where to put different controls. So control for adjusting the white level of the image, one for black level, one for brightness, contrast. We thought, okay, we need a separate control for shadow recovery or for highlight recovery, and then one for shadow recovery. But this is an awful lot of controls and it's taking up an awful lot of screen real estate. So the process we went through was to look at how do we simplify this? Are any of these controls redundant? Can we get rid of these controls? Do we need every single one of these controls?

So for the process of doing that, we took a look and we started out -- so here we've got histogram. And if you're not familiar with the histogram, histogram is a way of displaying the brightness levels of the different channels of an image. So on the left-hand side, you've got the dark parts of the image. On the right-hand side, you've got the brighter parts of the image. And it shows the distribution. So in this image, there's a lot of bright blue stuff. And there's some kind of medium bright red and green stuff. That's kind of what a histogram represents. So one of the things we looked at is if the histogram -- if you have a histogram that's pushed against the left edge, that means that your image has a lot of very dark material in it. And if you've got a lot of really dark material, the thing you want to do to that dark part of the image is to adjust the shadows. And adjusting the shadows has the effect of bringing up the dark parts of the image. Now, if the histogram starts out above 0, then what you want to do is you want to adjust the black level. and you want to adjust that to the left. So we realized these two operations both operate on the dark parts of the image, but they operate in opposite directions. On a given image, you either want to do shadow recovery or you want to do black level adjustment. You never want to do both. We had the same thing at the other side of the histogram. So the other side of the histogram, if the histogram is pushed all the way against the side, That means that you've got an image that's very, very bright, and the only thing you'd want to do with the bright parts is recover some highlights to bring those down. And if the histogram doesn't go all the way to the side, then it means that the image was not fully exposed. And so the one thing you want to do there is you want to do white level adjustment, and you want to move it that way. Once again, we've got these two adjustments that are operating in opposite directions at that side of the histogram. So we can potentially combine those pairs of controls together into a single control. Because from the user's perspective, they don't really care what we're doing under the covers.

They just care, I want to make the dark part lighter or darker, or I want to make the bright part lighter or darker. And we can really simplify that. We also saw that the middle part of the histogram is where brightness occurs. You change brightness by bending the middle of the histogram to higher or lower. that changes the brightness. In this context, for photography, when we talk about brightness, we're actually talking about a gamma adjustment. We're actually not talking about exposure. Exposure would be multiplying the levels of the image.

When you do what's called a brightness adjustment, you're actually bending the middle portion of the histogram up or down. It's actually a gamma adjustment, but it's always referred to as brightness. But from the user's perspective, what they care about is the mid-range. Are they moving it up or down?

Now, contrast is interesting because contrast is taking the left half, the parts below the middle and the parts above the middle and bending those, 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 the first kind of design revision was to take and-- had the histogram over on the side and laid this out and we said, okay, 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, you know, 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, 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 makes it, you know, so you can see your image a lot better.

But 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, OK, why do we need this histogram? A lot of photography applications have a histogram in them. And 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 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 -- these 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 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 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's 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. So we can 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 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 OK while you're selecting a brush to break the boundary of that lower toolbar. As the brushes come up, the brushes go up above the toolbar. We dim out the rest of the interface to make the brushes pop. 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 the opacity of the brush, the size of the brush, the softness of the brush. And that just complicates the experience.

So we stepped 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 on an even larger area. 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. And the way we ended up solving it, 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 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 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 gonna 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 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. 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 touch screen 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 the area that you're tapping appear. In other words, they show you an educational aspect of the UI that 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 sky.

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. And 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 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. 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? OK, so the first challenge-- well, the first challenge was actually pretty simple. We wanted to say, OK, how can we get all of these amazing options available to the user? So I'm going to give you guys a quiz. And you're all smart. You're all very smart. I'm willing to bet you're going to get this right. Let's say I have 24 amazing effects. 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 going to 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."

10 seconds. That's hard. There's a ton of different effects. And then being able to dial in that specific effect all in 10 seconds, it's a really good challenge because we can't assume that the user's going to spend all day playing around with this little piece of UI. This was a really great way for us to force ourselves to simplify this UI as much as possible. OK, so I said three challenges. The third challenge was how do we get the action of refining this effect so I can get it just right? How do we get that really, really easy and under 10 seconds? Okay, so you've got the three challenges. So let's talk about the third one first, the ability to sort of refine this effect. Let's talk about black and white. Black and white, if you shoot black and white these days, you know this. For those of you who don't, modern black and white photography is most often, believe it or not, shot in color and then converted to black and white. But it's not just the simple matter of saying, get rid of the color, and now I have a black and white image. It's actually more complicated than that. So for example, this is sort of a UI that would accomplish a more advanced form of converting a color photo into black and white. And that takes the red, blue, and green channels and converts them to luminance and says, "Okay, well, in this image, the reds are really strong," for example. Or in this image, the reds are really strong and the blues are a little bit less strong. Or in this one, here's another one. Okay, and this time, the blues are really strong. So we could have done this UI, and this would have given us a ton of power.

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 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, OK, 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. OK, 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 100 different permutations, 100 different options of that same effect. 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 this 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 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 icon folds back down into 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. OK, 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 users will just have to go find an iPad if they want some of the cooler stuff, like, nah, we won't do do brushing or any of those effects. You know, the truth was 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 toolbar. You can see there on the left, those are your 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 toolbar, you could say. So you can see the little control on the left there, the little sort of toolbox icon. You tap the toolbox, 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 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 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-- oh, 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, OK, 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." Duh. I should have seen that. The reason I'm showing you this slide is sometimes the answer isn't right in front of you. It's just to the left. Don't be afraid to use a different side. OK, so that's my thing. Now Randy's going to come up and talk to you about some really cool animation stuff that your apps should be using. RANDY SKLAR: Great. Thanks, Sam.

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 -- we'll 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 ten. 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, the next thing I want to talk about, if we can go back to slides. So on the brushes. So one of the things on brushes was there are a bunch of graphical elements on there. And the way that we broke the brushes up, there are three pieces to the brushes. We've got the main brush itself. We've got a separate glow. And then you can kind of see on the right we have a shadow. And by splitting these up into three pieces, it allowed us to turn the glow on and off. It allowed us to change the position of the shadow to give a different effect in terms of how far above the screen the brush appeared to be by moving the shadow around. But one of the things was that in our UI, the brush doesn't get-- you never see the entire brush. So we were careful to only include the portion of the graphic that was actually going to be seen. The brush actually sits in a much larger view so that we can put the anchor point down the bottom, which is where we want things to rotate around. But we only incorporated the portion of the graphic that was actually seen on screen. Took a little more work to do this, but it cuts down the size of the application, which is definitely very important for your users' download sizes. Now another thing that I like to use in designing things, laying out things like brushes, you could certainly do this in code, creating all the different views, putting them together. interface builder can actually be your friend. So the brushes, this is actually the nib from the brushes and set up where you've got the individual brush graphics laid out. You can see the larger view that they're sitting in where we're going to put the anchor point down at the bottom. You've got the little orbs that rotate around the repair brush are sitting there. And we've got them laid out, kind of setting the position between them in their normal position. Another thing that you'll notice here, normally when the is running, these brushes sit up inside the toolbar. And I could certainly have the toolbar-- or the brushes inside that toolbar view in the nib. But that would make it really complicated to work with it, because you'd only be able to see a little strip of it at a time. So we actually put this lower view into the upper view at runtime. And that means that the nib is in a form that's very easy to work with during development. And Interface Builder helps out a lot.

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 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. 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 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 details here. When we swap 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 right where the grid is and move around back and forth between the two sides.

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 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, it's 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.