Before we start with the design work, let's quickly do some basic things. So I want to include the status bar as well as home indicator at the bottom. If you remember, that's what we did when we created our wireframe printable templates. So just that we can know where our bounds are and from which areas we can design to. So I'll jump into another file and copy them because I already created them in that file, and simply do Ctrl or Command V to paste them inside. And if I zoom in a bit closer, you can see how they look like so here is our status bar and it transferred over as a component.

You can also right click on it and do unlink component because that will create a component right here at this file. You can also right click right here and typing delete, which will delete the link to the original component in the file which I created which is not this file. So what we can Now with this selected is hit Ctrl command K, which will create it right here. Now what this means is this is the original component inside of this document, rather than the component copied and pasted from another external document. So what that means is, all of the changes you make inside of this document, which is called our project from this time and forward into the future will be keep kept inside of this document and not in the original document from which I copied this. We can do the same thing with the home indicator if you want to, but we're just simply going to copy and pasted it inside of every file.

So what we're going to do next is select both of these so you can just do a quick selection like so hit Ctrl or Command C, zoom out a bit, select all of the other artboards and simply hit Ctrl V. It will paste them inside all of these artboards in the same exact place. As this first one and this is a great addition to Adobe XD and great feature to have, because if you have multiple repeating objects inside of any artboard you can simply copy and paste them and it will paste them in exactly the same location as they were in the first artboard. So next up, we're going to create our top bar. And to do that, let's quickly select some icons. So what we are going to need in this case is menu icon, search icon as well as the back icon. That's why I created them and you can quickly just select them.

So Ctrl C, we told them selected, hit Control V on this first screen, the home screen, hold Shift move them until the lineup like so and placed in 20 pixels down so shift and bottom arrow. Next up, select this one, place it to the edge or you can simply click right here and it will base it to the left edge. Do the same for the search bar on the right edge. And for the search, hold shift and left arrow. So one two to move with 20 pixels from this edge, and from the menu, shift one to right arrow to this edge to the same as for this shopping bag. So hold Shift place it like so until the meet shift, left arrow, one, two.

And that's why we created these icons because it makes our job a lot easier at the start. Next up, we're going to copy our logo. So select it, Ctrl C, click right here, Ctrl V, click right here to position it in the middle and then simply move it until it's in the middle like so. If you cannot, you can select these two and simply click right here and it will move them all inside of the same line. So next up, I'm going to select all of them hit Ctrl or Command G to group them. Click right here and double click and name them nav bar.

Center, and I'm going to order them a bit better. So now bar comes just below status bar. And I can do Ctrl C, click right here, Control V, and this is what I was talking about, it will paste them into exactly the same location as it were, as it was on the first screen, so it will make your job a lot easier later down the road. Now, before we do any other work, let's quickly select the colors for the project. So I'm just simply going to create some random rectangles or remove the border. And we are going to need five colors.

So Ctrl D, hold Shift, control D, hold Shift, just to move it down below, control D, hold shift and move it and finally once again, control D. Now for this first one, click right here. We're going to type in zero, B zero, B zero, be presenter. It's going to be a dark color for this Next one, we're going to use 858585 percenter. For this next one, we're going to use 717171 percenter. For the one below it, we're going to use Eb, Eb, Eb, press Enter. And finally for this one, we're going to use fff, fff, which is pure white.

And now that we've done that, we have to create them as acids. So you can click right here, click on this color and click right here, click on this color, click right here, right here on the plus and finally on the plus and what I like to do is I like to place darker colors at the top and lighter colors at the bottom so you can reverse the process you can select the white first and then move on to the top and then we have our colors created. Next up, we're going to create our font. So I'm going to select this artboard, type in T, click right here, type in, for example, store the chair Ctrl, a, select Open Sans from here, if you don't have it, you can also install it. It's a free Google Font. And if you're using Adobe fonts, you can also find it there.

Simply install it and you will be ready to go. I will leave a link in the PDF and you can also access all of these links to the fonts sent to the images. And you can also find some additional resources that I'm going to link inside of that file. So first things first, let's select 18. From here, press enter. It's going to be a semi bold so select semi bold from right here, and it's going to be in this color.

Now we're going to use it for all our headings so you can click right here to make a new character style. Next up, I'm going to duplicate it so Ctrl D, more with just down below. I'm going to use regular one. And I'm going to select this color, which is going to be our h two for all the text. And finally, we're going to reduce its size. So select right here to 14 percenter.

And we're going to use this color as it were. click right here to create another character styles. And that's it for this project, because we are only going to use these two character styles. In majority of the projects, you're going to use at least three. And in majority of cases, you're going to use various different fonts, but this client preferred the simple look of this and wanted to go with it. So what I can say is, okay, so what we're going to do now is create a guide to help us so you can select this and from this edge, simply move the guide until it meets right here, so that we can always know it's 20 pixels from this edge and do the same for this icon right here.

So we can know it's 20 pixels from this search and it will make our job a lot easier to underline. So you can select these to move them right here. And you can align it up like this and simply hold your bottom arrow, move them, for example to five pixels. And let's double click right here and type in, for example, our best selling chair, let's say something like that. And we're going to create an image to go behind. So simply use the rectangle tool and select from edge to edge, remove the border, what we're going to use is this Eb, eB eB, and we're going to use 375 with 216.

Press Enter, and we're going to jump into our layers. They'll click right here, type in image center and move it right down below to here. And let's quickly order some of these layers. So as I said, this goes to the top images right here. And what we're going to do is line it up to make it 20 pixels. Like so, so shift bottom arrow twice, and we went to you do the same for this.

