Now let's start designing our screens and including some images and some different effects. So before we do anything, what I like to do is simply duplicate all of these artboards and drag and drop them below this wireframe artboard section. So to do that, simply select all of them, hit Ctrl or Command D, to duplicate them, then simply click on one of them and align them at the bottom. And what I also like to do for the clients because you know what it is basically, I also like to make a text selection. So click somewhere around here, type in wireframes or wireframe, whichever one you want. Make it something nice and big.

So for example, 100 and maybe even bigger than that, maybe 200. That's good. And simply position it in the middle of these screens. So roughly around here, maybe yeah And you can also make it like so maybe 400. Let's keep it like so. And you can hit Ctrl D and make it 400 from here, so like this, and then simply move these screens down and move them make them 400 from this I think here is good Ctrl zero to snap into position, double click right here, type in design.

And that's it. Now what we need to do is make some changes before we include images and I want to include some drop shadows to some of these sections. And I also want to include one new color because I spoke with a client and they say that we need splash of color for these buttons because they look kind of odd. So the color details let me quickly select this button. The color They chose is f c 7800. Press Enter.

And as you can see, it's kind of an orange color, which means it's going to stand out from these colors. And I'm going to simply select it and click right here to add it to our colors. You can hit Ctrl S to save out your project because we already made some big changes to it. And now we're going to go and select these buttons simply click on your color to apply this new color to your buttons. And what we want to do as well is include some drop shadow. So I want to go right here to this first one.

And let me jump back to my Layers panel so I know which ones I selected. What I want to do is include shadow, click right here, 540 x axis, five for the y axis and 10. For the B axis, press Enter And what I want to do is click on the shadow, click right here on the color picker, but move on to your assets panel so you can select your color better. So click on the color picker and click on this color so it's 717171 and click right here and type in 25. Press Enter because that is going to lower the opacity of that shadow to 25%. Now what you can do is right click copy, and you can do Ctrl Command click to select this one directly because it's inside of the folder, as you can see right here, right click paste appearance, control click on this one right click paste appearance, and that's going to make them all look the same.

Now do the same for the wrong combination. So simply go ahead and select all of them based appearance. And finally do the same for the video on this screen based parents. Now go ahead and close all these holes. And I like to do all of this before I include images, because when you include images in these placeholders, Adobe XD will treat them as one single object. So you cannot remove that image if you don't delete it from that placeholder or hit undo a couple of times.

So I'm going to jump in and do the same for these. So simply Ctrl or Command, click and then simply hit right click and paste appearance. Or you can do Ctrl or Command alt and V, but I find it easier this way. What I also want to do is apply the same shout out to the buttons, but we're going to go and paste the appearance on these objects, because it's a lot simpler to do it for them because they're all the same color. And if you paste this appearance, it will turn the color of these buttons to gray color and we don't want that. We also want to Include the same shadows for these ones, but let's quickly finish up with this one.

So paste appearance. Now, we can do it for the cards. So simply hit to the card BG, hit shadow, jump back into our assets panel. So hit five, five and 10 jump into the shadow click right here, select this seven one color, lowered your basis 25% and do the same for this file. Make sure you're on the card bg. And if you are jump back into assets panel, select the shadow.

So once again, five 510 click on the shadow, click on the color picker selected from here 25% Press Enter. And now what's left for us to do is to select exactly the same shadow but for these buttons. So I'm going to select this first one and the shadow. So five 510 Click right here, click right here, make sure you are on this color 7171 make sure 25% and now what you can do is right click copy, and then go to all the buttons and hit paste appearance. Now, don't worry about closing all of the folders because we are now going to go and include images into our home screen, for example. But before we do, I need to make one more change.

So you can click right here, double click on the name of the artboard and simply delete these extensions, because I really don't like how it looks. It looks kind of messy, but simply go ahead and you can also do double click inside and right here you can type in design, for example, if you want to. But I found it's a lot simpler this way because if you send this file to your developer which you have to do at the end of the project, they will be able to understand if it is a wireframe or a design, because number one, it has images, it has some shadows that we already added. It has some changes applied to it. And as well it has the design writing just above. So if I zoom out a bit you can see right here, so they will be able to tell if it is a design or a wireframe.

So now that we made those changes, you can hit Ctrl S to save this project. Let us now go ahead and include images for the home screen. So I will zoom in a bit closer. Hold Ctrl click inside this hero image. We can close this folder because it's open. And I can jump inside our image folder and I'll locate the storage here.

