And I want to try and remain consistent and use this gray for my image fills so that I can easily recognize when I have an image placeholder. And for fill, I'm going to come up and maybe select a gray, turn it down a little bit. I can hover over the top corner and it's going to pin everything and snap to these alignment guides. So if I was to drag out a new rectangle shape, I'll come to the Rectangle tool or hit R on my keyboard. So with all of these guides in place, it allows me to precisely position shapes. So I want to look for the pink measurements on the left, and that's going to give me the relative positioning of my guide.

And when I drag this, you can see, I actually set that 400 pixels from the top of the page. So to do that, I'm going to pull down a guide from the top and I'm going to set it about 400 pixels down from the bottom navigation. This is the main image with a main call to action that you can see in the design. Now, we want to start by building out the hero section layout. So I can do that on the left side and I'll come over to the right side and place one there as well. Maybe we'll go to 40 pixels inside, and this is going to allow me to place content.Īnd you'll see that as I drag these, I get relative measurements in pink. So I'm going to start by just creating some simple guides here. And to pull up a guide, you can just hover over the side of an artboard and drag it in. So guides are really helpful for placing things precisely.

It has some basic navigation blocked out, as well as some guides.

This is the first artboard that you're going to see when you open up the practice file. So in XD here, I'm going to start on the wireframe artboard. So in this first step, we're going to set up our page and this is going to include setting up an artboard, setting up some guides, and starting some basic wireframe blocking of the page layout so that we can get an understanding of where everything will go in the page.

Adobe xd web design