If you go to your Resources folder, double click on it. And you can find a wireframe printable templates, you can open up that file and here is how it looks like. So inside of it you can find a for paper templates as well as us letter paper templates. And you can use these templates to print them out and simply draw with your pen or pencil on them. And you can see if you zoom in a bit closer, you can have just the top information from the iPhone right here, as well as the home indicator right here at the bottom. And you can use these rectangles, just so you can draw a better wireframes inside of them.

Just so you can know how much space you can have and so on. And once again these are just for hand drawing, and you can use them as well if you want to and create wireframes right here inside if you want to, but I prefer to just print these out and use them with my head. It's a much better process I found over the years, then to start with the wireframes directly inside of your software. So once again, you can use these if you are using a4, or if you're using us letter paper template, simply select one of the artboards whichever one you want hit Ctrl, Command E to export assets. And from here you can choose PDF, and you can export it, open it up and print it out for as many times as you want. And because I know we have 10 screens, that's why I chose 10.

But you can use these ones. So for example, you want these three, you can choose this layer panel right here, and you can hide all of these other ones and then maybe position these free in the middle you can print out those three if only the if you only require three screens to be printed out. You can enlarge these screen, you can maybe use two, four, it's really up to you and your project. Now, this template can accommodate 10 as you can see right here. And if you need more than 10, you can simply print out more papers of these particular wireframes. And now, once I show you that, let me quickly show you what I came up with with these templates.

So right here I have wireframe jpg image, and you can use it just so you can see what I'm talking about. Maybe we can enlarge this, and I'll position it right here. So these are the ones I draw on and I simply then scan them out in my computer. And if I zoom in a bit closer, you can see that I use screen names right here below. And this is what I was talking about. So this is basically just a free hand.

This is just for you. So you can maybe understand how to position some elements inside of each screen. Maybe you can see which are work which elements don't. And because of my scanner, you cannot really see this background color. But maybe your scanner is better and you can see it. But when you print it out, it's really nice.

And you can see this background color as well as these white rectangles. And once again, you can simply double click on them and change the color to whichever color you want, if that is something you want, and your printer can accommodate that. So if we zoom in a bit closer, you can see on homescreen For example, we have various different elements positioned across. And this is going to be a lot longer down below because we want to accommodate these room combinations as well on this home screen. Next up, we have the category search right here. And you can see that for example, I chose sofa how many results there are sorted by and users can click this arrow.

They can sort by any of these filters and thinking click apply and it will take them Back to the category search with those filters applied. Next up we have room combination as I said you can access it from here and you can also access it from the menu. Because inside of room combination that is the screen that sells the furniture and users can see how some pieces fit inside of for example living room or bedroom or kitchen and so on. And they can choose different options from here they can see how much they cost, and they can see all the products used inside of that particular room. So we have selected item and selected item can be item from here, from here, or from here. And on the item they can see the product name right here to top one line of text maybe you can include headline or and the sub headline, just so the users can know for example what it is in sight of those three or four words.

They can see the price which calls they can choose sizes of product and about the product as you can see a write down three to four sections below so they can scroll down and learn more about that product. And when they finished with selected item selected item adjusted, so maybe they chose for example, a particular color, maybe they chose size and this Add to Cart button will pop up and they can add it to the cart. Next up when they do they can hit the cart icon and they can go to the order details and inside of this screen, they can see all the pieces that they ordered name of the PCE price of the piece and how many items of that particular piece. So this is important if you're ordering sofa, maybe you want to order just one but if you're ordering chairs, maybe you want to order for six or something like that, maybe down the line to have some smaller items.

So for example, ashtrays, or glasses or bought plants or something like that, and Maybe they want to include a different number of these inside. so users can tap dialog will pop up, and they can simply use their keyboard to enter four for example, or six or something like that. And of course, price will adjust accordingly. Finally, they have proceed to payment, and it will take them to this screen. And as you can see, from the inspiration example I showed you, I just use one simple back arrow, which will take them back to this screen if there is something that they want to change. And on this screen, they can choose payments, so they have credit card options, and they have PayPal options as well.

Maybe we can include multiple credit cards, and they can swipe through these credit cards to choose the right one. Or if to just have one it will be just one right here. And finally PayPal info down below. When they're happy they can hit make payment, and if they want to make some final changes, they can click enter on any of these, and it will take them to the Edit of credit card or for the PayPal account. Next up, we have store locations. So we have a big search bar right here with the next.

And they can hit search on whichever screen it contains the search icon. So when they do it, we'll take them to the search bar right here. And they can choose these different filters and they can choose different item pieces that they want to be included inside of the search. But if they want to choose a location, they can also hit the search bar and type in location and this screen will pop up. And for example, they can type in Belgrade, which is a capital Serbia and we know that they have the stores right there. And we can see the street right here more details which will then show them for example, if they traveled by bus or by taxi, which streets to hit and it will ask for the device location, just so it can show them, the distance between them and the store.

If they want to navigate, they can hit this button, it will take them to the preferred navigation app they use. So if they use Google Maps, it will take them to Google Maps. If they use here maps, if they use ways Apple Maps, it really doesn't matter. It will take them to their preferred maps, and it will start the navigation from there to the location in question. And finally, we have our menu. So wherever they have the menu, icon, so for example, right here, or right here, they can hit it, and it will take them to just this basic simple menu, which then they can choose different options from.

So as you can see, it's really quite simple. It's lacking a lot of screens, but for this first part of our design process, and this is what we agreed with the client are the first screens they want. I indicated to them that this will require at least 15 or 20 more screens. They say they're fine with it. But they just want to see this first part, and if they liked the design if they liked the functionality, and they want to test it out on some of the users, just so that they can understand if the users like it, if the users find it confusing or not, and from then on when they collect all the data, then we can move on and design some of these other screens. And it's a lot simpler when you have a complete product that you can then edit and include more screens and include more some of these different elements because it's a lot faster when you have something rather than starting from blank screen.

So those are the wireframe printable templates. And as I said, you can use them and print them out you can draw on them. And if you want to, you can even create your wireframes right here. In the next section of this course we are going to jump into wireframing and we are going to start designing our wireframes from this information that I just showed you. And I'm going to explain some different techniques and how you can get to wireframing why it's important and how it's going to speed up your process later when it comes time for the revisions. So I'll see you there.