Transcripts
1. Welcome to Class: Hello, My name is Winnie, a graphic designer and a web designer based in Nigeria. For this Skillshare class, I'm going to teach you how to design a personal websites in Figma. This glass is very important for people who want to go into work design, or if you just want to create your own personal website. It looked at the time people find it hard to design it personal websites or communicate. What do you do professionally? In this class, I'm going to walk you through everything you're going to need to create the class project, this amazing, beautiful website. We're going to learn all the tips and tricks and best practices that are used when creating and designing websites in Figma or tools that you need to get started then in Figma, you're going to learn it in this class. So don't worry if you've never designed before. And if you don't know anything about web development, I'm going to walk you through the basics of Zane, and then we're gonna get into designing projects for this class. I hope you have a wonderful time designing and creating and learning a new skill. And a kind of leads to see you in class.
2. The Class Project: Hello everyone, Welcome to today's lesson. In this lesson, I'm going to walk you through the class project for this course. So far stuff, this is the project terroir going to be putting together. These are the following components that you'll be working on throughout this class. So I'm going to explain a little bit about all the components so that you can have a good grasp. So right here, we have the hero section, which contains the navigation bar, an intro, which tells like your clients or to do professionally. And so your nav bar contains your navigation links, useful links, and also your logo. I don't have a logo for this class, so my name would do just fine. If you don't have a logo, your name works perfect. So now I'm going to explain the intro. You want the intro of your website to contain the Euro section of your website to contain enough information about what you do. Of course, there's a call to action here. But you want your hero section to contain useful information so that as soon as someone gets onto your website, they know exactly what you do or what you offer. You can also add some additional information below. If there's anything more that you want to explain to your website visitors, you can also add as well. And then also your service section. This is going to contain all the services that you offer to your clients or the services that you offer professionally. So for this example, we have consultation, counseling, and coaching. And then also I have a testimonial section. It's optional. You can include that. Or if you don't really need it, you don't have to include it. If you have events that you want, your website is to know about. Maybe you do speaking events or you want them to know about it. Then you can also include that on your website as well. And then we have a contact form here. Your clients can reach you directly through your email by writing their name, their email, and your message. You can have a simple contact form like this. You can also add useful links to like your email directly. Anyway that you want your client to be able to retrieve. You can do that if you don't want to include the contact phone. And then below you have your footer. This is a very simple photo. It contains the same links that you have or your navigation bar contains your logo, or in this case, your name, and some other social media links. All right, That is, it. It's a very simple landing page. Of course I encourage my students to be very creative. If you have anything else you want to include. If you want to be a bit more spontaneous, you can also do that. Just play around with ideas and include them or your website. I want to see your creativity through the website that you build. And I'll see you in the next lesson.
3. Designing the Navigation Bar : Hello everyone, Welcome to today's lesson. So we're going to learn how to build in navigation bar. So up here, if you click this icon, select your frame. So when you click frame, you can select from different frame options. So I'm going to select I mock because that's the frame that I want to use for this lesson. So I'm going to drag it down because we need enough space to work with. And then I'm going to select the rectangle option because we need a rectangle for our navigation bar. And I'm going to stretch that out until it reaches the end. Make sure that you make use of the rulers slash guides that will help you to perfectly position elements on your frame. So by default, you have a color for your ships. For you can click here to change the default color. You can either like move around and choose a color or you can insert a color code. So I am going to use a line to separate my navigation bar from the rest of the frame. And this is because the navigation bar has a very, very similar color to the rest of the frame. So I'm going to add my text by clicking on the Text icon. Over here, you can manipulate the text using this portion of Figma. You can change the size, you can change the color, you can change the font. You can even change the thickness of the text. I'm just going to add a little bit of spacing between texts. So these are just the navigation menu that I am creating. Just going to add a little bit of padding because I need dy, let us have a bit of space. I'm going to increase the thickness so that it's easily visible. This looks good. So I'm just going to continue to create DIY rest of the navigation menu. So a quick tip to easily create is to hold down your Alt key, drag, click and drag your element. You can do this for any element, your rectangle, your text. And this is just going to create a duplicate or what you already have. So I'm just going to do this for the rest of the navigation menu to save time. And voila, you're done. So I'm going to quickly edit the text so that they look similar to the one on the left. I'm going to add my service. I'm going to quickly at it. This one. Faq, resources, podcast and contact. Just going to adjust everything. It looks good. And then I'm going to copy it again. And now I'm going to make my logo. So if you have a logo, you can insert a picture here by don't have a logo down here. You can choose to center your text. You can lift alignment or right alignment. I just want my text to be centered. I think it looks good centered because it's at the middle. So it has looks centered, it's perfect that way. I'm going to change the font. And you can just choose to be creative with it. Play around with different font options. You can check out on font pairings on font joy.com. All right, that is it. And I'll see you in the next lesson.
4. Getting Inspiration for Design: Hello students, Welcome to today's lesson. So on today's lesson, I'm going to show you where I get inspiration for my website design. As a designer, I usually surf the Internet to find inspiration and current trends in website design. One of my go-to sources for this is pinterest.com. If you do not live under a rock, you probably know Pinterest is a very popular website to source for different types of images. And it's a very useful resource for designers. So I'm going to search for website design inspiration. Yes. And let's see. Yes, we have some amazing options here. So just feel free to move around Pinterest, explore, and just get ideas from other people's websites so that you can get inspiration to Butte yours. I see something good here. Let's see. All right, I really love this website. As you can see, the navigation bar is very simple. Right off the bat. You can see what she does. She is a photographer. You can see that it's a very simple website. And then below the hero section, you can immediately see how service section and what she does. You can see simple gallery and then also a very cute footer section. So that is why I encourage my students to be very creative. Surf the Internet and just find ideas so that you can have some inspiration for beauty, not your own website. All right, that's it. I'll see you guys in the next lesson.
5. Getting Images for Your Design: Hello everyone, Welcome to today's lesson. I'm going to show you guys a very useful resource for these sinuses. And this resource is one that I go to almost every single day because it's where I get high-quality images for my website designs. So for this website, all the images that were used to view this website was Goodson from unsplash.com. It's a beautiful and amazing website for sourcing high-quality images for website saying graphic design, or really any work that you want to do, you will find useful images. There are other websites that I go to for high-quality images. But this website in particular is one that I highly recommend if you're just starting out. So this is the website name, unsplash.com. It has a very simple interface. You can see options on the navigation bar. You can't choose wallpapers, nitro, people, architecture, current events, business work, and so on and so forth. Wash it, get onto landing page of the website. You have a little search bar right here. You can choose to just scroll down, browse through the images, or you can search on the search bar. Most of the time, I like to browse through the images given to me because they are just carefully selected and they look really nice. And sometimes I don't even know what I'm looking for. I just want to be inspired. So this picture right here looks very nice. It looks very professional. So I think we are going to use this one. So when you create your own projects, chances are you have a very different image from mine. And that's okay. I encourage you to be very creative. So browse for your own image. If you have your own image or you want to include it in your design, you can do that when you have downloaded the image day, you can click and drag onto your workspace. And that's it. You're ready to use the image in your design.
6. Adding Image to the Hero Section: Hello everyone, Welcome to another bad thing. So in today's lesson, we're going to start building out the hero section. So when you bring your image onto your workspace, It's going to be so huge. So what you're going to do is you're going to resize the image so that it fits perfectly into your frame. So all you have to do is pull the edges n. And then we don't need it to cover the entire frame, only needed to cover half of the top. So we're going to adjust it. But just to make sure that I don't move things around by accident, I'm going to look at the navbar. So comb-over to decide. And you can look the navbar or you have to do is select all the components that make up the navbar and then Control G to group everything. And then you can look it using the sine. I'm going to rename it nav bar so that it's easy for me to remember. I will group it is because if you do not rename it, it's going to give it a default name, group 1, group 2, group 3 with can be very confusing, especially if you have a lot of groups in your workspace. It's not going to move around anymore. You can't edits, it, can do any of this stuff. So now I'm going to adjust the image to fit the frame. As you can see, parts of the image, the overflows is not showing. And this is because the image is within your frame. So if your image overflowing, it means it's outside of your frame. So make sure you check if your images within your frame. So if you click on the image at the side bar where you can edit, you're going to see options to edit the image so you can change the exposure. You can adjust the contrast, saturation, temperature, tint, highlight, and shadow. I am now going to do any of the stove pour. Feel free to play around with them in case you want to adjust the image. Maybe don't like how the lightness by like this image. It's perfect waiters. So I'm not going to edit it. So I'm just going to continue to adjust the image to my liking. Some websites have an image filling up the entire top area, but I think I like this one just filling up half of the area. So make sure that you follow the guides that you've been provided so that you can properly adjust the image.
7. Adding Texts to the Hero Section : Hello and welcome to another lesson. We are in the part two of the hero section are just going to continue to create the hero section because we're not done yet. So in the last lesson, we brought the image now we downloaded onto our workspace. We learned how to group the nav bar and then we adjusted the image to our writing. Now I'm going to add text or you have to do is click on the text icon. And then we're going to add text too, the hero section. Now, I'm going to pretend that the owner of this website is Josh. You can adjust the text to be much bigger so that it's easy to see aligning properly by using the guides that you've been provided. Of course, you can change its name. You can put your own name there. You can even put something completely different if you don't want the text on your hero section to be high, you don't have to do that. You can just go straight to talk about what you offer or whatever. Just have something in your hero section that draws the audience in or whoever is visiting your website. So I'm going to put hi, I'm Josh and photography. But I think this is fine, This works fine. This is a pretend website. So I'm ogives put so much thought into it. I encourage you to do so. Especially if this is something that you will develop, that this class, you should actually put some thought into it. So I'm just going to save time by copying text. I'm going to unlock the design over here. Going to copy the entire text. Okay, I'm done. I'm going to unlock, get back over to my current design and paste. Yes. So when you paste the text, it's going to be so stretched out. So just draw everything in an adjusted. Keep on adjusting it's onto you have the perfect size. And as you can see, everything is perfectly aligned. That is how you want yours to look like. Now, we are going to create the button, or you have to do is draw a rectangle. You can adjust the height of the rectangle using the width and the height. You can also change the color of the rectangle. I'm just going to pick a cold ice similar to the image I already have here. Kind of like an orange or a light brown color should do. And we're going to add some texts. This looks good. I think I'm going to change the color. I think I like it transparent. I'm going to adjust the stroke to three and a text to black. I think this looks very good. All right, that's it for this lesson. I hope you guys enjoyed it. I'm going to see in the next lesson, make sure that you submit your picture screenshots of your hero section. I'll see you in the next lesson.
8. Creating the About Section: Hello students or concern and Allison. So we have created the hero section for this website. It's already starting to look very, very good. So we're going to move on to the next section. And this section can be like an about pH. If there is something extra that you want your website visitors to know or your clients to know about you. You can include it here. So I'm just going to make it a very small section. So I'm just going to make this a very small section. This is optional by the way, you can choose to remove this or included if you want to, for ongoing to include it. So I'm going to show you guys another trick that I have. So as you guys can see, the background color, the color of the workspace is very similar to the CO of my frame. So I have to do is click out. And then by the side where you see background, click that, and you can choose to change it to a different color. You can make the color brighter or darker if you want to. Maybe something orange or yellow. I think this works fine. All right. It's fine. So I'm going to change the default color of my About section. I want it to be very light. Don't want anything too dark. I think the colors are right. It's like almost invisible while I want something really light, I don't want something too. So I'm going to add some text onto it right now. So I'm working off the top of my head. You write something down before you start creating. I think that's it a lot better for, for the purpose of this lesson, I'm just going to walk off the top of my head. Just freestyle. Add something. Perfect. This isn't my best work. I think we can go with this. So I just changed the font. I think this font looks perfect and also the size. The size is also create. So just play around with things, adjust things. See what looks good. Like I already said before, you can get inspiration from Pinterest. So you can choose to recreate someone else's design and just change up some things. Maybe like the pictures and the text. But like ICA have a similar design. That's fine for the purpose of Lenin, that's fine. And so that's why I'm just doing here. I'm just trying to see what looks good. Document that. So I'm going to copy the button over to the About section. I'm going to keep the same style of the bots and because I want things to look cohesive, so the same style of the button now we have in the hero section should work perfectly in the about section. All right, that's it. We're done. I hope you guys enjoyed that. I'll see you in the next lesson.
9. Creating Service on Your Website: Hello you guys. Welcome to lesson. We have made it to the service section of this beautiful website. If you made it this far, I want to say a huge congratulations. We're doing so you've come this far. All right, so we're going to just creates the about section. As you can see already. We just want to create some services that this developer would probably offered to his clients. So I believe beforehand you should already have something in mind or something written down that you'd like to offer to your clients. So let's say you are in life coach. You probably offer like counseling. You offer coaching, write down whatever you found a piece of paper so you spend less time when you are designing. I think that's much better. If you have something already written down. If you know already what you offer to design processes just going to be Breeze cause all you have to do is just put those things you already wrote down in your frame. Just takes adjust the size and that's it. If you don't have anything written down and think you're going to slow yourself down when you're designing. So I'm going to adjust the text, the size a little bit. I'm going to try to center it perfectly. And then just like before I'm going to copy the text over. You can add the text if you want to. I think you should actually it did text because we have different services, have different descriptions for each services that you are going to offer, each of the services that you are going to offer. So to perfectly centered the description with the subheading, you can select both of them. And then click on that icon. And this icon is going to help you perfectly center the subheading description. You can do this for all of them or was sent out one. You can just copy it over and dangerous, edit text and change the wordings and does another way to do it and electric for you. So I'm just going to continue editing the text. Just going to put something that this developer might Ofwat to his client. I am very curious to see what you do or you offer to your clients, curious to know. So make sure that you submit your designs to the class discussion. Submit a picture of it science, the class discussion. You can take a screenshot of your workspace that works just fine. We will continue to design in the next lesson.
10. Creating buttons for the Services: Hello you guys. Welcome to the Part 2 of the service section. So in the last lesson, we created the services that this web developer of us to his clients. And I'm pretty sure you guys had a lot of fun creating your own services. So we're going to continue. But before we do that, I want to just quickly group the About section. This is good practice. So asha don't want section tried to group everything together. Sawyer to do is select all the pots or the components of that section that you want to group. And then Control G to group everything together. And don't forget to rename it. I just renamed this About section. That is great. That looks fine. So I'm going to continue to design the service section. Feel free to adjust anything that you want to adjust. I'm just going to group the hero section as well and just make a few adjustments. All right, that's good. Okay. All right. That's good. So I'm going to copy the button. All I did was I selected the view, my projects. And I also selected the button to stroke that makes the button. So once you select both of them, you can hold down Alt and drag it down. It's going to make another copy. So that's what I did. And now we have another copy of the button. Like I said, I want to keep everything cohesive so I want the same boats in full. If not all, but most of the I want most of the buttons to have the same styling. So I'm going to copy them over to create buttons for each of the services. And then I'm just going to edit text. And then I'm going to try to perfectly center the text. All right, that is done. We have our service section. That was very easy to do. I hope you guys enjoyed it. I will see you guys in the next lesson.
11. Designing the Contact form : Hello you guys. Welcome to lesson. We are in the contact section of this website. We have made it so far. The website is looking so beautiful. I love it. So I'm just going to jump into the contact section of this website. So most websites, as you have seen, have a contact form and it usually looks like this. So I'm just going to create a similar contact form like what we have in the website design on the left. You want to create another section for it. I think I need more space. So I'm going to click the frame and drag it down. That's just going to adjust the height of the frame. And also the section. I'm going to adjust that as well. I don't like the color, so I'm going to adjust it. I just copied over the color firm, the about section so that everything looks cohesive. Wins. Add some texts. Now. So let's work to get the thing this is. Okay. So I'm going to center it. I'm going to adjust the size. I'm going to also adjust the font. I think we're both to a dose. Well, also because we're trying to keep things cohesive. I'm just going to use the same font that I did in the about section. You can lock down to your rectangle just to make sure that it doesn't move around so much. So I'm going to create the text fields, going to change color. Now, the colors that you use, very often you would find them in your palate. So if you have a hard time remembering the color code that I used previously, draft worries so much to be saved in your palate and in your workspace so you can just reuse them. So I'm going to copy over and adjust the size thing. This is great. At some texts. Copy that down, change that message, and just adjust things. It lets me here. So I think this is okay. I don't like the roundness of the button so much. So I'm going to reduce the roundness because I don't want to be too round. So I don't want the button to look exactly the way the other buttons look because it's very similar to the text field. So I'm just going to give the button a fill color. I think this color looks perfect. And then I'm going to add text to it. All right, I think this looks very good, very simple. I hope you guys enjoyed this video. I'll see you guys next lesson.
12. Getting Icons for Your Design: Hello and welcome to another lesson. We are just about done with this class. So all we have now is the footer section. On the filter section, you can find some links from your navigation by cost, you attend your Fatah section. You can also have a logo. I don't have any logos for my name works just fine. And also some social media links. I use the icons instead of names. I'm going to show you a website where I icons for my footer section. And it's called Icon. Must take note of the spelling. Icon monster doesn't have E in the monster, so thickness of the spelling. And you can just search for the name of the icon that you want to search for. So there are different styles for the icons. Just choose the one that you like the most. I think I like this one. It looks very pretty. Yeah, you can get the SVG, you can get ADA format for the icon. You can, I usually go for the PNG, but you can get other formats if you want to. You have to agrees or you can be able to download it. Also, you can adjust the colors. So if you pick PNG, you have the flexibility to change the color of the icon. So I'm going to change the color of the icon. You can put the color code that you want there, or you can just move around and pick a color that looks good. So Facebook icon usually looks blue. So I'm going to pick the blue and agree, and I'm going to download it. So this is how I download icons for my projects. Very simple. So once it's downloaded or you have to do is drag it onto your workspace. I am ready to use it for your project. Very easy. All right, that's it. I'll see you guys in the next lesson.
13. Adding Icons to Your Footer: Hello and welcome to the t is less than. In the last lesson, I showed you where to download icons for your footer section. As you can see, I have already grouped all sections though. We have walked on the contacts, the hero, the service, and the about. So I don't need so much space for my footer section, so I'm going to adjust my frame. Now. I just dragged and dropped the icon. I'm going to resize it. You can resize it using the width or height. You can resize it using your mouse by just dragging the edges in or pulling them out. I think this looks good. So this looks fine. But I'm not going to use it because I already have icons for my design. And the icons that I want to use, I want to keep them a lag, so I'm not going to use the colorful blue. They already had already brought them out here. I'm just going to drag them onto my frame and use them. So all the icons I'm going to use at the same size. So I'm just going to select everything and drag it. Make sure you drag it into your frame. Because if you don't drag it onto your frame, once you put it onto your workspace, you will see it. So once you drag that into your frame, you can start to create other components of your footer section. So I'm going to add the logo here, or I don't have a logo, so my name works fine. Or in this case, Josh works fine. So I'm going to adjust this. I'm going to change the size because I want it to be bolder. Attacks, too. Bold, maybe just a little bit. Yeah, that's fine, That looks good. I'm also going to include the links on my navigation bar. Most websites do this through. I'm just going to do that as well. Should I make use of the guides that you've been provided so that you can properly positioned things. Came going to edit the text now, resource, podcast and contact. All right, that's fine. Going to position things. Now I'm going to position them nicely. So I don't think I like the thickness of the links. So I'm just going to make them less polar because they are on our footer section. So you don't want them to be very noticeable like they would be on your navigation bar. So I'm just going to make it regular font. I think that's not so K-maps, fine, I should be good. And then I'm going to add this copyright. And your website should have it as well. Going to adjust code because you don't want it to be too bright. You want it to be there or not. Show noticeable. All right, I think this looks very good. Great job so far, great job on your design. Now that you have your final design, I just want to see a huge congratulations. Thank you so much for making it this far into this class. I hope you've had an amazing time. That's it. Thank you so much and well done.
14. Final Thoughts: Hello students. Congratulations, you have made it to the end of this class. I am so proud of you if you've made it to this video, it means you have your final website and say, wow, I am so proud of you. You have completed this entire Skillshare class. You now have a new skill or no, you're built that you can use professionally or to express your creativity. I am super, super proud of you. Now don't forget to submit your final website design to the class project gallery. And don't forget to submit the picture of your hero section, settings section, your contact section, and your footer section to the class question. Now you can take your website design. I use Website BU, There's like Squarespace or weeks to design your websites. Or you could give it to a developer to design your website for you to build it out and bring it to Saint's life. I hope you had a wonderful time creating and designing with me. And I can always assume that future classes. Thank you.
Winnie Obunabor, Frontend Developer
