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

Hi, my word is Reno and welcome onLivingWithPixels. Today, we’re going todive into Adobe Xd. So, if you’re interestedin read Adobe Xd you want to get into theworld of entanglement scheme, but you’ve neverused the tool and you know that thisis the right tool to create websitesbecause it is, then this video is for you. We’re going to createthis project together. It’s a very simple headerimage for a circulate website. It’s not really acomplete website, but it’s just toshow you the basics. It has a button over here. It has a shadow inthe background. It has this cool font. I’m going to give you all the icons and the textbook andthe typefaces and the images that you’re seeing over here, so you can download them. So, let’s just get startedwith this project. All title, so, the first thingthat you’re going to see if you open Adobe Xd is this screen. I assure my recentfiles over here because I’ve alreadycreated a lot of projects inside of Adobe Xd.But what you’re going to do if you want todesign a website is you want to go into thecustom size over here. This looks like a website, but it’s not the rightsize for a website design. What I advocate youdo is always start with 1400 by 800. If you then press Enter, you’re going toget an artistry card. This is your artboard and this is where we’regoing to create the specific characteristics. Now, let’s go over thebasics really quick. It’s a very simple tool compared to all theother Adobe tools. So, if you’ve workedin another Adobe tool this will not be that hard.On the left over here, youhave your selection tool, “youve had” the rectangle, the roundabout, the triangle, you have the line tool, the confine implement that you maybeknow from Photoshop, and of course the text tool. Over now, youhave the design and a prototype piece. For this video, we’re going tojust focus on creating the design because we’re not going tomake it too complicated. And over here, youhave the insures. So, if you click ona specific item, you can change the authorities of that specificitem over here. So, that’s actuallyall you need to know. You can zoom in with authorities and then scroll on aMac or on a Windows.I think it’s Alt, so time zoom or if you’re on aMacBook or on a laptop you are eligible to only use your paws on your line pad to zoom in or you can use thetool over here to zoom in on a specificpoint on the canvas. Right now I’m goingto zoom out. By the direction, you move around in your artboardby bracing opening. So, if you support opening you can move aroundyour artboard. So, you zoom in, you press seat, and then you go back toyour selection tool. So, if you’redesigning websites, you always have spaceon both sides. Because all websites havethe 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 preparethat with the grid alternative. So, if you checkthis grid alternative, you’re going to see afew puts over here. I’ve already establish mine up. So, you can justcopy these lists. You need two columns.You need 1140 in diameter. That’s the distancefrom here to now. And over here, you’regoing to need 130. And if you’re goingto use these digits, you will have theperfect size for an averagemodern website. So, this is my advice tostart with, all right. So, just leave thatclick away, all right. So , now we’re going toimport our first idol. And I “ve prepared” all of the things that Ineed for this tutorial in this folder and you can download all ofthese files in the description.It’s just one associate downloadit onto your computer, unzip it and then you willhave the same files as me. So, the first thingthat I’m going to do is grab one of those idols. I’ve just grabbed thoseimages off That’s also a delightful gratuity if youwant to get into web design. is a greatwebsite to get your likeness. If you need a photo ofAmsterdam, for example, you’re just goingto click on it. And you can freelyuse these pictures because these picturesare copyright-free.So, that is super nice. So, I’ve preparedthese two epitomes. So, we’re going togo back to Adobe Xd, open the finder, and you can justdrag in an epitome from your folderor your Explorer and merely draw it in here and then it’s very big. So, I’m going to zoomout a little and I’m going to makeit a lot smaller. You can merely drag thecorner over here and residence it insideof your artboards.Just get it on like this andthen place it in the middle. You will see thoseblue orders, which will assist you alignyour persona, all right. I’m going to zoom in for now. And right now I wantto lock this image, so I cannot move it anymore and that is nice when you’reworking with a lot of things on top of this image. So, I’m going to rightclick and click on lock. You can also use commandL or Ctrl L on Windows and then we’re going towork with our first textbook. So, we’re going to clickon the verse implement over here and you’re just going toclick somewhere over here and we’re going tocreate a title.So, for example, I’m going to type Travel& Go, that’s the logoor the company. So , now we are insideof the textbook implement, I’m going to click againon the selection tool. And now I canchange the settings of this title over here. You can easily make atitle bigger and smaller by grabbing this littlecircle over here. That’s the easy behavior, but you are eligible to only typein a number over here. So, for example, 62 or another number.You can change the typeface orthe typeface over here. And I’ve also preparedtwo typefaces over here that you can installon your own computer, which I’m usingin this tutorial. So, I would caution you that you can installthese typefaces before you’regoing to move on so you will have thesame style as me. But of course, you canalso use your own typefaces it doesn’t really matter.So , now I’m goingto change this one to Montserrat and it’s a very modern font. For this tutorial, I’m going to usethe policemen copy. Maybe you only have the bullsversion and that’s okay. And now you’re going to seethat it looks like this and to make it alittle bit nicer, I’m going to change thespacing over here. And this is the space between the individualcharacters. So, for now, I’m going to type in -4 0. And now look at the verse, boom! Now it searches more like a logo instead of a text. So, that’s all I’mgoing to do for now, I’m going to zoom out. Make sure you’re onthe selection tool, drag it over here, resize it to alittle bit smaller something like this, and represent the complexion lily-white. The shades you canchange them over here. So, if you clickon this colouring, you could just picka color over here. So, for now, I’m goingto grab the lily-white and I’ll exactly click outsideof the artboards, all right. And by the way, don’t worryabout these off-color strands you can really uncheckthem over here if you want to seethe full cause. But right now, we’re using them to align all theobjects, okay. I have added thislittle triangle to make it lookmore like a emblem. So, I’m too going to showyou how you can do that. So, I’m going to goback to my scheme record and I’m going toclick on the textbook and then I’m going toclick on the rectangle.And now I’m going todrag a rectangle, and you can do allkinds of conditions. But I recommendthat you use shift so it will always be a perfect rectangle. So, if you then liberate it somewhere around here. At first, releaseyour mouse click and then release the alter. I’m going to click onthe selection tool uncheck the border. So, we will nothave a border. And I’m going to give it acolor that is somewhere, something likethis, all right. Click back on theselection tool, zoom in a little bit, and align it. Okay, I’m going to makeit a little bit smaller. And for this tutorial, I’mgoing to leave it like this. It’s not a perfect logo, but it’s something title. Okay, so , now we aredone with the logo and if you want to drag thelogo to another place, then you need toselect both of them.So, Adobe Xd hasa group option. So, what you can do is you can clickon one of them, harbour alter and thenclick on the other item so they are both selected and then press command G or right mouse clickand then group. So, command G iscreate a group. And now you canjust drag the logo as one piece. So, right now whatwe’re going to do is we’re going tocreate the bottom. So, I’m going to goback to my blueprint. I’m going to createthis section over here. And as you can see, the seven over here has opacity because you can see the liquid through the character. So, that’s a prettycool aftermath. It’s also pretty easy to do.So, I’m going to goback to my design enter and I’m going tograb another verse, clink over here, I’m going to typecommand 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 biggeror something like this, align it to the left. And now, we’re goingto duplicate this one. If you pulp Altand then you drag, you can make aduplicate of an entry. Now, make this one smaller, align it to somewherelike 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 outof three, okay. So , now I’ve altered the textbook and now all I need todo is click on my seven and align it a little. And if the mousedoesn’t work, you are eligible to useyour arrow implements on your keyboard to alignit the practice you like.Zoom out a little bitand now press five. And if you press five the opacity overhere will change. If you press seven, it will be 70%. If you press two itwill it’ll be 20%. So , now I’m goingto press five and it are likely to be 50%. And now you can look throughthe text over here. So, that lookspretty cool already. So , now we’re going tocreate the button over here.So, we’re going to goback to my motif register. I’m going to zoomin over here. First, I’m going toselect the textbook implement. So, click on the text tool. Click over here and typesomething like Sign up. Click on the selection tool and make this one 16. To make a button look nice, my opinion is toalways use 16 or 15 for the textbook length. Otherwise, it will justlook a little bit cheap or your buttonwill be too big. So, 16 or 15 isalways a neat size. So , now I’m going to clickon the rectangle implement and I’m going todrag a rectangle only over the canvas, something like this. And then secrete it, uncheck the border. Now, I want to getthe same off-color color as the triangle thatwe had created before. And Adobe Xd has a newfeature for this. So, press spaceand only draw it and make sure that you can alsosee the triangle over here.Now press I and if you pulp I you’re going to getthis eyedropper tool, this emblazon eyedropper implement. And if you sounds it, then it will selectthat exact same complexion. So, this is pretty nice. You can also selectsomething like this, light-green for example, if you want to match yourbutton with the background, that’s pretty nice butfor now, I’m going to precisely select thisblue over here, zoom in again. And now, I’m going to makethis a rounded rectangle. How you can do that is goback to the selection tool and readily really drag oneof these in the recess and precisely draw it like this. And as “youre seeing” , nowit becomes a button. You can also do this by changing thisnumber over here to maybe something like 100 and then it willalso be rounded.So , now I’m going toplace this rectangle under my verse. But if I’m going to do that it will be above my textbook. And this is where youneed the mantles, because the layer ofthe text needs to be above the coating of thebutton background. So, if you click over here, you can see a layer’sicon over here and “youre seeing” all oflayers that we have created inside of this folder. You can see yourrectangle over here and the sign uptext 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 bitto see if it directs. And the button as you cansee is still way too small.So, I’m going to grabone of the angles press Alt so I can skill it onall of these places and make it alittle 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 goingto zoom in again, click on the textbook, regarded switch, and clickon the background. So, we have selectedboth of them and we’re going togroup those again so we can selectthe whole button and align it to the right.Now, if you likewise wantto align this button to the same heightas this one, you can select both of them. So, the working group, propped alteration and this group, and now use thistool over here. And this will then align both items on the same line. And now we’re going togo to the social icons because we also have somesocial icons over here and these are supersharp as you can see, much sharper than theimage in the background because these arevector icons. And for vectoricons in Adobe Xd it’s best to use SVG registers. So, I’ve also included afew icons for you to try inside of the downloads. In the social mediaicons folder I’ve included a YouTubeicon, Instagram, and a few cases other platforms.So, I’m going to go backto the exercise file. I’m going to zoom in, click on the finder and select a few iconsthat you want to get. For now, I only wantto get Snapchat, Instagram, and YouTube. That will be enough. I’m going to dragthem onto the canvas and I’m going to dragthem actually outside of our artboards. So, click over here, zoom out, and now you’re going tosee that these icons are method too big. So, first of all, we’re going to alignthem properly. So, precisely grab all of them and then click onthis tool again. So, they will be alignedat the same height. Now, if one of thoseicons is too big you can of course also, with alteration resize them. But for now, this is good. We want to spawn them right. So, select all of them and this is the nicething about SVG icons.You can change the colorinside of Adobe Xd. So, obligate them white over here and sounds outside of it. By the style, if you wantto get icon files, you can use a websitelike And on a website likethis you can get icons, a good deal of them free of charge. As you can see, I’vedownloaded all of these icons for a client assignment and I can merely usethat on the website. So, that’s pretty nice. So, I’m going to goback to my Adobe Xd grab all of them and form them really small. So, resize them, but don’t forgetto press shifting while you resize them.Make them reallysmall, zoom in, draw them intoyour artboards, zoom in again. Make sure that your rightone is aligned like this. And now, I want to have a lot morespace between those parts and Adobe also has anice tool for this. So, if you only dragone of those entries to the left and you … By the style, harboured shifting, so it will be simply onone straight line.And don’t forget to firstrelease your mouse and then the change. And then if youselect all of them, so, I’ve now selectedonly the YouTube one. So, I’m going to also selectwith alter the Instagram one and Snapchat one. And if I click on this icon, it’s going to giveit the same space between those icons. So, I’m going to click on it. And as “youre seeing” , nowit has the same spacing between all of those icons. I think this is alittle bit too much. So, I’m going to make it alittle bit little spacing, something like this. I’m going to selectall of them again, clink this icon again, and now we aredone, all right. So, for now, I’mgoing to time uncheck the gridoption for now. I’m going to close the beds andwe forgot one thing and that is the shadowon top over here.Because you can’t reallysee this logo very well. So, if you go backto my final intend you can see that there’s a niceshadow over here because, let me turn it off. You can see the difference, this is a supernice soft shadow, I will show you howto create that. So, we’re going to go back. I’m going to grabthe rectangle implement, make a big rectangle, something like this.First, let’s adjustsome establishes. Uncheck the border, go to color, click on solid emblazon, andclick on linear gradients. Now, what you want to do, the top one needs to be 100% pitch-black and the bottom one likewise needs to be black, but this one has tohave 0% opacity. Because if you do that, then it willcreate a gradient and in this case, it’s a … And in this case, this creates anupside-down shadow. So, that is really nice. So , now click on theselection tool again make sure you alignit in the corner.Make it bigger, like this. And now we need tomove it to the back. So, open thelayers panel again and draw it under almost everything. So, I’m going to residence itright above the epitome. And if I do this, boom! You’re going to see thatlogo will be on top and the buttonwill be on top, and this is way too intense. So, what you wantto do now is play with this opacity.So, for example, manufacture that 50, 55. And now, if you liberate it, sounds this one apart. I actually think thatthese one are too big. So, I’m going toselect both of them and attain that smaller. And now, we have apretty same blueprint to this one and the only thing now we have to do is ofcourse insert this verse. And this verse by the wayhas a very nice shadow. Let me turn it offso you can see it. Then it startsfloating a little bit. So, I will too showyou how to do that and then we havethe final design.So, again, go tothe text tool and sounds over hereand type in Travel. Click the selectiontool again, make it really big. going to see your folder andin the fonts folder, the font is calledgreat bids. So, if you’ve alreadyinstalled it, you can go to your Adobe Xd and type in enormous pleases. And as you can see, we now have a super, super nice fontinside of our pattern. If you want to align this one in the exact middleof your canvas, you can also use thisone and this one. And now, it will bealigned in the middle. But now the text isin front of his face. So, click on thebackground image again. It’s locked so, we’re goingto unlock that for a minute. Drag that one down and now lock it again. And now, that looksa lot better. Last-place thing that we need todo is click on the textbook and we’re goingto add a shadow.Zoom in so you can reallysee what you’re doing, uncheck it, and this is a verysubtle shadow, but we want to makeit a lot bigger. So, I suppose I didsomething like 10 and perhaps 30. And if you increase this one the darknes will be lower. And if you increase this one the shadow willbe more blurry. So, zoom out a little bit and we can almost not see it. It’s a extremely soft darknes. So, I want to make it alittle bit more intense.Click on the dark andincrease the opacity like this. Don’t clear yourshadows very intense because that seems cheap. And now, if I uncheck it, you’re going tosee that the text truly starts levitating. So, yeah, I think thisis a pretty cool result and if you want to learnmore about Adobe Xd, I’m creating a courseabout Adobe Xd. So, if you’veliked this video then you might beinterested in that course. I’m going to give everybodywho watched this video a discount for the course. If you want to getthat discount there’s a attach inthe description, simply fill in your email and I will email youwhen the course is out and there will bea discount link within that emailthat you can use to sign up for thecomplete Adobe Xd track. But I just hope that you reallyliked this basics video. If you want to getmore videos like this maybe a little bit morecomplicated scheme, just leave a comment below on what website youwant me to make and I will create atutorial about it.Thanks again. This is LivingWithPixels, the canal where you’regoing to learn how to motif, improve, andsell websites. So, thanks a lotfor watching. So, if you like this videoplease give it a thumbs up because that are actually assists thealgorithm of this channel and that allows me to createmore videos like this. So, yeah, that’s it.I hope to see you in the next video ..

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts