So we’re going to learn a bit about figma we’re also going to learn a bit about design. So if you have trouble designing certain websites or apps or whatever you want, I’m going to try to give you my thought process. I’r building out this shoe website.
I know shoe website, but hey everybody has shoes. So why not so the first thing I usually do make sure to open up figma, if you don’t have it download it. I also highly recommend you to follow along because hey practice makes perfect so yeah. The first thing I want to do, since this is a shoe at, is obviously I’m going to look up shoes, so one good site that you can use. It is pixels, so we have pixels here.
I just searched running shoes, and I found certain pictures like like this one or this one, but eventually I just hand picked out a few and you don’t need to worry about it. I just link everything in the description down below, so everything is linked. Don’t worry. Just download those and follow along so there we go. This is the first picture we’re going to use. I kind of edited this a bit in Photoshop because it had an ugly background, but it looks okay now, so we have the shoes and by the way before we do this, actually you probably don’t have this landing page.
So let me delete this and what you can do is we can basically create a frame now what the frame is. You can imagine it as being a just a page on your website, so you can click on the frame tool and just click anywhere. You want. It’s going to give us a frame now I want this to be full HD, so here you have width and height to your right. Oh that kind of rhymed, oh that rhymed as well. Okay, so here the height is going to be 9 20 1920 by 1080, which is going to be full screen Full HD nice.
So we can take the shoes and kind of drag it in here and frame tool. We can also rename this to landing page now. One important thing about creating any kind of design is to have proper structure. What I mean by that is, let me show you we’re going to hit the text tool and we’re going to drag out here and I’m going to name this we’re going to have a headline, so we’re going to say, run faster and let’s make this bigger.
And what I basically want to have on my front base, since this is a product that I want to showcase well. The first thing I I want to you to see is diffuse, some catchy tagline, a small description and a place, a button or something that you can buy the product. So that’s kind of how I think about what I want to have on my front page. So the product, some text that describes the product may be a reason to make you buy it and then some button where you can either buy or learn more so good, so run faster, run.
Forrest run and we also kind of want to have a subtext here and then I’m going to talk about structure so we’re going to have made for high speed running. I kind of wrote everything down here. Just so so I don’t write bananas or nice or something yeah. So there we go. We have our second text and yeah, as you can see right now, just everything kind of looks messy and that’s one important thing that is important in design a structure make everything kind of flow together and what I mean by that is have really nice spacing have Text that always starts in the same position, so it’s easier to read.
Everything is right. Now this is kind of weird hard to read. You don’t even know where your eyes necessarily are going. So if you take this and kind of put everything nicely like next to each other, it’s going to make everything so so much better. So the first step that we can do is, let’s just work on these texts of it. Let’s see we have 96 on this, and here let’s make this smaller, let’s go 64. So this is like a is a smaller tagline.
Let’s also create some buttons up. Here you can go to rectangle tool. We can strike out a rectangle that should be okay and we can also hit alt and just drag and then that’s going to duplicate everything for us good. So on this one, let’s, let’s just kind of structure everything nicely together. So one thing is that right now this kind of aligns itself to this blue box around, but I want everything to line itself based on the text, so the box should run like this cuz right now.
As you can see, this should be the middle because we have that orange highlighting there we go that’s the middle, but hey the text is not in the middle, so one way we can do. That is if we go to the triple dots here and by the way. That’s why I’m here with the webcam today is because you could not see those tools. My way, if my webcam would be there so hit the three dots here and we can do width height click on these two and look at that.
It kind of just makes itself the same height, the blue box as the text, so we can just do it on all of our texts with there we go that’s enough and I’m just going back to the default here of fixed. These don’t need it. So, let’s just organize everything nicely here, so where should we put this cuz? I kind of want to have the same distance with the shoes on the right side here and the left side as well.
So one thing you can use is a grid tool and figma. So, let’s click on the landing page and we can go to our layout grid. What you can do is click plus and you get this grid. We can open it here, go to columns and I can just do 12 columns and that’s going to give us a nice grid here. You can also change the opacity value here. If you’re blind like me – and you have issues seeing things and what we can do is now we can easily align this text.
Let’s say to our second column and even the the shoe we can kind of drag it to the second column here. So this is going to be here. We can drag this here like so and even the buttons we can just align everything nicely good. Now we can take everything and just move it to the center, so I kind of want to have this like so I kind of want to have the text here actually going to move this a bit more up and I’m going to have a bit of a Distance with the buttons like so, and we can also align this to its middle, but I can I want to make this smaller, because I want to have a navigation bar up here and I don’t want the shoes to kind of go over everything.
So I’m just going to make it a bit smaller, that’s something like that and just can’t drag it towards the center and also the second column here and we’re going to let go. We can turn this off and see what we have so there we go. Everything looks already way better than what we had now again as long as there’s like a decent structure to this, I guess you can move this around. You don’t necessarily like.
Maybe bad even looks better as long as you have a decent flow to your text and your buttons. Everything is good, so even here like you, don’t want that you kind of want to have everything nicely put together good. So there we go now we’re going to learn about and we’re going to mess around with colors and font in just a bit, but I also want to create the navigation up here. So let’s turn this back on because look right now we can do spacing and everything’s super easy.
So here I’m going to drag out this square, not squared the text tool, I’m going to drag out just a square thanks so good! So here I’m going to say home: I make this smaller hit. Ctrl alt, not all ctrl, a that’s going to select everything or just drag with your mouse, and we can make this let’s go. 2424 should be okay, we’re going to say home and what you can also do is just easily align this in the center by hitting this text align horizontally and then vertically here boom there we go now read this, we can just hold alt and drag, and we Can easily just drag this down here now.
This is not perfect. Let me resize this make sure that it hits the corners properly and strike again and there we go crank again. Look at that. We have the same spacing crank again. Actually, here I want to have a cart with a check out, so I’m going to delete this one and let’s rename this to shoes and rename this to we’re going to have about about good. Now we have a cart. I copied it from the internet and it’s just changed it a bit.
So I’m just going to link that as well in the description I’m going to put it here now to have a checkout button. We are going to have the Eclipse tool and I’m just going to grab a circle and drag it out here, make it a bit smaller, maybe something like so, and I have the same distance here as well a bit smaller, maybe yeah! That’s okay. Make sure that we have the same space here as well on the left on the right side, yeah that looks good so now what we can do here is just add a text again and just add one boom, we’re going to change this to white and we’re Going to change the contrast and everything in just a bit, so there we go, we can turn off the grid here by hitting the I and there we go look at that now: let’s change the colors and the font, so I don’t know when you have the When you have a product, I can only usually like to sample colors from that product.
So what I mean by that is I’m just going to pick the colors from the shoe and I’m going to create a palette out of that. So I’m going to have have some red for the things that I want to pop and I’m going to have some greyish color to the things that are less important. So what I wanted, what what I want to be important. Well, I want the text up here to be important and the buttons as well. So that’s my main thing.
I want you to look at so what you can do is hit the text hit the I and look he can just sample a color from that. Now. I’r going to give you the exact color I used. So, let’s see here we’re going to say hashtag. 8. 1. 3. 6. 3. Be there we go so we have an intense red. Color red is very intense, brings your eyes to it and a it just looks awesome we’re going to do the same to this, so what you can do is just hit I and just sample it from there.
Let’s go in the middle here. There we go hit. These we’re going to hit I and for this one I want this to be like a by now or just by, and this is like a secondary button. That’s not that important! So for this I’m going to have something like learn more about our shoes: okay, so for this one, actually, let’s get rid of the fill and I’m going to add a stroke to this click. The stroke delete the fill, I’m going to increase the width to like 3 pixels and the color I used on this.
It’s going to be. Let me copy this. It’s going to be six three, six, eight, seven, seven good! Let’s go and there we go so for our text and here we’re going to drag out and I’m going to say, shut up now, let’s make the smaller 24 yeah more 36 looks. Okay again, we can hit the align tools here to line it perfectly. Let’s change the color to white like so. Maybe that’s a bit too big. 2424 is okay, because we’re going to change the font as well, because this still doesn’t look that good and in here we can do the same.
We can do learn more all right. This is not as important, let’s go, and let make sure that these are the same size good now for this one we can do the the color of this can be the same as the border here, so we can hit the eye and we’re going to sample This as well now what I’m basically going to do for all of these buttons is I’m going to apply this color to the navigation, so make sure to apply all this gray color to these, so we’re going to go up here, hits eye boom hit eye, and Just sample this again: let’s do it one more time.
I think this one is already set to it and we can do the same for this square 91. The Eclipse and hit this color perfect. So now everything looks a bit better now. What you can also do is like take everything here and hit ctrl G, and you can group everything up nicely and name this check out. So if you want to be a bit more organized, I definitely recommend you to do that, especially if, when you’re going to have a ton of things, yeah you’re going to have a struggle having 10,000 things here, but I kind of want to do this faster.
So I don’t waste your time, so ya might not group everything together for you now. One thing I don’t like is the background. Color is just too white. There’s too much contrast so to change that we can go on the landing page up here and add a background color of v9b 1999, which is going to give us a much nicer shade to our website. So there we go perfect. What else do we need? What we can add the fonts, so this one looks kind of boring.
It doesn’t really have any flair to it and the way you can like to pick fonts is I like to read the font and if I read it, I kind of want to have the expression that I have in my head. So if I’m going to say something like run faster well, I want to have an intense font. Then, if you have something like we have monster odds here, so, let’s, let’s put monserrat well, this kind of looks smooth and like curvy and the cancer is like.
If I would read this in my head, it would be something like made for high speed running legends to smooth for me. I want something more intense if you want something smooth, well, yeah, you can use this, but I want something more intense so for that I use something called Rousseau one. So here we can do Rousseau one and, as you can see, this is just a bit more. Like sporty looking and it just it’s a bit more intense, so let’s change everything to Rousseau.
One here Rousseau, one good and we also going to drag this out. So it’s in one line and also the buttons here, I’m going to say, Rousseau, one and Rousseau. One now for these up here I can leave it like you can, have you? Can multiple fonts for navigation? Roboto works? Fine. You can also use monserrate, but this one is kind of standard. I don’t really want the the aggressiveness up here, so I’m going to just use Roboto and for text that I want on my main page, I’m going to use Rousseau one perfect.
So there we go. That’s our first page, let’s get into the second page. Let’s click! The frame tool, again click and we’re going to do the same height to this, so we’re going to go to our frame we’re going to do 1920 by 1080. I think so drag it up here. We’re going to rename this too and our product page and we’re going to take the second picture I linked and we’re going to paste it in here like so we’re going to drag this to the center and we’re going to add a background color to the second Page of, let me see quickly, it’s a a a a like so which is going to give us this super dark color.
Now what this is going to do is it’s going to bring out our shoe, because we have so much color in here and this one is just a faded color. I like it also because it’s elegant – I don’t know it just. I think it just fits everything. Really nicely and plus we have some darker colors up in here and it kind of just matches the background. So that’s nice as well. So we have that and let’s also add some text here on our left, so I’m just going to grab some the t drag.
This out, I’m going to say, err boost, because these are apparently the shoes and we’re going to just add white to this, and also one important thing. You can also highlight something with contrast. So if you want to have your eyes more on this one, then you can increase the contrast on this. So if you go darker here, as you can see, becomes more intense and it just pops out more. So that’s also another thing that I forgot to mention.
Maybe you don’t have colors, maybe you just have white and gray, so I’m going to show you here so err boost and maybe have a description designed for maximum speed. Perfect. Let’s make this smaller we’re going to do 24 on this text. Let’s do 24 and on the big one we’re going to do 72 thanks, oh right, so what I mean by that is. I changed this to white, but maybe if I want you to focus on on this one more, I can add a bit of a gray to this like so so it’s very subtle, but it brings out the upper decks more just because the contrast is way stronger.
But in this case I don’t really want to do that so here, let’s also do the the width. So it’s the same width here as well. What I don’t know this seems a bit small for me. Maybe 24 is not good enough. Let’s do 30 type 30. Here there we go drag this down, hit this tool again, the width perfect, and I added some more description which I wrote down. So let’s write it down with a soft and light weight finish to give you the extra boost of speed.
Wow amazing drag this to white perfect. Let’s also add a price here, we’re going to say price and we’re going to add 199 expensive super expensive shoes drag this to white and you know what we can copy the button from here. So grab the text and the button hold alt and drag it down here nice. So we can align everything nicely again. Product page, we can add the layout grid again hit columns 12 and I’m going to line it again to the second one so boom like that.
Crack this like, so, you can also get the same distance as you can see there. 49 49. So we can just crank everything. 249 doesn’t work on this one. Let’s add the width again. Did we get the autocomplete? No riperoni? Okay, that’s fine! We’re going to move this around a bit more: let’s grab the shop. Actually, I’m going to group these two hold shift, grab both G and drag this. Now there we go 49, so we can grab everything and kind of Center it.
In the middle perfect. This one drag it all the way here again to the second one, and let’s get rid of this hide. Oh, that’s the upper one, the product page, there we go perfect and I kind of want to highlight this as well more so what I’m going to do is I’m going to grab the rectangle tool and drag out a rectangle like so now. I can bring this all the way down below the shoes and I can add a corner radius of 50 to make it rounder like that, and I can sample the same.
Let’s just bring down the opacity of this like 20 or something as you can see, that kind of makes this card’s pop. So I can bring up the shoe and what I want to have below here is the way you can select the individual colors to the shoes. So maybe you can click through the colors and and the shoe changes its color. So to do that, I’m just going to grab the ellipse tool just drag out a circle like so, and I’m going to sample the color from the shoe hit.
I we’re going to get this color. I think so dragged out with alt I’m going to have three times, so we have the same. Spacing hit shift I’m going to just move everything to the center and for these I’m going to go to the fill and we’re just going to change. Actually, this is too vibrant for me as to this is a darker part like this one, alright, okay, actually I have one here, which is not that that bright and the color is FF.
Let’s change it to this one. I prefer this one ff4 4b nope. That’s not the one FF four four four be perfect. So for these I can just go on this one sample the color again just pick whatever color you want. I can sample the previous color and just change it, and then it’s going to look nice. So maybe we’re going to have a shoe with a purplish color and let’s do a I don’t know, shall we go with a greenish one there we go that looks kind of cool, so hey there we go.
We did our second page didn’t even take so long. There we go look, it’s super simple, it it pops, you can see everything nicely, and the thing I can kinda also want to emphasize is that you shouldn’t add more things that are not necessary. So you see a lot of signs that add weird shapes and a lot of scrap that doesn’t really have anything to do with it just to make it look cooler or something I don’t know, but let’s do the last page as well.
It’s getting kind of dark. Ah, so, let’s do we’re going to hit the frame tool. Click we’re going to do the same size again 1920 by 1080. There we go drag this here, I’m going to go turn on the lights good. So now that we have the lights turned on, we can finish our contact page. So for this one again, we can just sample colors that we have from up here alright. So for the text and everything now for the contact page here, I don’t really want anything crazy.
I just want to form – and I want to I want to let people know that hey this is a contact page, so I’m just going to drag out some text here, I’m going to say, contact contact us like so we’re going to make this bigger. Let’s do 70 to 94, just the big contact page here, good, let’s make it the same size here, I’m going to drag this to the middle like, so you can do with the the grid tool again to make sure this is centered after the one.
I think so I’m going to do this fast now, but we can just copy the color from up there. Then we can have a contact form up here now to add a little flow to this. We can just drag out a a circle like so, and I’m going to drag this below well above, like so I’m going to move this and we’re going to have our contact on top of this one good. So for this we can just grab the color from up here again, so I don’t want this to be super blocky.
You could just drag down a a line. You can make a square, but I think this gives a bit of more of a flow to the page good and now here we have the inputs, the name and the inputs. So we can do text drag and we can do name. You can make the smaller. Let’s do 18 huh too small, 24:34 yeah. That’s okay, see 34 change this to white and then we can do also, let’s yeah, that’s okay, alright, so we have the name here.
We need a rectangle tool, I’m going to drag it down below. Here I’m going to get rid of the fill and just add a stroke, so hit the minus at the stroke and again we can just sample the colors. Let’s make this three pixels and we can do I boom and there we go look. What we can also do here is just copy/paste everything down below so here. I’r also want to make sure that this is aligned properly with the box.
Let’s actually make some changes here, just copy this one in this one so hold shift, I’m going to drag down with alt and, as you can see, we can have the same spacing here. Let’s try 35-ish, I think so. You can drag again going to get 35. So we can change this to email and we can change this to message and for message. I cannot want to have a longer message. Some I can drag this down like so good and we also need a submit button again.
We can copy/paste things because why not? I’r going to actually put this to the middle as you can see, we have the flow going on, but what you can also do is rather than having this here. You can have this to the center because that kind of pops more you have structure here and all of a sudden boom. You have this well, it kind of brings attention to the submit button. So that’s the only reason why I’m putting it here.
Some people look like here: oh it’s, it’s whatever, not really a big deal. I like it centered. I think it it entices people to click it more. This is a group by the way, so we have to open it up and we are going to change the text to submit and there we go. Let’s make sure everything is centered here as well. Now this kind of annoys me so I’m going to lock it here. We can just grab everything here and just make sure it’s centered with the text like so but hey, look there we go, we have a full website made.
So thank you for reading this hope. It helped in any way and yeah. Let me know if you want to see more of these design kind of tutorials. Thank you. Thank you again. So much for reading, please consider dropping, is subscribed. I’r waiting for my monetization by the way hopefully gets approved. Let’s finger cross because if we get monetized, then that means a lot of a lot of articles coming up who that’s? Let’s pray, alright, guys! Thank you so much for reading til next time, bye, bye, friends,