DESIGN A HOMEPAGE WITH ADOBE XD: Free Web Design Course 2020 | Episode 14

on today's video I'm going to show you how I use XD to design a homepage for a website we're going to talk about not only the features of the software but also some fundamental design principles that you can apply whatever software that you're going to use to design your website hey everybody what's up my name is Ron Siegel welcome back to the free web design course so today we're gonna dive into Adobe XD but as I said in the intro the principles that I'll cover here will probably work with any screen design software so whether you're using figma or sketch you can still follow along and understand the principles that we're going to use so in this and in today's video I'm gonna go through kind of redesigning this website colors of change and I will show you how I would approach working in Adobe XD when I do this redesign let's start with some of the core principles when I start working on a web project how I set up my documents and what are the process that I go through when I'm just starting out so the first thing I open up a new document and this is kind of the default web design setting so a web screen and it's 1,900 pixels wide now the first thing that I want to set up here is basically the grid so the underlying layout structure for how wide and what columns I'm going to be using throughout the website now we talked about this when we talked about layout and basically what I'm looking for is you know first determining how wide the content of the website is going to be so in every website basically there is kind of a container as you can see here and I can even measure it and it's something around almost 1100 pixels around here and that's probably also what I want to use here so here in XD I can turn on the layout and this is the basic grid that I'm getting but I can go ahead and make some changes because as you can see this is pretty wide follow drag some rectangular here and say hey I want this to be 1100 and let's Center this so the content should be much more contained that what we have here so I'll go back into the layout and a simple way to do this is just add petting from the left and right like this until we get to the size that basically we want do I want the gutters to be this way yes do I want 12 columns yes why we talked about this in the layout 12 is a number that's divided into a lot of numbers so we can create multiple variations of columns so in terms of the layout and the grid I think this looks good we can start working on that now the next thing I'm gonna do before I go ahead and start designing is I want to get some basic kind of fundamental styles of typography that I can work with more easily now it's always very useful to find unit when you're designing you can't set up your whole tip graphic system before you have the design because maybe you'll change a font maybe something needs a little tweaking but it's helpful to set the basic you know settings of typography and we talked about this in the video about typography you want to have some basic kind of sizes for your h1 h2 h3 which are the biggest headings in the website and you can see here they have actually I don't think they have enough contrast here in terms of the sizing but you do have kind of a major that's probably the h1 that's probably h2 and then you have here maybe that's h3 and in just a paragraph here so I'm gonna use type scale just because it gives you kind of a very easily clear hierarchy based here on the major 3rd or on some different kind of like higher key scales so I'm just gonna use this in poppins I think it's a good font that we can work with so let's start with this I'm gonna use this size which is almost 50 pixels so it's 48.8 I'm actually gonna run round that 250 pixels for my h1 which is the biggest title that I'll use romana remember I might find you in this later on this just so I'll have something easy to work with so let's call this this is my big title a big title which is called h1 heading number 1 and let's see so it's already 50 sighs so that's pretty good I'm gonna right click this and create add character style to acid and if I'll open up my acid here now I'll have this character style which I'll rename h1 by the way I might want to edit the color of this so in this case I think the h1 because it's gonna be on a dark color it's gonna be white so I'm actually gonna edit this into a white color so I can't see this right now but it it doesn't really matter I'll put this here so we can just see this now I'm gonna create another one so let's call this the h2 and for h2 I'm not sure I'm gonna choose this I'm actually gonna choose this I think because I want a little bit of gap right a little bit of contrast so this is going to be 31 pixels I'm gonna round that into 30 so I'm call this this will be H 2 and let's again make this white and turn this into 30 of course if you want to change the kind of make it bold or something which I might do later on I might do this later on for now I'll just add this to the car not a stylist asset as well h2 and I might do two more just h3 and the normal text so h3 I'm gonna use this one 25 is gonna be h3 and this was gonna be black actually this will be h3 which I'll make it black because at this point probably gonna have this on some kind of a background so this is going to be 25 and let's make this character h3 and the next one is going to be the paragraph so actual text that's going to be written so I'm going to use 16 so let's delete this and do this will be my text text whatever yeah I'm gonna make this 16 maybe actually 18 so it's not too small to do I made a mess here but never mind so now I'm gonna call this P which stands for a paragraph so that's the text and now I have my basic set up for the dock I can actually get started working now I want to talk a little bit more about structure because the way that we're gonna structure it here in our software kind of leads to how we're going to develop this later on and so you have to remember in development that we have the car we talked about the concept of container that keeps everything not wider than this we also have the concept of sections so the website a lot of times is divided as you can see here we have the hero section here we have kind of a secondary section and a third section so the way I'm gonna group them together so it's easy to maintain throughout my working on the project and also because again it kind of reflects how this is going to be developed now one thing that I don't like in the way that they designed this website is the navigation is actually down here which is kind of hard if you're just landing to see what's on the website I'm gonna put the navigation at the top and I'm gonna regard this as kind of a section so I'm just gonna create this area here I'm also gonna make it black even though I don't know if I'll keep the background later on but for now I'll keep it black and this is going to be kind of the navigation section so let's bring in the logo here let's let me copy the logo now the logo is actually going to be I think for the navigation it's going to be outside of the container and that's a lot of times we do that just for the kind of the navigation section it's wider then it's not has to be have to be contained throughout the container a lot of times the navigation will extend that just because when we land into a website the way that our eyes work we immediately look at the left corner and we want to see the logo there and the navigation on the top right so we don't have to contain them throughout the you know just with the container so I'm gonna put this here and I'm gonna put the navigation so note here in the navigation they have basically one two three four five kind of main buttons and then there's the big donate call-to-action and then there is search and there's also the social media buttons I'm gonna try and simplify this a little it I I don't want to put the icons to their social networks we're gonna put this in the cover in the in the footer and the search we don't have to have this kind of opened up we can have it that when you click the search it's gonna open up the search and that will that way we'll be able to kind of minimize them so let's go about campaigns let's create these now that's those actually I'm not sure they fit in one of these one of these styles but let's try let's do about and let's see if we put them at h3 maybe that's a little too big so actually I'm just gonna make this bold and yeah it's 18 or maybe just a little bit bigger so 25 so it's you know maybe it's h3 similar to h3 I'm gonna put it turn its into white because it's on this no you know what actually 18 was better I think this is way too big so we have the about campaigns cam pains what else do we have here so our campaigns in create a campaign mmm all right so our campaigns by the way this is a little bit unclear so I would if I would work with them as a client I would try to clarify this but at the moment we'll just use what they did join us and press join us and then press and then we have the donate button which we want to make a button now I don't really like how they make this a button just because it's not clear that it's a button right this shape we're not really used to seeing this shape as you know as a as a button so I'm gonna i'm gonna create kind of a little bit more traditional button i think it will work better but I'm gonna use the color of kind of like orange II kind of like they did send it to back and turn this into donate now here I'm going to turn the text into black just so that we can have a little bit more contrast and I think this is now note because this is a button that were probably going to be reusing throughout the website as you can see full scroll along join us so this is kind of a button that will reuse again and again so I'm gonna actually turn this I'm gonna make this even something like this I'm gonna turn this into a component so that we can reuse this again and again I do this by selecting the back the background the rectangular and the text and I'm turning this into a component and I'll call this CTA button now by doing this I can also turn in the padding and make sure that the padding is similar on all sides mmm not sure maybe it was better when you know there was a little bit more padding left and right but it does make sense now that it's a component and the padding is turned on if I need to change the text here like join us you can see that the button is gonna resize itself which will make my life easier now I want to arrange this so I want to make sure that the space that we have here on the right and on the top is pretty much equal and pretty similar to what we have here so that we it seems like we have kind of a padding that's equal on all sizes and then I want to make sure that the spacing between all these elements is equal so I'm gonna select all of these and I'm gonna use this spacing to make sure that there's equal space between them so now the navigation looks pretty solid I actually forgot the space the search button so I you would usually go into something like icon finder and do a search button in download you lift one for free only show free icons and I think this is pretty solid and I'm gonna download this in PNG yeah no SVG is better I'll be able to change the colors and everything so let me download that and drag that into Adobe XD well so that's pretty big so I'm gonna just put it here as a white I'm actually gonna turn this gray a little bit because I want this to be in kind of a lower hierarchy mmm no maybe I'll put this back into white no but you see because the icon is a little bit thicker than the actual text it grabs a little bit more attention it takes more attention that's why I need to decrease the color a little bit so that it will be equal in the kind of attention that it's grabbing so I'm decreasing the hierarchy by changing its color and so it will take less attention but I think now it's it's kind of solid if this was fully white as you saw earlier it would take up too much attention and now making sure that the spacing is equal now basically we have the navigation ready and I can go ahead and group all of these things together and open up the layer and see that they're all grouped and I'm gonna call this Navi gation and probably I'm also gonna turn this into a component why because if we're gonna have multiple pages on the website I want this component to be linked I don't want to just copy and paste this because if I'll need to add or make a change in the navigation I want this to you know be applied to all of the pages in the website instead of having to do this again and again now the next section that I'll want to create is probably the hero section so i'm gonna create kind of a background for this and here I'm gonna use the I'm actually going to use the the image that they have in the background so let's take this and throw it in here I'll throw it in here alright but so this is kind of the basic and I think so now it looks like it's full screen of course we don't really know where the screen is going but let's assume it's going to be somewhere around here the only thing I want to make sure because we want to bring in some text here I might want to crop the image a little bit differently so remember you can always choose how you crop the image right and might be more powerful than right now that we have the focus on the woman's face and I want to so now I will I want to put the main text call to action here on the left and that's going to be aligned on the layout so now I can see that I have enough enough space here I don't know if I have enough contrast I might want to open this image up in Photoshop later to darken the website let's go ahead and bring in the h1 title here so let's drop it in here well let's just take a text and give it the h1 title so I'm gonna bring in the text from here let's paste it here oh well yeah that was simpler sorry forgive my bad my bad use of shortcuts now you can see by the fact that there is too much line spacing that the text we didn't do enough good work or we didn't take care of all the parameters when it comes to the text so I'm gonna go ahead and edit this text style because I want to tighten up the the line height now it looks better there was too much line house line height and also I might consider making this like really bold yeah I think this makes this more powerful now remember when you're editing typography you can there's a lot of impact on how you capitalize the letter as up sorry oh no we lost all our edits so why did we lose all our edits no that's right there is a way there is a big impact on how you capitalize my favorite is what's called sentence capitalizing so that's basically capitalizing every letter but of course if you make if you choose to make this all caps that would look way more aggressive right so that's that's part of your choice as a designer right how you capitalized it I'm gonna remove the layout for a second just because I want to see now I would I would say that this is not enough contrast here so I would probably open this up in Photoshop or add some kind of a color overlay on top right something like you know reduce the opacity but something like this that I can then you know put over everything so this is the lazy way to do this if I would do this in Photoshop I would probably bring back her face because I think that's really impactful so right now let's see let's make this 50% or 60% so in the lazy way of doing things it still works now let's copy that and turn this into an h2 let's go back here and turn this into h2 and then bring in the second sentence now I see that this is way too much text for an h2 so how about h3 I think let's duplicate this or let's edit this too or maybe I can just edit the text here to white because this is and also edit the line height here as well probably need to do this because I overrode it so this looks better now because I already have you know a button component I can drag it here because we have another donate and also join us so for the join us what we can do is make another button called join us double clicked join us and then of course if I chose to capitalize the first button I would also do join us here you can probably set the by the way the text here to uppercase which would save up the time of holding a shift like I did right now and because this is a different button I'm gonna choose the color here - this kind of yellowish because this is basically another this is the secondary button so now we have basically our first two sections and let me go ahead and click all of this and group them together as I'll call this the hero section alright so note now that it's very important to me to make sure that my lair section is clean so I know what's going on here I can always open this up to see the components inside but otherwise I have gazillions of layers and this really helps me to later on understand how I need to develop this right we have the navigation section then the hero section and then we would go on and on so I hope this video was helpful for you in trying to understand how I think about setting up the documentation working with components in organizing my dock to make things more efficient and helpful for the next step of development in the next video in the series we'll take this full page and turn it to responsive and talk about all things responsive when it comes to web design if you're not subscribed yet make sure you are subscribed rest of the videos in this free course are in the playlist below see you on the next video

Channel: Flux

Views: 108,118

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: l5orEmE7Pq8

Length: 21min 32sec (1292 seconds)

Published: Wed Jun 17 2020