In this video, we're gonna be using Sigma to create a landing page design which you can see right over here.

And this landing page design is inspired by my CSS course because this project is actually something that we build in the CSS course.

So if you're interested in taking this course and learning more about CSS so you can really take your design skills to the next level, it's going to be linked it down in the description below.

So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simplify the web for you.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this.

And as I mentioned in the intro, we're gonna be building out the design for one of the projects that I built for my CSS course.

And I really like this project because not only does it have great CSS principles in it, but it also has really great design principles and things that you need to think about when designing a project and for the rest of this tutorial, I'm actually gonna turn off my face camera just so I don't cover up anything in the bottom right hand corner of the screen and also to get started.

I have all of the different icons and images we're going to need for this website already compiled for us, so we don't have to worry about doing that.

Waiter.

So now when you have figured open to a new project, the very first thing that you need to do in order to start drawing and creating a design is to set up a frame.

So up here in the top left hand corner, we could select a frame and then we just drag out this frame to be any size that want and for our purposes, we're gonna pretend that we have a 1920 by 10 80 aspect ratio for a desktop screen, which is fairly common.

So let's just type in here 1924 with and 10 80 for our height, and that's going to give us here, as you can see in 1920 by 10 80 rectangle, and this essentially represents one screen worth of space inside of our design.

Now, before we get further on this design, we first need to understand what this design is.

Four.

And this particular Web page is going to be the landing page for a Web Dev simplified boot camp.

If that was something that I had, so that's the idea that we're creating with this Web page.

So we need to make sure that we think about the use case of this Web Page one.

We're designing it, and the use case is to get people to sign up for this boot camp, as the number one thing that this landing page were creating needs to do is we have to make sure we know that when we're designing and keep that in mind.

So the next thing I want to do is first focus on the first thing the user is going to see, which is that landing page top portion header of our website, which is the first thing that a load into their application.

And what I'm thinking is that we should do a full screen image for this landing page.

I think in general that's a pretty clean look that you can see across tons of different websites.

So I think it's a great safe designed to start with that always look good.

So obviously the first thing we need is going to be our image.

Luckily, I've already selected this image for us, and we can just place this image into our frame and expanded out until it's wide enough to fill our entire screen.

As you can see, here we have 1920 by 10 80 and this image takes up that full space.

The next thing that we need to focus on is going to be our main title section, which is going to be in the dead center of this image.

So it would select the text icon up here, and we're gonna drag out some text in the middle of our page hopes.

Drag that out, and then we can just type in whatever text we want.

I'm just going to make our frontier quite a bit larger so that we can really easily see this.

So let's just say that this is going to be 144 is the font size, and this is going to say W.

D s boot camp and let's just expand this all the way out so we can see all of our text and a really easy way to do that is just double click on the edge of any of the sides of your text box.

And it'll make the textbooks as big as it needs to be to fit all of the text, but no bigger.

So it's just set that right here in the center of our screen and change the color too late.

So we're gonna select our fill, change it to wait just like that, and we want to make this really stick out.

So we're gonna make it bold.

And Rex, you're gonna change the font to Gotham Rounded.

Now, this is a fun that's not built into fig MMA.

It's a fun that I use across all of my different projects.

But you can use your own fund, whatever fart you want.

There's absolutely tons of funds built into figure that you can choose from.

So really, just go with every font you want.

So again, let's do a little trick.

DoubleClick.

Get this in the center just like that, and we have our title.

The next thing that we're going to need is going to be our subtitles.

So I'm just gonna copy this down.

Just like this.

I'm going to change this here to have a smaller text.

We'll just said Maybe 96 for now, and we can save from no stack to full stack every go get that in the center, and we want to just reduce this font size even further.

I think it's a little bit too big, will try maybe 48 it's a little small.

Let's do 64.

There we go.

And then we're also going to change this to no longer be bold.

We're gonna have it slightly less bold and maybe a little lesson that there we go that way.

It doesn't overpower this main title, and I also think this main title is a little bit large.

So let's try to reduce this fund to maybe 100 then bring this back into the center and Rex, you're just gonna bump it up a little bit from the center.

So it's just a little bit in the top of our screen.

Just like that.

And Wolf course obviously need to bump this fund down.

What's try 50 for example, and we're again going to want to move this into the center kind of right below our title like that and I think that looks pretty good.

But one thing you'll notice is it's really hard to actually read our text because it's this white text over this not quite super dark background.

So what we need to do is actually adding mask over the top of our background to make it appear darker.

So an easy way to do that is to just grab this rectangle tool here.

And we can drag this out across our entire frame just like that, and we'll move it down in the hierarchy.

So it's right above our image, but it's not covering our text.

And then we can just change this to be completely black, just like that, and we could drop down the opacity.

Let's say 20% maybe, and you can see our Texas already quite a bit easier to read.

If we make this 40% you can see the text is even easier to read and let's try it 30%.

Maybe that way we can still see her image, and the text is also easy to read now, in order to make it easy to work with our frame over here, one thing we can do is select multiple elements and hit control G.

