Use Figma to design a great looking landing page

hi there and welcome to this video where we're going to be exploring designing a nice looking landing page with figma we're going to be doing both the desktop view and the mobile view for it and just exploring both how sigma works how i'm placing everything in there as well as looking at my design process a little bit of how i'm making decisions why i'm aligning things where i am how i'm choosing my hierarchy how i'm choosing my colors hi there my name is kevin and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips tricks and tutorials now i know you're excited to get into figma and explore a little bit there but before we get to that i just want to let you know that this video is being brought to you by the freelancing bundle if you're someone who's looking into freelancing either as a complete career change or maybe you want to do it as a bit of a side hustle during these times we're always looking maybe for a little bit of extra income the freelancing bundle over at studyweb development.com might be exactly what you are looking for it goes over the fundamentals of freelancing and positioning yourself how to price your services which is always really hard as well as an invoicing template proposal templates and a prospective client questionnaire which is always a really good thing to have you're getting access to private slack and facebook communities where you can talk with other people on how they're growing their businesses and how things are going for them share ideas and grow together so if this sounds good to you you can use the link down below in the description kyle from the freelancing bundle has been nice enough to give my audience here a coupon so you can use kev25 at checkout for a 25 discount so if that sounds good to you and you want to check it out again the link is in the description of the video now let's go and check out sigma all right so here we go i am in sigma i've made a new file we need to have a cardboard or what do they call it here a frame so i'm just pushing a on my keyboard to bring up my frame tool and then i get all the different uh sizes here automatically so i'm just gonna go to desktop and i'm gonna choose the imac one for now because it's a good start um i tend to make this a little bit taller often but you know you can go with whatever you want and i will call this one right here um let's just call it desktop so for the design of this one i'm just going to come in here and we're going to write deliciously i'm pushing shift enter for a soft break mouth mouth watering burgers and then i'm going to push k on my keyboard to bring up my scale tool so that lets me move it now one problem with the scale tool in figma is if i push v i have my select tool if i push k i have my scale tool they look identical so there's no way to tell the difference between them sadly now i have picked out a font already so i'm going to come into here and choose xo 2 because it's kind of an interesting font and i find at this size or like the regular it's interesting it has some character to it it looks a little bit interesting but i found this by looking around on google fonts at the really heavy ones and i find that sort of suits the style that i want to go with especially if i come over to here and i make this guy all caps so i can do that with this toggle right there and one thing you'll want to do is any time you make all cap text especially if it's a large font size is come on to your line height which is set to auto here and just shrink that down to bring it all a little bit closer together um so that's the title that i'm going to want to have that's like my main message it's deliciously mouthwatering burgers which is an absolutely outrageous uh little comment there and what i'm going to do is bring in a image that i already have so to do that i'm going to come to my frame no this one here i'm going to come to that tool and it's place image control shift k sigma has this thing with the k key for the shortcuts personally it drives me nuts i'm wondering in retrospect i always complained about it a little bit but i'm wondering if it's because it's a browser tool so you can use sigma in the browser without any issue and it could be that they already had a lot of other shortcuts for mapped to other keys that are left hand keys so they went with k that's the only thing i can think of but it does drive me a little less so i did um get this image in from on splash and i took the background out using photoshop uh so i have a nice little png here with no background it probably could have cleaned it up a little bit better but there we go we have my image now if you'd like to know how i removed the background from the image and you'd like to see a tutorial on something like that just let me know and i can do a future video where we take a look at that and more or less what i want to do for this hero area type thing is have a title have my burger and i will add a little bit more text so i'm going to push t for my text tool but i'm going to make a box something like that and let's change my font size right away so we don't end up with something too big i'm gonna go 21 um and my line height will adjust that and i do have a plug-in here so i'm going to right click and go to lorem ipsums uh let's just go to manage plug-ins for a second and it's just here we go and you can see it's called lorem ipsum it's the only plugin i have right now so if you have recommendations for other ones i'd love to hear what they are but right there laura mibsum and what that means is whoops i don't want to go there i want to go back to here uh if i right click i can choose lorem ipsum you can say how many words i want and i can just click generate or i can just put auto generate and it will perfectly fill my box um and there we go it comes in now i don't want the bold one obviously let's go with regular or maybe light um figma always remembers the last settings you used so i had all caps so i'm going to come through here and turn that off now and now i'm going to want to increase the line height quite a bit um this is like a 150 percent here would be the same as if you're writing css it'd be like a line height 1.5 i can define 140 to 160 works best depends on the font the font size all of that but for body text around there for titles and for large fonts and other ones you can definitely come in and really tighten them up so we can bring that in like that and i'm just going to shrink that box a little and the last thing i want is to add a button down here we're also going to add a navigation now you can see right now my layout doesn't have too much coming in to it but let's just add that last little bit of content and then i'm going to talk a little bit more and then i'm going to talk a little bit more about it say we do book a table like that and what i'm going to do is double click here so it just shrinks that to fit my text and then i'm going to push shift a for the auto layout tool because that automatically instead of drying the rectangle and then having to go and make it if you press shift a it makes an auto layout so the advantage with that is now i should be able to add a fill and for now let's just add a dark color and we'll come through and customize the colors a little bit in a second and then my text here can become white and i think what i'll do uh once i do auto layout i get um some positioning controls here so i can sort of have some fun with this and i think for my titles or for my buttons not my titles but for my buttons i do think that it makes sense um to come in and make them all cap and i think i'm going to come in with a little bit more um a smaller size maybe like an 18 but come in with a heavier weight and maybe just increase the letter spacing which is this guy just a touch touch touch i don't know why i said tooch um so it looks a little bit better and the last thing i'm gonna do is just round these corners off we have like round corners in my font we have a burger there's the melting cheese on it there's lots of roundness going on so i do think it makes sense to come in and just make this a i think that works but i'm just gonna increase my padding a little bit on the top and bottom something like that i think something like that i think is looking not too bad and we have a booklet table there um so one so now one thing you want to make sure whenever you're doing a layout is that you're thinking about the hierarchy of that layout i've already made a bit of a hierarchy here coming in with these different um sizes right so i have this really big title this text and then this and this stands out a little bit too but i also have my image that's here and i find they're kind of fighting each other a little bit they're not you know there's two things this has color in it it's sort of grabbing my eye my eye goes back to here my eye goes back to there i'm gonna the two choices you have here are like having a small image smaller image maybe um that's sitting off on the side and you can do something like that and maybe add a color i'm just going to push i for the eyedropper and it's hard to see that uh you know we could grab something just uh i don't like either of those colors but i like the yellow but yellow on white can be really hard to play with but something like that could work or the other option which i think i'm going to go for in this one is to have like a really oversized uh image and actually what i'm doing now is i have the scale tool but the scale tool will grow from the corner i'm holding alt on my keyboard if you're on a mac it'd be option and then it scales it from the center so you can go really oversized on something so maybe something coming in you know a little bit something like that could be interesting see this really oversized one this becomes like a decorative element almost and your own i find when you have these oversized elements the focus actually goes more on the text which is kind of good and for this i'm going to push r for a rectangle and i'm just going to come up to here and draw in a rectangle i want to put a navigation uh i do think so here actually we should name stuff so navigation and i'm going to bring it down underneath i think it'd be kind of fun if we have a bit of an overlap there and we should have a logo so we can grab this guy and i think we'll just say the burger chop i'm going to shrink that down and push k for my scale tool and really to shrink her down because it does not need to be too big maybe then we can shrink whoops not undo push v or move tool and then i can do something like that uh this one i'm gonna make it a bit darker i think we're gonna stick with a good gray on that one the advantage with doing that and maybe it could even be out we could do a gray or we could come in this burger and grab like a dark brown um if we really want to go with the burger colors a bit more and then i could come here i'm gonna eye drop again and choose from the yellows in here i think that stands out uh nicely it's a bit of a retro feel actually that brown and yellow but i kind of like that i'm digging that a little bit and what i'm going to do and i did this before when i brought this over um actually is i'm going to take this and push alt on my keyboard and drag so it copies it so i did the same thing before i dragged that and i just copied it over so it's just an alt drag to make a copy of it and these guys we can come in and make that white i think what i'll do is make it all caps and once again bring this up to the medium was that what i used no i use more than that that must be the bold i want the same one that i used on my button and we can do home i'm going to double click to shrink that down center it in that space you can see the smart guides are coming up and if you didn't want to use the smart guides i could select all this and i could just click that right there and it is centered in that space and then i'm going to alt drag so we have a home these are kind of big i might change the font size about contact and i think it makes sense to have like a an order button or something so we can do an order now and when i was all uh all dragging those to copy them i wasn't really paying attention how spaced out they are and even if you you know we could have them all over the place just for fun and you just select all of those and again we can center it that way and then i'm going to shift click to deselect my brown background here and i'm going to go over to this and i'm going to tidy it up so it just distributes them nice and equally but i do find this is a little bit big for a navigation so let's go with like a 16. uh select that guy again and i will center it and i keep accidentally selecting my burger here so i'm just going to come on this burger and lock it like that this layer i'm going to change it to logo title navigation is there and we should what we should do is all of these can come with my navigation and then my logo i can grab all of that push command g or control g on windows control g it makes a group and i can call that main navigation now when you have a mean a group like that if i come in and i move it it's going to move the whole thing together and my alignment here is driving me a little bit nuts so so i think what i'd rather do is actually grab all of these so to get in the group i'm just double clicking and as soon as i double click i can access uh the things in the group individually and i'm going to line that up with here now my spacing's maybe what i've actually should have done let's undo that maybe i should just move all of this this way a little bit um because i don't want it to crowd my logo too much now it's crowding on this side a little bit but i don't really like how this is looking but this is sort of like the main idea of what i want i'll worry about alignment in a second but this i've got all the content that i want um something like this and now this is where i find design gets a bit more fun this is where you can start playing around with it a little bit so one thing i really like looking at is the main hierarchy and then like a micro hierarchy within that so here i have like my of this text there's a clear hierarchy i think there's a big text of the paragraph and we have this button each one's doing its own thing our eyes probably going from here and then to here and if somebody's really interested they might read this text but within this and within titles you can often make a bit more interesting of a hierarchy so if i look at this i think burgers is probably the most important word i mean we know we're on a burger website obviously but i'm going to grab burgers here i'm going to make that a lot bigger maybe even a bit more than that 120. i want it like really in your face and i'm going to decrease the line height on that just to bring it in a bit closer and then we can come on this and instead of black maybe i'll go with the regular i'm choosing regular because i have a regular here i don't want to add too many font weights just because i know because this is eventually going to become a website now i will code this up eventually i don't want like 18 different font weights that have to be loaded in so normally if i was designing this i'd probably go with a light on that here i might have a semi bold and all of that but because i know it's going on the web i don't think this is a variable font um i won't have those options so we'll stick with the regular on this right here and right away i think that our you know that makes this more interesting to look at burgers is like a punch in the face almost it links with the big image we have here and then we can create more hierarchy always through color so actually i think this text i can make this brown color and because i like that color what i'm going to do is click on the style guide here and i'm going to create a new color so i'm going to hit the plus and we'll call this dark brown and i'll just make sure that this here is set using the same dark brown so the advantage of having that color there is if i come in and i decide to edit it it's you see it's changing here but it's also changing this text down here so if ever i do need to change it it's nice and easy so what i think actually i should come in and grab the yellow i have here so i go there click the plus and call this accent color create style and now say i wanted my button to be that color i could grab the background here and just switch it over so that's one idea i'm not going to do that yet um again that yellow on the white is kind of hard to see so one option actually maybe we'll let's try and eye drop um let's we'll select this this color here i'm gonna eye drop in these darker oranges maybe something like that and i'll save it i'm not sure if i really like it i would just call it orange i knew it would accent for yellow so like maybe maybe probably should have a primary secondary and all of that i'm not being consistent with my naming here um but let's ignore that for a second so that i don't mind and i think the contrast there is high enough um so even we could do like a book a table or what else uh maybe there's a book a table and then there's takedown and this is what i like about auto layout you know as i change my shake out as i change my text um it updates automatically and maybe tickets less important and they want people to book a table they make more money that way but if somebody wants to take out you want to make it easy so we'll add a stroke that will use my color right here use that color and my fill will be nothing so i guess we can make a white actually so i'm gonna break this and then come in and make my fill white no no that's not gonna work why'd you do that i didn't make a component here so this shouldn't be matching oh i didn't break it that's why i edited the color so what i'm gonna do is break this um so it's not connected to that orange anymore and then i can whoops that's on my stroke so my stroke is set to orange um what i want to do is get my fill so this one i think is my fill so i'm going to break that fill there there we go phil so it's not connected to that swatch anymore that i had and we can go and make that white and i think now my stroke needs to be a little bit bigger four or three we'll try three and the text inside of it obviously now will become let's go take my orange so we do something like that and i think i'll actually make my stroke of four um just based on the sort of thickness of the characters that i have there i think that works thinking of it maybe with corona these days um take out would be more important but there we go we have sort of a primary and secondary button and we can name those and that could probably be a good idea to make those into components if you don't know much about figma components i do have another video that dives really deep into them we explore them um components and auto layout and sort of the amazing things that you can do with them really there's some really awesome things that you can do but i don't want to make that the focus of this video we're just making a nice layout i have that we won't be building this out into too much more um so i'm just curious let's say i go in this text here and i choose my yellow it is hard to read and then this one could become my brown because i don't think it would look good if it was that one i mean it's not terrible but it's if i do that it's very readable but the burgers is too light on the white background so i can see this more but there's a conflict there because i can read deliciously mouth watering easier because of the higher contrast it's putting more emphasis on that but the burgers is a bigger font size and a bigger font weight so they're sort of fighting each other right now right there my eye doesn't it's not as clear to my eye is when it was all just the same color my eyes sort of doesn't know which one should be the focus so i think what i'll do is keep this one with my dark brown color which almost looks black i think i can edit that and actually lighten it up just a little bit not too much i want to keep it dark enough that my contrast here is okay i think that'd be okay and then i also think actually my yellow i'm going to edit my yellow color and make it a little bit darker now i am paying attention to the contrast of this yellow on here as well but i'm mostly looking at it here and one thing if you ever the problem with dark yellows is they get to this ugly color so if ever you're having trouble with yellow on white or you need to darken it up a little bit bring it a little bit more like don't make it orange because then it's just orange which i don't think looks terrible in this layout but if you want to keep it like don't keep it pure yellow just go a little bit more into your towards the reds but not too far and it sort of keeps that maybe i want a little too much like you can keep that yellow feeling without it being uh orange you sort of gotta balance it it's on the orange side a little bit now but it's at the point where i think it's attracting attention and not fading into the background like it originally was so i think something like that i'm not a big fan of this color actually so i'm going to change this orange as well maybe it could be a little brighter and more i don't want to be red if you go darker dark orange just becomes brown um the problem i have now is like i have a brown a yellow and an orange which they're colors that all go together um but you know you don't want to run in the less colors you have the easier it is basically so maybe even if it's more of like um like less saturated so instead of sticking with like really there like i'm not going into the grays even though that's not terrible but i want to keep some color in it maybe it's more instead of an orange it's like a lighter brown like that i think that might work better for my hierarchy and everything so i can come in like that uh i'm gonna modify these buttons a little bit actually for the padding on them and this is where if it was a component i wouldn't have to select both of them but it's okay i'm just gonna make those a little wider um i actually think that's looking pretty good one thing i'm going to do actually i want to make sure i'm just going to zoom to 100 and this is an important thing to do is make sure you're at 100 if you're coming from somewhere like photoshop where you're doing photo editing or other stuff like you might not be thinking i should be at 100 but it actually makes a lot more sense to work there because that's what most people like if i build this into a website this is how most people are going to see it um so i do think it makes sense and one thing i'm going to unlock my photo here because i want to move it over just a spooch just so i can bring my text here over and what i really don't want is like a small spit like all this white space here and then a small amount of white space here it kills the balance of the page so i really want to make sure that everything is nicely balanced i'm looking at aligning here so alignment is really important with things like if you're coming in and you're going to set things up and whoops sorry and then you come in and you say like oh this is going to be right here it's not very noticeable that the home and the text here aren't aligned but it's off by just enough that maybe someone doesn't realize it but it doesn't look right there's something a little bit like now that you're looking at that doesn't look a little bit off so i definitely want to make sure i'm coming in i'm saying here i don't want the white space to be too tight so i'll move that over and again you don't want this the one option is like if you're getting close like go and it's underneath and that's going to cause a problem because it's harder to read the text but like that's your choice you're either having something still underneath or you're giving it room to breathe you're not doing something like this where it's going right right right up against it just because it starts feeling crowded it starts feeling like why is that even happening um so you know we have to be careful with that and this actually could be an interesting thing uh when i code this up that i don't think i can do in figma but what i might try and do is use some sheep outside or something like that to actually have the text like wrap a little bit but the wrapping could be pretty wide um so this text even could come you know it comes sort of into that space that the burger's making a little bit it could be kind of interesting now what i'm going to do is take this and build the mobile layout and you'll might be saying kevin if you follow my web stuff you might be saying don't you no don't you go mobile first and yes i if i'm making a website i always design i always code it mobile first but if i'm coding but if i'm designing i always start at the big screen why i find it gives me more creativity more room to do what i want and then it's easier to simplify whereas with coding it's easier to add complexity to something you can add or strip it away pretty much just as easily with design software because you just move stuff around whereas with code i find it easier to build up and add complexity instead of overwriting a whole bunch of things to strip away complexity so i did have a suggestion from somebody so i'm going to do is i'm going to push a for my our frame tool and let's go into my phones and we'll just grab the i guess the eight that should be fine um and i i am going to build this two foam and we we're gonna need this to be a bit taller so i'm just gonna stretch that out and now we just need to move things in so i'm gonna grab my navigation option drag it over but obviously if i come into here in my main navigation i don't need all of these guys right now so i'm going to delete them for the moment and we're going to come in with a little hamburger menu for my hamburger website in a second whoops i just want my background i don't need it sticking out so we'll just shrink that down again i'm going to click and option drag to bring that over and i want to line it up with my logo now i'll push k and just shrink that down to make sure it actually fits on the page i think we can keep that same style right if i zoom in uh zoom to 100 there we go you know i think on a phone something like that could look perfectly fine we obviously want the burger to still be coming in now one thing to be careful when you drop something in a frame in figma make sure your mouse cursor is in the frame so just for example if i option drag this and i let go now see the whole thing pops off so even though the burger is inside like overlapping the frame my mouse cursor was outside the frame so it hangs out here um so i there you can see i can drag it back in but sometimes i have trouble getting things back in frame so if you need something really hanging out just make sure like when you let go of your mouse your your you you might have to just make sure you grab it on the left and then bring it over to um to get it in there um i'm just going to have it hanging off i don't know if this is going to work super well but i want to keep the oversized burger we might have to shrink it down we'll see um but what we'll do is we'll grab my text and bring my text in and that will shoot down the side a little bit maybe we like here i think it's gonna be a little too tight and i'm still really really aware of my spacing um but i really think on like ideally this would wrap around that image a little bit more but i don't think there's an easy way i've tried doing something can like i can't change the shape of this to be a bit off um or different so i'll leave it like that for now and then i'll grab these guys option drag them and we could just set up something like that maybe they end up the same width as one another at this size and even i guess we don't have tons of content so this could be shrunk down i didn't need it to be longer after all um and then oops and then we can just come in here with my burger and i might okay shrink that down a little bit um and have it something like that i don't like my spacing that i have here and this is where i should have made these kind of components so if i didn't need to make a change um it's not terribly hard to do and i am cheating a little bit now because i'm doing a one-off design i'm really just making it work for this one situation and it's not something that would you know you can't really shrink down a button because it's not fitting in that one context so i am definitely cheating because i'm living only in this context and nowhere else just so you know but if you're doing something like this for a portfolio and you just want this part of it but make you know there's no reason not to do these cheating things uh you can get away with it whereas if you're actually building out a full layout it's a little bit trickier you can't really do stuff like that uh so i think for now all i'm gonna do is design my hamburger menu and then uh i'll explain what the next steps are going to be in this project in a second uh so we're going with white i guess i didn't make a white color today no we should have one let's make a new color we'll call it white i know it's not white yet but what i'll do is i'll edit it so it's white and then we will make it a little bit thicker i'll go with a three maybe i'll option drag it up and somebody on twitter recommended i sort of shared my first draft of this design they called it the since it's a hamburger site just for laughs i guess to make a a hot dog menu by stretching these parts out and i sort of find it looks like a hamburger anyway so you know we could go something like that now it's way too long so i'll just select all of them and shrink it down and if ever you don't like the spacing on it the easiest thing to do is just grab one of them move it a little bit select them all and then just come and tidy up until you get the spacing that you like at least that's how i've done it and we can do something like that for our mobile and so as an initial layout as a first layout this i think is what i'm gonna stick with i'm happy with how it looks i think it looks alright i hope you do too and i hope you like just seeing a little bit of my design process it wasn't too complicated here but i shared obviously a few of my ideas and so as a next step for this what i'm gonna do is stick in figma and we're gonna have a second video where we're gonna explore how to um like how to show i'm going to have a second video we're going to explore prototyping a little bit in figma because prototyping and figma is really really cool you know a lot of really powerful things with it so we do is we're actually adding some hover effects for the buttons we'll add in hover effects for the navigation menu and we'll actually make the mobile navigation something that works so that when i start coding it up i have something to base everything off of um and maybe we can try and add some other animations or something in there as well at the same time so if that sounds like something cool something you'd like to see and you haven't yet subscribed do make sure to hit that subscribe button so you do not miss out on that next video and thank you very very much for watching big thank you to my patrons for their support every single month you guys are absolutely amazing i can't thank you enough and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 23,348

Keywords: Kevin Powell, tutorial, html, css, figma, ui design, ui design with figma, figma tutorial, web design tutorial, ui design tutorial, web design, website design, figma ui design, figma design, ui design tutorial for beginners, figma design website

Id: tXg2fQxeYK8

Length: 30min 24sec (1824 seconds)

Published: Wed Sep 30 2020