Adobe Xd Web Design – How to design a simple website in Adobe Xd for beginners (2020)

It has a button over here. It has a shadow in The background It has this cool font, I’m going to give you all the icons and the text and The fonts and the images that you’re seeing over here so you can download them. So, let’s just get started. With this project, All right, so the first thing That you’re going to see if you open, Adobe Xd, is this screen. I see my recent Files over here, because I’ve already Created a lot of projects inside of Adobe Xd, But what you’re going to do if you want to Design a website is, you want to go into the Custom size over here This looks like a website, but 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 press Enter you’re going to Get an art board: This is your artboard, and this is where we’re Going to create the design Now, let’s go over the Basics really quick, It’s a very simple tool compared to all the Other Adobe tools, So if you’ve worked In another Adobe tool, this will not be that hard On the left over here.

You Have your selection tool, you have the rectangle The circle, the triangle you have the line tool, the pen tool that you maybe Know from Photoshop and, of course, the text tool Over here you Have the design and a prototype feature For this article, we’re going to Just focus on creating the design because we’re not going to Make it too complicated And over here you Have the controls? So if you click on A specific item: you can change the controls of 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 Mac or on a Windows, I think it’s Alt, So just zoom or if you’re on a Macbook or on a laptop, you can just use your fingers on your track pad to zoom in or you can use the Tool over here to zoom in on a specific Point on the canvas Right now: I’m going To zoom out By the way you move around in your artboard By holding space, So if you hold space, you can move around Your artboard, So you zoom in You press space and then you go back to Your selection tool, 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 going to prepare.

That with the grid option, So if you check This grid option you’re going to see a Few settings over here I’ve already set mine up, So you can just Copy these numbers, You need two columns. You need 1140 in width. That’s the distance! From here to here And over here, you’re Going to need 130 And if you’re going To use these numbers, you will have the Perfect size for an average Modern website, So this is my advice to Start with all right, So just leave that Click away all right So now we’re going to 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 files, in the description, It’s just one, link download It onto your computer unzip it and then you will Have the same files 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 unsplash.Com, That’s also a nice tip. If you Want to get into web design Unsplash.Com is a great Website to get your images If you need a photo of Amsterdam, for example, you’re just going To click on it And you can freely Use these pictures, because these pictures Are copyright-free So that is super nice, So I’ve prepared These two images So we’re going to Go back to Adobe, Xd 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 the Corner over here and place it inside Of your artboards, 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 anymore, 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 command. L or Ctrl L on Windows and then we’re going to 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’r going to type Travel &, Go. That’s the logo! Or the company, So now we are inside Of the text tool I’m going to click again, On the selection tool, And now I can Change the settings of this title over here You can easily make a Title bigger and smaller by grabbing this 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, You can change the font or The typeface over here And I’ve also prepared Two fonts over here that you can install On your own computer, which I’m using In this tutorial, So I would advise you that you can install These fonts, before you’re Going to move on so you will have the Same style as me, But of course you can Also use your own fonts, it doesn’t really matter So now, I’m going To change this one to Montserrat and it’s a very modern font For this tutorial, I’m going to use The bulls version: Maybe you only have the 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 nicer, I’m going to change the Spacing over here – And this is the space between the individual Characters So for now I’m going to type in -40 And now look at the text boom.

Now it looks more like a logo instead of a text. So that’s all. I’r Going to do for now I’m going to zoom out Make sure you’re on The selection tool drag it over here, resize it to a Little bit smaller, something like this and make the color white The colors you can Change them over here. So if you click On this color, you could just pick A color over here So for now I’m going To grab the white and I’ll just click outside Of the artboards 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 result, But right now We’re using them to align all the Objects: okay: I have added this Little triangle to make it look: More like a logo, So I’m also going to show You how you can do that, So I’m going to go! Back to my design file and I’m going to Click on the text and then I’m going to Click on the rectangle And now I’m going to Drag a rectangle and you can do all Kinds of shapes, But I recommend That you use shift, so it will always be a perfect rectangle.

