[MUSIC] Hi, my name is Mike Spears. And in this video, we're going to look at creating a prototype using the Keynote app from Apple. So at this point in your project, you would have started sketching out in a notebook, perhaps, or on a sheet of paper, your ideas for the app. You might have even started to draw out what the user interface would look like. But at least you've written down the functions that you think the app should have and maybe thought about separating them into the different new controllers that you would implement when you actually come to creating the app. We're going to use Keynote to actually make a nicer template. Maybe something like a prototype that you can show to friends and family or associates to communicate to them your idea for the app in a more visual way. And Keynote actually even lets you create a kind of simple app navigation through links that allows you to experience how the app would work. You can think about how to get from screen to screen and what that looks like. So we're going to use Keynote, one reason is that it's actually free for anyone who has purchased a Mac in the last couple years. And it's quick and easy but very flexible way to create app templates. You can download a whole bunch of template, preloaded user interface elements and things that people have designed to make app prototyping easy in Keynote. You can even purchase templates. But we're just going to use just the built-in Keynote shapes and I think that's really all that's necessary at this stage. You don't need to create a photorealistic version of your app. It's really just, the purpose of this is to figure out what user interface elements you need on the screen. kind of where they will appear, how much space they need to take up relative to each other and how your app will flow. So what the navigation of the app will be like, and we'll do that now. So I've started up Keynote here. I'm just going to select the kind of simple white theme and start a new project using that. So we have the kind of Keynote screen here and we have a new blank document. Now this document is just the standard four by three size. So I'm going to go over into the Document Settings here and change the slide size so that it looks more like an iPhone would look. So I just select custom slide size, then I can go up and put in the number of points for a standard iPhone 6 or 6S or 7 screen. So that would be 375 by 667. Now, if I scroll out here, you can see now the aspect ratio is a lot more like an iPhone would look. So we actually now have a sort of canvas that we can use to create our user interface elements. Okay, so we could just start dragging shapes onto here and creating our user interface. But when you're creating iPhone screens you'll find that there's a lot of repeated elements. For example, the tab bar or the navigation bar might appear on every screen. So rather than creating that on every slide, it's actually possible to edit the master slide and create different master slide templates that will allow us to more quickly generate screens for our app. I'm going to do that now, so just go over to the Format options here, and hit Edit Master Slide. Notice that the screen changes now, and we have access to change some of the master slide elements. I'm just going to go down here at the very bottom, there's a blank one. And I'm going to press Command D on the keyboard, and that duplicates that. Maybe give it a name like Navigation, right? Okay, so we've created a navigation, blank template here. Now I'm going to use the shape tool to draw, just a simple shape here. You're not worried about the color or anything like that. I'm just going to drag it out, maybe make it about 60 points high that gives us about the right height for a navigation bar. It's not important to be precise. We're not going to duplicate this precisely in our code when we get there. It's really just a guide for how our app should behave. I'm going to change the style here. So if I go over here while the shape is highlighted, I can just make that white background shape or rectangle. And I can change the border here, so that give it kind of a chalky sort of look that kind of communicates to anyone looking at this that it's a work in progress. For example, if you're showing it to somebody and asking for their opinion we don't want them to really concentrate on the particular colors or line weights or fonts that you've chosen. You really want them to think about more the functionality and the layout of the items, and whether they understand that. It's not really the point of this process to tweak everything until it looks perfect, it's really just to get a good starting point. You can tweak the visual appearance much later in the process if you need to. So that's one reason why we use this sketchy chalk look in this template. Okay, so we've added a kind of area for our navigation bar. I'm going to add some text here and then just move that up. This will be sort of the placeholder for our title. I can change the font again to something kind of more informal looking, just the chalkboard is one of the possible ones. Maybe this chalk duster one matches the look of the lines here, so that's kind of nice. Now one useful thing here is that if I want to be able to edit this text in the final slides, I'm going to hit the Style tab here for that text while it's selected. And then go down and hit down here it says Define Text as Placeholder. So if I do that then when I create a new slide with this, I can actually edit or delete that depending on what I want it to be. So Navbar, so I can just give that a tag there so that the system understands what my intentions are. It's not really necessary but it's a good way to organize things. And now I have a navbar title placeholder here. So we can actually add something for a back button, for example. I would say back and just go there, and again, There we go. So we're just going through and again changing the style a little bit, and then we can have maybe a right accessory button here listed as well. Okay, so we have created several user interface elements here on our template. We're almost good to go, I'm just going to finish up styling this text and there, okay, done. Now that we've done this navigation bar template I just hit Done. There we go. Okay, so we can add a new slide with this new template, we just hit Add Slide. And now we have a new one, I can delete the original blank one here. And I can change the title that now these placeholder text objects can be edited. We're all set and ready to go. We don't need the back text on our home screen, so I'll just delete that. Actually, just delete that, there we go. Maybe we might have like a info button or something on our home screen. So maybe just put that little i just to represent that kind of info button icon look. Okay, so that's our first screen, for example, you can imagine maybe we have, say, two different buttons on it. I could create a couple more shapes here, let's see, a nice shapes here. So just say we have two buttons on our home screen, change the style of that, there we go. And you can get fancy and set up your own custom styles to make it a lot easier to kind of duplicate this kind of stuff. For example, here I can just hit + and that now creates us a shortcut for specifying this particular style. Let's see here, make sure we change the text for this guy. There we go, all right, make sure we update that. Okay, so we maybe say, change the text on here. All right, I'm trying to select this thing. Okay, so I selected it. We'll just create something pretty abstract here, we'll call it Screen 1, and there'll be another button that'll take us to the second screen and we'll just change that. Okay, so for example imagine this app has three screens. A home screen with two buttons I can take you to another screen, Screen 1 or Screen 2. So now what I can do is add a couple more slides here. I will add a couple more, we can use that template over again, and create our two new screens. So this one here we can call it Screen 1, delete that. Screen 2, delete that. So now I have two screens for my app. And then here's where the interesting and fun part comes. I can actually link this text here to the associated screen. So if I happen to be actually running this slide show I can click on the button and it will pretend as if it's taking me to the linked screen. So I can almost navigate my app as if it was a real app in that way. So it's just by right clicking on the button here, I go down to Add Link. And then I can specify the slide that I want it to be on, so I'm going here, I want it to be linked to Slide 2. Just click off to the side, and you can see now I have this kind of link icon there, you can edit the link just by clicking on that in the future. And again, we'll go down here and do Add Link and set that to Slide 3 which is Screen 2. All right, so we have the two slides here, now I can actually set the back button. Add links to those so that will send me back home, that's back to Slide 1, and again right click there, Add Link, and go back to Slide 1. Okay, so now I have set up links between my three screens and what I can do now is if I actually play it. Now you can see, I have my app screen here, if I hit Screen 1 it takes me to Screen 1. I can go back, and then I can go to Screen 2 and go back. Just note that because this is kind of like a slide show, if I hit anywhere else on this screen that's not a link, it will just go to the next slide like you would expect of a regular slide show. So if you're playing with this, just make sure you hit the text of the object that you have specified as a link, just to make sure you jump to the screen that it's specifying. Okay, we'll escape from that. You know what's interesting if you also have Keynote on your phone, you can actually load this slideshow on your phone, and it'll appear full screen. And it will actually feel kind of like you're using your app for real on your phone. So it's a great way to show people how your app might work. So that's another advantage of using Keynote for doing this kind of work. Once you've created a few different user interface elements, you can kind of set them aside and save them for future work. So it's great to have a kind of library of little designs that you've made. The point again is not to be a superstar designer, you're not designing anything that's going to be in the final product. It's really just to play with the navigation, and the flow, and the layout. It's kind of more like a wire frame than a full on prototype. Some other cool stuff you could do is you could use the animated transitions in Keynote to animate between the screens. You can even simulate the kind of push transition of segue, for example. Or you can use dissolves between slides just to make it a smoother transition. And you can even copy and paste parts of screenshots from other apps or from your own apps to add a little bit more visual realness to this if you want. Maybe make it a little bit easier to create prototypes by having kind of a library of screenshots that you can draw from. Okay, so that's just my quick demo of how to use Keynote as a prototyping tool. I think it's pretty useful, I use it for my own stuff. And it's already there for most people who have a Mac and good luck and I hope you have lots of fun coming up with your app ideas.
