By Howard Pinsky
Hey everyone, I'm Howard Pinsky. In this Adobe XD video, we're going to be taking a look at building out a simple landing page for your web experiences. Let's get to it.
All right, here we are, back in Adobe XD. And we are going to get started on the process of building out a simple landing page. And to start that process, we're going to go ahead and define our background colour. Right now, it's a very light blue. I'm thinking we're going to go very bold with this landing page. So in the Colour Picker, I'm going to switch it over to a radial gradient. And the colour on the outside is going to be a nice dark blue in this area here. And the middle will be a slightly lighter blue. I'm going to go ahead and pull on this handle here, so we have more of a circular gradient. And we'll leave it right about there. We'll see what that looks like.
Next up, we may want to start defining some of the navigation bar items and that will include a logo and a few links over to the right. And to make sure everything lines up really nicely, I'm going to go ahead and drag out some guides from the left-hand side. Let's go for around 140 pixels on the left and we'll do 140 on the right as well. Now, at the top right-hand corner, we may want to display our logo and there are a few ways to get logos and icons into XD. Of course, you can make one yourself. You can hop into your plugins at the bottom left-hand corner and install something like Icons 4 Design, which will allow you to search for something like a wallet. Or if you have your own icon libraries, I do have some Font Amazing icons loaded into Nucleo. I can type out: Wallet and I'll bring this one directly into XD. I'll shrink this down a little bit. And if I do know exact dimensions, I can hop into my Properties Inspector. Let's go ahead and set the height at about 48 pixels and I'll pop it on the left-hand side, right about here. All right, so our icon and logo is now in place.
Next up, we want to add some text layers over to the right. So with the Text tool, shortcut key T, I'm going to start with Markets. Now, in terms of the styling, we're going to go a little bit non-traditional with these text layers. And for these ones, we're going to be using the Reross typeface from Adobe Fonts. I'll set the size to about 26 pixels and the colour I'll set to white. And with one of our text layers now in place, what I want to do is go ahead and hop into my document assets and simply add this as a character style, so I can make changes to this later on if necessary. And now I may want three additional layers going across, and this is a great opportunity to use a Stack. So with this text layer selected, I'm going to go ahead and pop it into a group, Command or Control+G. I'll call this Links and then, over within the Properties Inspector, I'm going to enable a Stack which is going to define it as a Horizontal Stack. And this will allow me to dive into this group and duplicate with Command or Control+D. It's going to add another text layer over to the right. This one is going to say Trade. I'll duplicate another one. This one will be Swap. And then one more: Resources. At this point, these layers are way too close to each other. So with this whole group selected, over within the Properties Inspector, I can define the padding in between each of these layers. Let's try about 72 pixels. And that looks pretty good, right about there. And another benefit of using Stacks in a situation like this is, if you need it to swap the position, no pun intended, of these links, you can simply dive in and move them around.
All right. Now over to the right-hand side, we may want a simple Sign in button. So with the Rectangle tool, I'm going to draw one out. And since we're going very bold with our style, we're going to go ahead and choose a very vibrant colour right in this area here. That looks pretty interesting. And then on the inside, we may want some additional text with the Text tool, shortcut key T, I'm going to type out: Sign in. And the white text may be a little bit difficult to see on this button. So, I'll go ahead and grab my Eyedropper tool, shortcut key I and sample the blue in the background. And I'm thinking for this button, we may want to strive away from the Reross typeface. So I'm going to go ahead and choose Dunbar Low, which is another type face we're going to be using in this project. Medium looks pretty good for the weight. But I am going to space out the letters just a little bit. They're a little bit too crammed right now. And then pop this in the centre. And since I will be using this button on several artboards eventually, I'm going to go ahead and just select both of these layers and pop them into a component. That way, if I do need to make changes to all of my buttons, I just have to do it once. All right, so we have our top section looking pretty good. We have our button over to the right. We have our logo. We have some text layers, which... I'm just noticing now, Resources is spelt incorrectly. That's a bit better.
And now we can move on to some of the information down below. And we're going to start with our header text. So with the Text tool, shortcut key T, one more time, I'll go ahead and type out: Main Header Goes Here. Just some placeholder text for now. And styling-wise, I am liking Dunbar Low for this header, but I definitely want to change the colour to white. And then bump this up quite a bit. Let's try around 88. And I may even bump the weight up to about Bold. And since this header is nice and large, I may want to separate this onto two lines. So right now our text is defined as Auto Width. I'm going to switch it over to Auto Height and then bring this in until I have two nice lines. Now, you're noticing in this case that our line height is a little bit off. So I'll just go ahead and switch this over to around 80, possibly a little bit more than that. And then make sure to left align this text.
Next up, right down below, we may want some sub information. So I'll duplicate this text layer downwards and I'll go ahead and type out something like: Subheader about this service goes here. Again, placeholder for now. And as you can probably tell, this is way too large. So I'm going to start by dropping the size to around 40. Definitely want to adjust the line height as well. And let's go ahead and see what the Reross typeface looks like here. I think that can work. I'm going to pull out this just a little bit and then shift this down a touch.
All right. Now right below this header and sub information, we may want a few buttons or an area for a user to put in their email address. So I'm going to go ahead and grab the Rectangle tool, shortcut key R, drag one out... right to about here. And we're going to keep the rectangle shape at white. But I may want to add a little bit of a shadow just to separate it from the background a touch. So I'm going to bump it down to about 24, blur it about the same amount and then tweak the colour and opacity just a little bit. I can bump the opacity down, so it's nice and subtle. And if I want to, I can add in a little bit of blue in there, just to blend in with the background a touch. Great.
Now in the inside of the shape, we may want some text to let users know what this is. So with the Text tool, I'm going to type out: Email address. And I can switch back over to the Dunbar Low typeface and set the weight to Book and set the size to around 24 or 26. And since this will be going on top of this container, I'm going to go ahead and select one of these blues in the background. And if I feel it's a little bit too strong, I can always drop the opacity to about 50%. And then finally over to the left, we may want an email icon. So I'm going to hop back over to Nucleo. And again, you can do this in your Plugins panel as well. I'll type out: envelope. And I'm going to go ahead and find, let's say this one right over here. It's nice and simple. Make it a little bit smaller. Pop it over here to the left. And I may just sample this colour on the text layer. And that looks pretty good. Might be a little bit too close to the left-hand side. I'll just grab both of these and push them in, just a touch.
Next, over to the right, we may want a button so the user can join this waitlist. Now earlier when we created the Sign in button, we did save it as a component. So I can go ahead and drag this out and use this for the Wait List button. So I'll position it over to the right with a little bit of padding on the left. I'm going to stretch it out, just a touch. And then, diving in here, I can type out: Join waitlist. And maybe to keep consistency with this shape on the left, I'm going to go ahead and select this background layer. I'm going to enable a shadow, bump this up to about 24 and set a colour. And then drop the opacity about 10%. Alright, we are almost there. I'm going to go ahead and select all this information, pop it into a group and just call this Email and then just shift these around a little bit, so the padding looks nice. I can also place all of this into a group, Command or Control+G. I'll call this Header and then turn on the Stack within the Properties Inspector. That way, just in case I do need to rearrange some of these elements, I can very easily do so. Or if this decides to get larger, it'll shift down the Email field really nicely.
Now if we zoom on out and take a look at what we have so far, we have this big empty space over to the right. And there are few things we can do in this situation. One: We can use an image. So if I go ahead and grab a Rectangle, drag one out across this artboard. I'll go ahead and move it to the back. I can then hop over to Finder or Explorer, find an image and pop it into place. Or another thing I can do, if you have illustrations at your disposal or if you're an artist yourself, you can add something like this image. I grabbed this from Adobe stock. It's an Illustrator file. It opens great in Adobe XD. So I'm going to copy it to my clipboard, pop back over here and paste it into place. And because it's an Illustrator file, everything is vector. I can always dive in here, grab some of these elements, move them around so they're not too distracting and they don't get in the way. Select some of these over here, pop them right around this area. You may want to enlarge this entire thing just a little bit. And one more time, I'll dive in here and make a few tweaks so that it's not too close to the edge. I can move this over here to the left, grab this design over here. I might want to delete this group and shift this one over to the left, maybe shift this over just a touch as well. And all of a sudden our landing page is looking that much more lively. I'm going to go ahead and name this group Illustration.
The final thing we may want to do is add an area right down here at the bottom, so that users can connect with this service. So one more time with the Text tool, I'm going to go ahead and type out: Connect with us! I'll set this to around 32. I will keep it at Book. I'm going to place this on the left-hand side in this area here. Now right beside, we may want some common social media icons. So I'm going to hop into my Plugins panel. I do have Icons 4 Design loaded up. I'm going to type out: Twitter, load that in, and again, like I mentioned in several videos... for some reason, it does shoot those icons to wherever it feels like it. So I'm going to ahead and just change this to white, make it a little bit smaller and position it beside this text layer. Let's go ahead and look up Facebook, shift this over, change the colour to white, make it a little bit smaller. And then finally, let's go for Telegram. Again, I'm going to change the colour to white, shift it over a touch and then position it over to the right. And like we did earlier with the Text layers at the top, I can go ahead and select all three of these, pop them into a group and turn on a Stack. It defined it as 24 pixels in between each one. I can go ahead and change that if I need to but that looks pretty good. And now, if we go ahead and press the Play button, the top here is our completed landing page.
And that's how you can build out a simple landing page using Adobe XD. In the next video, we're going to be exploring nested components and how they can help you build out multi-level drop-downs. I'll see you all soon.
Design a simple landing page for a website that includes a logo, navigation bar, social icons, headers, buttons and an email field. In this tutorial, you’ll simulate the experience of joining a waitlist. Use the Colour Picker to set the background colour with a radial gradient. Bring in icons from the Plugins panel. Create text layers, apply Adobe Fonts and style the text. Add Stacks to keep your layout elements organised and easy to reposition. Paste in an Illustrator design, then drill down into the artwork to move and resize parts of the editable vector graphic.