So if you then release it somewhere around here At first release, Your mouse click and then release the shift. I’r going to click on The selection tool uncheck the border, So we will not Have a border And I’m going to give it a Color, that is somewhere something like This all right, Click back on the Selection tool zoom in a little bit and align it. Okay, I’m going to make It a little bit smaller And for this tutorial, I’m Going to 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, then you need to Select both of them So Adobe Xd has A group option, So 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 then press command, G or right. Mouse click. And then group So command G is Create a group, And now you can Just drag the logo as one piece So right now what We’re going to do is we’re going to Create the bottom, So I’m going to go! Back to my design, I’m going to create This section over here And as you can see, The seven over here has opacity because you can see the water through the character.

So that’s a pretty Cool effect, It’s also pretty easy to do So. I’r going to go Back to my design file and I’m going to Grab another text click over here, I’m going to type Command, zero, and now it will be remember that we were, we were still on montserrat, So that is nice Click over here make this one a lot bigger. Or something like this align it to the left And now we’re going To duplicate this one, If you press Alt, And then you drag, you can make a Duplicate of an item Now make this one smaller, align it to somewhere.

Like this retype, so you double-click it And then you can type it So I’m going to do something like this Oh, of course not It’s it’s three out of seven and not seven out. Of three okay, So now I’ve changed the text and now all I need to Do is click on my seven and align it a little bit And if the mouse Doesn’t work you can also use Your arrow tools on your keyboard to align It the way you like Zoom out a little bit And now press five And if you press five, the opacity over Here will change If you press seven It will be 70 % If you press two, it Will it’ll be 20 % So now I’m going To press five and it will be 50 %, And now you can look through The text over here So that looks Pretty cool already So now we’re going to Create the button over here So we’re going to go.

Back to my design file, I’m going to zoom In over here, First, I’m going to Select the text tool So click on the text tool Click over here and type Something like Sign up Click on the selection tool and make this one 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, So 16 or 15 is Always a nice size, So now I’m going to click On the rectangle tool and I’m going to Drag a rectangle just over the canvas something like this And then release it uncheck the border.

Now I want to get The same blue color as the triangle that We had created before And Adobe Xd has a new Feature for this So press space, And just drag it and make sure that you can also See the triangle over here Now press I and if you press, I you’re going to get This eyedropper tool, this color eyedropper tool, And if you click it, then it will select. That exact same color, So this is pretty nice.

You can also select Something like this green, for example. If you want to match your Button with the scene – that’s pretty nice, but For now, I’m going to just select this Blue over here zoom in again And now I’m going to make This a rounded rectangle How you can do that is: go Back to the selection tool and easily just drag one Of these 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 rounded So now I’m going to Place this rectangle under my text, But if I’m going to do that, it will be above my text, And this is where you Need the layers? Because the layer of The text needs to be above the layer of the Button background, So if you click over here, you can see a layer’s Icon over here and you can see all of Layers that we have created inside of this file, You can see your Rectangle over here and the sign up, Text over here, The rectangle 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, as you can See is still way too small, So I’m going to grab One of the corners press Alt, so I can skill it on All of these sides 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 of them and we’re going to Group, those again so we can select The whole button and align it to the right Now, if you also want To align this button to the same height, As this one, you can select both of them, So this group hold shift, and this group and now use this Tool over here, And this will then align both items on the same line And now we’re going to Go to the social icons, because we also have some Social icons over here – and these are super Sharp, as you can see, much sharper than the Image in the background – because these are Vector icons And for vector Icons in Adobe Xd, it’s best to use SVG files, So I’ve also included a Few icons for you to try inside of the downloads In the social media, Icons, folder I’ve included a YouTube Icon Instagram and a few other platforms, So I’m going to go back.

To the exercise file I’m going to zoom in Click on the finder and select a few icons. That you want to get For now. I just want To get Snapchat Instagram and YouTube That will be enough. I’r going to drag Them onto the canvas and I’m going to drag Them actually outside of our artboards, So click over here, zoom out and now you’re going to See that these icons are way too big, So, first of all we’re going to align Them properly So just grab all of them and then click on This tool again, So they will be aligned.

