From the course: Prototyping a WordPress Project in Adobe XD

Layout sections with labels

From the course: Prototyping a WordPress Project in Adobe XD

Start my 1-month free trial

Layout sections with labels

“

- [Instructor] At this point in the project we've organized most of the basic elements and it's really time to get started building the actual prototype. What I like to do at this point is I like to create a skeleton of the website by outlining all of the pages and labeling all of the various parts of my prototype. I usually start off by building the small version first, you always want to build multiple first, and then we'll tackle the full size version using the same steps a little bit later on. Before I actually do this I wanted to point out another organizational tip. As you can see here's my site map and I've put a big label as to the name of what this section is. I like to do this because when I'm really zoomed out I can see you right away that this is the site map section. I'm going to make a copy of this site map label, by option or alt dragging, and then I'm going to change the name to say Mobile Wire Frames. This is going to label this section of my page. I'm also going to grab all of these elements and just kind of drag them over there to the right of the site map. We'll take the label with us as well. And I need to bring this comment as to the Carousel section that we have identified in our wireframes previously. All right, now I'm ready to start making my blank prototypes. I'm going to do that by using the artboard tool, and if you're using the artboard tool you can see that Adobe XD has a bunch of presets for commonly used artboard sizes. You can always make your own custom artboard size by simply click + hold and dragging, and then if you want to numerically plug in values, you can set the width and height accordingly. Or if you want to use presets you would simply click on the preset and it'll make a new artboard. Now this artboard that I've just made is going to appear over here to the left of the wire frames. Remember this is going to be a prototype for all the pages that I've identified in my site map. I'll zoom in a little bit here and we'll go over to this new artboard and then we'll change the name of this to Home Mobile. Now I'm just going to simply make some copies of this which will represent the additional pages that I'm going to be building for my website. I'm going to space these artboards out about 50 pixels and we'll change the name of this one to About Mobile, and then I'll quickly build out the rest of the artboards. I can shift + click on both of these and drag out two or more at a time. The names of these are coming right from my site map, so the next one that we have is going to be Blog, and then Contact, and so on and so forth. By laying out this blank prototype I can really get a feel of the scope of the project. This stuff is basically taking the site map and transferring it into separate artboards for each page, as well as labeling each artboard so that I can be assured that my project is organized. In addition to being able to see the scope of the project, I'm also assured that I'm not going to inadvertently forget to build out a specific page and or section. Once I've set up all the page prototypes I'm going to again label this section, and this will just be Mobile Website. And now I'm ready to go and I'm ready to start prototyping. I like to do this if I'm working on a project by keeping everything in the same document. This is great because I can easily reference any of the other files, and sometimes I may even want to copy things from my wireframe, or get additional information for my sight map. Having everything in one repository is really convenient, and I think that it will serve you well as you build websites in XD.

Contents