How to design a simple website header in Adobe Xd (beginner proof) | Rino De Boer | Skillshare

How to design a simple website header in Adobe Xd (beginner proof)

Rino De Boer, Designer & Content creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (20m)
    • 1. How to design a simple website header in Adobe Xd (beginner proof)

      0:42
    • 2. Preparing your artboard

      2:28
    • 3. Placing your background image

      1:30
    • 4. A quick company logo

      3:23
    • 5. A simple slider counter

      1:35
    • 6. The blue sign up button

      3:12
    • 7. Adding social icons

      3:00
    • 8. Menu display shadow

      1:50
    • 9. Creative typography title

      1:54
    • 10. Want more?

      0:47
11 students are watching this class

About This Class

A short introductory class to Adobe Xd for web design. As you guys know, I also have a full course on my profile about Adobe Xd. But if you don't have a lot of time but you want to get started in Adobe Xd, then this class will be very interesting for you.

Within 20 minutes you will have designed your first simple header with a transparant menu. 

If you want to go more in depth then I suggest my 4 hour Adobe Xd course that you can also find on my profile.

For now, enjoy this class and I hope you will like it. 

Greets, Rino

Transcripts

1. How to design a simple website header in Adobe Xd (beginner proof): Hi. My name is Reno. And welcome a living pixels. Today we're going to dive into Adobe X'd. So if you're interested in learning Adobe 60 you want to get into the world of Web design, but you've never used to do. And you know that this is the right tool to create websites because it is. And then this video is for you. We're going to create this project together. It's a very simple header image for a travel website. It's not really a complete website, but it's just to show you the basics. It has a button over here. It has a shadow in the background. It has the school fund. I'm going to give you all the Aikins and the text and the phones and the images that you're seeing over here so you can download them. So let's just get started with this project. 2. Preparing your artboard: All right. So the first thing that you're going to see if you open Adobe X'd is this screen. I see my reason fells over here because I've already created a lot of projects inside over the V XY. But what you're gonna do if you want to design a website if you want to go into the custom size over here But this looks like a website, but it is it's not the right size for a website design. What I suggest you do is always start with 1400 by 800. If you then breast ends. Er, you're gonna get a dartboard. This is your our board, and this is where we're going to create the design. Now, let's go over the basics really quick. It's very simple to compare to all the other adobe tools. So if you've worked in another adobe tool, this is this will not be that heart on the left. Over here, you have your selection tool. You have direct angle, the circle, the triangle. You have the line tool dependable that you maybe know from photo shop. And, of course, the Texel. Over here you have the design and the prototype feature for this video. We're gonna just focus on creating the design because we're not gonna make it too complicated. And over here you have to control. So if you click on a specific item, you can change the controls off that specific item over here. So that's actually all you need to know. You can zoom in with commands and then scroll on a mech or on a windows. I think it's also eso just assume, or if you're on a Mac book or on a laptop. But you can just use your fingers on your trek, bet to zoom in, or you can use to do over here to zoom in on a specific point on the campus. Right now, I'm going to zoom out, by the way, you move around in your are birth by holding space, so if you're old space, you can move around. You're are part. So you zoom in you breast space and they go back to your selection toe. So if you're designing websites, you always have space on both sides because all websites have the content in the middle, and then there's white space on the left and on the right and you want to prepare that, and you're gonna prepare that with the great option. So if you check this great option, but you're going to see a few settings over here. I've already set mine up, so you can just copy this numbers. You need two columns. You need 1140 in whiff. That's a distant from here to here. And over here, you're gonna need 130. And if you're gonna use thes numbers, you will have the perfect size for an effort. Modern website. So this is my advice to start with. All right, so just leave that on. Click away. 3. Placing your background image: All right, so now we're gonna import our first image. And I have prepared all of the things that I need for this tutorial in this folder, and you can download all of these Fells in the description is just one link downloaded onto your computer. Unzip it and then you will have the same fellas as me. So the first thing that I'm going to do is grab one of those images. I've just grabbed those images off on splash dot com. That's also a nice tip. If you want to get into Web design on splash dot com is a great website to get your images . If you need a photo off Amsterdam, for example, you're just going to click on it. And you can freely used these pictures because these pictures are copper rights free. So that is super nice. So I've prepared to these two images, so we're gonna go back to Adobe X'd open the finder, and you can just drag in an image from your folder or your explorer and just drag it in here. And then it's very big. So I'm going to zoom out a little bit, and I'm going to make it a lot smaller. You can just drag drag the corner over here and plays it inside of your art boards. Just do it like this, and then place it in the middle. You will see those blue lines which will help you align your image. All right, I'm going to zoom in for now. And right now I want to lock this image so I cannot move it any more. And that is nice when you're working with a lot of things on top of this image. So I'm going to right click and click on lock. You can also use comments, al or control on Windows, and then we're gonna work with our first text. 4. A quick company logo: and then we're gonna work with our first text. So we're going to click on the text tool over here, and you're just going to click somewhere over here and we're going to create a title. So, for example, I'm gonna type truffle and go, That's the logo or the company. So now where you're inside of the text. So I'm going to click again on the selection tool, and now it can change the settings off this title. Over here, you can easily make a title bigger and smaller by correcting this thing. Little circle over here. That's the easy way. But you can also just type in a number over here. So, for example, 62 or another number and you can change defund or the typeface over here. And I've also prepared to phones over here that you can install it on your own computer, which I'm using in this tutorial. So I would advise you that you're gonna install these phones before you're going to move on so you will have the same Stella's me. But of course, you can also use your own phones. Doesn't really matter. So now I'm gonna change this 12 months aretz, and it's a very modern funds for historial. I'm gonna use the Bulls version. Maybe you only have two bulls version, and that's okay. And now you're going to see that it looks like this. And to make it a little bit nice, I'm gonna change the spacing over here. And this is the space between the individual characters. So for now, I'm gonna type in minus 40. And now look at the text boom. Now it looks more like and local instead of texts. So that's all I'm going to do for now. I'm going to zoom out, make sure you're on the selection to drag it over here, resize it to a little bit smaller, something like this, and make the color whites the colors. You can change them over here. So if you click on this collar, you could just pick a color over here. So for now, I'm gonna grab the whites and I'll just click outside of the our ports. All right. And by the way, don't worry about these blue lines. You can just uncheck them over here if you want to see the full results. But right now we're using them to align all the objects. Okay, I have added these little triangle to make it look more like a logo. Some also going to show you how you can do that. So I'm gonna go back to my design, fell, and I'm gonna click on the text, and then I'm gonna click on the rectangle. And now I'm going to track a rectangle, and you can do all kinds of shapes, but I recommend that you use shifts, so it will always be a perfect rectangle. So if you then release it somewhere around here a first release your mouse click and then released shifts. I'm gonna click on the selection toe unchecked the borders. We will not have a border. And I'm gonna give it a collar. That is somewhere. Something like this. All right. Like back in the selection to zoom in a little bit and align. It's okay. I'm gonna make it a little bit smaller. And for this tutorial, I'm gonna leave it like this. It's not a perfect logo, but it's something. Right. Okay, so now we are done with the logo. And if you want to drag the logo to another place that you need to select both off them. So adobe eggs. He has a group option, as what you can do is, you can click on one of them, hold shift and then click on the other item. So they are both selected and Empress comment G or right mouse click and then group. So comin G is create a group, and now you can just drag the logo as one piece. 5. A simple slider counter: eso right now, What we're gonna do is we're gonna create the bottom. So I'm gonna go back to my design. I'm gonna create this section over here, and as you can see, the seven over here has opacity because you can see the water True, the character. So that's a pretty cool effect. It's also pretty easy to do. So I'm gonna go back to my design fell, and I'm going to grab another text click over here. I'm gonna type come into zero. And now it will remember that we were We were still on months, right? So that is nice click over here. Make this one a lot bigger. Something like this. A line. It's to the left. And now we're going to duplicate this one. If you press also and then you Drac, you can make a duplicate, often item. Now, make this one smaller a line. It's to somewhere like this re type. So you double click it and then you can type it. So I'm gonna do something like this. Oh, of course not. It's it's three out of seven. That seven out of three. Okay, so now I've changed the text and all I need to do is click on my seven and align it a little bit. And if the miles doesn't work, you can also use your arrow tools on your keyboard to align it the way you like. Assume out a little bit and now press five. And if you pressed five the opacity over terrible change. If you breast seven, it will be 70%. If you breast do it, it will be 20%. So now I'm gonna breast five, and it will be 50%. And now you can look true. The text over here, so that looks pretty cool already. 6. The blue sign up button: eso. Now we're going to create the button over here. So gonna go back to my design. Phil, I'm going to zoom in over here. First, I'm gonna select the text tool. So click on the textile, click over here and type something like Sign up quickly Selection two and make this 1 16 to make a button look nice. My advice is to always use 16 or 15 for the text size. Otherwise, it will just look a little bit cheap or your button will be too big. Eso 16 or 15 is always a nice size. So now I'm going to click on the rectangle tool and I'm gonna drag a rectangle just over the canvas something like this and then release. It's unchecked the border. Now I want to get the same blue collar esti triangle that we have created before and in the big city has a new feature for this. So press space and just drag it and make sure that you can also see the trying over here. Now, press I if you press I, you're gonna get this eyedropper tool, this color eyedropper tool and if you click it, then it will select that exact same collar. So this is pretty nice. You can also select something like this green. For example, if you want a metre button with the scene that's breeding nice. Before now, I'm gonna just select at this blue over here, zoom in again and now I'm going to make this around its rectangle. How you can do that is go back to the selection toe and easily just drag one of Di's in the corners and just drag it like this. And as you can see now it becomes a button. You can also do this by changing this number over here to maybe something like 100. And then it will also be around. It's so now I'm gonna place this rectangle under my texts. But if I'm gonna do that, it will be above my text. And this is where you need the layers because the layer off the text needs to be above the layer off the button background. So if you click over here, you can see a layer spiking over here, and you could see all the layers that we have created inside of this fell. You can see the rectangle over here and the sign up text over here and erecting will need to be below our sign up text. And now we can drag it up and align it properly. Zoom out a little bit to see if it works and the button issue, because he is still way too small. So I'm gonna grab one off the corners, press Balz so I can skillet on all of decides and make it a little bit bigger, maybe even bigger, to make it look really nice. I'm going to zoom out, and this looks pretty good. So now I'm going to zoom in again, click on the text, hold shift and click on the background. So we have selected both off them and we're gonna group those again so we can select the whole bottom and align its student rights. Now, if you also want to align this button to the same height as this one, you can select both off them. So this group, old shift and this group and now use this to over here, and this will then align both items on the same line 7. Adding social icons: And now we're going to go to the social Aikins because we also have some social Aikens over here. And these are super sharp, as you can see, much sharper than the image in the background. Because these are Fechter, Aikins and Perfecter Aikens in Adobe 60. It's best to use SPG Fells. So I've also included a few items for you to try inside of the downloads in the Social Media Icons folder. I've included a YouTube, Pichon Instagram and a few other platforms. I'm gonna go back to the exercise fell. I'm going to zoom in, click only finder and select a few Aikens that you want to get. For now, I just want to get snapped. Yet Instagram and YouTube death will be enough and gonna direct them onto the canvas. And I'm gonna direct him actually outside off our our ports. So click over here, zoom out And are you going to see that these icons are way too big? So first of all, we're gonna align them properly, so just correct all of them and then click on this tool again so they will be aligned at the same height. Now, if one of those ideas is too big. You can off course also with shift resized MBA For now this is good. We want to make them vie to select all of them. And this is the nice thing about SPG Aikens. You can change the collar inside off adobe XY, so make them right over here and click outside of it. By the way, if you want to get Aiken Fells, you can use a rep side like like flat Aiken dot com And on website like this, you can get Aikens Ah, lot of them for free. As you can see, I've done with all of these icons for a Calyon project. I could just use that on the website. So that's pretty nice. So I'm gonna go back to my adobe X'd grab all of them and make them really small, so resize them. But don't forget to press shift way. Well, you resize them, make them really small. Zoom in, direct him into your art boards, assuming again, make sure that you right one is aligned like this. And now I want to have a lot more space between those items. And Adobe also has a nice tool for this So if you just drag one off those items to the left and you, by the way, hold shift. So it will be just on one straight line and no forgets to first release your mouth and then the shift. And then if you select all of them So I've now selected only the YouTube buns. I'm gonna also select with shift the instagram on any snapshot one. And if I click on this Aiken, it's going to give it the same space between those Aikens. I'm gonna click on it. And as you can see now, it has the same spacing between all of those Aikens, I think this is a little bit too much. So I'm gonna make it a little bit less spacing. Something like this gonna select all of them again. Collectors. Aiken again. And now we are done 8. Menu display shadow: All right, so for now, I'm gonna just bunch check the great option. For now, I'm gonna close the layers and we forgot one thing. And that is the shadow on top over here because you can't really see this logo very well. So if you go back to my final design, you can see that there's a nice shadow over here because let me turn it off. You can see the difference is a super nice soft shadow. I will show you how to create that. So we're going to go back and kind of crappy rectangle toe, make a big direct and go something like this. First, let's let's adjust some settings unchecked. The border. Go to caller, click on solid collar and click on linear Grady ins. Now what you want to do, the top one needs to be 100% black, and the bottom one also needs to be black. But this one has to have 0% capacity because if you do that, then able create a radiance. And in this case it's a and in this case, this creates an upside down shadow, so that is really nice. So now click on the selection to again. Make sure you align it in the corner, make it bigger like this. And now we need to move its to the back. So open the layers panel again and drag it under almost every things. I'm gonna place it right above the image. And if I do this boom, you're going to see that the logo will be on top and the bottom will be on top. And this is way too intense. So what you want to do now is play with this a pass ity. So, for example, make that 50 55. And now, if you release it, click this one away. Actually think that she's won our two bigs. I'm going to select both of them and make that smaller. 9. Creative typography title: and now we have a pretty similar design to this one. And the only thing now we have to do is of course, inserts dis text. And this text, by the way, has a very nice shadow. Let me turn it off so you can see it. Then it starts floating a little bit. So I will also show you how to the debt. And then we have two final design so again, and go to the textile and click over here and type in travel. Collected selection to again make it really big. Go to your folder and in the phone's folder. The front is called Great Wishes. So if you've already installed it, you can go to your adobe 60 and type in great wishes. And, as you can see, re now have a super super nice phones inside of our design. If you want to align this one in the exact middle off your canvas, you can also use this one and this one. And now it will be aligned in the middle. But now detects is in front of his face. So click on the background image again. It's locked. So we're gonna unlike that for a minute. Direct that one down and now lock it again. And now that looks a lot better. Let's think that we need to do is click on the text and we're gonna add a shadow. Assume ends or you can really see what you're doing. Uncheck it. And it is a very subtle shadow, but we want to make it a lot bigger. So I think I did something like 10 and maybe a dirty. And if you increase this one, the shadow will be lower. And if you increase this one, the shadow will be more blurry. So zoom out a little bit and we can almost not see it. It's a very soft shadow, so I want to make it a little bit more intense. Click on the shadow and increase the capacity like this. Don't make your shadows too intense because that looks cheap. And now if I uncheck it, you're going to see that the text really starts levitating. 10. Want more?: so yeah, I think this is a pretty cool result that we created in a very short time. Now, if you want to learn more about the Dhobi XY, I have a full course about Adobe XY on my skill share profile where I will show you how I created my whole portfolio website inside of Adobe X'd. And there are two other projects inside of that course that you can also follow to really learn to do adobe eggs E because adobe exterior is a very powerful toe. Now we've only covered the basics. But if you really want to go deep, click on my profile and maybe that course eyes also something for you. So thanks a lot for watching my name is Reno again. If you want to follow me on Instagram, for example, my links are below and then I hope to see you in one of the next or other courses. Thanks so much