At the same height Now, if one of those Icons is too big. You can, of course, also With shift resize them, But for now this is good. We want to make them right, So select all of them, and this is the nice Thing about SVG icons: You can change the color Inside of Adobe Xd So make them white over here and click outside of it By the way, if you want To get icon files, you can use a website. Like flaticon.

Com And on a website like This you can get icons a lot of them for free, As you can see, I’ve Downloaded all of these icons for a client project – and I can just use That on the website – So that’s pretty nice. So I’m going to go! Back to my Adobe Xd grab all of them and make them really small, So resize them, but don’t forget To press shift, while you resize them, Make them really Small zoom in drag them into Your artboards zoom in again Make sure that your 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 of those items to the left and you.

.. By the way hold shift, so it will be just on One straight line And don’t forget to first Release your mouse and then the shift. And then, if you Select all of them, so I’ve now selected Only the YouTube one, So I’m going to also select With shift the Instagram one and Snapchat one, And if I click on this icon, it’s going to give It the same space between those icons, So I’m going to click on it And, as you can see now, It has the same spacing between all of those icons.

I think this is a Little bit too much So I’m going to make it a Little bit less spacing something like this: I’m going to select All of them again click this icon again and now we are Done all right So for now I’m Going to just uncheck the grid, Option for now, I’m going to 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.

This is a super Nice soft shadow, I will show you how To create that, So we’re going to go back, I’m going to grab The rectangle tool make a big rectangle Something like this: First, let’s adjust Some settings Uncheck the border go to color click on solid color and Click on linear gradients. 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 % opacity? Because if you do that, then it will Create a gradient – 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 tool again make sure you align It in the corner Make it bigger like this, And now we need to Move it to the back So open the Layers panel again and drag it under almost everything, So I’m going to place it Right above the image, And if I do this boom You’re going to see that Logo will be on top and the button Will be on top, and this is way too intense, So what you want? To do now is play with this opacity So, for example, make that 50 55 And now, if you release it click this one away, I actually think that These one are too big, So I’m going to Select both of them and make that smaller And now we have a Pretty similar design to this one, and the only thing now we have to do is of Course insert this 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 do that and then we have The final design So again go to The text tool and click over here And type in Travel Click, the selection, Tool again make it really big go to your folder and In the fonts folder, the font is called Great wishes So, if you’ve already Installed it, you can go to your Adobe, Xd and type in great wishes And, as you can see, We now have a super super nice font, Inside of our design, If you want to align this one in the exact middle Of your canvas, you can also use this One and this one And now it will be Aligned in the middle, But now the text is In front of his face, So click on the Background image: again, It’s locked so we’re going To unlock that for a minute, Drag that one down and now lock it again And now that looks A lot better Last thing that we need to Do is click on the text and we’re going To add a shadow Zoom in so you can really See what you’re doing uncheck it – and this is a very Subtle shadow, but we want to make It a lot bigger, So I think I did Something like 10 and maybe 30, 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 opacity 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 So yeah, I think this Is a pretty cool result and if you want to learn More about Adobe Xd, I’m creating a course About Adobe Xd, So if you’ve Liked this article, then you might be Interested in that course, I’m going to give everybody Who readed this article a discount for the course? If you want to get That discount there’s a link in The description just fill in your email and I will email you When the course is out – and there will be A discount link within that email, That you can use to sign up for the Complete Adobe Xd course, But I just hope that you really Liked this basics article, If you want to get More articles like this, maybe a little bit more Complicated design just leave a comment below on what website you Want me to make and I will create a Tutorial about it Thanks again, This is LivingWithPixels the blog, where you’re Going to learn how to design build and Sell websites So thanks a lot For reading, So, if you like this article Please give it a thumbs up, because that really helps the Algorithm of this blog, and that allows me to create More articles like this So yeah, that’s it I hope to see you in the next article

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101