So line it up like so, shift, one, two. And that's how we created our image. Next up, we're going to use some pagination right here at the top. So we're going to quickly create an ellipse. So zoom in like so. You can create, for example, 10 with 10 percenter make a perfect circle, and you can duplicate it.

So Ctrl D, move it, like for example, 10 pixels, control D with 10 pixels like so Ctrl D, and have four for example. You can select them by holding Shift move them until they meet right here, hold shift and position them in the middle like so. And you can also group this and then position this in the middle if you want to, but I find this works just fine. And if you want to you can remove borders from all of them. So let's do that like so. So simply click right there.

And then what we're going to do is use a selected one. So click on it, then jump into our assets and click right here so that we can make this a selected one. If you don't like how this looks, you can also do the border on some of them, but I think this look just fine. What we're going to do now is rename them. So maybe you can use circle one, instead of lips one, and circle two. Then circle three.

And then finally circle four right here. And then I like to order them to go from top to bottom. And just makes more sense to me, but some people prefer it the other way. I really not mine. So simply type in pagination and you can move with just below the text here. Next up, we're going to create a text down below.

So you can select all these Ctrl D, move them down like so until they meet with this image, Shift Down arrow twice, because that's how we did it with all of them. So right here, what you're going to write is most popular. Like so. And right here, we're going to write SEO. Because this is going to be a link and people will be able to click on this link and see all from this particular category. You can select both of them hit right here to line them up perfectly.

And what we're going to do now is select this image Ctrl D, hold Shift, and do want to like so. And what we're going to do is create a row of three images. So let's quickly select the corner radius, type in five We can make around the corners. And we're going to type in for the sizes. Let's see 135 with 160, like so. So make sure you lined up like so make sure it's 20 pixels, like so.

So make sure it's one business Ctrl D duplicated. Once again, line it up, make sure it's 20 pixels to the right. And finally, control D, make sure it's 20 pixels from the right as well. And what we want to achieve right here is drag triggers. So people can drag and look at these ones which are off the screen at the moment. And we're going to create that a bit later on.

Or what you can do is we're going to simply create one and then group it and duplicate it. So I'm going to duplicate this text, double click right here, control a type in name, control a make sure it's in the center like so. And you can select it and image and make sure they are all lined up perfectly Ctrl D once again. And what we're going to do below that is we're going to introduce a price. So for example 24. And finally, make sure all of them are in the middle like so.

And there we have it, our group is ready. And make sure that you are For example, 10 pixels from the bottom. Let's create that like so. So all of them are 10 pixels. So from here to here, 10 from here to here, 10. And finally, what we're going to do is group all of them.

So select all three by holding CTRL Ctrl G to group them, okay, right here and type in image one maybe. And now we're going to use Ctrl D to duplicate it. And please like so 20 pixels to write Ctrl D and move this 120 pixels as well. So this is our image three, this is our image two. And finally, this is our image one, so we just want to order them a bit better. So they make more sense down the road.

So select all of them, move them right below here. Also most popular and see all move them just above these, so that all of this makes a lot more sense. You can also group all of them and we are going to do that now. So selected like so control. Just make sure you selected all of them. So sturdy chair, our best selling chair and seal should be down below, like so.

So hold Shift Ctrl G, double click right here, maybe type in hero because this is our hero image or our slider. And for these ones, maybe we can control G and name them for Example, most popular and what we want to do now is create another section which we are going to name room combinations. So simply Ctrl D on this one and move this one down. So selected and for some reason it won't move. Yeah, we have to move it like so. So shift, bottom arrow twice, and now move it just below and double click right here and type in all combinations.

And for this one, what we want to do is remove the prices. So remove the price. Remove the price. And finally from this one, you can go in like so and remove the price and you can select the names so first, hold control, hold control, move them down below until they meet At the end like so, and shift an up arrow one so that you can make them 10 pixels up. Now, these will be the names of our rooms. And these are the most popular products.

Now finally, I want to quickly create one more section. And to do that I have to extend the height of this artboard. And to do that, you can simply select your artboard and extend it down for as much as you need. Let's do it like so for now. And we're going to quickly move the home indicator down. And what we want to do is duplicate this one more time.

So Ctrl D, hold shift with this one until they meet at the top like so. Control the sort of shift and bottom arrow twice. And what we want to write in right here is our process. And right here, we want to Clapping, read more, because people might be interested in the process of this company and how they make their pieces. And they can read more. But right here, we're going to create a video and to do that, so let's quickly rename these.

So these is the room combinations. And this last one is our process. And we're going to delete these two, leave just one ungroup it like so. Click Delete a name because we don't need it anymore. And for this one, what we need is 335 with 178, press enter, and what we want to do is position it right in the middle. It is in the middle.

As you can see it touches the left guide we placed as well as the right guide. Please just make sure it's 20 pixels from the text Like so. And what we want to do is include another icon. So we want to include this play icon. So Ctrl C, jumping inside Ctrl V, and we want to rename this from image to video and use the plate icon move with just down below. And you can select both of them and simply do like so and it will place the plate icon right in the middle.

And finally, what we want to do is move this to the top and move it 20 pixels down. So shift bottom arrow, and then finally 10 pixels more and double click on the artboard you can zoom in a lot closer so that you can be sure that it clips at the right place like so. So shift up arrow and that's our screen created. As you can see, it's really easy because a lot of deals mints are repeating themselves. And you're going to see in the next videos, how all of this is going to be a lot faster now that we have at least some elements placed on our page. And we're going to use these guides a lot more because I found they are really useful because you can place different guides in different screens if you wanted to.

But what's even more important is you can copy the placement of these guides and paste them wherever you want on any of these screens. So in the next video, we're going to start with the category screen and I'll see you there