That'll group these together so that we can easily work inside of this hierarchy.

And we're gonna call this group are background just like that.

So we know that this is our background section also AH, group of these two sections in the middle.

I'm going to call this our title so that we know this is our title section of our page.

So we have our background and our title section.

The next thing that we want to work on is some type of call to action.

Right now, we have a really good landing page that tells the people what they're actually getting into, but we want to have some way for them to actually take action.

And like I said, the most important purpose is to get people to sign up for the boot camp.

So let's add a little button in here that asked them to learn more about this little scroll them down to the sections that describe the rest of our boot camp.

So let's start to create a button with a rectangle.

So we credit rectangle here and inside of this rectangle.

We're going to need some text.

So let's just make the text the same exact size as our rectangle hopes.

There we go, and we want us.

Have this say learn more and again.

We want this to be the exact same size as a rectangle.

And then we could just group these two elements together too cold.

Ingmar, learn more button.

So now we can scale our group and it'll scale both our text and our background at the exact same time.

Now, obviously, our text is way too big.

So let's select this text and drop down this size quite a bit.

Let's just say maybe a size of 20 that maybe looks a little bit small, which Dr.

30 and again that's still pretty small.

So let's just dump it all the way up to 50.

So it's about the same size as our from no stacked a full stack.

We can justify this in the center by using this center here horizontally and center vertically.

So we have our button text right in the dead center, and we're gonna change this to be a white colored text because we want to have our background of a rectangle here for a button to be a blue color, which in our case is zero a.

F.

And if we say that you can see we get this nice accented blue color, which I'd like to use all across my different applications.

It's kind of like my brand color.

So if we zoom this out, we can see we have a nice big learn more button, which is what we want, And I actually think it might be a little bit too large.

It's kind of overpowering things.

So let's drop down that fine side just a little bit will say maybe 40 and we're gonna decrease the size of this rectangle bit.

There's no reason that it needs to be quite that big if you hold down old while scaling, it'll skill from both directions at the same time keeping your things centered.

So we're just holding down lto scaling that down just a little bit.

You can see that button already looks a lot better.

Also, make sure we scale down our text.

Size is well, I realized that didn't get scaled down, So then the next thing that we can do is change our button toe have rounded corners.

There's this nice little border radius tool over on the right hand side.

Here.

We could just bump this up and we're gonna make a pill shaped button.

So as you can see here, we could just click this and drag, and it'll increase and decrease that border radius for us.

We're just making it large enough that we always get this pill shaped button.

As you can see, we now have that nice big learn more button.

I'm gonna decrease the height a little bit.

I think it's a little bit too tall, and there we go.

We have that nice learn more button that people can click on in order to learn more about this boot camp.

Let's just make sure that this button is dead center in our page, just like that, and that looks great.

The next thing that I want to work on inside of this section of our application is going to be the knave bark that goes across the top, so our users always can navigate to the different sections of our Web page.

So again, what's add this learned more button into our title section so that we know everything in here is our title section.

We have our background and then we're gonna create another rectangle which is going to be for a nap.

So we'll just create this at the very top of our page here, and we're going to put this inside of a group which will just call knave.

Now we have that rectangle inside of our group and we can change the background of this rectangle and something that I want to do is make it pretty much blend in with the background of our image at the top.

But then it'll stand out really well over top of the white background of the rest of our app.

So an easy way to do that for us So we can select this Phil here for a rectangle and what we can do is we could select the eyedropper tool which will allow us to select a color from inside of her application.

And I want to select someone of these colors for our background.

So let's just select here.

And as you can see, that's giving our background here of our NAB are very similar color to the actual image that we have it inside of So what kind of blends into the background of our image, which is great.

And then when we put the snack bar over something that's white, it's gonna really stand out.

So I think that looks really good.

Next thing we want to do is drag our logo into that frame.

Soldiers dragged this logo over into our Navid bar.

Make sure we get it nice and centered inside that, Navarre.

And make sure we drag this in tor knave grouping just so everything stays really clean.

So now we have our logo inside there, which is exactly what we want.

Next thing that we need to work on is going to be all of our different navigation links on the right hand side.

And for this particular landing page, we're going to have three different sections.

We're gonna have a curriculum section which kind of describes what our application and boot camp is about.

Next, we're gonna have a pricing section, which is going to say how much it cost, and then lastly, we're gonna have a contact form, so that's going to be our contact button.

So it's ad in these different types here So what's just select our textile and we're going to have his first text of correct.

You come just like that, Expand this out a little bit.

I want this to fill the entire height of our number so we can easily expand and collapse it as we need to drag it into that knave group and we'll change our color here, obviously to be white.

So it's easy to read, and then I'm gonna copy this down so that we have pricing just like that.

And I dragged this in here and again.

Just make sure that these are the exact same with as our text.

So we could do that DoubleClick technique to do that.

And then, lastly, what's copy this One more time and we're going to have our third text, which is going to say contact.