Now let's quickly go ahead and finish up this wireframing process with store locations. And then finally a menu. So let's start with store locations. So same thing, grid copy guides, and maybe we can select both of these right click guides and paste guides. Now I could do this as the beginning, but sometimes you never know if you want to change some of these. So it's really easier way to go one by one and then not to have to lose time and come back and make some changes that you didn't want in the first place.

So let's start with our clothes. So select it from here Ctrl C, jump right here. Ctrl V. Next up, we have the search icon which we need Ctrl C, jump right here, Ctrl V, and I'm going to position it right here to this edge. Make sure it's positioned as it should like this. What we need is some basic text. So use this one Ctrl C Ctrl V. And make sure it's in the middle of these ones like this and make sure all of them are positioned as they should.

So make sure you are 20 pixels down, same like we did. And make sure this is 20 pixels to the right from the icon. So shift one, two, and type in store locations, or even better search locations, which has a lot more sense like this. And finally, what we need is a line down below. So you can create a line using line tool but I like to create it using shape layers, which can always bring me back and I can always adjust them and change them later. If I want to.

You can select this or you can simply click right here. Let's see. And maybe for the height, we can type in one and as you can see we have ourselves aligned So align them to the bottom of these icons shift one to make sure you have the same spacing as before. And we have finished up with this song, maybe we can create some border so line, move it all the way down below. So we have like this, close this search and group all of them together. And maybe we can write in search bar, let's name just so that we can have a bit more organized screen.

Next up, we can create the bottom part of the screen. So let's select a rectangle, like so. Use five like so, remove the border and use the same color as we did for all of these other ones. What we want next is to choose some texts so you can choose this and this Ctrl C Ctrl V and make sure you place them right here. Inside So they'll click right here and type in, for example Belgrade store. This is going to be a street, so let's call it like this.

Of course, you can write in any street, any city you want. But this is just because it's in Belgrade, Ctrl D. And finally, right here, we want to have the same spacing, double click type in more details. Control a, and hit underline because this is going to be a simple link, it can be a pop up message will pop up from below, or from above, it really doesn't matter or anything, it can take you to the entirely different screen. It's really up to you and your client to decide. But in more details, people can learn about the phone number about the email address about specific website about stuff like those so that they can access it directly from here. Next up, what we need is an icon for the navigation because when defined location here is the pop up right here.

And they can simply click right here and it will take them to the preferred application to use. So Google Maps ways Apple Maps, and so on. So let's quickly choose that icon. It's this one Ctrl C, jump right here, Ctrl V. And what we want is to create a simple circle. So maybe we can create one. For example, 50 by 50.

Let's see how that looks like. So 50 by 50. Remove the border, make sure it's white, jump into the Layers panel. Jumping right here, double click, type in circle. And we want to select these to position them like so. And what we want is to position this in the middle like this, and perhaps more with 40 pixels, so 1234 and maybe we can order these ones a bit better like this, select the background.

Select the group, position them in the middle Maybe you can call this text. Let's double click criteria type in text, like so. And this is going to be a card, BG, same like on all of the other ones. And maybe we can group all of them, like so just make sure you move these right here Ctrl G, and you can even group those. So directions like that group, all of them. So Ctrl G, this is going to be our cart.

And you can move it down below and perhaps use 1234 pixels, or 20 pixels. Let's just quickly check what we did on the other ones. So on this 11234, so it's 40 pixels, and we did it correctly. As you can see it's in the middle, it looks exactly the same like all the other ones, and what we need to finally use to create some directions now you can do it right here or you can wait a bit later. When you have your finished design, but let's just do it anyway. So I'm going to select this location icon, jump into our map Ctrl V, paste it in, simply position it somewhere around here, let's say then use a pencil, click right below it.

So like this, maybe like this, you want to use some street information like so then, so we can create a part like that. And what we need is a circle and we can use some of these circles we already created. So for the colors, select a color in this color Ctrl C, you can jump right here into this screen Ctrl V to paste it in, you can place it like that, and that's going to be your final destination. So use this color and fill it out with this color, like that. And that's going to be your final destination. Now what's great about this path in Adobe XD, you can simply double click on it and you can move the points you can hold Shift if you want to make a straight point straight part like this, maybe I want to position it like this and maybe even like so.

And what's great as well is we can then move it around once we include our map just so that we can make it a bit more realistic. If you don't like how this looks, you can click on a pet, and you can create around cap which if I zoom in, you can see it looks a lot better than without around cap because it's going to simply make it like if you bought cap, it's going to be a simple rectangle. I really like how this round cap looks like. And because all of our icons have these rounded edges, you can place it and position it a lot better than with the bottle cap as they call it. So that's basically it for the store location. And let's quickly and finally just make a menu screen.

So what we need is this close icon copy it, paste it in exactly the same position, we also need a logo. So we're going to select it from here, jump into our screen, Control V, make sure it's in the middle. And what we need is a background. So we're going to create a nice big rectangle around our entire screen, remove the border, call it BG, move it all the way down below. More all of this stuff up. So logo move down below.

And why we created this background is because we want to create this screen as an overlay. So when you create a background, you can use all sorts of different animations. For example, you can use different opacity. So for example, you can reduce obesity if you want, and then overlay this entire screen over the other screens. Now finally, what we need is a lot of text so let's choose this one. Ctrl C, Ctrl V Make sure it's from the center and make sure it's in the center.

Make sure it goes. So for example 1234, same like we did with all the other ones. So let's call this first one, our profile. And you can hit enter and then go down a few lines, but I like to keep my text separate, because it really gives me a lot more flexibility. So you can move it down below, like so 1234. And maybe we can call this one my orders like that Ctrl D, then move this one below.

I don't know why it keeps doing this. But as you can see, it keeps selecting all of the other ones. But in that case, simply select the top one so 1234 and then position it just below this one. I really don't know why it does it. But maybe because I'm holding shift. I don't know it didn't do that before.

So All my payments is going to be in this one. And finally, because we need two more, we can copy these two. So my orders and my payments, let's move these two down. And as you can see it keeps doing this even if you just select two or three different layers, but maybe we can do it like this. So just move it just a touch select these two, so I'll shift and move them like so. So 1234 this is going to be settings like that.

And finally we have logout. And there we go, we have finished our screen, make sure they are all in the same order. And if you don't like how this looks like you can position this text down. So let me quickly select all of them like this Ctrl G, and what I want to do Create a simple rectangle from the bottom of the X to the top of our logo, select these two, and then simply hit right here is going to align it in the middle of this space because the rectangle is filling out this space. Finally, delete the rectangle, and then move some of these down. So right here, on group, and here we go.

We have created our menu screen, which we're going to overlay. In the design process, we start prototyping our screens. And that's it. We have finished our wireframes one final thing and really important thing, if you don't have it on autosave, make sure to press Ctrl or Command S and it's going to save out your project. So you're not going to lose out any details. We'll come back to it a bit later on.

But Adobe XD is really smart and it's doing autosave so if you don't have it enabled, make sure to find it in the settings or if you don't want it and you like me a life To save your own work from time to time, so simply hit Ctrl or Command S, and it's going to save it in the desired location. So that's it for the wireframing part of this course. Next up in the next section, we're going to start with the design. I'm going to show you how the structure of the images is set up in your Resources folder, and how you can use those images to create a high fidelity design, which you're going to present to your client. So I'll see you in the next part of the course.