Let's now move on to the next screen, which is the order details. And what we want to do is select this navbar Ctrl C to copy it Ctrl V right here, right click guides, copy guides and right click guides, paste guides, same liquid in all the other screens. Next up what we want is some text analytics quickly find the text that I want. Or maybe we can just select this one. So product name and one line of text Ctrl C. Paste it right here. And what we want to do is position this like so.

And right here we are going to write in total. And for here, we're going to writing order details like so. And I'm going to position total right here or the details as it is and place them 1234 pixels down. Next up, we're going to create three different cards and a button down below because we want to display what's added inside of our card. And these are our order details. So first things first, let's create the card.

So I'm going to quickly draw a rectangle, remove the border. Use the same color for all of these. So it's this one. And let's give it a corner radius of five and use 3351 for the seven for this and I'm going to round it up. So move it right here 1234 and give it 40 pixels. So nice big gap right here.

Next up, what we want is to create an image inside so I'm going to hit Ctrl D. to duplicate this one. I'm going to make it white. Just simply scale it down a bit. Maybe use dimensions of 140 with, let's say one to two, something like that. And we're going to make it like this in the middle and position it may be 10 pixels from the left. Now what we need to create a right here is the name, price and amount.

So I'm going to simply select these ones Ctrl D, to duplicate them, and then move them right below. Jump into my Layers panel just so I can see what I'm doing. I'm going to move these two down. And we're going to start order these in just a second. But let's first quickly create a name, which will be the name of our product. This is going to be the price sold to us 24 for example.

And finally right here below, we're going to create a simple frame with the number inside as well as the arrow. So I'm going to use one and what when is a down arrow. So we can jump right here, select the down arrow Ctrl C, jump back in Ctrl V to paste it in, and we can position them in the same height, so like this. And what we need to create right now is this frame. And to do that, it's really going to be a simple frame. So let's use a rectangle tool and create a simple frame with no fill just border color and border color, we can use this color right here.

Now for the frame, we can use for example 30 by 30. Something like this are nice and big. And we're going to make two frames, so Ctrl D, and make sure they overlap right here, so not like this side by side but so they overlap and we don't see this line right here. So I'm going to position these two in the middle, like so. Position the arrow right Hear and position the number right here in the middle. So what we have right here is we have the name of the product, we have the price of the product, and we have the amount.

So they can click right here and choose. So this is good. For example, as explained in the printable wireframes video, if they want to choose for chairs, for example, they can do it from here. If they want, for example, to buy vases, maybe they want six if they want ashtrays, and smaller items, they can pick whichever amount they want. So when they click this arrow, pop up dialog will pop up and then they'll be able to select as many items as they want. So let's quickly order these ones.

So let's choose frame. Right the same right here. And let's quickly order these so we need these to be right here. One above this one and we need our Down Arrow This one, so Ctrl G to group them, and maybe we can write in amount. Next up, we need price which will go above and we need the name which will go above, we're going to move them all the way down. So what we have right here is the image.

And finally card VG so that we can know which layer is which. Next up, we can select these ones, make them aligned to the left, and maybe we can play around with some spacing. So let's position it like so until they meet right here 10 pixels and do the same for this bottom part. So like here, 10 pixels as well select all them Ctrl G and select the BG and select it and simply position it in the middle ungroup these and what we want is to align them with the writer Have the image and simply hit 1234, or maybe even two, it's good enough for now. So, as I explained in the previous videos, this is just a wireframe. So you can edit all of these elements up as you go along as you add images.

Sometimes if there are drop shadows, you have to increase the spacings and then go back and increase the other ones. But because we created a steady spacing structure, so we have usually 1020, or maybe 40 pixels in between elements, it's really easy for you to then jump back and reposition them if needed. So let's quickly group all of these up and Ctrl G, and call it card one for example. Next up, I want to order some of these. So we have status bar at the top nav bar just below all the details total. We have card one, control D and control D once again.

So I'm going to move these two a bit down until they meet right Here, shift One, two, so 20 pixels, call this card two. And finally, for this third one, do the same, one, two. And what we need finally is a button. So we're going to use this button Ctrl C Ctrl V right here. And what we're going to write right here is proceeds to payment. Because if the users are happy with their selection, they're going to proceed to payment.

And then on the next screen, they're going to choose their payment options. So it's either credit card or PayPal, and that's the screen that we're going to design next. So I'll see you there.