2.2 Designing the Landing Page

[MUSIC] We're going to jump on to the next part of the stream now. And we're going to do the fun bit, the really fun bit, the design, I think it's the fun bit anyway. So what I'm going to do is just drag this art board over here and I'll change the name of this, that was very uncreative of me. I'll change that to wireframe. And the same with art boards, you can go Edit, Copy Paste, Duplicate. Or you can just drag an art board, holding Alt and Shift will keep it in line. And we'll just pop that right in the middle. And I'm going to call this Super Awesome Landing Page Design. There we go. That's a little bit better. And we're going to start actually making this look as cool as we can. So this is what we're going to be creating over on the left. [MUSIC] And we're going to start adding some life to this. So we've got our links at the top. So I could double-click and go in and start adding the text for these. So I'm just double-clicking and changing each one. And, of course, on your product that you might be designing, there's going to be different text in here. Now, of course, you can see the text is all collided with each other. But we can adjust that spacing. Now, for me personally, I can see what the repeat grid group is trying to do, it's spacing them all consistently apart from the center point of each bit of text. But I want the space between each link to be consistent. So for me personally, I like a bit more manual control over this. So I'm gonna bring this in, and just Ungroup Grid. So I can do that from the right. So it keeps all the content you've created with the repeat grid group, but it just ungroups it so they're now separate items. So that's quite a clever way actually, if you need to create multiple items, you can repeat grid group them all and then just ungroup them and tweak them individually as you need to. [MUSIC] So we're just going to call that About and Contact. And again, going back to using Shift and the arrow keys, I would like to have, let's say 80 pixels between all of these. So I could just nudge those into position so they touch. Hold Shift and use the right arrow key eight times. So one, two, three, four, one, two, three, four. And I know that this distance is pretty much 80 pixels. [MUSIC] And we can do the same again for the next bit of text. [MUSIC] Even if the distance says slightly otherwise, it's measured from the bounding box. [MUSIC] And the bounding box is that box around the text. So whilst XD providing measurements is incredibly helpful, personally I always like to trust my eye. But now I'm just going to close the gaps, so maybe drop that, let's drop that down to 60. So I'm just holding Shift and multiple selecting these items. And with Shift still held, using that left arrow key to nudge those in. [MUSIC] And I can drag over these. Now I've selected the background, that hero image by mistake. So if I just hold Shift and left-click that, it will deselect that. So just these five links are selected. I'm going to group these together because I really don't want to have to go through spacing them all out again. And now they're grouped, I can move them around. And from the Layers panel, I can even click on this group and just call this, well, I'll call this Navigation. So I can give these names. And naming your layers will be helpful when exporting as well, but we'll cover that in a moment. [MUSIC] So I can move this over here. Now, we've got these placeholders for our social links. That's going to be Facebook and Twitter, [MUSIC] And we'll just grab those. [MUSIC] Now these are vector graphics that have been copy and pasted straight from Illustrator, which is brilliant because you can see they hold their fill color. So what we can do is we can just go and make those white, and we can edit all of that within XD. So super cool and I'm going to hold Shift and scale them down. If I don't hold Shift, it'll do this, which will look a bit rubbish I think. So it will scale those down, [MUSIC] And just position them over here. Now, we are still using Helvetica as the font. So actually I'm just going to double-click to go inside this group, which is our Navigation. And I can select all of the layers holding Shift here from the layers panel, and I'm going to change the font. Now the font I'm using for this particular design is Source Sans Pro. So we'll change the font. And that is 20-point. And Semi-Bold is the weight. I've got all my notes in front of me. I'm very organized today, it's good. And we've got the Facebook and Twitter link. So we can just drag this over here, check that things line up. Use those arrow keys to shuffle things around. And again, between the word Contact and the Facebook logo, I'm going to go one, two, three, four, five, six, just for consistent spacing. [MUSIC] And I could space this Twitter logo miles over here, but I think I'm just gonna have a slightly smaller gap. So we'll go with 30 pixels, so half that distance. And what I can do as well is I can give these a name from the layers panel. And we've got Twitter, so Path 188. I think we can do a little bit better than that, and it's just a lot more helpful to name your layers. But when you export assets from XD as well, it will name your assets the same name as your layers or your groups. So when we export the assets for a developer, a developer would, in my opinion, much prefer to receive assets that are called Facebook icon, Twitter icon rather than Path 188, which doesn't really. So it's just helping make that process from design through to development a lot easier and a bit more streamlined as well. [MUSIC] And in fact, let's go and ungroup all of these. And we'll just include, [MUSIC] Our Twitter and Facebook logo within that group, because they are part of the navigation as well. [MUSIC] There we go, so that's at the top now. Navigation, also just a side note, remember to save your document often. [LAUGH] So many people message me and say I've lost my document if something went wrong or whatever, and I don't know what to do. Just Cmd or Ctrl+S, it's definitely a useful shortcut to remember. Okay, so we have LOGO here. Again, this is just a logo that I've added in. It's not very creative but you could copy and paste something from Illustrator straight into XD. Or you could create your own logo in XD if you wanted. It depends on if you're working on a wireframe or a prototype or a finished piece of design. And we'll make this, let's go with Bold. And, of course, the name of this fictional piece is Candipop. [LAUGH] I don't know where that came from, I really don't know, the creative depths of my mind. Now even though we can't see our responsive guide, it is trying to snap to it I think. So that's really helpful, even thought it's hidden under the other layers, Adobe XD still recognizes it. As a thing, and snaps to it when we kind of hover near it. And we can type some text here, so let's go for, make it pop. Use color. I'm not a copywriter. [LAUGH] So again, Source Sans Pro. And I think the weight of this is bold. Now, you'll notice that we're creating lots of different fonts here. And what I'm about to show you now is pretty awesome and it's something that's recently been added to XD and I absolutely love it. Let me just finish styling this text, so let's decrease the line spacing also and its leading. We'll set that to, let's go for something like 64, so you can see adjust the space between those lines. And if we open the symbols power from the bottom left we've something called Character Styles. And we can click the plus icon and it will add the currently selected piece of text as a character style. So you can see there the font Source Sans Pro, bold, 60 point is now added. And I'm gonna show you in a little bit why that's awesome. So we've got some smaller text here. Source Sans Pro, and the smaller text is 17, okay, brilliant. So we're going to use this same text size again. So we're just going to add that as well. And actually, if we double-click on navigation and go inside, we've got Source Sans Pro, 20, semi-bold. We're going to add this. So as we are creating these different fonts, we're going to add them to the character styles. Because it will give us the flexibility to quickly and easily update fonts further in the stream. Now, I'm not going to worry about Candipop, I'm going to pretend that is a logo, a beautifully designed vector logo of some description. [MUSIC] And we can move this down. Yeah, so this is all coming together nicely. The button text is the same font as our link as well. So we can just select that text on the art board, and click. No, it's a different font. It's ever so slightly different. Let me just check. [MUSIC] I think it might be 20. [MUSIC] Let's try that. So I could make it 18 point, but because I've already got 120 and 117, adding another font size just in-between those two, for me is just unnecessary. So as I said at the beginning, I tried to have as few fonts as possible, but enough that I need. You don't need to have just two fonts, but you don't need to have 12 different fonts as well. So it's kind of finding a balance somewhere between them. So let's look at the font. I've made a note somewhere. [MUSIC] Let's go with semi bold and we'll keep that at 20. [MUSIC] So this is the same font here, so if I then right-click on this font in the character styles and go edit. Watch this, it will update every instance of this font whether I change the color, if I change the size, [MUSIC] Which might not be that impressive on one page. However if you think that this XD document could have up to 10, 20 pages or it could be an app, and you need to change the color of something or the font size, just one point, you can literally do it in seconds. If you take these steps in the beginning, rather than having to go through and update every single piece of text by like, one pixel. Or change all of the blue text to a very different slightly shade of, a slightly different shade of blue. Which is very, takes a lot of time and is quite pain staking and I've done it before many times. So this is a really awesome way of saving time in XD. So you can see here, I've done the same with the colors I've already sampled these colors from the finished design. And if I just hover over these you'll be able to see the six digit color reference. So you can always pause the video or pause the stream, make a note of those, and I can then right-click these or just left-click and apply as fill or a border, or edit the color. So it will apply this as fill. That's the wrong color, Dan [LAUGH]. There we go, so the button is going to be this kind of a reddy, salmony color. And we'll type the text, get started. [MUSIC] And we're going to center this and center it within the button. And I'm going to select the button and add a corner radius of 4 on the right hand side. So you can see it just rounds off those corners a little bit. But of course, you could add as much of a radius as you like, depending on the button style that you're going for. [MUSIC] And I've got these swatches pre-created. The way you do this is you just simply add some color, select an object, click the plus symbol, and it will add that color swatch to your colors library over here. As you can see, I'm trying to add the same one again and I've already got that there. So it's not gonna let me add the same one twice, but I can go through and now this is where it gets really cool. And I can select this text, I could pick a color and I could pick the font. [MUSIC] So I picked the font. The font is white but then I can just add my own color to it. [MUSIC]. So we'll add this to the repeat grid group as well. [MUSIC]. So super quick. I've just realized that I actually missed out the titles, but that's fine, we can just bring that down. Let's go and add Source Sans Pro and it's 36 in size. [MUSIC] And the text is, learn more about our tasty treats. [MUSIC] Goodness me, what awful spelling. [MUSIC] So there we go, there is our text. And I've actually sampled a slightly lighter gray here as well. So the title is a bit bolder, stands out more. And that subtext is a little bit more set back. And we can drag this holding Alt. And there's one more size I got on my list which is 24 and again semi bold, it's the font weight and the text is Crazy Candy. Now, I could go through and use the repeat great group again. But because I'm going to be adding different color to all of this, I'm just going to hold Alt and Shift and left-click and drag, to drag those out. And if I just select all three of those bits of text holding Shift, I can space them equally apart here by distributing horizontally. And you'll see it just shuffles those into position. Now, we can go and grab the icons. Come on, let's go and make this look a bit awesome. So we got these icons here, we're gonna drag these onto the app board. They're a bit larger at the moment, so we can hold Shift and scale down from one of the corners to reduce the size. [MUSIC] And position those like so, and again use the same alignment techniques to align the spacing, [MUSIC] And align them all horizontally. Now because of the weird and wonderful shapes of all of these different objects, I'm going to actually adjust them manually. So the spacing looks correct the eye, even though technically the bounding boxes outside the graphics are spaced correctly, this requires a little bit of work by eye just to actually space them correctly if I make sense. [MUSIC] And I'm going to add a bit of life to this section as well. So with the crazy candy text selected, I'm gonna use the eyedropper tool and you can see it zooms in there and I'm gonna sample a a color for the piece of text so we go for something distinctive here. [MUSIC] Next we've got Luscious Lollies, how do you spell lollies, I think it might be I E S. Let's go with that Luscious Lollies and Super Sweets. So again I'm just gonna zoom in now so you can see, by using the eye dropper tool to sample a full color from these graphics. So it just helps kind of not only make this a bit more visual, but just create a link between the subheader text and the graphic bit it relates to. [MUSIC] And it's background is still grey as well it's a bit grey and horrible so we're just going to go with white. We're gonna lighten this up a little bit and make it a bit more easier on the eyes. [MUSIC] Now each of these I'm going to actually un-group this repeat grid group. I'm happy with everything and how it's looking, [MUSIC] At the moment nope, before I do that I'm just going to double-click and go in and just hold Alt and drag that in. So again another good use of the repeat grid group tool, [MUSIC] Because before, these were all a bit too close together, and by bringing that in, it runs over four lines, but it just creates a little bit more of a gap between each of the three objects. [MUSIC] And now I'm happy, I can ungroup that grid, and what that does, is it lets me select each of these three columns of content and group them individually. [MUSIC] So they're all grouped together now and of course I can go into the layers panel and type crazy candy and name all my layers. So everything is nice and organized which makes it a lot easier when you come to explore things. And now I can actually move these up together just so that spacing top and bottom is consistent. [MUSIC] So let's just go and move this up, so it's a little bit more central. Fantastic, and we can get rid of this big ugly circle with a big cross to it terrible job there done, I'm going to start adding an image. So we have our image somewhere over here on the left. And what I'm going to do is, with the image selected here, let's just position it roughly where it's going to go. [MUSIC] Something like this, now of course, if you were doing this for a live project, you might take the image into Photoshop, size it up, and do any retouching there and go to file import and drop it into XD. But, because we are doing a kind of wireframe prototype, I can cheat this very quickly which is good enough for a prototype. The image here is shot on a yellow background, which is a fairly consistent yellow. So I can't actually cheat this as well. So I've got the image exactly where it's going to be, [MUSIC] And I can hold Shift and select this whole big gray head area. And then right click and select, [MUSIC] Nothing because it's not there. It's up here, Object, and Mask with Shape and you've got the short cut command there. [MUSIC] And what it will do is, it will crop this image within the shape. [MUSIC] So if I move this around, you can see it's still got that bounding box, it's just using that shape as a mask. And you can see it's listed as mask group here. [MUSIC] So something I can do now is with the rectangle tool, I'm going to add another rectangle, [MUSIC] With the same dimensions. [MUSIC] So we got 800 pixels wide or high and 1300 high. And we'll deselect that border and we'll add a fill color. And it's a fill color of yellow to match this same color here. So we can use the eye dropper tool to sample this yellow, [MUSIC] And of course I'm going to need to send this to the back. [MUSIC] And then just drag it in front of the responsive grid. So it's pretty seamless because of the image I carefully selected it with a solid color. But of course if you were doing a live project, you might just drop your image behind to fill up the entire header. Or you might take into Photoshop and do this kind of retouching, adding color and everything to fit around the design fill header. So a lot of headers, you might have a navigation bar, or something similar. [MUSIC] So something like this, which is an entirely possible other option. But for this particular design, we've just gone with an open nav, so the kind of text, the logo, the links, everything sits on top of the color of the image. [MUSIC]. So that's just the kind of style we've gone for in this one, I'm going to group all of these together. In fact, we can group the button and the text. [MUSIC] And just give this a name as well, and then group the title and the subtext. [MUSIC] So we're starting to group elements as we finish them and we can just move them around which speeds up that entire process. And if we do need to edit it, one element in particular, we can go in and group it. [MUSIC] Or we could just double-click to go inside the group, select what we want, and then click anywhere outside to come out of it. [MUSIC] Well, I think they're looking pretty close, so it's going well. So the last section. Again, I missed off the title, [LAUGH] But it doesn't matter we can add in a title. And in fact, the title is exactly the same font properties as this one. I could copy this down here, but I'm going to do it something slightly different so you can see the real benefit to the character styles. So if I type sign up to a newsletter, [MUSIC] And it's added that in good old Helvetica. From the symbols panel I can just pick, well let me just add this to the Character Styles first. So there we go, we have that Subtitle there. And I can then pick this, and it adds it to that same one. [MUSIC] And I can position this in the center. [MUSIC] And let's go and have a look at the style of the bottom so we've got white boxes. Now, I've got my button here, but I'm just going to remove this, [MUSIC] And grab this button from over here, [MUSIC] And just paste that down there. And if the text was the same, I could add this button as a symbol as well so by doing this, but it's slightly different. So I want the flexibility to change the text, Or if I do need to shorten the button or anything, I can do that without affecting the other things. So the symbols are great for things that are going to be consistent and not change necessarily. Things like icons, that kinda stuff. So if you're doing a mobile app, for example, and you have the home icon, which is three lines, please add that as a symbol at the start. Because when you've got 30 app screens and you need to change it to four lines, you can do it in a few clicks rather than a few hours. [LAUGH] So a little tip there. You'll thank me later. So we've got a repeat grid group here. I'm totally fine keeping this the same. But I will go in, double-click, and add a four pixel radius so we're being consistent with how we treat our text fields and our buttons. [MUSIC] And something that's also quite useful is you can hold down Cmd or Ctrl and click an object, and you can edit it without actually having to go into the group. [MUSIC] So I don't have to double-click, I don't have to ungroup, I can just hold down Cmd or Ctrl and select an object and I can almost go straight through that barrier of a group and just select it directly. So there's lots of different ways to make selections of group to content. And what have we got? Did I set a font for this? I don't think I did. So of course, you can add these different font styles here, but I'm just gonna go here. [MUSIC] And type Source Sans Pro, and let's just check my notes. I think we're at 17. Now let's go for 20. Let's just use the same one here. We're just going to change the color. So there we go. We've got that in bold. [MUSIC] Or semi-bold. So we've got our fields, and now we can grab our button and our repeat grid group, and we can group this all together. And now it's all grouped. We can just hit the horizontal align center option, and it will just position that on the page. So for me, personally, as I like to go through a design, the alignment options is something I just hit every now and then just to be sure that everything is precisely in the center. Because, if you haven't realized, I'm a little bit of a stickler for the detail. I'm obsessed with the detail [LAUGH], so we'll go through again, Source Sans Pro. And in fact, we've got that same yellow color. So I've added this as a color earlier. But let me just quickly show you how this works with another color. So we've got this bright blue, and I can add that as a swatch. And if I right-click and select Edit, I can change this and it will update. So if I did want to change the button color from this kind of red salmon color, I can edit it to anything and I can see in real time exactly how it's going to update across not just this screen but every other screen that I have within the design. And we can right-click and delete that. We don't really need that color. And that's a slightly lighter one. [MUSIC] Let's go and just lighten that up from the color picker. There we go, something like this. In fact, I may even just sample that from the existing design. And the color for that is #F2F6F8. [MUSIC] So the reason I've gone with this color specifically is because it's incredibly light. So it still keeps the overall section feeling light, not too kinda heavy, like a big medium gray would, but there's enough of a contrast to differentiate between these two sections. So you can clearly see one is white, and one is a lighter gray. [MUSIC] And I'm just gonna change, [MUSIC] The color of that, just so it's a little bit darker. [MUSIC] So this is very much just about fine tuning the detail. Now let's have a quick look. I think they're looking pretty similar. And we've got some text down here. So this says, get started and it needs to say sign up. So that's exactly why we couldn't have that one as a symbol. I'm gonna bring this in as well to the button. Use a little bit smaller. And now I've adjusted that. I can select the whole group again and just center that back within that section. And we can change the text links at the bottom to white. [MUSIC] And this one at the bottom, it says, Link, Link, Link, Link, Link. So this could be a repetition of the links in the top nav. You might have additional links that are only really suitable for the footer. So this section is pretty much done, but we can just drag this over here, and you can see where that guide is, that responsive guide we created at the start. So it's trying to help us snap and align with that. [MUSIC] Cool. [MUSIC] Yeah, I think they're looking pretty similar. And if you do want to go and adjust the hero image, the mask, you can double-click to go straight inside that. And we can adjust that crop so that, [MUSIC] So we can see it moving around in real time. But then we can just click anywhere outside and it immediately brings that masked crop back. This is the part where I just literally go over everything. Just check it's all looking good. I think it is. So once you've finished your design and you're happy with it, what you can do is then go to File > Export. Now I would love to show you how this works. Unfortunately, I was a bit too quick to upgrade to macOS High Sierra, the latest operating system, and that upgrade on Mac just kinda broke the Export option a little bit. However, I've prepped some screenshots, I'm just gonna go through it now. So when you go to File > Export in Adobe XD, you are presented with a screen like this. And you can choose whether you're exporting for web, which is what we have just done. We've done a landing page. You can choose iOS if you're doing an app, or Android. So depending on the platform you're designing for, you select the appropriate option here. And you can choose different formats for each one, so it might be PNG, JPEG, SVG, depending on what you're exporting. And you can select the size that it's designed at. So we designed this landing page at its native size to 1300 wide and 2000 high. So we would select 1x from here, and it would export that version. Now because we've selected the size that it was designed at, it will also go and export another version, and that would be 2x. So for people who are using retina displays on Mac, or a really high res 4k display, for example, these displays have a greater pixel density. And when this is coded up, they would see the the 2x version, which is effectively twice the size. It's a much higher quality crisper version for people using those displays with a higher pixel density. And this screenshot is quite an old screenshot. Of course, you can see it's older group 19, group three. The layers are all named horribly. However, in a recent XD update, these layers are all exported now with the layer names that you give them. So if you click on an art board and double-click to go inside. So all of these, if you want to have your group 34s and groups 33s, that's totally fine. But you could go through and name everything, so we'll call that Super Sweets. And then go inside that group and name everything in there. It just makes that process a lot easier. You can literally take the time to name everything in the XD document when you export it, everything is named 1x, 2x, 3x. Whatever you're designing for, and you can literally just bundle up and fire off to a developer. Thank you very much. And it's all done. You don't have to go through manually naming files which I've done far too much throughout my career. [LAUGH] Personally it's not something that I find especially fun. Something else that we're gonna quickly talk about is, you can share this online. So if this is an app, whether it's a website, whatever it is, you can select the art board. And you can also export an entire design actually as well, by selecting the art board rather than the contents on it. And if you go to file export, it will export this as a complete design. So one whole design rather than all of it individual assets. [MUSIC] So we can select this artboard, go to share, and you can add a title here for the project. You can add a little thumbnail if you like. You can choose whether to allow comments from people. So if you're working with clients, or stakeholders, or whoever, they can all add comments. And we can go and create the link. And this is probably more relevant if you've created a prototype, so you can switch over to prototype mode here. If you've got multiple screens, you can link them all together and what this does is it will, [MUSIC] Create that prototype and everything will be clickable. And you can then go, copy link, and hopefully, if you get that link in the chat, it should allow you to go straight there, and you can add some comments. And you'll be able to view the design. And if you make any changes, you can go share again and you can update that same link or create a new link, or select manage links. And you will be able to go and manage all of your different links or prototypes for this within a web browser with your Adobe account. Cool, brilliant. Thanks so much for your questions, guys. These live streams are always a ton of fun to do. And so I hope you've enjoyed the stream. We've gone from adding those responsive guide to the beginning to creating a wireframe. Trying to do that as quick as possible, just getting all of the elements that would be included on a potential brief just one the page. Not focusing on the creativity. So when we're presenting this to a client, a stakeholder, whoever, they're not focusing or commenting on the design. They're really just interested in the raw, functional product. Does the product work? This is the metaphor I always I love to use, is like this is a cake, the decoration of the cake is important but whether the cake tastes good and actually works as a recipe, that's the Y frame here. That is also equally important. So it's no good having a great looking cake, like this design over here, if the cake tastes terrible, which is the wireframe. So [LAUGH] apologies for the terrible metaphor, but I think it's a pretty good one. It's a Danski original. [LAUGH] Thank you so much, guys. It's been an absolute pleasure to be here. You guys have been awesome. Thank you to everyone in the chat and people who were asking questions. Yeah, as I say, if you'd like to download these images with an Envato Elements subscription, you can do them. They are linked in the description of this video. And yeah, have a fantastic evening, take care, and I will see you guys soon. Cheers. [MUSIC]