Designing wireframes using Keynote

- [Instructor] Hi and welcome to building a complete grocery application from scratch. So in this particular lecture what we're going to do is we're going to prototype the user interface using some tool. Now, you can use any tool that you like, Sketch, Keynote, PowerPoint, Pixelmator, anything you like but I'm gonna use Keynote because it's very, very simple to use Keynote to quickly create those sketches or the prototype UI's. So let's go ahead and launch Keynote. And we're gonna say new document and you use any one, I'm just gonna use a presentation with a white background. So here we go. I'm gonna delete these things 'cause I don't really need that. The first thing I really need is some sort of a bounding box for the iPhone frame, so let's go ahead and add a shape, which is a square and we can adjust the size to any size that we want, right? So lets go ahead and let's go to Arrange and give it a 320 and 480 width. So there we go, that looks kind of like an iPhone, right? We definitely don't need this blue background, we just want the frame so let's go ahead into the Style and go and clear it out, there we go. We definitely need the border so let's go ahead and select border and line. The border is five points width, we don't really need that so let's go ahead and set it to one. And we don't really need to drop a shadow so, no shadow. And there we go, we have our iPhone frame ready. Now you can also go and change the color of the border if you don't like that they can select a much lighter color which is greige kind of a border, there we go. Well the first thing we will need in our interface is the navigation bar because our application, the grocery application would have two screens. The first screen will list all the shopping lists that are available, which means Walmart, Fiesta, Kroger, Randalls, Whole Foods and all that, and when you select one of those shopping lists you can go to a designated shopping list and see all the items. So let's go ahead and add a navigation bar. Now the navigation bar is 64 points so let's go ahead to Arrange and height and set it to 64. Go ahead and set it's width, which will be the same width as the iPhone frame, so there we go. Now once again, you should change the color to something else, I'm gonna just make it like a yellowish kind of color and we don't really want shadow, so there we go, we got our navigation bar. Now we can go ahead also and add something on the navigation bar. And how quickly we are creating this prototype in Keynote, right, then I can say shopping list. I can select that and command minus, minus, minus, minus, minus, 'til I find the size that I'm interested in which is this. I can also go and change the color of the text because I don't really like this particular color. So let's go ahead and change that. Text and go ahead and change it to white, I think it looks much nicer now. Now what we need is we need a list of items, a list of shopping lists, meaning Fiesta, Walmart, Kroger, H-E-B, Whole Foods, and all that so we need to display the list. So we need a table view another way, right? So let's go and add a very simple box. What we're gonna do is we are going to use this particular box to create the different cells. So we'll go to Arrange and instead of height giving it, we'll just give it one. Style, we definitely need some other color, there we go. And we don't want drop shadow, so there we go. Now whatever the width, oops, whatever the width that you are giving it should be okay, so here we go and I think that should work, right, that's one cell. And we can just copy this and there we go, we created another cell, so basically cut, copy, paste and copy, paste and you can create multiple cell with equal distance between the cells. And you can see how easy I'm creating these. Keynote is really helping me out with this but I'm not saying you should use Keynote or you should use any other tool. I mean you can use any tool that you like. But here we go, we easily created these different cells. Now what will go inside the cell will be the actual name of shopping list. So let's go ahead and do that. So I'm just gonna drag this over here and let's say Walmart. And I'm not really fond of such a big size, so here we go. It's nice, right? So we can easily create Walmart. Here we go, we can actually drag this over here and we can say this is Fiesta. And you can arrange them which ever way that you like. But quickly, we are creating the prototype of our interface, right? And you can use literally any tool that you like to create that. I can go ahead more if I like, so if I say H-E-B, and all the grocery stores in Houston I would say. If you're somewhere else you can use that. I'm gonna say Whole Foods. I think that should be enough, right? So this is it, this is our very simple prototype that we have just created and based on this prototype we are now going to work in Xcode to design this prototype, the wireframe into a reality, alright? Now you can go ahead and change colors or whatever you want to do but we're going to stick with this kind of a design and this will allow us to quickly list the amount of different shopping lists that we have. Now when we click on a shopping list like I click on Walmart or Fiesta it should take me to some other screen which should show me all the items in that shopping list. Now those items can be chips, cookies, paper, milk, diapers, whatever, right, we're going to worry about that later on when we reach that point. So, that's pretty much it and stay tuned for the next lecture. Thank you very much.