Now let's move on to the category screen. Let's zoom in a bit closer. On this first one, let's call it Lisbon. And change the price two to four to nine, because it's going to go from the most expensive to the cheapest down below. On this second one, let's call it wrong. And it's going to be two for 10.

This one is going to be Paris. And on the price, it's going to be 1368. Next up we have Leon. So Leone and for the price, it's going to be 1219. Next up, we're going to include the name of Moscow and for the price 1187. And finally, for this last one, let's see Close to Prague and the price will be 1090.

Next up, let's go ahead and include our images inside. So jump back to your images folder, go inside sofas. So for the sofa number one, jump inside and drag and drop it like we did with the previous images. So what you want is to include it and reduce its size and locate it number one, drag and drop it inside this folder and position it just above the image background. You can zoom in a bit closer, you can reduce the size to roughly around here. Make sure it's in the middle.

And you can select these two and position it in the middle if you want to. But you can also move it to the bottom of your image placeholder like so press 1234 and put it 40 pixels from the bottom edge, maybe even 50 because that looks a lot better. Next up, we're going to include the second one, so you can click right here. Go inside your folder, jump and paste in the second one, hold Shift until you reduce its size. And you can also do this, you can make a test example. And if you're doing this in Photoshop like I did, so removing these outside aligns and removing the background from your images, and you can do this in Photoshop and you can make sure that they are both on the same size.

So once you're inside Adobe XD and you start changing things, and you want to include these images inside of these placeholders, they will already be at the exact same size they need to so it will reduce your way In time, and it will improve your speed a lot more. So that you can work a lot faster when you have this exact dimensions of these sofas In our example, but I like to work this way because as you're going to see, and you can see right here, not all of them are exactly the same size. So that's a big factor, because if they work exactly the same look and size, so for example, all of them are like this, then that method is going to work a lot better, because when they are all the same size, you can apply that technique but when they are not like they're not in our case, then you're simply going to be left with some really weird results.

But if they are the same size, then you are all set and you can work that way if you want to. So if for some reason it's best to have them and you're going to see these bugs in Adobe XD from time to time, but just Don't pay attention to them and make sure you know what you are doing. Because when you make a mistake, you can easily correct it because you know where you made that mistake. And you can jump back at any point and simply correct it. So let's jump in and include our sofa number four. So as I mentioned before, as you can see, all of them are different dimensions, all of them are different shapes.

So that's why I like to work this way. It's a lot more time consuming, obviously, as you can see, but this way, you can make sure that all of them are positioned where they should add in exactly the same location. And because some of them are taller, some of them are wider than the rest of them. Then for the positioning, just make sure you eyeball it and you do a rough position according to the previous ones, because for the first one if you remember we put it 50 pixels from The bottom edge because it was a bit narrow this image and these other ones are a bit taller. So you have to just compensate and make them 12345. For example, as you can see, it's a lot taller than this one and as well as this one, so maybe put it 40 pixels down, just so that you can roughly make them the same exact dimensions from here to here on all of them.

And finally, let's include the sixth image. So jumping right here, on zoom a bit and include soft number six, so I'm going to position it roughly around here. And just make sure you reduce its size, same like we did with all of the other ones. Position it roughly around here and just reduce the size even more. And this is what I was talking about. As you can see this one is a lot taller than this one, but just make sure you position To the roughly the same space as this one.

And that's it for this screen. Now let's quickly move on and do search filters. Because there is only one change we want to make. Because we included these background shadows, we want to do the same for these materials and these circles. So first up for the materials, let's change the color of the frame and include this color. Now let's include the fill color to be white.

And finally, include the shadows same way like we did for all of them before. So click on the shadows, select the color, it's this one, and simply Reduce the opacity to 25%. And now we have a lot more coherent look than we did before and we have the same shadow on all of them. And finally, you can do the same for these dots. So let's jump into our Layers panel. So for these circles, Let's do the same, let's include the shadow.

So, five 510. And if you think it's a bit far, you can then reduce it to two, two, and maybe five. And now it's a lot closer and it looks a lot nicer. jump inside the shadow and go back to your assets panel. So you can select the same color as for the rest of them. So like this, make sure it's on 25%.

And what we can do now is when it's selected, right click, copy, select this one, right click paste appearance, and that will make them look exactly the same as the rest of our design. As you can see, it looks a lot nicer and more importantly, it looks a lot more coherent with the rest of our design. In the next video, we're going to jump in and design a room combination screen. So I'll see you there