Drag and drop it inside. And you can double click and enlarge this image like so. And you can position the chair like so click anywhere outside, and to make it a bit more appealing to the eye, simply hit right here and select from your assets panel, the white color for this bottom text, because that will make it stand up a bit more. One more thing I would like to do is select this third pagination circle and remove the fill color included the border and for the border color. Simple select white because that will make it stand out a bit more from these elements inside. Next up, we have to create the most popular section and populate it with images.

So what I like to do is double click inside of this name and type in Milano. For this one, I'll type in Genoa. And finally for this third one, but I'll have to move it right here. So, let me move all of it so select image three and All right in Palermo. Now for its price is going to be 96. For Genoa is going to be 96 and for Milano is going to be 98 Now let's change the colors for all of them to jump into a spell click right here.

So select the price click right here, select the price for the third one, click right here. And now let's include images. So select this first one jump into the Layers panel. Now jump into images and what you want to look at is lamps. So we have to select this lamp one, drag and drop it but not here because it's going to populate this entire section and replace it and mask it with image but somewhere outside like here. Now hold Shift Alt and left click because that is going to scale your image evenly and you Can you zoom out and simply hold shift and left click if it is for you simply drag it into position, make sure it's in the middle.

And now you can space it out. So for example from the text from the top of the text, you can hold Shift, press up arrow twice to position 20 pixels to the top and then simply reduce the size until it meets like this. Maybe you can even place it 10 if you think it's too much like this, because we want to make the image a bit bigger, and you can hold it like this and press in middle because that is going to position it in the middle of this placeholder. Now that the first one is done, let's quickly go ahead and select the second one. So jump inside the images folder select lamp to drag and drop it right here. And then same like we did with the first one, hold shift and reduce its size, simple drag and drop it inside of this folder.

Same thing like we did with the first one. So position it like this 10 pixels up, and then simply reduce its size from the top like this. Make sure it's in the middle. And you can also do this or select these to make sure it's in the middle. And you can close this folder and then you can move this third folder a bit more, and maybe hide the second folder so that you're able to include the third image right here, jump inside your folder, drag and drop it right here. And then simply reduce its size, like so more, move on a bit down, zoom in a bit closer.

So position it like this until it meets at the top shift and 10 pixels. Hold Shift, make sure it's like this and then position both of them in the middle like so. Now I'm going to include the image number two, hold shift and position. it like so until we meet. So shift One, two, which will move with 20 resorts to the right. And we have populated the most popular section with our images.

And because they are PNG, if at any point you want to change your mind, you can hold Ctrl click inside the image, and then you can change your field color. So let's jump ahead, you can change it to for example, any of these colors, you can see how that looks like. Or you can go ahead and choose any of your own colors. So let's simply double click right here so I can be sure which color it is. So it's a bit select this one and select back the EB so as I said, you can change it to your own colors. And or you can include a background image right here just below this PNG image.

So if you want to make it stand out even more than it is right now. Next up for the room combinations do the same. So click right here and if I Jump outside of this folder, you can see we have three wrong combination images. So you can click on this first one and simply drag and drop it inside, because we wanted to populate this entire section. And you can double click right here if you want to. And maybe I can move it like so.

Hear something like that. And what I want to write in right here is living room. So double click on the text and type in blue. And because we cannot see it, maybe we can make it white. So jump right here, and you can now see it a bit better. Now what we need for the second one is wrong combination number two, drag and drop it inside limiter like it is.

Double click right here and type in bedroom, like so. Make sure it's white. And finally for this third one. At selected, jump into our folder room committee. One three, select drag and drop it inside. And as before, you will need to move it just a bit so that you're able to change the look of this text.

And we're going to right in kitchen for this one, make sure to put it back in to its position, like so. Shift one to 20 pixels this way. And if we jump in a bit closer, it didn't change the color of the text for some reason. But you can change it like this. Or when selected, simply apply white to it. And then jump back and I want to position it 20 pixels.

So shift one, two, and close this section because it's completed. And finally, what we want to include is our process. So we want to include one background image right here to act as a placeholder for the video. That's this image. So simply drag and drop it inside. And you can double click inside and hold shift and reposition it a bit better.

I'm going to place it somewhere around here, click outside, and they are going to be able to click inside and see that that is a video, they can click right here to play the video in full screen or click read more, which will take them to About Us page, which will explain their process in a lot more details if they want to read. So basically that's it for the home screen. You saw we included one new color, we included some different shadows, we included images, and I showed you how you can include both JPG as well as PNG images. And we change some colors of the text around and we make everything nice and clear and everything now looks a lot better than it used to when it was just a wireframe with some empty rectangles. In the next video we are going to move on to category screen and I'm going to show How you can include sofas right here.

And we're going to change the sofa names right here at the top. So I'll see you there.