So now just like that, we've started building out our wireframes section. This is going to be shorter and perhaps even a little bit darker, and we can take one of our text placeholders and just sub that in on the button for now. Let's go ahead and just create a call to action button. Maybe it's a longer string just like that. And this text is obviously going to have a shorter line height so we can reduce that a little bit.
We can then go in and even add a subheader. So let's just go ahead and match this so that we are consistent. Obviously we're using a slightly different contrast in that example, but however you want to set this up. Again, you can match it to this final version if you want. I like to use rounded rectangles when defining a header in wireframing, so we can set something up like this. So I'm probably going to want a slightly bigger text. And then I'm going to want a header here. This doesn't have to be precise, but I can simply copy this and paste it. You can see I've already set up some simple text blocking for the navigation and the logo and the button. So with that in place, we want to start adding in some text. 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.