Design your website with Figma | Web Design

1. Course Intro: When you're in a startup or just creating a new business, you're usually star thing was very little capital. In today's world, it's very hard to run any kind of business without having some kind of online presence. That is why we beat prototyping. Tools such as Figma comes in to be handy, allows you to build the website or app prototype using the least amount of resources for free. Let's say e.g. you're working on an educational startup and your team asks you to build a website using HTML, CSS, and JavaScript. Let's say you are a pro quarter and you build this educational startup landing page in two days. After reviewing your work, one of your team members tells you to change the background color. You would need to go through your codebase. You need to make changes to the cascading style sheet and deploy the code again, which is very inefficient and waste a lot of time. However, this same changes Figma is very straightforward. You can change the background by going to your, though, electing on the eyedropper and selecting the color you'd like your background to be. This is just a very basic example and as things progress, it might not be this simple. Your goal as a new startup or a new visits should be to build something by using the least amount of resources with software such as Figma, which are game changers. Yes. Then iterates someone who has worked as a software engineer for the last 20 years. And one of his articles mentioned that investing in the design process, whether that be through having UX designer or simply by educating yourself, will deliver enormous dividends. In the long run. That's where Figma comes in. It allows you to invest in the design process and validate what you've built with your colleagues. This course is for startup founders, new businesses, or anyone who wants to learn Figma and use that knowledge to design a website or landing page. Although the main focus for this course would be sigma, we'd also be covering other important web design aspects such as alignment, color palette, topography, getting inspiration, logo, wireframing. My name is Otto, and I'll be your instructor in this journey. And if you are ready, Let us begin. 2. Getting Started with Figma: Welcome back everyone. We will now get started with Figma. If you have already have big mess that up on your device and also have some experience with it. Feel free to skip this portion of the video, assuming that this is your first time using Figma, Let's get started by adding sigma on our web browser. Make sure to select on the thick of my website that appears. That will prompt you to the Figma homepage. And if you already have an account or you have to do is login. However, if you do not have an account, press on, Get Started and sign in with Google or provide your information and create an account once you're logged in, this is what it should look like. Oftentimes there's no need to recreate something from scratch. We can always build upon what others have already created. For e.g. if you go to the community, Ginny can find resources from getting icon's all the way to wireframes and everything in-between. E.g. let's say that you're looking for a startup landing page. You can press on web and type in startup landing page. And there you go. We have a variety of designs to select from. This one has a lot of reactions, therefore, it must be good. He can get a copy by pressing on, get a copy. Once you have it open. For instance, if we just go to the hero section, there's a lot of different designs that you can see making this from scratch to have taken a lot more time, however, with the help of the community, you can make your startups landing page and a much lesser time. Our main project for this class we'll be creating a startup landing page. However, to give you the full overview, we'll be doing most of the things from scratch. 3. Project 1 Startup Landing Page: Welcome back everyone. The first project for this class is to build a startup landing page using this sigma file that was shared in the community. And the purpose of this exercise is to help you build a startup landing page and a minimum amount of time leveraging resources created by the Figma community. For the purpose of this exercise, let's say we want to build a landing page for a no-code website builder under pH. If we go to here or section, and if we navigate through the hero pH, we can see a variety of designs. Enter ten, looks great, or a no code website. However, header 15, the title much smaller. So I'll just select that for this exercise by going to our left and you just select on header 15, I'm pressing Control C, that will have it copied. Let's get down to the component section and let's create a new page under it by pressing on this plus button, renamed from age 17 to landing page and pressing Control V. Let's go to the Features page and see if we can find something that matches our hero section. Feature 37 seems to match the title we have in our hero section. So we can copy that by going to feature 37 from here. Press Control C, and paste that back to our landing page and make sure they're aligned. It's also good to have a page where we can display what we offer. And from here if we go to the stroke is P, you can find that chose cookies six. It looks great, great. So hopefully that back to our landing page. Let's assume that we are a subscription-based business. And if we go under age to pricing tables, There's a variety of options to choose from. Pricing table A3 looks great. To keep things simple, I'll stick with pricing table five. So let's also copy that back to our landing page. Now, let us add a theme section. Let's go to the team's page. Four would be great. I said that would allow us to stay consistent with the color palettes. We already have the green button copy team for back to the landing page. Let's add two more items and we'll pretty much be done or a basic startup landing page. Let's go to the contact section. And after skimming through to see which looks great, I find contacts, sex to be very neat. So let's duplicate that back to our p.stance. And lastly, CMS are put our page. And here's where we can have about companies section, a resource section, or whatever works for your business, depending on the nature of what you do. Foot or five looks great as it has a portion where you can allow your users to subscribe to newsletters. So I'll pick on foot or five and replicate that back to our landing page that allows you to quickly present your designs to others. So you want to showcase this to others. You can just make it look better by pressing present. And once it loads, can press on this hours. And this will allow you to quickly present your ideas to others. And in no time we were able to create a landing page that looks very good thanks to the Pigma community. So when creating a startup landing page or anything in general, depending on what you're trying to make, some things might be different here and there, but the basics remain consistent. E.g. for websites, you're always going to have a navbar, a hero section, a Contact Us section. And also I've put her, even if you're not a web designer, you should at least try to get the fundamental rights. So in the coming section of this class, we'll go over things such as color palettes, typography, alignment, moodboards, wireframes. And by the end of the class, you will hopefully have enough knowledge to design your own landing page. 4. Project Submission Guideline: Welcome back everyone. In this video, I will be going over the steps you need to follow to get help ask questions and share your projects across this class. I'll first start with how to share a project. You can share a project, push cooling down to discussions. And here, at a loss, you to share a project. Once you click on it. E.g. for submitting the exercise, we went over startup landing page. You can share it by going here up top and pressing on this blue button that says share. And make sure that anyone who was this link can view and also have this selected. And just copy the link. And once you have that, go back to the project section on Skillshare. Make sure to specify the project that you're working on. For instance, this project is the first one, so make sure to label it something like project one. Up landing, beach. And beat the link below. And you can press and submit. If you ever wanted to share an image. You can also do that by uploading an image. If you happen to have any questions, you can also go to this section where it says, ask a question and ask you a question and I will personally try my best to respond to your question. And lastly, feel free to start a conversation at any time of this class. As participation is appreciated. For instance, if there is something that will be beneficial or any tip you have, we can share them by just starting a conversation and posting it. We have multiple projects across this class. And if you ever forget how to share your project, just come back to this video. 5. Figma Basics to get you Started: Let's now go back to our Figma homepage by pressing on back to files. And let's create our first new file by creating on InDesign file. If we select on frame or F. This allows us to choose from the different available frames are very right. We can see all the available frames. If we select the desktop margin. That will give us a width is 0, 14, 40, and a height of 1024. If you select on the drop-down beside the rectangle icon up top, it allows you to add this to your frame, e.g. select this option. And if you want to duplicate this throughout your frame, you can do it by pressing Control C and Control V. However, a better approach would be to press on the item and press on all while dragging it to the right. This can be done for multiple items as well. Once you highlight everything and select on all but a lost you to move it anywhere you want. And we can change the color of the bell for our cars by highlighting everything into our very right. Under fill, we can select our color. We can add a rectangle. And we can send the rectangle to the back by right-clicking on it and pressing on Send to Back. And we can make the rectangle look better by adjusting the radius to false. And it looks much better. And if you want to add text in, press on this tee up top, which would allow you to input text. And we can get ourselves a dummy text from a dummy text generator website and fill in the text portion. This is a lot of texts. Here is enough. You might have already guessed it by now, we are building as testimonial component or a product for our first think my short tutorial. If you've noticed testimonials usually have a person. So let's get a start cholesterol place holder for the person's image. And that can be done by selecting this option and creating a circle. And this circle to be even we can just, we can just input 50 by 50. And that would give us a more rounded shape. The circle is headed, so let us bring it to the front. Just right-click on it and Crestone bring to the front. Although we have this starkly, were not able to see it because it has this same exact fill us, our rectangles so we can make a quick change by just going to fill, by going to fill in changing the color to white. Let's now add the person's name right beside the avatar. Looks very big, so we can minimize the size from here to something like eight. We can also get another text put in a person's title. Now let's minimize the size of the title more. Let's say you want to replicate this component that you've created. As you have asked, usually websites have multiple reviews, not just one person's review. You can go the easy way by highlighting everything, pressing on Alt and dragging this to your right. Or another way of doing this is by highlighting it and pressing on this option that says Create Component. And once you've created a component, can access the component by going to your assets. And right from here you can just drag it and place it in. This can save you a lot of time, especially if you're working on the same component again and again throughout the project. And before we call it a day, Let's go over the pen feature in Figma, which basically allows you to design your own custom shape and you can access it up top from here by selecting gone pen. And once you've selected pen, you can draw a shape that you want. And the way this pen feature work through that, it works by clicking and dragging to your next point. And once you connect all the points, you can fill it in with the color of your choice by selecting on this paint bucket. There are a lot of more, a lot more features than the Sigma. However, we have covered all the stuff we need to get started for the projects that we'll be covering in this class. 6. Alignment and Grid: When designing our startups or business, this landing page, our aim is to make our site visually appealing and user-friendly. And alignment plays an important role as it helps us create a balance between the content and then they have this. So you have an idea of what that alignment looks like. We will go over a few examples. The first example, which one do you think is better? The elements to our right are the elements to our left. To our left, everything, it looks neatly organized. The spacing looks perfect along with the alignment. However, to our right, things are all over the place. We see no alignment or order. Although the Foursquare's on both sides are exactly the same, the only difference is how they got aligned and also their spacing. And that made the difference of having an eye-catching design and a design that is true and attracted. The same pattern can be seen across our second example. And also our third example. You might be asking yourself, how can you make sure things are aligned properly? And the answer is by adding layout grids for your design. Let's add a new page and create a new frame. Select on desktop. And under design. Select on the option that says layout grid. And select on layout grid settings and convert this from grade to column and change the account 5-12. And we see that there's no space between the end. So let's see the margins for the complements to 140 and the gutter to 30. Adding a layout grid will allow you to have a clear frame of reference that helps you stay online. E.g. we can create a navbar and make sure everything is aligned. Can have a text for our logo. We can have an image placeholder. And then align that to our text paragraph. Unless we can add a line at the bottom. As you can see, by adding Leo breads, we were able to have proper alignment, proper spacing. And that helped us create a balance between the content and the layout. In summary, having an alignment ensures that all elements are aligned to each other. To make sure that your landing page or website looks more professional and tidy. For more details on grid, I have included a reference created by Figma about layout grid. This grid values were selected based on a great web designer. 7. Getting Inspiration: You might be wondering whether you should design something like a website from scratch. Or you might be asking yourself, how do others great, great design? And the best answer is by getting inspired from others. Now you might say, well, how do I get inspired? Well, you can get inspired by visiting websites such as here. Bill.com is a website that allows you to see great web design, product design and a lot of other good stuff. For the purpose of this class, let's say you are trying to design a startup landing page. So under web design, you can type in startup landing page. Currently, I'm not logged in, so I won't be able to save this design. So make sure to create your account. And once you created an account, you'll be able to save your design. Once I'm logged in, I'm able to save this design. So for the purpose of this exercise, let's say I'm interested in this design. I can create a new collection, name it too. Startup landing page. And press on Create collection. I'll have a collection related to that collection. Let's say I'm interested in, in this design. I can add that to the startup landing page. You can add as many as you want, but having three is good enough to get you start it. The landing page that you're trying to create. So now under your profile you go, you can go to your collections. And under my collections we have top landing page and we can see the three landing page with Peck. If you're looking for a website that provides more detail, visit the hand here. If we type in startup landing page. If we just open one of them, we can see that they're very detailed in comparison to the examples and dribble summary before going and designing your app or website, there is recommended to see what other peoples in your domain are doing. This was that you don't have to design everything from scratch. 8. Wireframing Intro: Before designing the landing fee, having a wireframe will help us understand and see the website beforehand, thus saving us time in the long run. For instance, it's easier to make kings at the wireframe stage than having to make those changes after deploying the site life. An easy way to think about it is as follows. This house does have blueprints before they are built. Wireframe serve as a blueprint for websites. Let's go back to the Figma community. Press on wireframes. Let's search for a minimal wireframe kit. And this one by designed by a person called bonnie Hong, looks good as it has a lot of reactions. So let's get a copy by pressing on this getter copy, which will automatically duplicate that to your Figma. So once we have it opened, if we go to Assets and open components, we can see that we have an avatar, primary button and everything we need to get us started with wireframing our website, which we will cover in the final project section of this class. 9. Main Project Intro: Welcome back everyone. Our final project is to build an educational startup landing page. Starting from wireframing all the way to creating the final figma design. By the end of this project, you'll be able to apply what we've covered towards your own projects and be able to build the Figma web design for your actual startup or business. Although we can get inspired from websites such as Dribbble or Behance. I recommend to first try Figma as community, especially if you don't have much time. I said at least you'll get already designed files which you can easily adjust and make good use, like the one we've covered in one of our earlier video. With that said, let us begin. 10. Creating a Moodboard: Rewards are generally used to serve as inspiration to generate new ideas. Go to behance.net and search for educational startup or web design. And feel free to select the over-designed outside of educational start-ups. As we're just looking for getting inspired. This web designed by a marketing agency. That looks good. We can add that to our mood board. By saving it. We can create a new mood board and call it educational startup landing page. I also like this web design. Although it's for a software development company. The color palettes look patterns and it's looking good so far. So also add this to the mood board we just created. Let's select one more designed to finalize our moodboard. Maybe for our last one, let's search for startup landing page. This is looking good so far. So let's add this one to our mood board. So now if we go back to our Behance profile and go to the mood board section. We can see that mood boards we just saved. Our last step is to put all of this on Figma so that we have a single place where we can visualize everything at once. And now I'm just going to put in all of this on Figma. And if you were just watching and have not made to mood board, feel free to get the project files and download the Figma file that has the mood board we've just created. 11. Homepage Wireframe: Let's now create a wireframe by using the minimal wireframe kit we duplicated earlier. Once you have the minimal wireframe kit, open them Figma. Let's start by adding a page and rename it to wireframe. For startup landing page after select on green. And right now we're designing for a desktop. So under the desktop, drop-down, select Desktop. We will first start by creating our navbar. The previous video, we created a mood board and we added that to our Figma file. So let's get that here. We have everything in one place, so type in mood, mood board. And I can duplicate that by going to our mood board. And under layers, if you just select them, frame one, control C. And if you go back to the mood board, can just duplicate it. Pressing Control V. We will first start by creating our navbar. And before doing that, let's create a layout grid so that everything stays aligned. If we go back to our mood board, the thing that you'd find to be Coleman along all is now a bar that has the company logo. Contact section about us. And depending on the nature of your startup or business, you'd make minor adjustments. I didn't get a call to action on your navbar. We'd also be a good idea to get our navbar. Let's go to Assets. And under assets, this wireframe kit comes with a navbar that has already made. So all we have to do is pull that two hour. We see that the Get Started button is outside of the grid that we have pleased. And we can fix that by double-clicking on Get Started. And to our right. If you press on this three dots, detach the instance. Once you detach it, you can just move it out of the navbar frame. And we can do the same for our header component. Move it outside, and we can do the same for logo. We can remove this frame. So now it's easier to navigate. We can have our logo up top. We can make sure that everything is aligned by highlighting elements of our navbar followed by selecting the align vertical centers. And yeah, it looks better. Instead of good start. I'm just going to replace this with get in touch. And now we can go back to layers and go. In fact, all of the landing page have some sort of image on their homepage. Let's go back to the wireframe page. Can go to assets. Represent that we'd be placing an image. A weird. So 598 by four or 46 should be good enough. Now if we go back to our mood board, we can see that all of the companies have. I'm short description of what they offer for the text. Let's see if we have resources in our assets. If we go to Assets and under wireframe kit, we can see that there are different contents. And there happens to be a hero section that we can take advantage of. So for now we already have an image placeholder policed. So we can just take this portion by Copia. You can get Control C, Going back to our wireframe and pasting that back and making sure that it's aligned. Yep, This looks good enough. We do not need this second button so I can delete that. If we go back to our mood board, we can have something like this we are and put our company's name for now. Let's say our company name is UB event. So before the paragraph, Mr. move that. And please something that would make sense for an educational startup to say. I'll suggest succeed by learning efficiently. Learning should not be seen related event, but rather as part of living and growing. Instead of primary better and replace the texts with something like learn more. It's very hard to move things around this frame, so it's better to detach every instance. Let's place an arrow. I noticed that the navbar is a little low, so let's move that a little to the top by highlighting everything and just going up. Yeah, this is good. We can also move the image and the text a little to the top. 12. About Us Wireframe: For the About Us section, everything is pretty much similar to what we did. We can copy this by pressing on the Alt while dragging down. Let's have a small header for us followed by a short Logan and a paragraph explaining what we offer. This can be our shorts, Logan. Quality, affordable education. Instead of this dummy text is going to replace it with something that makes more sense. Let's move this a little down to make space for the about us that will be policing. We can describe a text's, place it here and write about us. And makes this a little larger. This font looks good. And yeah, that's pretty much it for the About Us section. 13. Pricing Plan Wireframe: We will now create our wireframe for the pricing and this to get inspiration. And if we go back to the mood board, then look for pricing information. We can find that the third mood board has some pricing of inspiration. So we can recreate something like this for our self. We can see that there's a smaller heading, heading and a paragraph. So let's get that by going to, It's going to wireframe kit by double-clicking on central content. For now we just need the header and the paragraph so we can just copy this Control C and paste it back. Or we can place this header with affordable pricing. When our mood board, we can see the smaller header up top. So we can get that by going to the About Us section. I just realized that there was a little space, so I removed that and you press on the Alt and drag down. I can duplicate that easily. We can replace this with pricing plants. We can have a call to action paragraph where we can see something along side, invest in yourself with our quality content. In our wireframe kit. We were not able to find anything to use. So we can quickly recreate the rectangles. By going to rectangle, creating a rectangular shape. We can see that each one has some sort of description of the subscription key, followed by the price and followed by some of the things that they offer. Along with a call to action. For R1, I'm thinking of just having three. So the first version would be the free version. Make sure it's centered. And just replace this with $0. This is a little small, so let us increase the font size to something like 32 or even. 36 should be good. So for the free version, we are in educational startup. We can have, we can offer something alongside. Students can have access to any subject. Limitation of four lessons. I can just duplicate this, decrease the size to something like 15. Center that another service that we can offer, it can be students can post up to five questions per month. Make sure everything is spaced equally. And people will be able to have access to two practice problems. And we can have a call to action just like the one that we can see on the mood board. So to do that, we can go to Assets, go to components, and add a primary button. We're going to have something, let's say 543. Make sure it's centered. This sharp edge don't look too good so we can make them more rounded by changing the corner radius to something like 14. Yeah, that looks much better. Hopi this easily. Since I'm looking to having a standard version and premium version. It can just drive with this while pressing Alt. The spacing looks perfect. Next one is our standard subscription version. The standard version we can charge something like $10 per month. The mean difference would be that people who subscribed unlimited access to lessons, they can post an unlimited number of questions per month. Same goes for the practice problems. And obviously if the, for the primary button, we need to make the change to something like subscribe. And our last version would be the premium version. The premium version will be charging $19 are permanent. And we can remove this and just duplicate this to our premium model. The only difference that the premium will have from the standard would be Having instant feedback from an expert. Let's make sure this is aligned with the arrest. The alignment looks a little off. Here. There's a lot of space between the pricing and the features that the subscription offers. However, here, there's not much space. So to accommodate for that, we can just increase this height by a little and move this. And we can do the same for all. We can select all of this once and move it. And make sure that it's aligned to the standard and the premium version. And this looks good and there's a good amount of spacing. And we just need to change this from sorry, we're free to subscribe. And yeah, that's pretty much it for our pricing plan. And there's only one thing missing. Although we can see that the spacing between the different subscription version is the same. If you look at our edges, we're seeing the premium version being closer to the edge while the free version is further away. So we can fix that by highlighting everything at once. Pressing control and moving that slightly until we feel like everything is centered. And yeah. 14. Contact Us Wireframe: Let's now make our contact section. If we go back to our mood board, we can see that the first landing page has a great design that we can replicate or our wireframes Contact Us section. Let's first get a header for our context section. We can easily get that by pressing Alt while I'm dragging down and place the text. Let's change the font style from font bold to regular. Let's also have some kind of background that before that, I need to extend the frame. So person desktop and drag it down. To create a background. We can just get a rectangle and just add that. Bring the Contact Us to the front. Let's also create a sun pointing dislike, one in the mood board. And do the same, Bring it on. And we can have something like feel free to ask me any questions. After Let's recreate this button on our wireframe by getting a rectangle. And for it to be visible, let's change the fill from gray to white. And we want it to be oval. So change their radius to something like 20 or even more. 25. We can add, let's say its name. This change it to light and change the color from black to gray. Or we can just have black color and change this from 100% to something like 50 per cent. Yeah, that looks much better. Let us decrease the font size to something like 14. And make sure this is centered. Yeah, that looks good. We can do the same for email and subject. Highlight. A pattern. When selecting Alt, drag down, changed the name to email subjects. We need another box or the message. And just press Alt, drag it to the right, and enlarge this. Let's make it smaller. Make sure it's aligned to the bottom. The scatter section from the texts that sees message. That looks perfect. Now all we're left with is a button and a line. We can recreate that easily. However, for the button, we can just get it from the assets. Drag the primary button. Sure, it's aligned and can get the text and the radius to maybe talk. Or even funny. Funny, it looks better than mine. Let's add a rectangle. The color to black, and make sure you're on hue saturation and brightness and change this from 100% to 40%. Yeah, that looks better. 15. Blog Wireframe: In the previous videos, we were able to create wireframe for our homepage or our About Us section pricing and also contact us and instead of features, replace this with log. And in this video we'll be creating our wireframe or the blog section from our mood board. Let's see if we can find oblique blog section that we can use for our wireframe. The second landing page, you still have something that we are looking for, a blog section. Let's go back to our wireframe. End first, let's check if we already have a blog design kit that we can use from our assets. If we go to wireframe kit and go to central content, Let's first start by copying the header alongside desk, alongside the sub heading. Back to our wireframe, control C, control V. Now let's go back to assets. We can just copy one of these and duplicate that across. So just select on either one. This image holder looks a little large, so try minimizing it. Let's first detach the instance. This message should be enough. Now wet pressing on Alt. Drag to your right. Make sure it is centered. Then when once we have everything, You go back to our mood board, you can see that they have a small log adding up top, but bigger heading and a smaller sub-headings. So we can have something like this. For the blog. We can get a text that has the same exact font. So on Altoid dragging down in half. This converted to Logan Stan. Let's replace this text to something like stay updated. For our subheading, we can have something alongside check out our latest news on education and stay informed. Lastly, we're just left with making some changes to this text. Usually blogs tend to have the author's name. As well as the authors image. We're just gonna do that. Now. Go to Assets. And under components, you'll be able to find an arbitrage. We can add the avatar. We move this center of content and minimize the size, something like 40. It looks a little smaller, so let's go for it. Let's now add text, the author's name. Then let's get our rectangle. Let's also have a date. Sure. The data at this logos published lists adjust the color of our text by adjusting the percentage from hue saturation and brightness to something like 50. Let's do the same for the author's name. Now we can duplicate this across the other two log elements. Just press on. I laid everything selected, press on the alt and drag to your right. Sign doesn't seem to be centered. So this suggest that we go to the mood board. We can see that there's also you can see this components to showcase that we can switch between different page or the blog section where we can recreate something similar by selecting on this circle and have it somewhere around ten by ten person Alt. While dragging to your right. Make sure this is centered. To show P is the exact page that we're N, we can highlight on the page by changing the colors to just signify that we're this page. 16. Footer Wireframe: Welcome back everyone. We are now left with the last portion of our wireframe, which is creating the footer section of our landing page. If you go back to our mood board, for this startup landing pages have a proper motor which we can use as inspiration to create our own. We can start by creating some kind of background. Before doing that. Then your desktop. To create more space and press on Rex's rectangle and create a background placeholder. Let's see if we have any resources for our footer from our assets section. And if we go to component, we are there happens to be a footer section that we can bring our wireframe. And currently it's not matching our background. So let's try to detach the instance so that we can move this. Currently, we are not able to move any of these elements. However, if we detach, the instance, will be able to move it outside and remove this white background. We can also move the elements on an individual level. We don't need any of this icon. So I said delete or remove it. Let's have things aligned. Logo costs. So right here, we have a lot of elements that we don't need from this frame. We can remove the homes section. Also remove the About Us longest terms and privacy. Let's adjust the text for the fonts. They are very small. We can change it from small, semi bold to just large, semi bold. And also for contact. Make sure the spacing is right. Yeah, we don't need pricing. Instead of pricing have something such as company. And under Company we can have things like pricing, blog support, and go for regular. Font might even be better. And the color changes 100%, or the black color to something like 50%, 60% are the features we offer. We can have something like lunar support, educational part up in how something like mouseover, maybe an area for customer feedback. The contact section, we can have the company's email account, the phone number, the address, the company. To make this look better, Let's move the contacts a little further. Let's make sure features is entered in-between. Alongside all the contents you need. You go back to our mood board. You can see all of the moodboards have somewhere where users can provide their email address to subscribe to our newsletter. Let's just recreate something for our landing page. Let's make sure we have enough space, so let's just move. This should be good enough. It's not a header that says pipe. Our newsletter and change the font size from extra large to small, regular. Sure, it's aligned. Let's now create a button, just like the one we've seen on our mood board. Prompts users to write their email address. And we can do that by going to the rectangle, creating a rectangular shape. And change the color to white so that it becomes visible after agenda radius to something like 20. Let's have email copy from up top. Just press on the Alt, drag while dragging it down. Make sure to bring it to the front. Make sure all the elements on our food are heading, are aligned to highlight all of them and align vertical centers. Yeah, that looks much better. The only thing remaining is two. Just this company name. Yeah. We're pretty much done in terms of creating our wireframe. 17. Final Note on Wireframe : So you might be thinking we've spent a lot of time building this wireframe and you might think that it did not add value. Why not just build an actual website reality? We did ourselves a big favor by building a wireframe. This allows us to validate our startup or businesses assumption by using the least amount of resource. Imagine if you've built a website or an app and your team are co-founders tell you that they want the services page or they want the contact page you've designed to be revised. After you've built the actual website, it would have wasted a lot of time having a wireframe such as this that you can easily build on, Figma will allow you to communicate with others and receive feedback. And once everyone is on the same page, you can proceed to the next stage, which is making it look good by designing the actual land landing page on Figma. 18. Creating your Logo: Before jumping into creating our design, we will first create a logo. Unless you're thinking of having a text as your logo was just your company name. Websites we will use to create our logo is called half-full and you can access it if you type in asheville.shopify.com, press down and get started. And depending on the nature of your business and that business piece that you are n. Since we're an educational startup, we will proceed with the tech option. For the purposes of this video. Here for the visual, styles, allows you to select up to three options for futuristic, creative, modern. And after that price on next. And if we go back, we've already have our name. You'd be invented. But for now we'll just leave it blank. I recommend that you select all the options here so that you could save time if you happen to need any of this in the future. After we can see that there are a lot of AI generated logos that we can choose from. The logo, this looks good. Once you press on Edit, you can even make the tea to like the font that it appears, and also the different colors. The font. I'm just going to change it to the correlative. The upcoming videos, we'll go over the different types of typography. I want the font style to standard out. That's why I'm going for a decorated. But moral will be discussed in the upcoming video. And see which one you'd like. This one looks good. So I'll proceed with this aunt and press on Next. And then taste that. Oh, congratulations, you have your new logo. The logo package includes all of these options. This precedent download. However, to download you need to provide your e-mail and also your password or you can just login. I already have an account, so I can just login. Once you're logged in, you can press on Download. And it you'd get this notification letting you know that all the Logo Package and design files have been sent to your email. Wait for three or 4 min and check your email and you probably get a zipped file from which you can download it. So press on downward. Once you have it downloaded, you can see all the different places where you can use the image for. For now, we just want the transparent logo for our next exercise. So have that handy. 19. Color Palette: Welcome back everyone. In this video, we will be going over some tools that we can use to create our color palette. And we'd also be seeing some examples of what bad color palette looks like. So let me first start by asking you a simple question. Would you ever trust or place an order from a company that has a website that looks like this? I wouldn't personally be trust such a website. There's way too many dense colors. Where does the person who designed this? It wants us to focus on the background text. There isn't even appropriate navbar. So what are some tools out there that can make this process easier for us and potentially help us avoid feeling terrible color palettes. Let's start by visiting a website called human, which is a website that allows you to come up with amazing color palettes or color combinations. You press on the website. Section. There is an option where you can choose from magazine or monochrome. Increasing the number from here. You're pressing on three, you'll have more. But having four color color palette is good enough for our exercise. Every time you want to generate a new one, you can just pass on generate. If you want to see an illustration based website, you can make that adjustment from here. And depending on the amount of color palettes you want to use, you can increase the numbers. You can even upload your own image and see. This website is especially helpful if your logo is just consist of letters who is no design. We can have a quick idea of what to expect. Was your logo. 20. Extract Color Palette from Logo: This exercise, we will be sampling color from our logo, although we can sample colors manually, thanks to advanced websites nowadays this process is much easier. Our first exercise is to get sample colors for the color palettes would be using for our wireframe. Visit the websites called colors dot C-O and go to Tools. This website allows you to upload your logo and it generates colors that match the logo, which ends up saving you time. Press onStart generator. Here. Every time you press Spacebar, it generates color palettes that you can use. However, for our case, we're looking for creating a color palette from the image we've just downloaded. So we would first need to unzip the zip folder we got from high-school. I'm just going to create a new folder and rename it to Logo and copy everything that folder. Now it's, it will be easier for us to upload it to the website from desktop, select logo. And let's get the Transparent option. And you can play with this to see which combinations would be great for your website. So far we have black and light blue. You can press on next. And we can even open it in the generator. We can lock this first option, the second option, and change the remaining three because they look pretty much the same as what we have to our left side. We can press Spacebar and see what we can. We can even select our own color. For instance, I would like my site to have white colors. So it's going to have quite sure. And then I complete the remaining till I find a color that I want. I can press the Spacebar. Yeah, this looks good to me. So now I can export this as an image. Name it color palette, and just press on export. And that will give us the image downloaded. As we were close to the halfway mark of this course, I would appreciate if you leave a review with that said, See you in the next video. 21. Sampling Colors Project: Welcome back everyone. In this exercise, we will be sampling colors from whatever image that we have. Instance, let's say you have a page on your website and your content laid out except where your colors. We're just going to follow the steps we've covered in the previous video and get the color combination as that saves this time. Firstly, we'd have to export the image. You can have a quick preview. Press on export. Once you have this exponent, hello is not zero. We can just drop the image we've just downloaded and voila, we have the color combination. The initial one looks good to me. However, you can choose whatever you want and play with this. All export it as an image. Just name it color one. And sport. Once you have the image downloaded, we can just pull that up here and minimize it. That it looks much better. Once we have this. We can easily sample the colors. Select on the frame. Select on the eyedropper. And let's see if orange will be a great fit. This is very dark, so maybe reduce the percentage 100-40. First. Let's try the green color. The green is looking good so far, so we'll just stick with green instead of the orange. M for the box instead of black. We can have orange. This looks much better than what we had initially, although slight change. As far as the texts. We'll be going over that in the upcoming project where we will discuss topography and we'll adjust the text accordingly to make this look even better. This portion of the class of the exercise is to apply what we've just done with this. I want you to export this image on the website called colors C0. Due to sample the colors. As we've done for this video. Feel free to share them in the discussion. 22. Typography: Welcome back everyone. In this video, we'll be going over topography. Topography is typically used to enhance the visual appeal, establish some kind of hierarchy, and also create a sense of balance on your website or anywhere else. It is recommended not to use more than three font styles for a single website. Website. I personally stick with just two. I get the fonts that I need, usually from Google Fonts. If you go to Google Fonts and go to the category section, you can see that we have the four main fonts. Serif, sans, Serif, Display, and handwriting, which is also known as script. You may need to just need to know this for certain family are points that typically have some kind of tail at the end of each letter. The sans serif is the, the next and most used nowadays use. You're going to be seeing this in a lot of websites. The next point is called the display font. It is usually better to have this kind of font on a headline. And to be safe, you would rather use sans serif over display as displays very decorated and can be hard to read if you're using get into paragraphs. Who demonstrate what it looks like if you're using it in a paragraph. So you can see this is very hard to read compared to san-serif, which is easier for the ice. The last family foreign too, I'll be going over is handwriting. It's self explanatory. It's usually good to have some kind of handwriting for headlines. Like a coffee shop or I can create a business. And that's about it for this lesson. In the next lesson, we'll have a typography project. 23. Typography Project: Welcome back everyone. So let's now apply what we've learned regarding typography to practice by going over a few exercises. One of our previous exercises, we've went over fixed sampling the color based on the image. And in this exercise, the focus will be adjusting the topography. You don't have this Figma file. You can find it from the project folder. We'll first start with this header. Double-click on it. And from the Export tab, we can see that the font is or bottle. When you select the font to try to find a font style was over six font styles. If you're wondering how you can find that, you can see from here, there are different font styles. For instance, if we go to light, it's going to get lighter. Currently we're a bolt. However, if you go to Google font, you can always find different fonts. Inject this back to Poppins. Since this is the main header we want people to pay attention to. It increases the phone to at least 64. And as you can see, when you have very bold words, the best thing to do is to decrease the spacing in-between so that it looks better. This looks much better than what we had initially. As far as the texts. We're not going to change anything. We're just going to have this dummy text and change this to pop in as well. For lighter text, having some spacing is preferred. Then the only thing remaining right now is adjusting this font style. It's not centered, so make sure it's centered. And maybe change it from regular, semi bold. And that looks much better. Now we have some kind of hierarchy. The exercise for this portion of this class is for you to adjust frame two and frame three. Currently we're on frame for. By now. I assume that you've already sampled the color as part of the previous exercise. For this project, all you need to worry about is adjusting the topography and nothing else. 24. Homepage Design: Welcome back. We will now continue from where we stopped doing the wireframe portion of the video will now be designing the actual wireframe. We'll start by duplicating the wireframe by just pressing on desktop from here or just up top. We have to do is press Alt. And when you're selecting on Alt, drag to your right. Let's just choose this design. If you want to go with a logo that we created previously, you can just go to the project folder and get it, get it from there. Or if you have your own logo that was emailed to you by high school, you can also insert it here. From the project folder. Under lower resources will be able to find all of these. We can directly pull this to Figma. Instead of logo, will be replacing it with the actual logo. Just make sure to minimize it. That looks good for now. Also have an idea of the color palettes that we'll be sticking to four design, it would be a good idea to have it somewhere up top. If you go to the project folder so you can find the color palette as well. So you can just pull it from there and just minimize it. Size. What is considered small? Let's have some kind of background color for the first page. So just add a rectangle and right-click and send it to the back. After. Let us select the blue color palette. However, as you can see, our logo disappears. So you're on, make sure you're on hue saturation, brightness and change this to something like 50%. That we can also see our logo and that looks much better. It would also be a good idea to outline the topography style. You'll be sticking to this design wireframes. So this is create a rectangle and put a text. There are two fonts that I chose for this wireframe are Poppins and the cabin. Want you can choose whatever you want to make sure. And no more. Let me just enlarge this. I'm going to change it from Enter to Poppins. Second font. Going to change that to cabin. And just have some space in between. For the header. I'll mostly have a Poppins font. Also for our navbar elements. Make sure you teach detach the style that is set by just clicking on the detach style right beside the text. For all of them. Once you're detached and just change the font to opens. Now let us change the font in the primary balanced, we have from entered two carbon. Same for the one here. And also the text, the paragraph text. Let us change the color primary buttons. By detaching the color from here and selecting orange over, I prefer having more orange that it's easily visible. Same for this primary button up top. You touch the instances. And the only thing remaining, alright, now is the image for the homepage. For the image visited a website called andro. Before we go into 100, let's see what the other start-ups on the moodboard have. They all have some kind of illustration. So this website seems to be a good fit. Sometimes keeping things simple, the best way to go. Let's just type in tech. And the first one looks good. Over feel free to select anyone that you want to select. Make sure to download it. Should lie and delete it. After just pull this back and try and move their layout grid. As you can see, this is messing up because our background fulfill and it doesn't look that good. So what we can do is visit a website called Remove Background or just Remove BG. Just upload that image. From here. We can just download it and go back to our Figma. Move this and put this back. It looks much better than what we were seeing previously. Just so that you have an idea. This is what it looked like previously. It looks much better. 25. About Us Design: For the About Us section, everything is pretty much similar to what we did for our homepage. However, that we are on the right track. Let's see what the other startup start doing from our mood board. And as you can see, a lot of these startups have. Then Scholar at the homepage and then the following pages are just plain white colors. So we'll stick with that white background. Or let's see if we can find better background. Select a rectangle, make sure to send it to the back. And from here, let us try reducing this to 50%. Yeah. It looks better than just having a plain white background, in my opinion, over lists experimenters 30% to see the difference and certainly looks a little down. So this was 40 or 50, should also be fine. But fourthly, is looking good so far. For the main title, as we did in the previous section we went through is the Poppins font. Do that, make sure to detach from the instance, type and Poppins or the about us and the paragraph. Let's go with the carbon font. Detach the instance where they're IID more, pop and all we're left with now is having an image. If we go to our mood board, can see a lot of image, lot of illustrations being displayed. So Let's go back to Andrew. Here we want to tell that we're an educational startup. So I type in education. 12 are very right, looks good to me. So make sure you downloaded and remove this image placeholder. But we forgot to do something, which is to remove the background. So make sure to upload it and download it background free. And that looks much better. Enlarge the size. Yeah, that's it for the About Us section. 26. Pricing Plan Design: For our pricing section of the landing page, we will leave the background as it is, this white background. The main things will be just that point. We'll start with the header. You can see there's a point attached to it. You can just detach. They're always pop-in. Pricing plans seem detaches from the carbon. For this headers. For our different pricing models we can go is opened the price values. Let's go his cabin. And also for the different features we offer. And also for the buttons. Happens. So yeah, that's about it for the pricing plan. 27. Contact Us Design: So now we're down to the Contact Us, the blog and the footer. And from the mood board that we got to our inspiration for, we can see that there's some kind of background. Let's change the background from gray to something else. This time, maybe let's go for a darker blue. And let's decrease the percentage 100-80. This text has barely visible, so detach the gray instance and place it was black. Instead of regular. Go to the light style or the Contact Us point where we're going to detach it from the instance and go with the Poppins font. We'll stick with cabins for the subparagraph and Poppins for the name, email and the rest. And instead of the black background, Let's detach it and replace it with the dark orange we had earlier. The Contact Us looks very close to the edge so we can move it a little down. And that looks much better. Although the Contact Us section looks better than what we had initially, this can further be improved by changing the background fill. So just press on the fill and under instead of solid, press on linear. And in my opinion, this looks much better than what we had initially. It looks much cleaner and integrates well within the next page. 28. Blog Design: For the blog section, add a background color. We'll first start by adjusting the font. I'll go with cabin, followed by pumping. Or the header. Cabins for the subparagraph. Opens for this. Titles. Happens for the subparagraph. Openness for the author's name, cabin for the date. If you notice. The name Matthew is much closer than the name games, shows that there's some inconsistency. So we can adjust that by highlighting everything and pulling to the right. Or we can even add layout grids and make a quick estimate of the spacing. That looks better. As for the image. Although we can visit websites such as pixels that provide you with free stock image. We're talking about tips for students. And luckily, there's like a stock image that say steps. Use that to our advantage. Doesn't necessarily have to be the same thing as the words, but the closer the better. Let's try placing the image. Didn't work. So just turn on the layout grids. Then we can see that it extends from this layout grid to here. And we can have that asset quick frame of reference in our minds. And place the image that although it appears very large, just make it smaller. Thing that we can do is just see the size of the image beside its 367 by 28. So we can do that by pressing on 367 and adjusting the height two to 80. And aligning that the other image. Where you can just gonna do the same for both. For now, I'll just download this image. It looks very nice. And we can minimize the image AT let's just look at what it was is 367 by 28. So we'll do 367 by 80. Detach this because it's causing some issues. Yeah. Let's make sure that it's aligned. For computer science is gonna be fairly easy. You just type in code. First image looks good. And minimize the detach this so that it doesn't cause any issue and minimize it. Aligns the police. Then just make sure that it's aligned. And that looks good. Turn off Layout Grids. And there's something missing. The spacing is not even so let's turn it back. This was supposed to. As you can see, both of this image are 6367 by 280. However, the first one is not. So make sure to detach this because this is the thing that's causing the issue, the constrained proportions. Once you have that removed, relay that the spacing is equal. And the only thing remaining his painting, some profile image. And we can do that by just getting some headshots. And also It's the same or the radius coordinate for the coronary radius. So if we just go with 38.4, it'd be the exact thing. You can just put it on top of it. We can do the same for the next image. Remove this and just place that. And do the same for the next one. Remove the layout grid. Yeah, the blog section, it looks great. 29. Footer Design: Where the footer section, we'll first start by getting our logo from up top. Press on the Alt, and drag down. Move the logo. Next, we will be adjusting the font. The headers. Open. The email Can Company everything else to have it. Lastly, we're just left with the background and let's see what color would match perfectly. So detach the fill. We go with dark blue. As you can see, you won't be able to see our logo. We go back to our mood board. Usually the footers have a solid color. Let's try going because the orange color, let me try playing with the percentages to see get better. At 60%. It looks much better than what I looked at 100%