2.1 Wireframing the Landing Page

[MUSIC] Hello there, my name is Daniel White. Some of you guys know me as Dansky, I'm an instructor with Envatotuts+, and we're here with another live stream. Thank you guys so much for joining. Today we're going to be jumping into Adobe XD, and I'm super excited because, if you follow my content, we do a lot of stuff working with app design in XD. But this is a first, this is an exclusive first, we're going to be doing a full landing page design, all within Adobe XD. So we are going to break the live stream down to a few different sections. We're going to start by creating the art board and setting up some responsive guides. We're then going to Y frame the general layout and then we are going to finish it off by adding some graphics and just basically bringing it to life with a little bit of color. So you can see on screen the full design that we are going to be creating. And that is going to be the plan. And if you'd like to follow along with this, you can download all of the assets so you can see this hero image here. We have got some candy illustrations and a few social logos dotted around. But we'll go through all that but you can download them, they are linked in the description and you just need an Envato Element subscription to do so. But yeah, it's gonna be really, really cool, so hello to anybody in the chat, please if you have any questions, please do drop them in the chat. And at the end of the first section once we've done the Y frame, we'll stop, we'll do a little bit of Q&A, take some questions and then we'll move on and we'll do some questions at the end of the stream. So hopefully that sounds good, I'm super excited, I don't know if you can tell, I've had a lot of caffeine today. So we're going to start by looking at this example here. So this is going to be our landing page design. So we have a logo, this is a completely fictional landing page and it's called Candipop. And of course, it is all about candy, or sweets if you're from the UK. And there is just some placeholder text, Learn more about our tasty treats, they're all about candy. Sign up for our newsletter, and then the design finishes with a footer. So we're going to be doing all of this from scratch. And there's a few different assets here. So we've got those illustrations, we've got some social icons. These icons were copy and pasted straight from Adobe Illustrator into XD. And these illustrations here were imported, and we're just going to import that hero image by going to File and Import. So I've set up a folder here with all of these different assets. That's one of the useful things about XD, is if you have any vector graphics, so if you've designed your own logo, you can literally just copy and paste it from Illustrator straight into XD. You can also import things like PNG files with transparency. So there's a whole bunch of different suites here and I've imported some of those as you can see on screen. So we'll just import that hero image, you can see it's rather large. So just holding shift we're gonna scale this down from one of the corners, and we'll just gonna position this over here so we can adjust that in a moment. But we'll just keep all of those assets there so they are ready when we get to that stage. Cool, right, the first thing we're going to do is we're going to set up a new art board and create some responsive guides. Now at the moment there isn't a tool to set up guides within XD, but as I understand it's something that is going to be added in a very soon release. A very soon release, that doesn't make sense, a future release. So there is going to be that feature added which I'm quite excited for. So we're going to start by selecting the art board tool and just left click and drag, I do struggle with words sometimes. So I'm just going to create an art board, now it doesn't matter what size you create this art board, and we have some presets down here if you like to use those. But once you've created that art board, using the art board tool, we can just enter our own custom size up here in the property inspector. So, I'm just going to type 1300 wide, make sure that this is unlinked here so it doesn't lock the aspect ratio. And the height, it's always set at 2000 but I'm going to type 2000 in anyway. Now when I'm doing things like home pages and landing pages, personally I like to set the height to something like 5,000 or 10,000, just because it gives me lots of space to be creative. So I might try several different versions of a page or within one art board. That's just how I like to work personally, but in this instance I know that the design here is 2,000 pixels high, so we're going to work with that. And you can of course add a background color if you'd like. We've got lots of sections, so we'll leave this one for now. And last, you can't add guides just yet for a responsive grid. You can turn on the grid itself and you can set the pixel dimensions for the grid here. But we'll leave that off for now. So we've got our new art board, we can double click on the art board name and we'll call this live stream. That's so unoriginal, I do apologize. [LAUGH] That's the best I could come up with today. So this is our live stream art board, and we'll move this over here. So we'll just have this one as a reference of what we're creating. Now the first thing we're going to do is select the rectangle tool. I'm going to create some responsive guides, so we're just going to left click and drag and we're going to draw our column. Now there's going to be 12 columns, and each column is going to have a space in between, and that space is called a gutter. So to start with we'll deselect the boarder and we'll just, from the fill color picker, just give this the color black for now. And we'll set the width to 68 pixels. And if we zoom in there, with this column selected we can go ahead and select Edit, and Duplicate. And if we hold shift, we can drag out a copy of this column, and you'll see it nicely snaps in place there. And we'll change the width to 30. So let's just give this a slightly different color. So we have our column in black and we have our gutter, remember that's the space in between, set at 30. Now once you've done that, there's a nifty little trick in Adobe XD where you can select both of these, the column and the gutter, and on the right hand side you've got repeat grid. And if we click that, you'll see you get these green guides up here and this effectively turns it into a repeat grid group. And what that means is that we can drag out either horizontally from here or vertically from down here, and we can just pull this out and it will repeat everything that we've selected as a repeat grid group. So we need 12 columns, so let's just count these here. [MUSIC] So the first thing we're going to do is remove this space. So if you click in that white spaces, it's adding some extra space that we don't need. So let's just drag that down to 0 and then we can count the columns one, two, three, four, five, six, seven, eight, nine, 10, 11, 12, this is making my eyes go a bit funny [LAUGH]. And I am just going to zoom in really close with the zoom tool. And just make sure that I clip this, its got to be pixel perfect. [MUSIC] And if you'd like to learn how to zoom around in Adobe XD then you've got all of these different short cuts up here. So command or control, plus, command or control, minus, all very useful shortcuts to learn. Okay, so we have our 12 columns and each of those has a gutter space in between, we can just double-click to go back inside. Now if we make any changes in terms of color To the original column in the original gutter, it will apply to all of them. So I'm going to select the original gutter we created. And from the color picker I'm going to pick white, and you can see that, that updates in real time. So super handy, and to come out of the repeat grid group, that's a bit of a mouth full, [LAUGH] we just have to click anywhere on the art board and it will deselect that selection. And now what we can do, is just select the repeat grid group. And just up here, at the top of the property panel, we can align that centrally and horizontally. And you'll see it just snaps that right in the middle. So, nice bit of precision, there. Now we can just drag this up to the top, and it snaps in place. Now, as I said at the beginning, if you are working with a Art Board, that is 5,000, 10,000 pixels because you like that creative space. Then, we're going to want to drag this down. Of course when we do that it's going to have this gap in between the same as when we did the horizontal version. Again, just hover to that space, you'll get the pink guide's pop up and we'll just close that up, so left-click and drag to close that gap. Let's make sure that's exactly zero, You can zoom in if you need to, I think I need to. And we'll just close that up, so it's zero, so there we go, that to far, far too long. And because we've close that up to zero, we can just continue to drag this down to infinity and beyond to quote, Buzz Lightyear. Which I think I just did, yeah, I just didi do that. [LAUGH] But what we can do is we're not going to drag this to infinity and beyond. We're going to drag this just to the bottom of our Artboard, and it will snap in place. And essentially, we've just created a responsive guide. So that's one way around it until any future update adds the ability to add custom guides and layout grids and all that stuff. But at the moment, there's probably a bit too much contrast with this. It's going to make it quite hard to work with, so let's just select that repeat grid group. And from the Appearance panel on the right, we're going to bring that down. And personally, I like to set this somewhere between 2 and 5% so it's quite faint. So it doesn't interrupt me when I'm kind of working on the more creative aspect of a page design, but I can still just about see it. So my eye sights not too bad so we'll leave that at 2% for now and with it selected go to Object and Lock, just so I don't kind of accidentally move it around by mistake. And from the layers panel in the bottom left, we have our Repeat Grid group. Only thing we've got on the page. And we can double-click that layer, and we'll just call that Responsive Grid. And you can see it's locked, you can toggle that on and off, and you can hide and show it. [MUSIC] So let's just hide that layers panel, we don't really need that for the time being. So there we go, we've created our responses grid. The next thing we're going to focus on, is just getting all of the elements on the page. So if we just zoom in a little bit. [MUSIC] And what we're going to do is start, well, let's start with the logo placeholder, so with the text-tool we're going to left click anywhere. And I'm just going to type LOGO and just increase that font size. Something like this. [MUSIC] And, again, I could use the Type tool and I'm just going to type Link here. Now there's two different ways that you could do this. On a lot of websites you have however many links across the top, you might have four, five, six, seven, or eight. And you can use the Repeat Grid group, you can pull it out from the right, and adjust that spacing. A very quick way, if you're wireframing something, to create those links. In fact, we'll leave it like that, for now, just because it is so efficient. That's what we're doing, we're wireframing. We're just trying to get this layout together as quick as possible without getting too hung up on finessing the details, so, he says, aligning the links with the LOGO. I can't help it I'm a perfectionist, [LAUGH] okay, so we're going to have a hero image. We've got our big hero image here, now I happen to know that this hero image height is 800 pixels. So with the rectangle tool, I'm just going to draw a rectangle, deselect that border, and just give this a fill color. Now I'm not going to style this page in any way whilst we're working on the wireframe, we're just going to use lots of gray scale colors. And again, Adobe XD makes it incredibly easy just to drag things, snap these in place and I can go to Object > Arrange > Send Backwards, and it will send it behind, [MUSIC] Various objects on the Artboard, now, these shortcuts are definitely worth learning. So let's go through those now, well we're not gonna go through them, we can look at them on screen. But I'm going to be using these quite a lot, so if you see objects suddenly appearing in front of each other, or going behind one another, it's these shortcuts that I'm using. But I'll try and kind of explain what I'm doing as I go through it. It will save a lot of time, okay, so I can go into the property inspector on the right again and just type a specific set of dimensions so 800 pixels. [MUSIC] Okay and we've got that there. I'm just gonna make this a bit darker but still keep it gray, and I can go back in to these links. And I'm just going to make those Contrast a little bit as well. And then font I'm using is just the default font in XD which is Helvetica. [MUSIC] And what do we got next? So we've got some more text, so let's just go space for a title here. And I'm going to set this at 60, [MUSIC] And we'll just position that there. [MUSIC] Now I haven't actually got the Lorem Ipsum text at hand, so I'm just gonna grab this from the existing Artboard. But, essentially, it's just dummy text, so you can type whatever you like here. Or you can go online on Google and type in lorem ipsum generator, anything like that, that will just fill with some placeholder text. [MUSIC] So let's just quickly change that to Helvetica, so it is completely unstyled like the rest of our text. [MUSIC] And again, we're just going to give this a color, in fact, we'll go with white I think. [MUSIC] Just so you can see this against the gray, which is gonna be our hero image. And we're going to create a button, so we're going to use our rectangle tool. And just drag out a button, not worry too much about the sizing, but we will deselect that border. We'll leave the fillers white for now, and we're just going to add some more text. And it's just going to say, well we'll just call it Button for now. So when you're working on a live project, you might have some copy, some content, or a rough idea of what these links are going to be, or the logo, and you can add those in if you like. It depends kind of how you like to work. [MUSIC] So we'll just leave that as Button. The name of the game with this really is to just get all the elements on the page as quickly as possible. So we're gonna have an image over here. Now, we're going to create another section [LAUGH] which is entitled Learn More About Our Tasty Treats which is this one here. So we can grab this big gray block that we've created, and go to Edit > Duplicate, and just hold Shift and drag this down. And we'll pick another contrasting shade of gray. From the color picker. [MUSIC] And then what we're going to do is just hold Alt. So there's two different ways you could copy texts, you can go Edit, Copy and Paste. Actually there's three, Edit, Copy and Paste we have this duplicate feature here which is incredibly useful. Or like in a lot of other Adobe apps you can drag an item and if you hold down Alt. It will create a copy. So there is actually three different ways of copying objects in XD. And we are just going to bring the size of this down. So let's go for 36. And this is going to sit in the center. I am going to leave the text exactly the same. I am not going to worry about adding text just yet. But I'm gonna pick another shade of grey. In fact, I'm going to pick different shades of gray for various elements. But if I already have a suitable shade of gray, I'm just going to use the Eye Dropper tool and just use that same shade, unless I need to select another one. Just so we don't have 20 different shades of gray on the same prototype. And the same goes for fonts, in the finished design you are not gonna have hopefully 20 different fonts. And I'm ideally keeping them consistent and as fewer fonts as possible. It can help the design look a lot tidier or so. [MUSIC] And we all like a lovely, tidy design or I do anyway. So we have space for a title here, and I'm just going to drag that and hold Alt again to create a copy. Use the eye dropper tool and sample that color and just centrally align that. And if I just throw it out of center you can see again the benefit of using this alignment tools. We can just click on align center horizontal and it has a shortcut key that I haven't learned yet, so I'm definitely going to learn, because I use this all the time. [MUSIC] And one thing I am just going to talk about briefly is the type two. So if you left click, what it does is it will create something called point type. Which let's you just type, I'm gonna say to infinity and beyond, you can literally just keep typing and it will continue going forever. [MUSIC] Or you can left click and drag and it will create a container. So you've got point-type and container-type. And in container type, when you get to the end, your text will wrap onto the next line. So if you're gonna be adding titles, point type is pretty good. If you are using paragraphs of text, like a lot of the Lorem Ipsum, here, then container type is much more useful. And as you adjust the size of the container, the text wraps in real time. Incredibly smoothly, as well, which is very satisfying to look at. So this is central now. Now, I can adjust this form both sides. However, I've just gone from the time and effort of centering this text. So if I hold down again the Alt key, which is ever useful. And left click it will adjust that from both sides, which is really useful. So no need to go and recenter that text again. And I can just close up that container and send to the title as well, super, okay? So we have, over here, we have a little bit more text, that's place holder describing about these what if there are three different types of candy, Crazy Candy, Luscious Lollies and Super Sweets. So we're just going to add some more text under there. So, again, we're going to just hold Alt, and left-click and drag. Now, as we just looked at Container type, we need to have three of these running across here. So we're just going to adjust that container. Now, I've still got my responsive grid down here, even though as we're creating elements. We can't see the grid, you can if you need to, drag the responsive grid from the layers panel all the way to the top and it will appear over your design. The only problem is you might select it by mistake, because it's on top of a lot of stuff. So hopefully when there is a feature that allows kind of guides a layout tools, it'll be a lot more, a lot easier to do. But at the moment it's fine having it at the bottom, that's absolutely fine. And I can go and line these up down here. So I have got 12 columns, I've got 3 of these. So this piece of content here ideally needs to span 4 columns. So I could do this. [MUSIC] Just snap that in place. [MUSIC] And what we could do now is because the text is gonna be in the same format and we're just repeating it horizontally, again, we can use that awesome Repeat Grid Group tool. [MUSIC] And just drag this out to the right until it snaps in place. [MUSIC] And we can adjust the spacing if we need to. So I'm just gonna bring this in. [MUSIC] And centrally align it, so there we go. So that's a really quick way to line this up. I've got this space down here. And you can extend your art board if you need to, just so you can see those guides. So you can line stuff up at the bottom of the page where you can see the guides and just drag them up. Now, we've got the three illustrations here, but however we're focusing on the wire frame right now. So we're not gonna get hung up on the visual side of things. As tempted as I am to just drag them into design and start going crazy with color now. No, we're not going to, I'm going to restrain myself. However, we are going to add some circles or squares and use the Line tool to just draw a cross, effectively. [MUSIC] And I never like doing this, because it's very quick and rough, but again, that is the whole purpose of wire framing, really. And we'll just line that up like so. And again we can just quickly repeat that across. We only need three, so we don't need to drag this all the way out here, so we can just cut that off at three and then adjust that spacing. So we don't need to worry about everything being two aligned too properly, unless you are me, and then I have to spend the time making sure it's all perfect, but it doesn't matter. So there we go, so we've quickly done that other section. I will just drag this down a little bit. [MUSIC] And next what we're going to do is create another rectangle with the rectangle tool. [MUSIC] And add another shade of gray. Now, I've got the darker shade of gray up here. So I'm just going to sample that with the eye-dropper tool. [MUSIC] And drag this out. So again, we're not having like a thousand shades of gray. [MUSIC] I'm not gonna make a joke about any film references there. [LAUGH] I'm sure there's a good joke there somewhere. So, what's the height of this? I think I created this at 300. So again, I'm just going to type this in up here. For me personally, I like to try and work in multiples of ten. If I can, it just makes measurements and everything a lot easier. And I'm a bit of a stickler for the detail. But if you are moving and creating shapes in XD, select an object and use the up, down, left, right arrow keys. Every key press will move it one pixel, as you can see here. And Adobe XD is very kindly telling me this as well on the left. If you hold down Shift, and then use your arrow keys, it will move it ten pixels. So for example, if I wanted to create a ten pixel gap above this big gray block, I could just hold Shift, and use the down-arrow key. So I've got 10 pixels, 20 pixels, 30 pixels. So if you do have margins and things, it's a very good way, just using those arrows keys, to quickly create consistent space between objects. And lastly, we have our footer, which occupies the remaining space is that 100 pixels. I'm gonna guess and try and remember, yes, it's 100 pixels, excellent and we're going to eye drop that with the same grey. So you can see here, a lot of what we're doing is dark grey, light grey, dark grey, light grey. So I just kind of creating some contrast and of course you can fine tune those greys if you'd like, and if you'd like to save them just open up the color picker, click on the plus symbol and it will save that swatch to the color picker. So we'll just kind of throw a few swatches in there and then you've got them for reference later on. So what else have we got? In fact, we can, If we double click to go inside the repeat grid group, we could select the elements here from the original. Go to Edit, Copy. Just click out anywhere to get out of that and then we'll gonna paste this in on top [MUSIC] of our main hero image at the top. And it pains me to do this but there is going to be an image there so we're just kinda throw that circle with across there just so we know that there is going to be some kind of visual graphic added at a later point. And also we're going to have social icons so let me shuffle these links over here. And we can group all of these together so we can create this image placeholder, this circle with the cross, this object group and we can just keep a copy of that over here. In fact you can even add this as a symbol, which has probably been the smart thing to do at the beginning, but it's better late than never. So that's now a symbol. So if I need that, I can just drag this off. And the good thing is if I go and make any changes, so if I decide to actually, these lines are pretty terrible. You can see it will update all of them. So actually if I created this as a symbol in the first place, I could have just gone and correct that one line. They would all been symbols and it would have updated all single one. So that useful when you're creating your designs. Otherwise, I'd manually have to go back through and change all of this now which I'm not going to do for the purpose of this stream, but is useful tip to know, there's a lot of features in XD that are just designed to save you time and do exactly that. [MUSIC] Okay, I've broken something now. [MUSIC] Let's go in and change the size, now there we go, there we go. Let's go in and change that, there we go, make that nice and small. And these are going to be social icons so we've got Facebook and Twitter. And let's have a look on what else that we've got to add So we're gonna grab our button. So we're gonna hold Shift + Left-click on our button, and Left-click on the text on our button and just drag, holding Alt. As you can see again, it's gone behind, so I'm just gonna use the shortcut keys to bring that to the front. Object and arrange, very useful to learn. And I'm just going to select the button in the text and do the same again, so hold out and drag out to the left, now we're going to add two text fields here, one is going to say name, one is going to say email, so we're just going to lengthen this and type name over here. [MUSIC] And again, use that repeat grid group to just drag this out. So what this does is if I do make any formatting changes to this, it's just going to update them both. So it's just a much more efficient way of working. [MUSIC] And you can see that throughout this wire frame you've actually used the repeat grid group quite a few times. So whilst using it just once might save you a little bit of time, using it you know multiple times on one design, together with symbols, across an entire huge project can save you hours of time. [LAUGH] If it's a massive project, even days. So, and we can go in and we can change the text. We can change the content itself, but it's the styling that is consistent between repeat grid group items. Now, of course the button here does look a little out of place, so I'm just gonna go for a darker color so we've got a bit of contrast. [MUSIC] And I'm also going to reflect this on our button here. So we're just using the eye dropper tool. Or I could use the plus symbol from the color picker to add that as a swatch. And I can reorder these swatches or drag them off and it would just remove them altogether. So let's go ahead and color this up here. So I think the last thing we are going to add is our foote, which is pretty straightforward, we can just grab all these links for now. So we're gonna edit, copy and edit, paste, which paste in the same place and drag that down. All the way down to the bottom. And double click the repeat grid group. And we can just change all of those colors instantly. Now let's pick this color here. And we'll move those links over to the right. And we can just double click to go inside the repeat grid group again. And copy that first bit of text, come out of the repeat grid group, just by clicking anywhere and then paste that in. So I could jump into a repeat grid group, grab some objects or shapes that I need, copy them and then just come out and paste them. And when I paste them, they'll be outside of that repeat grid group. If I go into the repeat grid group and start creating shapes and things and pasting objects it will paste them within that group. Cool. Also this fictional design is called Candipop and don't ask where the name came from. [LAUGH] 2017. And depending on whether you are on Mac or PC you will have some kind of symbols or character panel and I just got the copyright symbol here. Although if you do struggle to find it, I'm sure it's something that you can find online by searching for a copyright symbol and it's added that in there, just give that a space, perfect, okay. So hopefully you can see that this part of the process is actually incredibly quick. We've gone through this and I've been talking through what I've been doing, but this would literally take minutes to create if this was a live project. So this is really the benefit and where XD shines is it's so snappy and responsive, but you can create wireframes like this and get these into the hands of people to test incredibly quickly. And using those shortcut keys just makes something that is already a pretty quick process even quicker.