Let's now design store locations screen. And First things first, let's change some things around. So this is going to be white, this circle is going to be orange icon inside the circle. So let me zoom in a bit closer so that I can select it is going to be white as well. And we're going to include the drop shadow. So seeing like we did with all the other ones, five 510.

And let's simply select this color and make sure it's on 25% of basically, so it corresponds a bit better with all the other ones. Next up, let's simply create a rectangle for the top. So jump into a layer spell status bar search bar, move them at the top, and I'm going to create a rectangle just below. So like this, move it to the top and move it just below the search bar. So we see what we're doing by So, let it be white remove the border. And we are doing this because we're going to put the map right here behind.

And if we put the map just below this text and the search field, it's not going to read now that we created this BG, so they'll click right here type in simply BG, it's going to work just fine. Click right here and then locate the map and drag and drop it inside, you can use any map you want and just simply use some random location on the map like so. And you can position it a bit better if you want to. So you can maybe put it somewhere around here, I think it works well and increase until the corners meet the top and the bottom with just below home indicator because we want to map it to be the bottom layer so all the way at the bottom. And finally we want to increase the size of this line. So You can see the art board, which is 375.

So we can jump into search bar, locate the line and just type in 375. And make sure you move it until it meets with the end of the art board like so. Now that we've done that, we need to make a few changes right here. So we're going to select color and selected color, move them somewhere around here letting location so you can move the pin around here maybe, and then you have to edit the path. So it goes from here to hear, but let's first change the color of the path to this color. Just make sure you select border and then change the color.

So like this, so it's orange and a bit more nice and clear. You can even increase the size to make it too. And then what you can do is jump back into a layer spell double click on the pet And then simply move this path points. So it follows the path of the map. So something like this, then simply move it to here of this path point a bit more. So somewhere around here, like so and then simply go to your starting location right here.

You can also play around, you can double click to make them around if you want to, you can then even move it like so and make a nice arc shape if you want. So you can double click right here even. And you can change their position however you want. So you can lower or make them like this, you can double click right here because this is the corner and you can double click right here as well if you think that's necessary, but let's just leave it as it is and don't bog down with the details about this particular part. So when you're done that, I just want to make sure I don't Click right here anyways, so I can create a nice corner something like this maybe. And then I can simply change this angle like so to make it a bit more straight.

And then move this just a touch to here, like so, and then simply move the pin icon just a bit above. So I'll move it like so. And it looks a lot nicer and then simply move these two until they meet right here. And maybe we can color the inner circle with this color so that we know that that is our arrival point. And this screen is finished. And now what's left for us to do is simply edit one more item inside of our menu.

So just below settings right here. jump inside your Layers panel you can duplicate this settings, text and simply type in store locations because that is the important bit that people will need to look for. Make sure they are all spaced out evenly. And you can even select all of them and do like we did before so select a rectangle. Make sure you're on the top point of the X. Select the rectangle, select this group position it like so, delete the rectangle and you can ungroup this group if you want to, or you can leave it like it is just call it items.

Because store location is really important and people can reach store locations I this screen from the menu. Now one less thing for us to do is click on the BG layer and simply hit nine because that's We'll lower the opacity to 90%. And because this menu screen is going to be an overlay screen, because it's on BGS on the 90%, it will overlay on top any of the screens where it's located, and it will just show a bit below the screen and just a bit below this big. So that's it for the designing part of our app. In the next series of videos, we are going to start with a prototyping and I'm going to show you how you can wire some of these screens and how you can choose the perfect transitions and how you can present it to the client a bit better than it is now.

So I'll see you there