Transcripts
1. Welcome to the Class: Did you ever want to design a web page but didn't know where to start?, or maybe you did get started, but you got stuck at some point because you didn't know how to pick the right colors, typefaces, or how to create a good layout. Well, this is what you'll learn in this class. But hey, if we're just meeting, my name is " ADI PURDILA" and I'm a web designer from Romania. I'd been working in this field for over ten years now, and I've also been teaching for a couple of years. Web design takes up most of my time, but I do love to just get away from it every now and then and work in a garden, with my family, or do some woodworking. What I do like, the keyboard and mouse, I'm also a pretty hands-on kind of guy. Now, together, we're going to design a landing page for a budgeting app. We will start from a project brief and a Wire frame. In each lesson I will show you how to tackle a different step of this process. Will start by defining colors, Typography, and Imagery. Then we'll design in one section of the page at a time. So at the finish line will end up with this landing page complete with sections for features, gallery, testimonials, and pricing. For this class we'll be using F-I-G-M-A. This is free and cross-platform, so you can use it on Windows and Mac OS. And you can open it directly in your browser. Now, by taking this class, I guarantee two things. Number one, you'll learn how to work in F-I-G-M-A, and number two, you will learn an efficient process of designing a web page based on a client request. This class is for complete beginners, you don't need any prior design experience, and I'll walk you through every step of the way. So let's get started.
2. Your Class Project: Hello and welcome to the first lesson of this class where I'll give you a more in-depth look at what we'll be creating.We'll also go over the class projects so you can see what you need to create when taking this class.You will also learn why I chose this project, how it might be beneficial for you and also what you need to do to get started. Let's begin.This is the final landing page that will be creating.As I was saying in the introduction video, this is for a mobile budgeting app. Now this is of course, a fictional product.These images here are just placeholders, there demo images taken from a UI kit. But let me quickly walk you through what we have. At the very top, we start with a hero area that has a selection of screenshots from the app, as well as our navigation and content. Scrolling down, we find the first section, four features, where each feature is displayed in this grid manner. Then we have a second section, four features. Moving on. We have a small call to action.That's followed by the third section four features.Then we have a screenshot gallery that's followed by testimonials.Finally, we have the main call to action and pricing table.At the very end, we have a footer. This might look like it's a lot of work.But we'll take things step-by-step, will break down this page into smaller, manageable chunks. We'll do one section at a time.You'll see that it's really not that complicated to create something like this. Alright, so now for the class project, your task will be to create a landing page starting from this wire-frame. I'll show you this in a little bit. This is the same wire-frame that I'm starting from. You'll need to do the same to end up with this. Now, your final product doesn't have to look exactly the same as mine. I'm going to show you one way to do it. Obviously you can follow exactly what I do and end up with an identical result. That's totally okay. But I do encourage you to experiment a little bit and put your own spin on things. For example, you might want to use a different set of colors or you might want to use a different set of typefaces, maybe arrange elements differently in the page. I'm going to give you all the tools you need to do that and I'm going to show you how to use those tools.But in the end, it's really up to you to determine how you want this final result to look like.Now, let me show you how you can do that.First of all, I've put together a landing page starter kit. You'll need to download this first. Inside the starter kits, we have some brand assets which essentially are just two versions of the placeholder logo that we'll be using. We also have some demo images that we'll be using. Then we have a project brief. The project brief is a PDF document and this resembles something that you would receive from a client, right? Our clients as a fictional one, it's called Numm Inc.. Inside the project brief, we have some background on the client and the company. We have the taglines that we need to use for this project. I assumed that the client's marketing team put together this document and they basically just gave us everything we need. What kind of taglines to use, what kind of titles, subtitles, button text to use for the call to actions. Everything is here. Then they currently laid out some product features for us. You can see that the features are categorized. Then we have individual features. We can see the feature title, description and so on. Everything is here. Then we have pricing information for the product, some testimonials, and then the proposed page structure. Finally, at the end, some design considerations. What kind of colors does the client like? What kind of style can we use for the design? Also, what kind of websites does the client like? You can see they sent us three examples here. This is, again, typically the kind of document you would receive from a client when doing a project like this. At any point, it can come back to this project brief and learn all the details you need. Now based on that project brief, I went ahead and designed this wire-frame. A wire-frame is basically a sketch.It's a low fidelity representation of the final product. You don't have to take this literally. A wire-frame just serves as a starting point, as a guideline. It's there to show you what kind of content you need to add to your page.It doesn't mean that the layout that we used in the wire-frame needs to be in the final product. For example, the layout for this hero section just shows me an image on the right and the content on the left. But if we look at the final product, we can see that we have an image on the right and the content on the left, but it doesn't resemble anything like this. Look at this section, this is for the features. In the wireframe, I imagine that maybe we need to have some image here on the left and then the features on the right, but on the final result, we don't have that image on the left, anywhere, we just have a grid of icons. What about the other section for features? Here's how it looks in the wireframe, and here's how it looks here. Here I added an image that wasn't here in the wireframe, and I also chose to display these features like so. I hope you understand what I'm trying to say here. Use the wireframe as a guide for the content that you need to use, not the actual layout. In the starter kit, you will also find a resources.pdf file. In here, you'll find a complete list of resources that are used in the design like the logo, the images, the icons, illustrations, and also some useful links. Whenever you cannot find a resource that I use to make sure to check back to this document and you'll definitely find a link there. Now, how do you get started and get everything set up for the main lessons? Well, first of all, you need to download this starter kit. You will find a link to it in the class description. After you do that, go ahead and create a Figma account. Go to figma.com and if you don't have an account, click Sign up, and follow the instructions there. If you do have an account, then simply go ahead and login. Step number 3 is to open the starter kit or the starter Figma file that I provided. Let me show you what that looks like.It's a relatively blank Figma file with four pages that I made for you. The first page is the wireframe, and you can use this to quickly check what you're doing. The second page is for colors, and I'll show you how to edit this once we get to the next lesson. Third page is for typography, and I went ahead and created these frames for you so you know what you need to fill in, and then we have one page for the main design. This is where we'll create the actual design for the landing page. Go ahead and open this file and you can start working directly in it. Now the fourth and final step is actually optional, you can download Figma for the desktop. As you can see right now, I have Figma opened in the browser and you can work like this, no problem, the result is exactly the same. But if it's more comfortable for you, you can download Figma for desktop. You can do that by going to figma.com/downloads and under Desktop App, choose the one that you want for Mac OS or Windows. After you do all of this, you're ready to go. Now, you might be asking me, Adi, why this project, why a landing page? The answer to that is very simple. For this class, I wanted you to learn, number 1, how to work in Figma, and number 2, the process of going from a client request to a finished product. A landing page is pretty simple. It's just one page, you don't have to worry about complex elements that you would normally find on a website, and it's quick and easy to do. I wanted this project to resemble a real life scenario. You start from a project brief, you start from a set of wireframes, these are things that you would normally get or you would normally use when you're interacting with your client. The clients gives you all the information you need in the project brief, and based on that, you build the wireframe and based on the wireframe, you design the actual page. This is as close to a real life project that you can get in a class like this. Hopefully, you'll be able to use the information you learned here and apply it in future projects. Now, as you're taking this class, I strongly encourage you to post your results in the project gallery. I want to see your result. I want to see the projects that you're making. As I was saying, I would like you to experiment and to add your own spin on things. It's totally fine if you follow exactly what I do, go ahead and post that. But if you want, just feel free to add your own colors, your own typefaces, let me see your own vision for creating this landing page based on that wireframe. So go ahead and post that in the project gallery and I will give you feedback for it if you want. I would just love to see your results. Also post in the discussion tab if you have any questions or comments, it doesn't matter how simple you think they might be, if there's something you want to ask me, go ahead and do that. I'll answer to each and every one of your questions. All right. Here's what you need to do at this point. Go ahead and set up, like I showed you previously. Download the starter kits, create a Figma account, open the starter Figma file and also optionally install Figma on your computer. Once you do that, you'll be good to go for the main lessons. In the first main lesson, will be the finding the color scheme. I am going to show you a few tools that will help you with that. That's coming up next.
3. Colour Scheme: Welcome back to the class. In this lesson, we'll be creating the color scheme for our learning page. Now this is a crucial step in any design process, so we need to pay close attention to it. There are also a couple of tools that I use all the time to simplify this part and I'm going to show you those tools as well. Ready? Let's go. Let's begin by opening our starter kit in Figma and going to the colors tab, colors page. Right here, you can see that I've created for you four frames. If you don't know what frames are, well, this is a frame basically. It's a way of organizing content on the Canvas. But we'll talk about frames in just a little bit right now let's focus on the colors. Whenever you're starting a project like this. I recommend you divide your colors in these four categories, primary, secondary, tertiary, and grays. The primary colors will be the ones that you use the most, and usually you would use them for buttons or links. Secondary colors are usually for certain acts and pieces, and they should work harmoniously with the primary colors. Tertiary colors are those that are not very prominent. You'd use them maybe once in a page or in certain situations like contextual coloring for an input state, error, success, information, things like that. In our case, we'll be using the tertiary colors, mostly for icons. Then finally, grays are mostly used on text. But you can use them on other elements in your page as well. Like maybe some icons, dividers, and so on. What I have here is a collection of 10 of these squares in each category, and each one is lighter by 10 percent than the one before it. Essentially, we have the main color and nine tints. If you don't know what a tint is, well it's very simple. When you mix a color with white, you get a tint of that color. When you mix a color with black, you get a shade of that color. A shade is therefore a darker version of a color, a tint is a lighter version of the color. I always recommend when defining a color scheme that you create these tints. You can also create shades if you want, but I usually just create tints because it gives me options. When I am choosing a color for our design, I might look at the main color and say, okay that's a little bit too intense for me maybe I'm going to use a tint of it. Maybe somewhere from this area or this area. But the idea is, I can see them and I can decide which one works best at that point. How do we pick the colors? Well, usually it all starts with the branding. What colors does the brand you're designing for use? In our case, under brand assets, we can find this colored logo. This makes it really easy for us because I can define two primary colors from here. I can define as blue and I can define as purple. What I'm going to do is I'm going to bring in this SVG file into Figma simply by dragging and dropping and you can see that by selecting any of these components, under fill, we will find a linear gradient. Click that, and that will give us our two colors. Let's click on this one let's copy it's hex value. This is one representation of that color and, let's select this entire frame, this entire group of elements and where it says selection colors, click and paste. This is one of the more awesome features of Figma. Instead of selecting each element individually and changing its color, when you're selecting more than one element, it activates this section called selection colors. You can change colors individually there, or in my case, because I was using the same color, black before, my selection just showed me that black color and by changing that, it changed the color of every single element in this group. Don't worry if this seems a bit weird, I'm going to tell you more about this as we're progressing in this class. Right now you can see that we've defined the first primary color, which is this blue. Let's define the second one. Let's go back to Linear, let's select this element, copy and then we'll select this frame that you can see here. We can do one of two things, we can duplicate it by hitting command or control D. Command D if you're on a Mac or control D if you're on Windows and that's going to duplicate it, it's going to make a copy of it. Alternatively, you can select it and go to the Figma menum edit, duplicate. It's going to do exactly the same thing. Or you can simply copy and paste just like you would normally. Let's actually make a bit of room here. Then I'm going to select this group and I'm going to paste then the other color and now I can get rid of this logo. Pretty cool and just like that, we've defined the two primary colors that we'll be using. Now what about the secondary colors. Let's move this up a little bit. For the secondary colors, here's what I usually do. I select or I copy the value of my primary color, and then I go to Adobe Color. This is a tool that I use all the time and Adobe Color is a free tool, and it gives me the option to create a color scheme based on a color. Under thecreate tab, go ahead and paste in that value and then from the left side, apply a Harmony Rule. This is analog, this is monochromatic, triad, and complimentary. Usually, I use complementary color schemes because just like the name says, the colors in this pellet complement each other, they create harmony. In this case, the first secondary color that I'll be using is, this mustard looking color. I'm going to go ahead and copy that. I'm going to go back here, select my frame, paste them that color and if I don't like the way it looks, that's totally fine I don't have to use this exact same color. I can use that as a guide and then just use the slider to create my own color and just choose one that I think looks better. In my case, I'm going to use this one FFC700. Now I also want an additional secondary color, so I'm going to duplicate this bit and for this color, I'm going to choose F25C63. Now let's move on to my tertiary colors. Let's move this up a little bit. Let's make some room because we're going to create a lot of tertiary colors. To be more exact, we are going to create seven of them. Let's duplicate this 2,3,4,5,6,7 using the same keyboard shortcut command D because I'm on a Mac and now, I'm just going to fill these in with the colors that I chose. The first one is 00DAA7. The next one is 37c2cc. Next is 3a96e8. The fourth one is 64C9FF. The fifth one will be 9E76FE. Then number 6 is going to be CC37BD. And then the last one will be FFCA64. All right. These are the tertiary colors that we're going to be using. Now, you might ask me, where did you get all these colors? Well, it's just a matter of opening up the color picker and using the sliders here to determine what color I like. And I just went through all of these and I just picked one that I thought would work best for this project. Alternatively, here's another tool that I use and I think it's very helpful. It's called Dribbble Color. And I'm sure you're well aware of Dribbble, the website where you can find design inspiration. Well, you can now search for colors, right? You can pick from one of these predefined colors, or you can simply just enter your own value. And it's going to give you a list of results that are using that color. And when you open one of these Dribbble shots, you can also find the color palette that was used. I usually go here and get inspiration for colors. Or I go to the Adobe Color website and I just hit explore and I look at the color palettes from this website or I just pick them by hand. Now, the reason that I went for so many colors is something that I read in the project brief. The client, right at the end, under design considerations, told us that we should make it colorful. And also, the main color scheme should be centered around the color blue because it conveys confidence and professionalism. And they also gave us another option here, grass green for freshness and novelty. But the main idea is to center the color scheme around blue and also make it colorful. That's the reason we went for so many tertiary colors because we want options. Finally, the last step we need to tackle here is to define the grays. And these will mostly be used for text. And this is where having multiple tints of the main gray color is very useful because you might use this bit for the main headings. And you might use this bit which is 70 percent, or this which is 80 percent for the main text. Now, when choosing a gray color, here's my very simple process. I just create this shape here, and I choose my main brand color. I paste that in, and then I duplicate this shape and I fill it with black. And then I just lower the opacity on that black color to let's say 90 percent. And I'm not sure if you see it, but now it's not totally black. Some of that blue color from underneath comes through. Now what I do is I just create another shape. And I use the color picker to sample that color. And that gives me my main gray. And if I don't like the way it looks, I can go back, change the opacity of the black. And that's a bit too much, maybe 88 percent, or maybe I wanted to be a little bit darker, maybe 95 percent. And then I can go ahead and I can sample that again and choose my gray color. Now, I usually spend a little bit of time on this process until I get the exact color that I want. In my case, it would be somewhere around, I guess this area. The final gray color that we're going to use is 030F1A. Now we can delete this and we can paste in our color right here. And that just gave us the main gray and the nine tints that we can now use in our design. Alternatively, if you're looking to create tints and shades, the easy way, let me show you a very nice tool to do that. It's called Tint and Shade Generator. We can find it at maketintsandshades.com. And what you do basically, let's give this as an example, you select your main color, you paste that in and you hit make tints and shades. And this gives you the shades on the top and the tints at the bottom, along with the hex code for each value. And at any point you can hover on one of them. Copy. And that value is now copied to your clipboard and you can use it wherever you want. Or if you have a setup like this, you just set a different opacity on each layer and you'll get relatively the same result. And with that, the color scheme is complete. All right. Now it's your turn to get busy. If you've followed along and worked alongside me, then your color scheme is complete. Great. If not, go ahead and do that right now. Use the templates I gave you in Figma and also the tools that I showed you to create your own color scheme. You don't have to use the exact same values that I did. Go ahead and experiment. That's the best way to learn. Use whatever colors you feel look best. Now, once you do that, you're ready to move on to the next lesson, which is about typography. This is yet another crucial step in the design process. And we're going to tackle that in the next lesson. I'll see you there.
4. Typography: Welcome back to the class. In this lesson, we're going to tackle the typography for our learning page. Now, what does that mean? Well, it means choosing the right typefaces and all of the other text properties to make sure that everything looks nice and neat. That means font sizes, line heights, font weights, and so on and so forth. I'm also going to be showing you some very helpful tools that are going to make your job a lot easier, and we'll also discuss typographic scales, and I'm going to give you an introduction to the eight point grid system we'll be using throughout this design process. Let's begin. We begin here in the starter Figma file under Typography, where I've created a few frames, for defining typefaces, the type scale, the heading styles, the style for the block quotes, and the paragraphs. This is enough to get you going. Let's move on to defining the headings. To do that, we'll start by taking a look at the project brief. Right at the end, under design considerations, the client asks us to make the landing page modern, professional, yet playful. How does that translate to the typography? Well, the playful part, we can actually get from the colors. When we make it colorful, we make it playful. But this bit, make it modern and professional. We can totally do that with the help of typography. When starting a project like this, it's always a good idea to visit the websites that you use to get your font files. There are a lot of them. I use two of them, mainly Adobe Fonts and Google Fonts. Now, Google Fonts is free and Adobe Fonts, well, you need to have an Adobe subscription to get access to these. But I will say this, Adobe has much higher quality typefaces than Google. You can still find great typefaces here, but usually I reach out for Adobe Fonts, because they just are a little bit more refined, and the collection here is actually much bigger than what you would find on Google Fonts. Because I have an Adobe subscription, it just makes sense for me to use their fonts. Now, because the client asked us to make the landing page look modern, we're going to use a sans serif typeface. What is a sans serif typeface? Well, let me give you an example. I'm going to open up Roboto here. Actually, I'm just going to make this really big so you can see the difference. A sans serif is a typeface that doesn't have the serifs on the letters. I think actually I should start with a serif typeface, so you can see the difference. This is a Serif typeface. See these decorations here, and also here, and also here? These are called serifs. Serifs are usually found on older typefaces. The more modern typefaces are sans serif or without serif. Just like this one. See here, we don't have those decorations anymore. We can't find them here or here or here. These are cleaner and more modern. Now, I won't go over serif versus sans serif in this class, that's beyond the scope. But if at some point a client asks you, "Okay, we want a modern looking website." Then as far as typography is concerned, you need to use sans serif typefaces. Now, in my case, after doing a little bit of digging around on Adobe Fonts, I've settled for Brandon Grotesque. This is a typeface that fits both criteria, it's modern, it's sans serif, and it's also very professional looking, and it also has all of these styles. We have styles or weights ranging from thin to light to regular to black. This is the one that we're going to use for the headings and some of the other elements. Now, when it comes to the body text, we're going to be using Tisa Sans Pro or FF Tisa Sans as it's called here.This is a typeface that's similar to Brandon Grotesque, but obviously it has its own differences. I'm using two typefaces because while Brandon Grotesque is great for headings, so it's great and large font sizes. It doesn't do that well on smaller body text. For that reason I'm using FF Tisa Sans or Tisa Sans Pro. This will work great on smaller text sizes like for example 18, when we're doing the body text, this will perform beautifully. Now, these are my choices. Your choices might vary and I strongly suggest you do a little bit of digging around either on Adobe Fonts or Google Fonts, and find the typeface that you think look best, and go ahead and use those. In my case, I have both of these fonts installed on my system. All I got to do now is go in here in Figma and reference them. I'm going to say Brandon Grotesque, and I'm going to go right here under text, and I'm going to select Brandon Grotesque. Let's make this bold, and let's use a bigger font size, maybe like 55. What I usually do, and let me just move these out of the way. I usually duplicate these values and I just highlight or present all the weights for this typeface. This is regular, this is medium, bold, and this is black. This just gives me an idea of how the typeface looks like without having to change a piece of text manually. For example, if I'm in main design, I can just come into typography and I can say, okay, so this is what the lightest version of it looks like, or this is how the heaviest version of it looks like. Let's go ahead and do the same for the body texts, we're using Tisa Sans Pro, and I'm going to do exactly the same here. This has a couple of versions as well. Starting from thin, light, or actually these are impaired way around, regular and then medium, bold, extra bold, and black. All right. So now we have our typefaces ready to go. By the way, to zoom in like this, you can hold command on Mac and just use the scroll wheel to zoom in and out, or on Windows, you can use control and the mouse wheel to do the same thing. Since we're on the topic of zooming in and out, let me show you two other keyboard shortcuts I use all the time. Shift zero will always zoom to 100 percent, regardless of Mac or Windows. Shift 1 will zoom to fit, so it's going to take all of your frames and it's going to fit them in the visible portion of your canvas. If you select an element or a frame and you press Shift 2, it's going to zoom to selection. These are three keyboard shortcuts that I use all the time. Again, Shift 0 will zoom to 100 percent, Shift 1 zoom to fit, Shift 2 zoom to selection. Holding down the Command on Mac or control on Windows will basically allow you to use the scroll wheel to zoom in and out. Pretty cool. Now, let's move on to the type scale. Now, what is a typographic scale? Well, the easiest way to explain is to show you. Here we have a website that I use all the time it's called types-cale.com, and here what you do is basically you set your base font size. You select a scale and that will give you a list of font sizes that you need to use to create this harmonious scale. If I were to change the ratio here, you will see that the scale changes as well. By using this tool, you can say, "Okay, this is what I'm going to use for heading one, heading two, three, four, five and six. This is what I use for smaller text. By using this tool, I make sure that my typography is always spot on because without it, you don't really know what kind of font sizes to use. I mean, you start with, let's say the base font size for the body text, which is usually 16 pixels. But what about after that? What do you use for the H1 or the H3? Do you use 20 pixels, or do you use 21 pixels? Or maybe you use whatever you think looks best? That can work but having a tool like this that tells you exactly what kind of, or what font sizes to use based on a scale is critical. The way this works is actually very simple. Let me open a calculator and explain the principle behind this. Type scale base works based on a ratio. We start with the base value, which is 16 pixels. That base value, we multiply by the scale, which in our case is 1.414, and that gives us the result, 22.624. Now for the next item on the scale, we take that value, 22.624 or 22.62. We can use two decimal places and we divide it, or we multiply it with the same ratio, 1.414 and that will give us the next value. In our case, I actually used the wrong separator here. In our case it's 31.98 and you do that over and over and over again until you get all the values for the rest of your text elements. Now, the advantage of using a tool like Type Scale is that you don't have to make these calculations manually. It does it for you, and it does it in M's as well as in pixels. Now because I'm using Figma, I have a handy plugin that generates type scales for me and that plugin is called Font Scale. If you want to install it, you simply need to go to Plugins, Manage Plugin, and then search for Font Scale and install it. It's really, really simple. Now to use this Plugin, you enter the base font sizes, in my case is going to be 18 and choose the scale factor in my case is going to be major third and then, generate layers. That generated these layers and it can actually paste them in here. As you can see, that gives you text elements that have the correct font sizes. It's exactly the same as going here and saying, "Okay, I want to use 18 pixels and 1.250 or major third." That's going to give you the exact same result, the difference is, in Figma you have these layers and you can reference them at anytime you want. Let's select all of these and let's change the typeface to Brandon Grotesque, there we go. Now, I'm also going to add another element here because I want this final value of 55 pixels. Now what I'm going to do, I'm going to go through each one and I'm going to round off the font size. This is 43.95, we're going to make it 44, this is 35, this is 28, this is 22.5. I can go either 22 or 23. Let's go with 23. This is 18, and this is 14.4 but we're going to use 14. Now since we have the typographic scale in place, let's do a little bit of a simulation for the heading styles. We're going to say heading one and then, we're going to multiply that to create headings from one through six. Also let's do a small element here. All of these will be using Brandon Grotesque and headings one through three, we're going to make them bold. Heading five, we're probably going to make this medium. Heading six is going to be regular and the small will use uppercase. You can open these advanced type details by clicking this little button here and choosing uppercase and this will be set to 14 pixels. Let's do 5 percent letter spacing, it's going to be bold and we should be good to go there. Now, let's define the styles or the style for the other headings. We have heading one. That's going to be 55 pixels, because 55 is the font size of this element from our Type Scale. Heading two, we'll be using 44, Heading three, we'll be using 35. Then we'll have 28 for heading four, 23 for heading five and then for heading six, we'll be using 18, which is the base font size. By doing this, we basically find the font sizes for all our headings based on this type scale. Pretty cool and very, very easy. Let's go ahead and move this. Since we're on the topic of defining styles, let's define a style for the block quotes and here we'll be using also Brandon Grotesque and we're going to be using the 35 pixel font size. Let's move that out of the way and finally, let's set a style for the paragraphs. These will be using Tisa Sans Pro, regular, 18 pixels. Now, our typography is pretty much set up. The final thing that we have to do is set the proper line heights. Now, to do that, we're going to be working with the eight point grid system. Let me tell you a little bit about this. There's a great article that I linked in the resources, P-D-F file. Go ahead and check that out. It really explains why it's beneficial to use the eight point grid system in web design. Essentially, what we're trying to do is achieve a consistent vertical rhythm. So any measurement or any distance, any margin or padding that we're going to apply, any height that we're going to apply to our elements should be a multiple of eight. That applies to the text elements as well. The font size doesn't necessarily have to be a multiple of eight. What matters is the line height is a multiple of eight because the line height dictates how tall the lines of text are and if there are multiples of eight, then everything is going to fall nicely on a baseline grid. I'm going to show you a little bit about that when we add more elements and we follow this eight point grid system. But for now what you should know is that when it comes to typography, we're going to set the line height of the text elements to be a multiple of eight. Let's go ahead and do that right now. Heading one has a line height that should be around 79 pixels. This is automatically calculated by Figma, so I'm going to set it to 80 pixels. Heading two should be around 63, or the next, or the closest multiple of eight is 64. So we'll do that. Heading three is 50. Here, we can go either 48, that's a multiple of eight, or we can go with 56. Let's do that to 56. Heading four is 40, so that's spot on. Heading five is 36 and we can go with either 40 or 32. So let's go 32. Heading six is 18. We can go 24 here and this one, we can go 24 as well. That's the line height set for the headings. Now, for the block quotes, let's see 35, we're going to use 56 because that's what we used here as well. But if you feel like this is too much and now that I actually see it, I might just revert back to 48. I think that looks a little bit better. So let's do that here as well, 48. By the way, these are not final, we can always change these, if you get to the design point and you find that this doesn't really work that well. You can always come back to this and change. It's not a big deal. Paragraphs 18, we're going to use 24 as a line height and with that, we've created the typography characteristics for our landing page. Alright, if you've been working alongside me, then you should have the typography all figured out. If not, go ahead and do that right now and just like with colors, experiment a little bit, you don't have to use the same typefaces that I use or the same scale that I did. Pick a typeface or pick the two typefaces that you think work best for this kind of product or for this kind of project. It doesn't matter if it's a free or a paid typeface. If you think it looks good, go ahead and use it. Also, you don't have to use the same 1.25 scale that I used. Play around with them. Pick one that you think looks best and when choosing the different ratios, notice how these affect the overall composition of those texts elements. See how this changes the visual hierarchy. In the page, you will see that the lower the ratio, the less difference it is between each step in the scale. The higher the ratio, the higher the difference between each step in the scale. For example, if you're going with a golden ratio, you'll see that there is a dramatic difference between the smaller font sizes and the larger font sizes. Each type scale, each ratio has its place for different things. You would use smaller ratios for blogs maybe, or for maybe a dashboard where you don't need such a big difference between font sizes and you would use something like the golden ratio when you want to make a statement, when you have a website with big bold typography. When you have a big difference between the body text and the largest heading. So play around with these, and once you're done, you're ready to move on to the next lesson, which is about images and other visual assets like icons. Now, we're going to be using some placeholder images and even though these are not final, at least, they give us a starting point. That's coming up in the next lesson. I'll see you there.
5. Images and Other Assets: Welcome back to the class. In this lesson, we're going to get familiar with the images and the icons we'll be using for this design. It's always a good idea to prepare these before you start the actual design process, because it's just going to make things easier for you. Of course, you might change them later, but at least you have a starting point. So I'm going to show you what images and icons we'll be using. Also I'm going to share a couple of resources you can use to facilitate this whole process. Let's begin. All right, for the images, as I showed you, we have the logos, the brand logos. You can find a link in the resources PDF file to this exact logo, and you can download it. Now, for the placeholder images, I got these images from a UI Kit, a Finance UI Kit. Let me just make this a little bit smaller so you can see them better. Because we're working with a dummy project, we don't have screenshots or images from the actual product. So we're just going to use these demo images, and actually let me just show you where you can get that. This is called a Free Finance UI Kit. You can find it on Behance, and this is where it can also download it. Now, I believe this was a sketch, yeah. So it's a sketch file. Just in case you don't have sketch installed, I went ahead and exported these JPEG images for you, so you can use them right away in your design. Now on top of these, we also have these device renders. This is for an iPad Pro, and this is for an iPhone 7, and we'll also be using these in our designs. These are PNG files and I exported them from the Photoshop files that can be downloaded from here. These are also linked in the PDF file by the way. These are free resources from Pixeden. This is a Psd iPhone 7 Pro Mockup, and this is an iPhone 7 Mockup. These are all vectors, they're in Photoshop, and they have this smart object as the screen. You can just double-click that and put whatever screenshot or image you want, just like I did. Notice, I have one of these other images inside the phone screen and the same goes for this iPad. So these are the placeholder images that we're going to be using. Now, if you're just looking for some placeholder images, one resource that I use all the time is Unsplash. You just search for a photo, like for example iPhone. That gives you a list of images matching that search criteria. These are free images you can use them anywhere, great resource. Now, when it comes to icons, there are so many websites out there, that allow you to download loads and loads of sets of icons. One option that I go to all the time is Iconfinder. You can find premium free icon sets and you can download individual icons as well. Here you simply search for home, and you can search by style. You can find free icons only and you can click on any one of these and download it as a PNG, SVG or other formats, it depends on the icon set. So you can get icon sets from here. But for this particular demo, we're going to be using some icons from this icon set. It's called micons. This is by a fellow Romanian called Cosmic Negoita. This is a great icons that I use it in a lot of my projects. Another icon set that we'll be using is called Ionicons. This is again, I really love this icon set. I use it all the time, I really like it and I can strongly recommend it to you as well. Now, with any of these sets, you can simply download them. It's going to give you an archive, and you have probably SVG and PNG files. But what I like to do, is use an app called Iconset. This is a free app, it's cross-platform and it works on both Mac OS and Windows; It looks something like this. You can create icon sets here, and import them from your hard drive. As you can see, I have the two sets that we're going to be using loaded here. You can see all the icons, you can search for a specific icon, and once you find it, it's really simple. Just right-click, you can copy it, and then you can go to Figma or whatever design software you're using and simply paste that in. Or you can click and drag, that's going to do exactly the same thing. So these are the tools that I recommend you get. But if you don't want to install anything else on your computer, that's totally fine. Lets say we want to download this ionicon set. It's going to download an archive, and once you unpack that, it just gives you this list of SVG files. You can just grab the file that you want and drag and drop into Figma, and you're good to go. At this point you should have the images and icons all ready to go. Because we're working for a fictional product, we're obviously using some placeholder images. But remember that on a real project you would use images that are relevant to that specific product. Feel free to use the images that I provided or download your own. If you think you could find images or icons that work better for your design, by all means, go ahead and do that. I would love to see different results in the project's gallery. Now, assuming you have everything set up and that includes color, typography and imagery, we're ready to move on to the actual page design. This learning pages are divided in several sections, and we'll tackle one section at a time in the remainder of this class. We'll begin with the hero section, and that's coming up in the next lesson. See you there.
6. Hero Header and Background: Welcome back to the class. In this lesson, we're starting the actual page design. So far we've been preparing, getting everything ready including colors, typography imagery. Now we're ready to lay down the first pixels. Now we'll start with the hero section. This is quite complex and we'll split it up in two parts. In this part, we're going to be adding the logo navigation and we'll also create a nice-looking background for it. If you're ready to go, let's begin. Back in figma, we'll switch to the main design page and we'll start by creating a frame. To do that, we can use the shortcut F for frame and this activates this right sidebar where you can choose a predefined frame size. This comes in various formats ranging from desktop sizes to tablet and phone sizes. You can see the size in pixels right here on the right side. It can also choose between some common paper sizes and social media sizes. Or if you want a custom size, you can simply click and drag to create the frame to your desired size. If you want to change the size afterwards, all you got to do is select the frame either from the canvas or from the layer list and change the width and height properties on this right-hand side inspector. In my case, I'm going to make this 1600 pixels wide and about 2000 pixels high. Ultimately, it's going to end much bigger and higher than this. But as a starting point, this is more than enough. We can double-click here or we can double-click here to rename this. I'm going to say Desktop. Now let's define a column grid. If you're not very familiar with using grids in web design, it's very simple. A column grid is basically a list of vertical columns that you can use to align elements or size elements. So if you're thinking about a three column layout, it's about aligning content to three equal columns in that page. Let me show you what I mean. In figma, it's really easy to add a column grid. Simply select the frame that you want, and go in the inspector and choose Layout grid. Simply click on it or simply click on the plus sign. It does exactly the same thing. From this list where it says layout grid settings, you can choose between grid which is this, Columns which is what we need or Rows which is the same thing but horizontal. So we're going to choose Columns and usually you would go for 12 columns. This is a standard number because 12 is easily divisible by 2,3,4 and 6. Next you would set a color for this grid. You can go with any color you want, but make it a color that will let you know that this is actually a grid and it's not part of the actual design. It can also change its opacity here. Under Type, we would choose Center and then we would define the width of each column, in my case, I'm going to go with 72. Under Gutter, we're going to choose 32. The gutter is basically the distance between these columns. Now obviously feel free to use any kind of grid properties you want. In my case, this is what I'm going to be using. Now if at some point you want to hide the grid, you can click this eye icon here or if you want to remove it completely, we can click the Minus sign.There is also a keyboard shortcut for it, its Control G. You can toggle that on and off, but you can easily find the correct keyboard shortcut if you go to the figma menu, View, Layout Grids. It can obviously toggle it from here on and off. So lay-out grid or column grid is now created. Let's move on. To know what exactly to put in this hero area,let's refer back to our Wireframe. We can switch to that page. By the way, there's a quicker way of doing that. You can press Page Up or Page Down on your keyboard if you have those keys to swap between pages. This works in Windows and on Mac OS. It's the exact same keyboard shortcut. So if we go to the Wireframe, we can see that the hero area, which is this one here has our header which contains the logo and navigation. Then it has the hero content, which is comprised of this media object and title, subtitle and call to action. Now this bit we'll tackle in the next lesson. So let's not worry about that right now. But in this lesson, we're going to add our logo navigation and also will create a nice looking background for this hero area. So here's how we do that. Let's start with that background. Let's go a head and hide this grid because we don't need it right now. Let's start with a rectangular shape for that press "R" or you can choose from this list of tools right here and we'll simply click on the canvas or we can click and drag and create one of a custom size. So let's make one that's the same width as our canvas. Let's push it up and under Fill, let's choose a linear gradient. Now to get the correct color values, I'm going to refer back to the Color tab. So I'm going to grab my primary color and place it here. Let's see which one is it, it's this one. Then for the other color I'm going to choose my second primary color which is this. This actually needs to be 100 percent opacity. Now if you're not entirely happy with how the gradient looks like, you can actually use these sliders to move the color stops up and down, left or right. It really depends on your view here. So if you want more of this purple, you would just move like this. If you want more of the blue, you would move it like this. If you want to create like an angle, you can click on these individual handles and it can move them around until you get to where you want. So in my case, I think I'm just going to do something like this. That should be plenty strong for now. Now what I'm going to do is, I'm going to select this rectangle and I'm going to rotate it. To do that, you can enter a new value in the rotation field here. Let's go with 16 degrees. All right, that's pretty good. Now I'm going to resize this so that it fills my page completely, like so. I'm also going to round off the corners. I'm going to add a big border-radius of 64 pixels. Now, how you get these values, it doesn't really matter. In my case, I'm using the eight-point system. 16, 64, these are all multiples of eight. It doesn't matter for the vertical rhythm, but it just makes it easier for me to remember. Now you can move this left and right, up and down until we find a suitable position for it. You can also activate the layout grid and align it to the grid, if you want. So in my case, I'm just going to leave it about there. Now. Something else I'm going to do is add a drop shadow to this. For that select it, go to effects, click, select drop shadow and select this sun icon. To open the settings. For the settings, I'm going to select 30 for blur, zero x 20 for y. As for the color, well I'm going to use my main gray color. Copy it from here. Paste that in here and for a opacity, I'm going to choose 20 percent. Now, here's a pro tip. Whenever you're using these effects, it can actually create templates for them. So with the element selected, where you had the effect, click on this style button and click on the Plus sign and just type in a name. In my case, I'm going to say drop shadow, create style. So what this does is, if I have another element for example, and I want to add the exact same drop shadow. I can select that, go to effects and select drop shadow. Now it has the exact same one. Now, if I want to change the drop shadow on both of these, I can click on the or outside of any element and that's going to select my canvas. I can find local styles here. I can select drop shadow, edit style and I can change its properties here. Maybe I want a different color. See how it changes on both elements?. That's the power of working with local styles like these. It makes reusable styles very effective. Now you can do the same with gradients, for example. Where it says fill, maybe I want to save this gradient for later use. I can click on the same color or the same button where it says style and under color styles, I'm going to hit plus. I'm going to type main gradient. Now, let's add a little bit of more visual interest to this section. I'm going to select this, Command D, to duplicate it. I'm going to change its rotation to 12 degrees. I'm going to right-click and select send to back. This is going to put it behind my main layer. I'm just going to adjust its positioning a little bit. Something like that. Maybe push it down a little bit as well. I'm going to change its overall capacity to 30 percent. Now, I want to show you some cool tricks here. When you have an element selected, you can press any number between one and zero to change its opacity. So if I press one, it's setting its opacity of 10 percent to 20 percent, 3,4,5,6,7,8,9 and zero changes it to a 100 percent. Now if you do these numbers in rapid succession, for example, three four. This changes the capacity to 34. Here's another example, 12, 76, 32. If I do, three and two, it changes its opacity to 30 percent and then 20 percent. So in my case, let's leave this at 30 percent. Now, let's do this again. Let's duplicate. This main section. Let's change its rotation to 26 degrees. We're going to put this all the way in the back. To do that, you can right-click and select send backwards. Then again, right-click send backwards. Or it can do it all at once by selecting send to back. That's going to put it all the way in the back. Alternatively, you can simply click and drag the rectangle from the Layers panel. For this bit, I'm going to change its opacity to 10 percent. I'm just going to move it to the left and to the right, until I find a suitable position for it. I think that looks pretty good. Now here's another tip. It can use the arrow keys on your keyboard to move elements. Up, down, moves that element one pixel at a time. Left, right, does the same thing. But if you hold down shift while doing that, it's going to move it 10 pixels at a time. This is a very quick way of moving objects on your canvas without using the mouse. That looks pretty good. Now, to finish this off, let's do this. Let's duplicate this one more time. Let's change this rotation to 26. But this time let's move it inside, to somewhere like this. I think that looks pretty good. Now under fill, I'm going to remove my main gradients and I'm going to add a linear fill from white to transparent. So this, is actually white, zero percent and let's actually swap these. > So we go from solid to white to transparent White, and I'm going to change its opacity to five percent. By doing that, I just get this very nice looking effect, where I start with white here and it just fades off as it goes up. I can even make this smaller, like so. With that, we can select all of these command G or control G if you're on a PC to group all of these together, and let's call it the background. With that, the hero background is done. Let's go ahead and add the logo and navigation for that. Let's bring up the layout grid and, let's open up our brand assets. We're going to grab our white logo. Simply click and drag. Let's position it somewhere in our page. Now, the logo, We're going to make it 48 pixels in height. This little button here will constrain as proportions. Meaning when you change one value, either width or height, the other value will resize accordingly. If you uncheck this, you can change these values individually. But in my case, I want to make my logo 48 pixels in height, why 48, because I'm using the eight point grid system, so any element should have a height that's a multiple of eight. Now I'm going to take my logo and I'm going to position it so that it's 64 pixels from this edge. To do that, I'm going to hold down Option on Mac, but it can hold down Alt on a PC. So on Windows. I'm going to move my mouse cursor until I can reference the edges that I want. So notice where it says 71 pixels here. That means the logo is, 71 pixels from that edge. I can use my arrow keys now on my keyboard to just nudge it in place so that it's 64 pixels now, from that left edge. I'm also going to place it 64 pixels from the top. So to do that and make it easier for myself, I can use the down key two times. Now I'm going to hold down shift and use the up key three times. Because if you remember holding down the Shift key while nudging, an element will do that in increments of ten pixels instead of one. So now my logo is perfectly positioned, exactly where I want it. Now let's do the navigation for that. Lets start with the text element. You can press T on your keyboard or click this little button here. I'm going to type in the first menu item. According to our wire-frame. We have four menu items: features, screenshots, testimonials, and pricing. So actually one thing you can do is you can grab these links individually, copy them from the wire-frame, and paste them here. How cool is that? Now, for the color, we're going to be using, white, 90 percent. For the text, we'll use Brandon grotesque, which is the typeface for our headings. 18 pixels regular. 24 pixels line height. Then we need to position these at equal distance from one another. We could do this manually by selecting each one. Okay, this is a 24 pixels. Maybe I wanted to be a 32 pixels. I can do that. Then you will need to do the same with the rest. Usually this works. But there's a much easier way of doing things and that's by using auto layout. This is probably my favorite feature in Figma. Auto layout allows you to group a set of elements and set equal distance between them or around them. It's the same as using margin and padding in CSS. So to do that, you would select all the elements that you want to add. You can click on auto layout or you can press shift A on both Mac and Windows. Or it can right-click and select, Add auto layout. So this is going to create the new frame that contains all of your elements. Then by default, it looks at how your elements are positioned. Mine are one after the other, so it shows horizontal, but I can change this to vertical if I want to. This is the cool part here. I can set horizontal padding. So this will add space on the right and on the left. I can add vertical padding, which will add space on the top and bottom, and I can specify spacing between items. This is the one that we're interested in right now. So let me undo, and I'm going to specify 24 pixels. So now my elements are perfectly spaced apart. This is one feature that I highly recommend you use all the time because it just makes your job so much easier. So with that, we're going to grab our main menu and we're going to position it. We're going to align it to the grid. I'm not sure if you can see it here properly. But now it's aligned to the grid and Figma is actually very smart about this. It automatically snaps it into place. Then I can select my menu and my logo. I can go here to the alignment panel and I can set a line vertical centers. Easy as pie. With that, the first part of our hero is complete. We have the logo, the navigation, and the background. [inaudible] The first part of the hero section is now complete. If you didn't follow along and worked alongside me, go ahead and create it, right now so you're ready for the next step. As usual, feel free to bring your own flair or your own vision to this design. I would love to see these results in the project gallery. Now, assuming you successfully designed in this first part of the hero area, I think it's time to finish it. We'll deal with in the next lesson, where we're going to add the hero content. So I'll see you there.
7. Hero Content: Welcome back to the class. In this lesson, we're going to finish designing the hero section. Previously, we created the structure for it with the grid, the logo, navigation, and background. Now, it's time to add the contents. Let's get started. The hero content, if we look at the wireframe, is comprised of a media object which can be image, video whatever, and a title, subtitle and that's uncalled option. We have this button, and this link which probably just takes to a pop up video, I imagine. To make things easier for us, let's select all of these elements. Actually, let's select this entire group where it says content, and I'm just going to paste it in here. Now, let's tackle the heading first. Here's a quick tip for you. If you want to select an element that's inside a group, normally you'll need to select the group and then double-click to enter inside the group. But if you want to do that without double clicking, you can hold down Command on Mac, or Control on Windows. That will allow you to click and select any element regardless of how deep it is in the layer structure. For the heading, we're going to change its color to white. Then we're going to go back to our typography and we're going to use the style of Heading 1. Now, you can glance over these values and commit them to memory and then replicate them on the other side, or you can right-click, go to Copy/Paste, Copy Properties, and then you can come back to main design, right-click, Copy/Paste, Paste Properties. That will change everything, the font family, weight, the font size, the line height, all of it. Now all we have to do is basically change the color back and let's bring up the grid, let's align this to the grid, and we're going to change the width of this element so that it spans on seven columns. We have 1, 2, 3, 4, 5, 6, 7. Next, let's target this bit. For this, let's go back to typography and select a style that would work best for us. In our case, we'll probably be using Heading 5. Right click, Copy/Paste, Copy Properties, go back and Paste Properties. Now, this doesn't really work that well in medium, so let's switch back to regular. You can make these changes, no problem. Let's resize this as well and let's actually change to auto width. That means the text box will resize to the maximum width of the text inside it. Let's switch its color to white, and let's use a more subdued tint, 60 percent, let's say. Awesome. We're making great progress. Now, let's look at this button. For this button, I want the text to say, download for free, but I would also like a nice arrow to sit right next to it. I'm going to show you an amazing way of creating buttons in Figma that allows you to type any text you want in them and they'll resize automatically. That's with the help of our trusty friend auto layout. What I'm going to do is select the text itself, and I'm actually going to move this outside, and I'm going to ungroup this. With the Text selected, press ''Shift+A'' to add auto layout, and I'm going to select 32 pixels, horizontal padding, 16 pixels, vertical padding, and 16 pixels spacing between items. Now what I can do is I can add a fill color and I'm going to add fill white 100 percent. I'm also going to add a 100 pixel corner radius. Do you know why I did that? Because if we're going to take a look at the project brief, under design considerations, the client tells us that, "Hey, we like pill and ghost buttons." A pill button is the one with very rounded corners. It looks like an actual pill. With that done, I can select the text inside it and I can set it to my primary color. Let's go to Colors, select my primary, let's come back and paste it in. Now as far as the text is concerned, we're going to use Brandon Grotesque. Let me actually zoom in here. We're going to use bold 18 pixels, 24 for line height, and we should be good to go. Now, I'm also going to add a drop shadow to it. I'm going to select my frame, which I'm going to call Button, and under effects, I'm going to choose Drop shadow. The same one that we used for these elements here. The last thing that we need to do here is to add a nice arrow. For that, I'm going to go to my app here, I'm going to search for arrow, and we're going to choose the arrow right from the Microns set. So click and drag and drop it in. Here, we're going to keep it at 24 pixels and I'm going to hit ''Command+X.'' I'm going to select this text and Command+V+V or Control+V for on Windows. This is going to paste it right next to that text inside my button frame. All I got to do now is change the color to the same color as the text. Here, I'm going to give you another pro tip. When working in Figma, and you want to change the color on multiple elements, you can select the parent element and when you see selection colors, this will basically give you the colors of every single element in that selection. If I want to change the color of this arrow to the color of this text, all I got to do is copy the color of the text, paste it in, and I'm good to go. Now our button is complete, and because I'm using auto layout, I can change the text on this button, like so and the button will resize automatically. How cool is that? Of course, I can also change the padding and the distance between items. I can do this, and I can do this. I can do this. Well, that was a very large value, but you get the point. I get very fine control over how this looks like and it's super easy to use. Now, let's see about this video introduction link. For it, I'm going to be using my secondary color. Let's select that, copy it, paste it in, type face. We're going to use Brandon Grotesque again, 18, 24 and Bold. The last thing to do is add a little icon to it as well, because I wanted to show the fact that, hey, if you click this link a video is going to play. So we need an icon that says play. We have this one or if we go to Ionicons, we will get this one. Drag and drop. I'm going to resize to 24, like so and I'm going to select the icon and the text. I'm going to press "Shift + A" to create an auto layout. Now, when doing this, you can align elements in a number of different ways. If the auto layout was horizontal, you can align elements at the top, center, or bottom. If your auto layout is set to vertical, you can align elements left, center, and right. This is what it's doing. You can also choose to move up an element or move down. Of course, if the layout is in horizontal mode, you can move elements left and right. You can also use the keyboard shortcuts left, right, top, bottom. In my case, I'm going to choose to align this icon in the middle and also this text in the middle. As for distance between items, I'm going to choose 16 pixels. I'm going to make sure that I am using the same color on this icon. Now what you can do is you can group up these two elements with auto layout. You can press "Shift + A" and that's going to create another frame for both of them. It can set its spacing between items to 32. By default, this will align these elements in the middle. Now, I want the same distance between these three elements. What I can do is I can select all of them by holding down "Shift". I can do "Shift + A" to add auto-layout. I'm simply going to change the distance between them or the spacing between them to 32. Also, I'm going to make sure that all of these are aligned to the left. Like so. Now the last thing to do is to position this content at a respectable distance from the header. In our case it's 96 pixels, which incidentally is a multiple of eight. I'm actually going to keep this positioning. But if you want to position it differently, you would use the up and down arrow keys. Cool. Now, this is the first part of the content. The last part is to add this media object. Here's how we'll go about that. We're going to start by creating a simple shape and we're going to add a border radius of 8, a height of 240 pixels. What about the width? Well, for the width, you can go basically any width you want. But what I'd like to do is I like to use a 16 by 9 ratio. I have a cool little plugin for that. It's called Aspects. You can find this in the Figma plugins directory. Just search for aspects and you'll find it. This allows me to select an element, choose an aspect ratio, and choose a property to resize based on that aspect ratio. In my case, I want to change the width because the height is set at it's correct dimensions. I'm going to hit apply and this changed the width to 427 pixels. Now I have a perfectly sized shape for a 16 by 9 ratio. With the selected, what I can do now is click it and under Fill, select "Image", choose "Image". I can open my landing page starter kit, go to Placeholder images and I can choose any of the images from this UI kit. Let's choose "Main". Here you have several options for how the image behaves. You can choose between Fill, Fit, Crop, and Tile. In my case, I'm just going to leave it on Fill. Then I'm going to select this and I'm going to add a drop shadow. Like so. Now what I want to do is create a nice grid out of these images. I'm going to select "Duplicate" and I'm going to position this at 32 pixels from the other one. Let's duplicate again, 32 pixels. Let's do that again. Let's do that again. Let's do a third column. Like so. Now, let's go ahead and add some fresh images here. Actually to make it more interesting, here's what we'll do, we'll delete the top images here. We're going to move these up like so. It just adds a little bit of a more visual interest. Let's change the images now. When you have a rectangle shape with an image fill, you can actually double-click it to open up the fill dialogue. So let's choose another image, maybe this one and let's do the same for the rest. All right, so once you're happy with the result, here's what you do. You select all of these and you go right here where it says components and select create component. Now, components and fig-ma allow you to reuse certain elements. Making any changes to the parent component will change the child components as well. If I were to duplicate this component in another page and I would make changes to this master instance those changes will be reflected in the other pages as well. Now that I have that turned into a component, I can select it and I can rotate it. We're going to use the same 16 degrees rotation that we used on these elements. Remember this number 16 degrees. We'll be using this quite often in the design of this page. Now it's rotated. I can move it in its final position and this really is up to you and how you want it to look like. In my case I'm probably just going to leave it something like that or something else I can do is the following. I can change the image here to the main image. I can choose to hide this image completely and I can even slide it in something like this and I can move it down so that the text here kind of interweaves with this image maybe a bit more like this. Again, this is a matter of personal preference but I think that will look pretty good. Go ahead and fiddle with this, play around, see what looks best for you. Now speaking of what looks best, take a closer look at this shadow. See how it's cut off right here? That's because when you're adding or when you're creating a frame with auto layout, it usually will check out this box where it says clip content and that will basically clip any content that is outside the boundaries of that frame. In our case, the shadow is outside the boundaries. I can uncheck this and then we can go in even deeper and uncheck this box and now, see how the shadow's showing up. This is something you can do when you see this happening. When an image that should be outside the bounds of your frame doesn't show up usually this is the culprit right here. All right, there's one final small thing that we need to do here. Right here at the bottom we're going to add a little icon that will let users know that, 'hey, you can scroll down this page.' To create that start with a rectangle. We're going to set its width to 24, it's height to 48, its radius to 100, and we're actually going to remove the fill color and we're going to add a stroke or a border, and the border is going to be white. It's going to be inside one pixel and then inside that we're going to create a nice circle using the ellipse tool. When using the ellipse tool we can free hand it or we can hold down shift and it's going to snap to the same width and height. Let's make this very small, six by six should do the trick. Fill white, and then just move it inside my little icon here. You can set it at eight pixels from the top. That should do the trick. Select both, command G to group them all together, and name it scroll or whatever you want it to be. Now let's bring up the grid and let's align it to the grid. Like so. Obviously you don't have to align it to the grid if you feel It looks better in a particular position like so you can do that-no problem. Just because we're using a grid it doesn't mean that we have to align every single thing to it. That is the finished hero section. All right, now it's your turn to finish the hero section. If you've already done that, fantastic. If not, go ahead, watch this lesson again if you have to and complete this section. Now, you'll find that, this is something very interesting I've been meaning to tell you, you'll find that in most cases, the hero or the header part of a website is the most difficult one to make. I don't know why that is, but usually once you get it done it's just smooth sailing from that point on. I think it's because after you complete the header or the hero section you have a foundation to build on, right? You have a starting point. So I think mentally it just makes it easier for you to get things going. We're now ready to move on. The next section on our list is the first section for features. We'll tackle that in the next lesson. See you there.
8. First Section for Features: Welcome back to the class. In this lesson, we're going to design the first section for features. This is where we will be using the majority of the icons and will also play with colors a lot. This should be fun so let's get started. Let's begin by taking a look at the wire frame so that we know exactly what we need to do. So this is the section that we need to design. As you can see, we start with the category title, then a little description and then each feature is presented like this. It has a title and it has a description. Some of the features are only available in the Pro version, so we need to design some kind of badge for that. We'll also add some icons. If I remember correctly from the project briefing, each one of these feature category has some kind of subtitles. So if we open up the project brief, and we look at the features, there is a feature category, and here's another feature category, the one that we need right now "Budgeting made simple". We do have a subtitle, it's called "Envelope budgeting". So we need to make sure we add that somewhere as well. So actually let's go ahead and grab that. Let's copy it and let's go over here, let's paste it. Let's also get pretty much all the content that we have here. We'll worry about styling it in just a little bit. One other thing that I would like to do is increase the height of this frame. Now let's start from the top, Shall we? With this, let's call it subtitle. Now because this needs to be very low-key, so it doesn't need to pop out as much. We're going to go back to our typography, and we're going to be using the small styles. So go ahead and copy the properties from this and paste them in here. Also, we're going to change its color. I'm thinking we should use this secondary kind of coral red color. So go ahead and copy that, paste that in, and we should be good to go. Now, let's bring up the grid. Let's actually align this to the grid and let's position it compared to this element at about 120 pixels. It doesn't have to be perfect. In some of the cases, it's more important that the whole layout looks properly rather than adhering to that strict set of rules. So right now I positioned it at 120 pixels from this element here. But if it doesn't look right, I might just push it down a little bit. It doesn't have to be pixel perfect. Now let's move on to the next elements. First actually, let's select this, lets ungroup everything. Now this heading, let's see what style we should use for it. I'm thinking maybe heading three or heading four, but heading three seems more appropriate, so let's copy that and let's paste it and let's also use the proper color for it. So we'll go to our gray, I'll grab this and we'll paste it in here. We're going to use gray 100. By the way, when I'm saying gray 100, it means gray 100% opacity. If I say gray 40, it means this value, this color right here, gray 40% opacity. So just keep that in mind. Let's align this properly here as well. Let's actually push this up and leave about 32 pixels of distance between these two elements. Next step is this element right here, that should also be placed 32 pixels from the main title. Actually, I'm going to resize it first. I want this to occupy about five grid columns. So we're going to resize it up to here. Now for the actual style, let's go back to typography and I'm thinking of using heading five. Heading five should do the trick. But we'll actually remove this medium weight because it's a little bit too much. Now if I think about this, we actually used the same style here, right? 25,32 for line-height. So let's be consistent. Regular and we'll use this color. But I think we're going to use a tint of that gray. So let's see, maybe this one, this is 50 or 60. Yeah, I think this one looks fine. So let's do gray 60. Cool. So now what I can do is simply select all of these, shift A to add auto-layout. Now whenever I change this text, the elements surrounding it will be affected as well. This is a very efficient way of working in Figma. Now let's turn our attention to the actual features. First thing I'm going to do is change the color and the font family and all the text information. So for these titles, we need to use the heading typeface, but for the text we need to use the body typeface and right now these are like one text element, is just the title, enter, and then the text itself. We need to split that up, so what I'm going to do is remove that from there, duplicate. I'm basically putting the title in its own text element. I'm going to set Auto Width to it. Then I'm going to group it up with this and select shift A. For the spacing between items, I'm going to select 16 pixels. We don't need any padding here. Now I'm going to align this with my grid, and the text is going to be three columns wide or 280 pixels. Let's change the color. For this bit, I'm going to use Heading five. Copy the properties from here and paste the properties, and again just make sure we update the text color. For the text, we're going to be using the paragraph style. Copy the properties from that, paste them here, and make sure to update the color as well. For the paragraphs, Tisa Sans Pro, 18 pixels, font size and 24 line height. One other thing that I want to do, is lower the opacity on these a little bit. I'm going to use 80%. Let me show you how that looks like. 80% on the title and 60% on the text. We basically have to do the same thing to the rest of the items. I'm going to do one of these items again so you can see the process, and then I'm going to fast forward for the other ones. First things first, we need to separate the title from the description. Then we need to make the title Auto Width. Select the title and description. Shift A to create Auto Layout. Set the spacing to 16, and then copy the properties for the text, paste them. Copy the properties for the title, and paste them. That's it. So now let's fast forward until I make the rest of the changes. Now that everything is properly set up here, let's go ahead and group these up. We have payees, categories and we can put in scheduled transactions here. Let's also align these to the grid. So the way I want this to happen is, I want the actual text elements to span three columns, then I'm going to leave one column blank. Then the next group will start at the next column, and so on and so forth. Actually one last thing I need to do here, is to resize all of these text elements to 280 pixels. There we go. So I should go relatively, simply like this. We're going to select all of them, are going to align them to the top, then select them again, Command or Control G to create a group. Next is going to be, let's say Multiple budgets, then maybe Goal tracking and Sync between devices. Finally, we'll have reports and sync with your bank like that. Now select these, align them to the top command G. Select these, align them to the top command G to group. Now here's what I want. I want 64 pixels spacing between each one of these groups. I mean vertical spacing, like this. Also 64 pixels between these and this group here. That's really easy to do with auto layout. So select all of them. Shift A, 64 pixels here, and then make sure everything is aligned to the left, like so. I'm good to go. The last thing we need to do here is to add the icons. Add a Pro badge instead of these pieces of text here, where it says Pro. Let's actually go ahead and create that Pro badge, and for that, I'm going to choose the Rectangle tool or press R on the keyboard. Or actually, let's do this with auto layout again. So T for Text tool, I'm going to say Pro, for the typeface, I'm going to use Brandon Grotesque, bold, 14 pixels and also 5% letter spacing. Here's a pro tip, When you're working with uppercase letters or uppercase words, with a low font size; to improve readability, you should always increase the letter spacing. Just to give you an example, here is without letter spacing and here is with letter spacing. See how you can read this bit more easily than this bit. That's why, we also added letter spacing to this style here or to this text elements. Now with the selected, shift A to create a frame around it. Let's add a fill. The fill is going to be our primary color, then 100 for the border radious Let's add maybe eight pixels horizontal padding, and maybe four pixels on vertical padding. We don't need any spacing here. The text itself we're going to make white. I think we should be good to go. What we can do here, we can decrease the font size even more and with the letter spacing as well. We're going to each use 16 pixels for the letter spacing. I think that looks just a little bit better. So with this, because we're going to use it in multiple places, it's always a good idea to create a component. So select it and go to create component or use the keyboard shortcut. So now, i'm going to hit Command X, to cut it, and i'm going to start inserting it, instead of this piece of text. So multiple budgets, Command V and then to create an auto layout with only these two elements, i'm going to select them and hit Shift A and then i'm going to select the mode to horizontal. I'm going to make sure to uncheck clip content. I'm going to align this badge to the center and make sure this is aligned to the center as well. As for the spacing, 16 pixels is plenty. So now, I'm going to go ahead and do the same for the rest. All right. Cool beans. So now that we have pretty much everything in place, all we need to do now is add the icons. So, to do that, we can start in our icon set up. I'm going to be using the ionicons set. So let's search for people. I'm going to be using, People Outline, Copy that, Paste it in and i'm going to re-size it. Now, here is a situation that you might run into when you're using figma on certain SVG elements. When importing into figma and resized the normal way with the Move Tool selected. You'll see that the shapes in there or the strokes of the shapes get very thick. That's not something you want to do. Instead, you need to go up here and select scale or K. If you do that, you'll see the element is now resized correctly. So we're going to resize this, to 24 pixels in height. Something like this. So now I'm going to align this to the left. You can also press the left keyboard Arrow and i'm also going to move it up, by pushing the up Arrow on the keyboard. All that's left now to do is to find a nice color for it. For that, we're going to go to our trusty tertiary colors. This is one of the reasons we're using them. So, it's actually take them in order. I'm going to Copy that color, Paste that in here and, we're good to go. So now all that's left to do, is fill in the rest of the elements with icons. I'm going to be using exactly the same procedure. I'm going to do one more and then i'm going to fast forward. So for categories, maybe we're looking for some grid. Let's see if we can find. I'm going to use Grid outline. So Copy that. Select the text or the element where I want to Paste in my other element. Command V and then K to resize this to 24 pixels in height, like so. Move it up and let's pick a nice color for it. Maybe I don't know, this purple. It doesn't really matter. You just pick the colors that you think look best. All right. So now let me fast forward and fill in the rest of the icons. All right. That wasn't too bad. Was it? Pretty fast process, especially when you are watching it on fast-forward. But all joking aside, it's a really simple once you get the hang of it, once you create one or two elements, is just rinse and repeat to make the rest. [MUSIC] All right, at the first feature section is now complete. Now it's your turn. If you haven't done it already, go ahead and create it, right now. I used a three column approach here, but you could do things differently. Why not use two columns or four columns? Try it out. See how the layout changes, when you're arranging these elements differently. So now, once you do that, you are of course ready to move on to the next lesson. In the next lesson, we're going to create yet another section for features, but this time in a different way. So I'm looking forward to seeing you there.
9. Second Section for Features: Welcome back to the class. In this lesson, we're going to design the second set of features or the second section for features, whatever you want to call it and we'll do it in a different way than the first one. Now, when you're designing a landing page like this or any kind of presentation website, it's very important to vary the way you are displaying these features, and if you do that, you make sure you're keeping the user's interests alive. Imagine having to display 30 features in a page. Now if you take those 30 features and you've dumped them all into a list, for example, it's just going to be plain boring. No one's going to read through that. Instead, if you take ten of them, you display them maybe in a grid with some icons like we did and then you take the other ten or another ten and you display them further down the page in a different way and then you take the last ten and display them even further down the page, maybe with some accompanying images or illustrations. Well, that is a much better approach because it's going to keep the user engaged and the user is going to digest that content much easier. So in this lesson, we're going to use a different layout for the second set of features. Let's begin. Let's take a look at the wireframe to see exactly what we need to do. So we have this feature category with this description and then four features. Now in the wireframe, I added this black box as a placeholder for an image. We can use an image here or we can simply use the text. It's really up to us. So here's what we're going to do. We're going to copy all of these, all the text that is, and we're going to paste it in our main design like so. But actually before we do that, let's do a little bit of clean up. I think it's really important that we work as cleanly as possible. So let's name these features or actually features one, and then you can go ahead and rename these groups as well. I'm not going to do that here because time is of the essence but know that whenever you're creating a design, name your layers and groups accordingly because it's just going to make your life much easier. Alright. So now, there are a couple of common elements that these two sets of features share. So we're also going to add a subtitle like so. So let me just bring that down. The subtitle for this section is, if I remember correctly, iOS magic. Now, to save time, copy properties, paste properties, copy properties, and paste properties. Cool. Now, let's make sure that this text is displayed on a maximum of five columns, just like that, and this one as well and then let's select all of these shift A and select 32 pixels between them and also make sure to uncheck clip content if you find some of the senders on the text here are cutoff. Cool. Make sure everything is aligned to the left and we are ready to go. Now, I'm going to take all of this and position it 240 pixels from the section above and now looking at this page, I realize that I actually forgot to do something. I forgot to add a very light background to the first few sections, to the first two sections, excuse me. So let me quickly fix that. I'm going to start by creating a rectangle and I'm going to position that below. Let's make that bigger like that, and like that. Let's resize this so that we have a padding here on the bottom or space between the edge and these elements of 120 pixels. Now, here's another quick tip and a very helpful keyboard shortcut. Remember when I told you about the nudging tools, where you can use the keyboard arrows to move an element left, right, top, and bottom? Now, if you press command on a Mac or Control on Windows, you can resize an element. So, for example, if I hold down command and I press the arrow down key, and pay close attention here, I can actually resize this from the keyboard, and if I also hold down shift, I can resize it even faster. The same goes for width. So Command or Control and then left and right arrows allows me to change the width of an element and again, if I hold down shift, I can change these values in increments of ten compared to increments of one with just the command or control key pressed. So that's how you can resize an element using your keyboard. So back to this bit. We need to resize this so that we have 120 pixels of padding on the bottom, just like that and now let's use a nice background color. I could use a gray, a very light gray, maybe gray ten from here or I can use the primary ten. So let's do that. So primary 10 percent and If I think that's a little bit too much, I can go even lower 5 percent and I think, actually, that's the value that I'm going to keep it at, 5 percent and this creates a nice separation between this section here and this section here. So now let's select all of these and let's push them down again until we get to 240 percent from this top element. Cool. Now let's style these elements. For all of these, we're going to be using the following styles, Brandon Grotesque, regular, and I'm going to use the exact same style that we have here. So copy paste, copy properties, paste properties. The only difference is I'm going to use 80 percent on the color instead of 60 percent and also let's fix the capitalization here. So now, what I'm going to do is create card elements from these text elements. Really easy to do that, select an element, shift A to add auto-layout, and then select vertical 32, horizontal padding 64, vertical padding 0 here. We can add a fill as white and we can also add a drop shadow. So the drop shadow is going to be like this, 30 for blur, 0 x, 20 y, and then we're going to use this color, our main gray 25 percent as the shadow color and also, let's add a border-radius of eight pixels. Now what I can do is I can set the text to align to the center, and I can resize this so that it spans three columns and also, we're going to resize this one until we get to the desired padding here on the left. Alright, so now it's just rinse and repeat for the other two elements. So let's select all of them and align them to the center. Let's set their width to 216 pixels and then we'll do shift A, shift A, shift A, select this frame, copy properties, select these frames, paste properties. Pretty cool, right? Now, let's align these with our text. We're going to use a spacing of 64 between these elements, and let's position them like so. I'm going to use 32 pixels of spacing between these elements. Now that we see all of them together, we notice that this one is smaller than the rest. We need to set a fixed width for it. Since we have auto layout added, we need to switch the orientation to vertical so that we can then select fixed width instead of auto width. Like so. Now I can resize this to any value I need. To make this a little bit more interesting, I'm going to select both of these and I'm going to push them down 32 pixels. Holding down Shift and pressing the down arrow key, 1, 2, 3, I let go of Shift 1, 2. Now I have a 32 pixel gap from the top of this to the that the top of this. Now we can go ahead and group these up. We can go ahead and Shift A on this. Make sure to uncheck Clip content. This part is now done. To make this section a bit more interesting, we'll do two more things. One, is we're going to add some imagery. For that, I'm actually going to move this entire section to the right and I'm going to go back to my starter kit, I'm going to select the Placeholder images and I'm going to select the iPad Pro and the iPhone 7. Drag and drop into my page. These are a little bit too big right now, so let's resize them. I'm going to resize this to about, I don't know, 700, and then I'm going to resize this phone to about half that value, to 350. I don't know the exact ratio between these two elements but at a glance this looks about right. What I'm going to do now is, put the iPhone on top of the iPad so they look something like this. Then I'm going to push this down, 10, 20, 30, 1, 2, so 32 pixels. I'm going to select both of these, Command G to group them and then I'm going to align the edge of the iPhone with the edge of this column. The idea is to leave this column here blank. I'll select these two, select this, align top. Finally, the last thing I want to do is select this image of the iPad and add drop shadow. Select the iPhone and do the same. This just creates a little bit of depth. Pretty cool. Now finally, what I want to do is add some stripes here. If you're wondering how I got the inspiration for this design with the angles and stuff, well, I had a look at the project brief where the client told us that, hey, here are a few websites that we like and one of them is Stripe. If you haven't seen the Stripe website, well, it's very cool. It looks something like this. You can see that I got a lot of inspiration from here with the bold colors, with the angles, with how this image section here is presented. Because I started using this diagonal or this angled approach, I'm going to use it in the rest of the page. I'm going to start by creating a rectangle about this big. I'm going to set its rotation to 16 degrees. Then I'm going to position it somewhere around here so that it passes just through the list of features. I'm going to bring it under this frame, like so. I'm going to add a gradient to it. To add a gradient, we can do it in two different ways. We can select it, go to fill, select Linear, Radial, an Angular, a Diamond gradient, whatever but linear is usually what you would go for. Then pick the colors manually. I actually have a great resource for you and that's called WebGradients. You can find it at webgradients.com. It basically shows you a list of premade gradients. Pretty cool, right? You can see the start and finish colors and you can even copy CSS code for it. What's nice about this website is that it also offers a plug-in for Figma. That plugin is called WebGradients. Go ahead and install it just like any other plug-in. All you have to do is select the shape that you want to use the gradient on and then click on this list. The plug-in automatically fills in the gradient for you. How cool is that? It's really up to your preference, what kind of gradients you want to use here. I'm going to choose this one, Rainy Ashville. I'm going to position this here for now. I'm going to change its layer opacity to 10 percent. I'm doing that because I'm going to add another gradient. I'm going to change its angle to maybe 12 degrees. Move it up, something like this. For that I'm going to use a darker gradient, maybe something with different colors. Something like that. You can play around with the opacity on this one. Let's go a little bit higher, 20 percent. Let's go with 20 percent on this one as well. It's just a detail or these two stripes, but I think they make all the difference. They look just fabulous with the rest of the elements. Then select everything, Command G to group everything up, and we'll call these Features 2. The second section for features is done. Now it's your turn to put your own spin on it. You can do that in so many different ways. You can use different gradients for those two stripes. You can swap the image with the written content. You can use a different style for those white cards. It can do lots of things. Go ahead and experiment and make sure to post your project in the project gallery so we can all have a look. With that said, we are now ready to move on to the next section. After a quick glance over the wire-frame, we can see that that section is a small cold action. We'll do that in the next lesson. I'll see you there.
10. Small Call-to-Action: Welcome back to the class. In this lesson, we'll once again play with shapes and colors to create the small call to action that sits between, the second and third feature sections. We're pretty much all set so let's begin. If we take a look at the wire frame, we can see what we need to do here. So we basically have a title, small description and then the actual call to action button. So let's go ahead and copy these, and actually I'm just going to copy the text. I'm going to paste that in here and I am actually going to use these styles. So copy, paste and copy and paste. And that's going to save us a bunch of time. We're going to align these to the center, and then we're going to grab this button. I'm going to paste it right here. And that's going to say download for free. That's fine. And let's go ahead and select all of these. Shift a to add auto-layout. Make sure to uncheck this. We're going to add 32 pixels spacing between items. And then here's what we'll do, we'll add a fill color in the form of our main gradient. And then we're going to add eight pixels, border radius. And then we're going to add 64 pixels lateral padding, 64 vertical padding. And then the only thing left to change is the text color. So let's swap these with white and we should be good to go on this end. Now I'm also going to make sure that this spans on about, let's say six columns. And we're nearly there. We just have to adjust this a little bit like so. And finally, let's add our saved drop shadow to it. And we're pretty much good to go, right? Well, I don't think we should leave it like this because it's pretty simple, right? It kind of just sits there, a stand alone box. And I think we can integrate it better with everything that's around it. And to do that, we're going to play around with some shapes and lots and lots and lots of gradients. So grab the rectangle tool and draw a rectangle that's 320 by 64 and 100 to the radius and add our saved drop shadow. So now what I'm going to do is I'm going to duplicate this, move it like so, and push it in, 10, 20, 30, 40, 50, 60, one, two, three, four. So 64 pixels, you can even stop at 60. The idea is you want to hide this seam right here so you can even do it manually, but I find that using a certain number allows me to be very precise. So again, one, two, three, four, five, six, one, two, three, four. Now I'm going to duplicate it and repeat the process. One, two, three, four, five, six, one, two, three, four. And again. Now let's select these and duplicate them and move them down like so. And duplicate that again and move them down. So now I'm going to take the middle row and I'm going to push it to the right, 10, 20, 30, or anything maybe a bit more, 40, 50, 60, one, two, three, four. All right. So now I'm going to group these, so Command G or Control G if you're on Windows. And I'm going to open up my gradients plug-in. And I'm going to start doing this, just select an element, choose a gradient, select an element, click a gradient, and so on and so forth, and do the same for the rest. Now, how you decide to dress this up, is really up to you. But this is how you do it. So now that that's done, select everything and let's create a component. And let's set 16 degrees rotation. Now, I'm going to align this in the middle of my page. And I'm also going to position it somewhere around this area, I think 120 from the elements above. Again, this doesn't have to be exact. You can eyeball it. Whatever looks good, use it. So now I'm simply going to move this below my little box here. And we can go ahead and align them to the center vertically. And if it looks a little bit flat, you can go in. And you can move these groups around so that the shadow from the group above is cast on the group below it. Was that hard to do? Not really. You saw just how easy it is to work with shapes and gradients and create very interesting elements. And with this, we can now command G to group it up. And I'm going to call it Small CTA for call to action. All right, call to action done. Now I want to see your unique perspective on this. Play around with those colors, those gradients, or maybe don't use gradients at all. I showed you one way of doing it, but obviously that's not the only way. So play around and get creative. And I'm looking forward to seeing what you come up with. Once you complete this section, you're ready to move on to the next one. And the next one is the third and final section for features. And as per usual, we're going to use a different layout to display this third set. That's happening in the next lesson so I'll see you there.
11. Third Section for Features: Welcome back to the class. In this lesson, we'll design the third and final section for features. If you remember what I said in the previous lessons about designing features, it's always a good idea to mix it up. So to stay true to that, for this third batch we'll use a different layout, and we'll also add some illustrations. So if you're ready, let's begin. Let's take a quick look at the wireframe, and as you can see, these are the two sections that we need to create. So here's how we'll do that. We're going to go back to our main design and we're going to copy this. Let's actually make this frame a little bit bigger. We're going to paste these in here. We're going to bring up the grid and we're going to align this nicely to the grid. I'm going to leave about 240 pixels of distance between this element and the call to action. Let's actually see if that's enough, we'll just quickly glance at it and I think we might need a little bit more than that. So let's go with like 320, something like that. So now visually, this looks balanced. This call to action looks about halfway between this element and this element. As I was saying in a previous lesson, you don't always need to rely on exact measurements. Like for example, between this and this, I have a 120 pixels. So normally you would be inclined to say, okay, well, let's keep these distances equal, and so I'm going to place this at a 120 pixels. But when you look at it from a bird's-eye perspective, you'll see that visually it doesn't look balanced, and in that case, you just have to go with what feels best. In my case, about this much looks okay to me. For the content of this section, we can grab the text from our wireframes and we'll do the same here. But instead of security being the main title we'll actually switch it up a little bit. We're going to use security as the subtitle here and as for the main title, we are going to say your data is secure. It just makes more sense like this. Then we're going to grab two subsections. Also, I want to make sure that this element spans on six columns and not five, just like that, because I want to put two of these smaller sections which span on three columns each. Let's position this at 64 pixels from the element above it. Let's get rid of the icon, we don't need that and for the text, we have what? Online banking, let's copy this text here. Now, here's a quick tip for you. If you're going to copy a piece of text from figma and you're going to paste it in here like so. You'll notice that the style is not preserved. So the original style of the copy text is used instead. To get around that you need to go to Edit, paste and match style, like so. Cool. So let's duplicate this alignment with the grid and let's copy the other piece of text and that is for data encryption. Let's go ahead again, edit, paste and match style. Cool. So we're almost done here. The last thing we need to do is add an illustration. So we'll do a classic layout for a feature where we have an image on the side and content on the other side. Now for the illustration, and you can find links to everything that I'm using and that resources, that PDF file. I'm going to be using an illustration that I got from volatile elements, let's it's bringing it up. I'm going to align the top of the elements, so the top of the image, I'm going to align it with the top of this element, and I'm going to position this image so that it goes outside of the grid. That's totally fine but instead, I'm going to align this left edge, with the grid. To keep the same spacing that we used in other parts of our design, I'm going to leave this one column blank. So that is one section. Let's command yet to create a group and now we're going to duplicate it. We're going to move it down. Let's say to 120 pixel distance between the two and we're going to do the exact opposite. So I'm going to delete this image, I'm going to move this to the other side. Again, this is a classic way of displaying features. You do the image and the content and then on the next row you flip the image and the content. Here we're going to grab the second illustration. Again, I'm going to align it with this column here to leave this column blank, align it with the top and that's it. Now the last thing to do is to update the copy on the text. So here we have support. So let's say support there. As for the main title, we're going to say great support for great products. Here, edit, paste and match style and the two subsections are the following; 24/7 online support and we also have a link there at the bottom. So 24/7 online support based on match style. This one is called free educational classes. So paste that in like so and it was called free educational classes, I forgot. All right. Now, the final thing to do here is to quickly create these two links. So the first one, and I'm actually going to duplicate that support text there. But instead of using this red color, I'm going to use the blue color because this is a link and this blue is currently my primary color. I'm also going to grab this arrow paste it in. Select these two, shift A to create auto-layout. Change the orientation to horizontal. Make sure both of these items are aligned in the middle and set the distance between them to 8 pixels, like so and now we can delete this line of text and update this to say, submit ticket. One other thing we can do here is we can re-size this arrow instead of 24 we'll make it 16 pixels. Just a little smaller because it's attached to this tiny link there. So now we can copy this. I can paste it in. We can say, visit channel, and we can delete this bit. Finally, let's select everything. Command G to group or control G if you're on a Windows machine and we're going to call this features 3. Awesome. Now, before we wrap things up, I told you that these illustrations are taken or are downloaded from Envato elements. That's a paid service. But if you want some free illustrations, let me quickly show you that right now, you can go to onDraw.co click Browse now and here you can find a bunch of SUP illustrations. There are a lot of them, you can even search for a specific keyword and what's cool about it, you can change the accent color on them real easily. Once you find one that works for you, you just click on it and you can download a PNG or an SVG it really depends on what you want to do with it. SVG stands for Scalable Vector Graphics and this is a vector format, which means you can resize that image as much as you want and it's not going to lose quality. A PNG is a raster format, which means if you resize it and you make it bigger than its original size, it's going to look pixelated. So it really depends on your application, but yeah, onDraw.co/illustrations, great resource for getting free SVG illustrations. All right, with the final section for features done, we're well past the halfway point in designing this learning page. If you've come this far, let me just say, great job. Now, as per usual, your task for this lesson is to create this third and final section for features. Just like I've been saying so far, put your own spin on things. Don't necessarily do exactly what I do, although that's totally okay you can learn a lot by doing that. But it's also a good idea to do things your own way and experiment and see what the results are. Now, if you've done that already and you're ready to move on, then I guess we should get going right. The next section on our list is the Screenshot Gallery. That's coming up in the next lesson. So I'll see you there.
12. Screenshot Gallery: Welcome back to the class. In this lesson, we'll design the screenshot gallery. That's pretty easy to do so let's get started. If we take a look back at the wire-frame, we can see that I originally mocked up the screenshot gallery as a simple grid of images, and while this is a perfectly viable solution, I think we can do something a little bit more interesting than that and we're going to do a carousel of images. A carousel is basically when you can see one row of images and you have controls left and right to move that row of images. As you move it left and right other images are being revealed. So, let's jump to the main design portion and I'll show you what I mean by that. Now for this, I'm going to be using some of the placeholder images that are provided in these [inaudible]. and let's see. I am going to grab main open savings, maybe this one, this one, this one and the main. So with these simply click and drag and Figure. Okay, and that loaded a bunch of images. Now, we want our images to be sized according to the grid that we're using. So I am going to bring up the grid and we're going to make it so that each image occupies four grid columns. So, let's go ahead and resize this like so, and the size we're looking for is 384 pixels. So now I'm going to do the same for the other ones. So with 384, and now I'm going to start bringing them in one at a time. So let's bring in statistics, This I am actually going to move. So statistics go here and this image I am going to position it at 32 pixels from the other one. What else? Let's bring in the main image and don't worry about this image being way taller, we'll fix that in just a little bit. What else do we have? We have these, and I actually think we have enough images here. So, let's position these properly like that. Now let's hide the grid and let's select each one of these images and add a nice drop shadow and also eight pixels border radius. Now what do we do with this large image? We want it to be the exact same height as the other ones, which is 683. Well, we can do that. No problem. Simply uncheck constrained proportions, enter 683 and double-click it. Right now it's set to fill but if we want to move it around, we can set it to crop.Then we can choose which part of the image we want to display. Pretty cool. So, let's move it down, just a touch. Let's make sure that it's right where it should be. I think somewhere like here should be just fine. Let's see. Just a tad, one pixel up should do the trick nicely. Okay. So now here is what we can do to add a little bit of a visual interest. We are going to stagger these images, meaning every other image will be positioned 64 pixels lower than the previous one. So we select this and this and we'll say 1-2-3-4-5-6, that's 60, and then 1-2-3-4, that's 64. Cool. Now, let's select these command G to group them up. Let's move them further down. What I want to do, to be consistent in the design is I want to grab these two angle stripes, and use them as a background, and that will tie in nicely with the whole angle motif we are using to have angles here, here and also here. Okay? So let's go ahead and do that. Let's paste these. Let's bring them under our group. Now I can select both of them. Let's do this individually and then I can make them bigger or smaller, depends on what kind of effect I am looking for, something like that and let's grab the other one. Let's make that a little bit bigger, something like that. So they kind of intersect one another and let's move this further on like this. You can play around with these two shapes and once you do that, you can open up the gradients and you can give them different colors. Something like this or something like that. It can even change their order depending on which gradient you want to show first. Now we also need some sort of navigation here, right? How will we move this carousel? Well, let's go ahead and do that then. Let's start by grabbing the Rectangle tool or R. And let's create a rectangle that's 320 by 320. Let's add 64 pixels, border-radius and let's do a angle or rotation of 26 degrees. I'm going to add the nice drop shadow. I'm going to set its fill to white and I'm going to set its capacity to 95 percent. So this will stay on top of these items, like so and we can even bring in the grid so that we have some kind of measurement. What I'm going to do is align into the grid and then push it to the right 10,1,2,3,4,5,6, 16 pixels something like that. I'm also going to align it in the center with my screenshots, so now I'm going to grab the arrow and I'm going to paste it in here and let's bring it inside this group. Command G to group it up and let's change its height to 32, so make it just a little bit bigger. Now you can simply position this arrow to your heart's content. I'm going to do something like this, 1, 2, so 20, 1, 2, 3, 4, 24 and I think actually we need to make it a little bit bigger. Let's try 48 yeah 1, 2, 3, 4, 5, 6. Yeah, something like this. You need to play around with it until you get it just right, just the way I like it, but for me right now, this looks pretty good. What I'm going to do is duplicate this bit and I'm just going to move it to the other side, like so. Let me first align it in the middle and again, I'm going to align it with the grid and then push it to the left, 10, 1, 2, 3, 4, 5, 6, 16 pixels. Then I'm just going to position the arrow in relatively similar position. You can achieve a much higher level of precision when you're coding this with CSS. So don't worry too much about it right now. The last thing to do is just flip it horizontally, which will turn it the other way. Now we have the buttons for moving the carousel, forward and backward. The last thing that I would like to add to this is some kind of indicator to let us know on which page of the carousel we're on, so for that, here's what we'll do. We'll grab the rectangle tool again. We'll draw simple rectangle and we'll make this 32 pixels wide, 4 pixels high, and the radius 16 pixels. So now we have a small shape that looks something like this. For the color, I want to use the same primary color like so, but am going to do 10 percent capacity. This is a representation of a carousel page that's not currently active. Lets repeat the process. We're going to duplicate it, let's select both "Shift A" to add an auto layout. Let's set 16 pixels distance between the two and now let's create the active state. For that duplicated once more but this time, let's make it like 80 pixels in width. We're going to use a 100 percent the primary color and then just add a few more to represent other inactive pages and I think that should do the trick. Now we're going to select this, align it in the middle of the page and let's bring it up a little bit. Let's actually align it with the bottom edge of this shape and that's the screenshot gallery. Now let's select everything. Command G to group it up and let's call it screenshot gallery. Finally, let's move it up or actually let's move it down and leave about 240 pixel distance between the gallery and the section above it. Now if we do a bird's eye view, we can see that we have a pretty good balance of white space. All right, as usual, now it's time to take action and create your version of the screenshot gallery. I went for a slider slash carousel approach but you can stay true to the wire frame and just do a simple group of images or you can create some other layout. It's really entirely up to you. I'm looking forward to seeing what you come up with. Now with that said, it's time to move on. The next item on our list is the testimonial section and there I'm actually going to keep things very simple. Let me show you my take on it in the next lesson. See you there.
13. Testimonials: [MUSIC]Welcome back to the class. We've made great progress with this landing page design. We just have to design three more sections and we're done. In this lesson, we're going to create the testimonial sections. Ready? Let's go. So let's check out the wire frame first to see what we're dealing with. Initially, my idea was to just have a list of avatars here and when you click on an avatar, the testimonial itself would change. I think what we're going to keep things a lot simpler than that, and just do a navigation with right arrow, left arrow and that's it. Let's go back here. Let's go to typography and grab this block quote that I have here, paste that in, and let's bring in the grid. Let's properly align this to the grid and size it to be 10 columns, right in the middle of the page. Let's also change the text color to grade 80 percent. To mark the fact that this is a section for testimonials, let's go ahead and add one of these, a quote. This will use Brandon grotesque. Let's do a really big font size and let's make it bold and I think a little bit bigger, something like a 110. It doesn't really matter that we're not sticking exactly to the type scale right now because this is a decorative element. So a 110 and that should be okay. Let's change the color, actually, let's use this one, but a little bit more subdued, like 80 percent, something like that. That looks good, let's select both of these aligned to the center and we're going to align things like so. Then under the actual quote, we're going to put an avatar of the quote, author, name and perhaps position and then the arrow navigation. 40 avatar, we're going to grab the ellipse tool or O on the keyboard and we're going to make an ellipse that's 64 by 64. That should do the trick. We don't need a very large avatar. We're going to position this at 32 pixels from the blackboard above and we need to put a portrait in there. There are lots of different ways to do that. You can download a free image from the internet, if you want to do a placeholder. If you're doing a real project, then you would put the picture of the person who actually gave you that testimonial. In my case, I just want a place holder image so I can open up a plugin called unsplash. This is for the unsplash website and I can search for a portrait. I can use that one and that's just going to fill in nicely like so. For the name and position, let's actually grab this type of text style and let's actually do a shift a to add an auto Layout. Make sure you delete the default padding that are added. We're going to do 16 pixels of distance between items or spacing between items. We're going to make things vertical and I'm going to paste in that element and then just change the color. I'm going to use 80 percent gray. We're just going to say Mary Anne, Attorney, cool. Now let's take this alignment in the center. Make sure we position it 32 pixels from the actual quote and then let's grab the left and right arrows. Paste this in. Like so duplicate it, move it to the side, right-click, flip horizontal. Let's do a 10 percent opacity on this one. Actually let's do it on the layer itself, like so. This will show us how an inactive arrow looks like. Let's shift A these to add auto-layout and let's set 16 pixel distance between the two. We can go even higher than that 32 pixels, because maybe in the future we want to add some fill to the space around them and we need to have the room for us to do that. I'm going to take these and I'm going to position them 72 pixels from the author. Now take all of this, command G and let's call this testimonials. Make sure it's properly aligned in the middle and let's position it at 240 pixels from the section above. Now let's do another bird's eye view to check if everything looks good and it does. [MUSIC] Did you see how simple it was to design this testimonial section? Obviously, there are many ways to do it. You can go with grids. You can go with a different type of slider. It's really up to your imagination. Go ahead and create this or your own version of the testimonials and once you do that, we're ready to move on. The next item on our to-do list is probably the most important section of the page and that is the main call to action. It's quite a complex section because it contains a pricing table. Nothing we can't handle, but it can be a little bit tricky. Let's see how we can create that in the next lesson.
14. Main Call-to-Action: Welcome back to the class. In this lesson, we'll be designing the main call-to-action, and this is arguably the most important section in the page because it can be a deal breaker. Visitors will use this section to buy the product or download the free version, but essentially, this is where the users are converting. Let's make sure we do this right, and let's get to it. A quick glance at the wire-frame shows us that, originally, I had planned to create the pricing area and the call-to-action separately, but I think it's a much better idea to incorporate both of these into a single section because it makes sense right. If I were to do them separately, I would have two sets of buttons, but if I merge them, I'm going to have a single set of buttons. It's much clearer that way. Also, this column of the pricing table is for the pro version or the paid version of the app, so we need to make this stand out somehow. All right, let's get to it. We're going to start by typing the text that we'll use for the section heading. Let's actually go ahead and copy these, paste them in here. I think we're going to use the exact same styles that we used here. Let's do a copy paste. Copy properties, paste properties, and the same goes for this, copy and paste. Let's align them to the center, and let's also align them to the central with each other. Let's shift A and add 32 pixels of distance between them. Okay. Great. Now, let's go ahead and add our pricing table. For this, here's what we'll do. We'll start by bringing in the logo. We'll go to brand assets, logo color, and let's resize this logo so it's 48 pixels in height. We're going to use the colored version for the first column of the pricing table. Here, we basically need to display the word free to show the price of the plan, then the list of features, and the call-to-action, the button for download. That should be relatively easy to do. Let's grab this text and we're going to paste it here. It's just going to say free. I'm going to zoom in a little bit so you can see what we're doing. Again, this we'll align it to the center, we'll align it with the logo. We'll shift A, these two to add auto layout, and we'll set 32 pixels of distance between them. Next, let's add the list of features. For that, I'm going to grab a simple paragraph. Let's paste it in here, and let's start typing in the features. Now, we'll align these in the middle. Font size, 18, line height, let's choose 32 pixels because I want these to be spaced out a little bit more, and finally, what we need is one of those fancy buttons that we made. Copy that, paste it in. Now what we can do is we can select everything, shifts A to add an auto layout. Make sure to uncheck this bit. It's going to be vertical, and we're going to do 64 pixels, horizontal, vertical, padding, and also 64 spacing between items. To this, we can actually add a fill color of white. Let's add a drop shadow, and let's also round off the corners. Eight pixels should do just fine. All right so now, this element should fit within four of these grid columns. If it doesn't, we can simply resize this element because this is what gives this entire frame its width. If you don't understand that, here's a very simple explanation. This piece of text, this text box, has a width currently of 260 pixels. The frame that I created with auto layout, which is this, has a horizontal padding of 64 pixels. Besides these 260, we need to add 64 to the left, 64 to the right. Whenever I re-size this text box, my entire frame resizes along with it. It's quite simple actually. We can do that until we get to the perfect width so that it fits within four grid columns. Now, let's duplicate this and create the column for the pro version. Now, if you remember what I said previously about making this stand out, because this is, after all, for the pro version, there's a very simple way we can do that. Instead of using white fill, we can use our main gradient. Then we can simply select this logo and we can make everything white, like so. Then I can select this entire element, and I can change the colors to white. Now, this description is not entirely accurate because we need to add a few things. The pro version has all the features in free plus multiple budgets, goal tracking, sync between devices, reports and sync with your bank. This, I'm going to make bold, and I'm going to be using my secondary color, which is this. I'm going to set it to a 100 percent. Let's not forget to change the price. This is going to be $9.99 per month. Let's also change the style of this button. I'm going to use these same secondary color for the background and for the text inside, I'm going to use gray, maybe 80 percent, something like that. Cool. Now, let's group these up. Let's position these at 64 pixels from the text above. Let's group them up, Command G. What do you think? Should we end here? How does this look to you? Personally, I think we could use with a bit more separation from the section above and also a bit more emphasis on this section because after all, this is the most important section in the page, right? To keep up with our motif here, what I'm going to do is simply copy this angle, the stripe. I'm going to paste it in here. I'm just going to nudge it until I find the right balance, and I'm also going to make it bigger, like so. I'm going to put it under our newly created group. Then I'm going to take this, I'm going to put it inside like so. I think that looks pretty good, maybe just a tad bigger. Yeah, that looks pretty good. Now, we just have to play around with the gradient's a little bit. Let's open up our plugin and let's do something with a nice shade of blue here, maybe something like that or like that. I don't want something that's too dark, but I don't want something that's too heavily colored either. I think maybe I'll leave it to that because it also has some colors that can be found on this section here. That's good. Also, I'm going to duplicate it, rotate it a little bit. For it, we can even use a different set of colors, maybe something like this, or maybe something a little bit more subdued. We can even lower the opacity on this layer. I think that looks just about right. Of course, you can always go in and nibble at the details, get everything tuned in, just right, but for now, I think this is good enough. As the final thing, as we're always doing, select everything, Command G, to group everything. We're going to call this main C-T-A or call-to-action. Cool. All right, as you saw in this lesson, I veered away from our following the wire frame and instead, I created my own layout. That's totally okay to do. As I was saying in a previous lesson, the wire frame is there to guide you, and it's there to serve as a guide for the contents really, not necessarily for the layout. This section here was a fine example of that. Now, as per usual, go ahead and create your own version of this main call-to-action, either by following the wire frame or do exactly what I did, or just come up with something new. It's entirely up to you. Now, once you do this, you're ready for the final section of the page, and that is the footer. That's coming up in the next lesson.
15. Footer: Welcome back to the class. In this lesson, we'll design the final section of this landing page, the footer. It's a pretty straightforward task, so let's get started. Now, taking a look at the wireframe, we can see the composition of the footer. We have the logo here, a little side menu on the right side here, some information about the company, the typical copyright information, and a list of links for social media. Let's get started. I'm going to start by bringing in the logo, and since we have it here, I'm just going to copy this one, paste it here. I'm also going to bring in the grid, so that we can properly align the elements here. Then let's create that side menu that you saw up here. Let's actually copy that, paste it here. Let's do a Shift A to create an auto layout, horizontal, let's do 32 pixels between items. As for the style, well, we're going to use a style that we've used previously, which is this one here, so Copy Properties, Paste Properties, nice. Let's take these two and align vertical centers. Now let's take this and align it to the right edge of our grid. Now, next, let's add a separator here. To do that, we'll actually turn to these elements right here. I'm going to grab one of them, and I'm going to move down here paste that in. Just move it into place, and let's resize it until it expands the entire width of my grid and let's bring its height back to 48 pixels because I accidentally resized it there. Let's position this, right now it's at 48 pixels, let's do maybe 64. That should do the trick nicely. But I think however, it might be a little bit too much, so let's go back to 48 actually, like so. I think that looks a little bit better. Next up, we need to add the company information. Let's copy that, paste that in here. We're going to use the paragraph style for this, so let's copy the properties from this, paste them in, align everything to the left. Also what I want to do here is to make these bold and to use the primary color. Because these are links. Actually, I'm going to use regular. I don't think bold looks that well here. Bold we're going to keep for these types of links, but for these, we're going to use the regular weight. Let's bring this up a little bit, to match the spacing, like so. We have 48 from text to separator and then 48 from separator to logo. Finally, let's add the copyright information. Let's do Edit, Paste and Match Style. Let's also position that 48 pixels from the element above it. What else? Well, we need to do the links for social media, but instead of just playing links, let's do icons. That's should be super simple. I'm going to use icons from the set that we've used this entire class. Let's search for Twitter. Let's copy that, paste it in,K to resize it, and we're going to resize these to, I think 24 pixels, it's a bit tricky. Let's also add the proper color to them. What else do we have? Facebook, I think, I add Instagram. Let's grab Facebook, same drill K for scale, and then resize it to 24 pixels. Let's paste it inside my main frame here, and Instagram, copy that, paste it in, and resize it to 24 pixels. Now, bring it all together, select these Shift A to add auto-layout. Let's do 32 pixels between them. Let's make sure everything is aligned in the middle. Let's use the proper color on all of these. I'll select both of these, align vertical centers, and I'm going to bring in the list of icons right to the edge of my grid here. Then grab these two, command G to group them up. Now what I can do is make sure my measurements are correct. 48 there, 48, and 48, select everything, command G, and group it up as footer. Now, the only thing left to do is to figure out what kind of spacing we need at the bottom. A good way to do that is to look what spacing you used at the top, and in my case, it's, I believe 64 pixels. There are a lot of elements here. It's 64 pixels. Let's do that. Let's select my Desktop, and let's resize it accordingly. Save, and that right there, ladies and gentleman is our finished landing page. Let's take a last final look at it. I'm going to go ahead and hide the UI here, so we can see it better. It all started with the hero section. First, we created this logo, navigation, and background, and then we added the text content and the collage of images. Next, we have the first section for features, followed by a second section for features, using of course a different layout. Then we add a small called action area. Instead of doing a simple box, we added this background to it using simple shapes, shadows, and gradients. This is followed by the third and final feature section. Again, with a different but slightly more classic layout. Then we followed that up with the screenshot gallery, which we made it look like a Carousel complete with navigation, buttons, and also page in the carriers. Following that up is a simple section for testimonials, with a simple slider. Then probably the most important section on the page, the main call to action, which also includes the pricing table. Finally, in this lesson, we created the final section on the page, which is the footer. Now it's your turn to finish designing the landing page. Go ahead and create the footer. After you do, I want to congratulate you because you just passed this class with flying colors. Please join me in the next lesson for the conclusion.
16. The Epic Conclusion: Well, congratulations for finishing this class. I really hoped it lived up to your expectations and you learned something valuable, something that will help you in your career. Now, please take a moment and write down the key takeaways from this class. As I was saying in the previous lessons, I strongly encourage you to create your own version of this landing page. Once you do that, go ahead and post it in the Project Gallery because l will give you feedback there if you want. I'm sure other students will give you feedback as well. Also if you have any questions or comments, if you would like to see more content like this on Skillshare, make sure to leave your comments in the discussion tab. I would just love to hear from you. Now, before we wrap things up, I just want to make this quick note. This class, or this was the first class of a series called Designing with Figma. I plan on making more classes like this. If you want to see more content like this, make sure to follow me. With that said, thank you very much for watching and I really hope to see you again soon in the next class. Much love and respect, take care.
Adi Purdila, Web Designer & Developer
