Placeholder Image

字幕表 動画を再生する

  • Hello, everyone.

  • 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.

  • And now, in order, Thio equally spaced these elements out from one another.

  • One trick that you can do is if you have something selected, it'll tell you how far apart it is from other elements.

  • As you can see here, we line these up.

  • When we get to this point, it will have this text 72 over here essentially saying There's 72 pixels between each one of these different elements, so that's one easy way to space.

  • Are elements out equally?

  • But we can also just put these inside of a group.

  • And now, with that group selected, we get a new option over here in this section, which is our spacing.

  • So as we increase in decrease, it's going to change the space in between our individual elements.

  • So it zoom this out a little bit so we can get over Arc in view of our entire AP, select that group and kind of place it where we wanted to be.

  • And let's just say we're gonna reduce the space in a little bit until we get something we like, maybe right about there.

  • And then let's drop this into the corner just like this, and then we go.

  • We have our entire navigation section done for a nap bar.

  • But one problem is, our numbers kind of tall.

  • It's a little bit taller than it needs to be, so it's just shrink.

  • This nab are down a little bit.

  • We can just select our rectangle, shrink this down to maybe about there and then just make sure the center everything else inside of it just like that.

  • So now we have our nice and smaller looking number, which I think looks really good.

  • One thing to note, though, is the most important part of our application is this contact form button.

  • So let's make sure we really emphasize that contact form and also reduce these items in size a little bit because they're fun is pretty large.

  • So we can just select our group here and select each one of our elements inside of it.

  • So we can actually change for font size.

  • And let's just drop this down to maybe 30.

  • And we also don't want this to be bold.

  • We're gonna use a normal book fund just like this.

  • And now that we have this so much smaller, we select our group, we can actually reduce the spacing in between these elements as well.

  • You'll notice that option is not showing up here.

  • So in order to get this option to show back up, we need to click this up here where we can redistribute our horizontal spacing.

  • And if we click that you can see it evenly.

  • Distributes are horizontal spacing and we have the ability to shrink or grow that spacing as needed.

  • So it's just shrink that down a little bit like this and bump this back into the corner.

  • I think that looks pretty good.

  • Mixtures centered just like that, and now we can draw a button around this contact section.

  • So again, what's grab out a rectangle?

  • Put that dead center over top of our contact button and let's just group this here and call it Contact button.

  • And now we want to just slipped our rectangle and change the color to be that same.

  • Zero a f color round out our corners and let's make the text instead of here bold so that it really sticks out compared to the rest of our text.

  • And if we zoom out, you can see that now that contact button really looks like it's more clickable.

  • I think bold might be a little strong, though, so we use this medium front instead.

  • That way, it's just slightly more emphasis, but not quite over the top.

  • And with that you could see that our entire NAB art is complete.

  • The only thing left to do for this header section is to add a little arrow indicator at the bottom to tell people that they have the ability to scroll down to see more information.

  • So I have this nice little Aargh icon that we can use here.

  • Let's assume that in Make sure we fill this in as white, and we just want to make sure this is in the dead center towards the bottom.

  • And I think if we look at that, that looks really good and you can imagine inside of your actual project you can make this have a little up and down animation, so people really know that they can scroll down to figure out more information.

  • The next thing we need to work on is going to be the next section of her application.

  • So it's click on her frame and actually scale this out as big as we need it to be.

  • So it's just dragging down here quite a ways, and one thing you'll immediately notice is our header actually spills over the edge of our application.

  • We want to make sure that this header image is only ever as tall as our single page are 10 80 height, so what we can do is go into our background section here and we're actually going to use a mask.

  • So what we want to do is just create a rectangle that is the exact size that we want.

  • So we're just gonna draw it here to be the exact same size that we want our image to be 1920 by 10 80.

  • And we're gonna drag this down into all the way down here Our background, We're gonna put it at the very bottom of our background.

  • And what we can do is we can click this button up here which essentially says use as a mask.

  • And what that's going to do is is going to cut off everything that is outside of this rectangle.

  • And since this rectangle is only 1080 pixels tall, all of the extra image stuff that's below that, as you can see by that blue outline, is completely hidden by this mask.

  • And masks are based on the group that the item is inside of So as you can see, everything above this in the group is being cut off, which is exactly what we want.

  • So now that we have that done, we can work on our next section, which is going to be our curriculum section.

  • So let's just pop out a text element here which is going to say curriculum looks, curriculum just like that and we just want to bump up the size of this quite a bit.

  • So let's try maybe 48 and maybe a little bit bigger with you 72 maybe 96.

  • I think 96 on a little bit will be 72.

  • So we have our header section.

  • Shrink that down just like this and we'll put it in the dead center of our screen Kind of towards the top.

  • Looks pretty good to me.

  • And let's make sure that this is bolted because we want this to really stick out.

  • I mean, this is the header of our entire application, so that really sticks out.

  • Now the next thing to do is work on the content inside of this section.

  • But first, let's clean up our sidebar.

  • Over here we have her nah vahr title.

  • In our background, we can actually group all these together, including our down arrow inside of one other group, which we're just gonna call our header And in this curriculum, we're gonna put in its own group, which we're gonna call curriculum Every guild.

  • Let's drink this below the header just so it's easier to see in the hierarchy.

  • So now we have our curriculum section with our curriculum title in it, and what we need to do is create our curriculum content.

  • And what we're going to do in this content is we're gonna have an image which is one of these six images followed by some text, and it's gonna be in sort of a two column layout.

  • So we're gonna have an image text and then another image text over here and have three rows of that that would have a really nice you eye of explaining exactly what our application does.

  • So what we want to do is we just come in here and drag our 1st 1 down.

  • We'll say HTML five is going to be the first point that we're going to cover, and what we want to do is make sure that we have some text next to this.

  • So for our text, we're just going to say start with the basics Bye, learning HTML and CSS to build your first website.

  • So this is kind of some marketing text.

  • We essentially want to entice the user saying that this is a really great program and you're gonna learn all these amazing things.

  • Make sure we spell learning properly, though otherwise that would look pretty bad.

  • And let's drop this size down quite a bit.

  • Will say maybe 18.

  • That's a little bit small.

  • Let's do maybe 24 and that looks pretty good.

  • And we also don't want this to be bold.

  • Obviously, let's change it back to a normal book front.

  • And let's just drag this in next tour html icon and actually, we'll do a slightly larger faultless to 30.

  • I think that looks a little bit better.

  • It's a little easier to read, and we're also gonna make this left aligned.

  • We don't want this to be centered because that'll obviously look really strange.

  • And I also think that book sizing is a little bit too Thins will go with medium here just so it sticks out as a little easier to read.

  • And also we're gonna change the color of this text to be the same color as our nap bar up here.

  • So it's like that in a bar and copy over this color and make sure that we applied out to our text.

  • Phil.

  • Just so we have a slightly less black text because when you have black on white like Pierre Black on pure white, it's really high contrast and difficult to read.

  • It's kind of painful for the eyes, so just reducing the darkness of that black color is really gonna help with readability.

  • We could do the same thing with its HTML five icon, will change that filter that same color and helps it fade out a little bit into the background, which is what we want.

  • And it also makes it so.

  • It's not so harsh to the user reading it.

  • So what's at a little bit more spacing in here?

  • Make that look good.

  • Expand this out so it covers three lines.

  • I think that looks pretty good.

  • And also what's group these together and we'll just say curriculum.

  • So just like that.

  • So now we have an actual cell worth of content.

  • The next thing I want to do is make sure we copy this down and do this again directly below it, so we're gonna have another cell down here, and this one is going to have obviously a different image.

  • We use this V s code icon so it's delete this HTML one and dragging this V s code one and make sure that we have it inside the correct curriculum.

  • Self.

  • So this first cookie I'm sell here is Number one will drag these Southern order.

  • And then number two is down here and will change this to be a different Phil.

  • We're gonna wanna copy that, Phil from our text.

  • Zach.

  • Same Phil.

  • We used for everything else.

  • There we go just like that, and that looks great.

  • And we can even change this text if we want.

  • For example, let's say, use the latest technology for editing and creating amazing Web applications.

  • Here we go.

  • Just something to entice the user that's coming to this web application.

  • Now we can do this one more time by copying down this curriculum.

  • So So we have another curriculum, so just do that directly below.

  • Maybe right here, For example, change up the text inside of this one, which is going to say create what's stunning designs by using modern design tools like Sigma and sketch.

  • Here we go.

  • And let's copy this icon in there instead of the V s code icon so we can delete that dragged this icon in and make sure we put it inside of our cell.

  • And, of course, change the color to be the same color we used for our text.

  • So we'll just copy that in just like that.

  • And now we have all three of these roads completely done, and what we want to do is group these three things together into one single column.

  • So we'll say, Curriculum column.

  • And, of course, let's make sure we drag this into our curriculum section.

  • So now we can actually space these columns out from each other just like this, as you can see here.

  • And let's just do a little bit of space between them, maybe something like that looks pretty good.

  • It doesn't have to be exactly perfect, but I think for now that looks pretty good.

  • So now that we have this curriculum column done, we can essentially just duplicate this for our other column.

  • So it's just copy this over to here, and this is going to be for other column and let's make sure we group these columns together.

  • Intar Correct Human grid.

  • And that way we can.

  • Spacey's out as much as we want, as you can see here.

  • But for now, I think this curriculum grid right here looks really good on.

  • We just want to make sure it's completely centered.

  • Next thing to do is change out.

  • Our icons were going to use these three icons instead.

  • So let's get the icons we currently have deleted was drag in our note icon up here first.

  • So we have this node icon.

  • Make sure to center our database icon again.

  • We want to be centered.

  • Lives just like that, and we'll get rid of this and Dragon are react icon.

  • And of course, we're gonna change the color of all three of these different containers.

  • To be this to to to f to be color, same as the rest of our text, and we're gonna want to change the text inside of here.

  • So it's changes.

  • Text to say, build interactive with applications.

  • With the worlds the world's most popular back end.

  • Here we go.

  • Let's just increase that a little bit, little bit whiter.

  • Look slow it better next we'll say manage application data by learning sequel and no sequel database architecture.

  • Er and again, this one needs to be just a little bit whiter and lastly will say used the most popular front and framework to its framework to create modern p W ays every go and this is our entire curriculum section Essentially done.

  • Make sure e capitalize this use here so it looks professional that we go.

  • And as you can see, we're that include her icons, where it will include our text, everything and were able to lay it all out really nicely by using that grid system and that space evenly system as you conceivably select this weekend really nicely.

  • Spacey's out, which is great for when you want to create this type of content.

  • So that's our entire crew from section Done.

  • Let's move on to our next section, which is going to be this pricing section here, and in order to easily distinguish thes sections, something that I like to do is to have essentially what I call an accent section.

  • So what you do is you just create a rectangle sole credit my hair rectangle, and you want to give it a color.

  • In our case, we're going to use our accent color of Oh A F.

  • And this is going to just give it a really start color, and it's going to separate it from the section that came before it, which is this curriculum section we don't have to worry about.

  • Using any types of weird borders were weird color.

  • Grady.

  • It's always the day vicious.

  • That's really sharp contrast in Color section, which perfectly distinguishes these two sections from one another.

  • So now that we have this color, we can put our content inside of it.

  • So let's make sure that we drag this rectangle down, group it up, and this is going to be our pricing section.

  • And it's really important that when you're creating your groups inside of your stuff that you have them inside of individual sections, it just makes it so much easier to work with.

  • And as you can see, these icons are not actually in the sections they should be.

  • So I'm gonna make sure that I dragged these icons down so the note icon is going to go inside of this section with our note icon.

  • Our sequel icon is gonna go in here.

  • And lastly, our react icon is gonna get in there just to make working with this so much easier.

  • And the next thing to do is add the title for our pricing section so we can come in here and you may think we would just put pricing, but actually, since his boot camp is free, we're just gonna put the text free inside of here.

  • And we're gonna really bump that text up, make it really large, would see how that looks.

  • We make it Max with it's a little bit too big.

  • So Well, maybe Friday 100.

  • I think that looks a little bit better, but maybe 80 maybe 92 93.

  • That looks pretty good.

  • We're gonna make this bold, so it sticks out and white so it sticks out over top of that background.

  • Now it's dragged that in here.

  • Give it a little bit of padding around the top, and that looks pretty good.

  • The next thing to work on is going to be the text that goes below this free just kind of describing the free a little bit further.

  • So let's bump that text down quite a bit.

  • we'll say 48 and then we're gonna type this in.

  • That says Bets, right.

  • All of this amazing content is available.

  • Lips available completely for free on you too.

  • Here we go.

  • Make an exclamation point and we're again gonna end.

  • It drastically reduces what's try 24.

  • That looks pretty good.

  • We're gonna make it not bold.

  • We just wanted to be medium.

  • And of course, that white color.

  • And let's expand this out a little bit, so it fits on the two lines.

  • That looks really good on two lines.

  • And there we go.

  • That's our free section.

  • Done.

  • Let's just reduce the size for patting.

  • We don't quite need that much padding around it.

  • I think that looks pretty good and, well, maybe add a little bit more space here and drag this down a little bit.

  • A reality that looks Ah, there we go.

  • That looks pretty good.

  • And that's our free section completely done.

  • The next thing that we want to work on is this final contact form, which is going to be the last part of our application.

  • So it's just drag our frame down quite a bit more, just like we have here and work on that contact section.

  • So this contact section is similar to curriculum and that has a title.

  • So we could just copy this curriculum title down and put it mount right here and say contact instead.

  • And just make sure that this is dead center, just like groups that there we go.

  • And we want to make sure that this contact section is not inside of our curriculum section.

  • We wanted to be a own grouping.

  • So say contact section for that group title and inside here we can work on our text boxes and our labels.

  • So what I want to do is I want to create a rectangle.

  • This is going to be for input, will just drag this out.

  • We don't want any Phil around us, but we do want to have a stroke.

  • This is essentially a border, and we're just gonna have here a one pixel border, which is going to be that same color as the rest of our text.

  • And we're going to give it slightly rounded edges so much going around it just a little bit till it looks kind of nice.

  • I think that looks pretty good here with those slightly rounded edges.

  • And now this is going to be the actual box for input.

  • And I'm actually going up this border size slightly bigger to be a border of two.

  • Just so it's easier for you to see on your screen.

  • And I think that actually even looks a little bit better.

  • Now, the next thing to do is drag this into our contact section and add a label over top of it.

  • So the label for this we reduce that font size down to maybe let's try 36.

  • We're gonna have this be the name of the user, and we won't line up a text box the very edge, and we're gonna group thes together.

  • So let's group together this rectangle and our name, and this is going to be just called input.

  • We'll just have it a generic input.

  • And now what we can do is actually just copy this input and this is going to be our email field, which we're gonna put over here right next to our name Field.

  • We're gonna want to select both of these moves, and I only want to make sure I get these two inputs soldiers select him from the side here and just drag him out.

  • So then the dead center of our screen, just like that, it looks a lot better.

  • And from here we can just change this to say email exactly like that.

  • Now the next thing to work on is another input, so we'll copy down a new input.

  • But this is going to be for the message of our text.

  • So we actually want the input box itself to be quite large, because it's going to be the entire message they're sending us.

  • So let's say we want it to be about that big and will change this label to say message.

  • And of course, obviously increased that size that fits that.

  • We go.

  • So now we have that portion of our contact form done, which is great.

  • What's group together inputs into a grouping which will just call form, and we're gonna drag this up so that's pretty close to our contact.

  • I think that looks pretty good.

  • And also I noticed that these text out here are not in our pricing section.

  • Solicitors dragged those in just so it looks a little bit cleaner in our hierarchy and now inside of this form, we need to create another rectangle.

  • But this time it's going to be for Button.

  • So we create that down here, drag it into a reform, and we want to use that same zero a f color that we've been using everywhere else and instead of doing a pill shoot.

  • But I'm just gonna do slightly rounded corners like that.

  • Now, up next, we're gonna want to put our text inside of that button, which is just going to say send and we're just gonna change the color of that to be Wait.

  • So it's easy to see and will bump up that font size a little bit.

  • Maybe we'll try 36 maybe even bump.

  • It'll wait.

  • 48 36 looks better close to 36 we'll make it bolt.

  • And then to make sure that that text is centered in our rectangle weaken group those two together, just call it button, and then we can make sure that our text is the exact same.

  • Size is a rectangle, so scale this down with same size a rectangle and use the centering tricks.

  • We centered a horizontally and vertically over here and then we'll just decrease the size of this rectangle, using that old trick to make sure scale it from both sides.

  • And there we go.

  • That is our send button completely done.

  • Let's actually scaled down the rectangle a little bit on the topside to a little bit too tall, so we'll just scale it down, get it down this way, and we'll drag over that button into the right set of reform just like that.

  • And I think that sounds a little bit too big.

  • Bump that down to maybe 30.

  • There we got it looks so much better.

  • And that's our send button completely done for application.

  • And the next thing we want to work on is going to be our footer, and our footer is actually the exact same as our header navigation.

  • So what we can do is you make this into a component so we can right click this and we can just say create component down here.

  • And now when we copy this component because this a copy that when we changed the base component, it'll actually change the copied component.

  • So it's just drag this down here for now, bottom and what we can do.

  • Make sure that we drag this out into its own section for a new life down here.

  • We're gonna call it a footer.

  • Now, if I would have changed something up here, for example, I were to remove curriculum.

  • You can see it removes it down here from the footer to their linked together.

  • So now all the changes we make toe one never will also happen to the other knave.

  • And now all we need to do is shrink down our frame.

  • So it's just scale this down a little bit.

  • Of course, we need to make sure footer is where we want it to be.

  • Insolence!

  • Put it just about there.

  • Shrink down, over frame.

  • As you can see, we now have her application completely done.

  • And that's all there is to creating this landing page design.

  • Like I mentioned at the beginning of the video, I created this project inside my CSS course.

  • So if you wanna up your skills as a designer and a developer, make sure you check out my CSS course where you can learn everything you need to know about CSS.

Hello, everyone.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

Figmaでランディングページをデザインする方法 (How To Design A Landing Page In Figma)

  • 7 4
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語