7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 27Length: 4.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Designing the Footer

In the previous lesson, we finished designing the home page content which is a list and index of all those categories and subcategories. Now, to finish off the home page or the start page or the index, however you wanna call it, we need to create or design the footer. Now, from what we've written previously, the footer needs to have a copyright, social icons, and some secondary links. So let's start down here with a rectangle. And I'm gonna use a Container / Black 85 for this. I think it's a good starting point. And I'm gonna position this at 150 pixels from the content. Now, inside, let's group this up as Footer. Inside, I'm also going to create a rectangle. I'm gonna to give it, let's see, Black 85. I'm gonna give it a height of 4 and a width of 1440. So it spans the entire width here. And this is gonna act as a top border. But I think 85% opacity is too much, so let's lower that down to 50. And I'm gonna take this opportunity to create a new layer style called Container / Black 50. Okay, so that is the border. And let's also create another area here with the exact same color. And this will be used for the copyright and the social icons. Now, in here I'm gonna place those secondary items. And these secondary items are styled exactly as an Inactive menu item. Which means PT Sans, Bold, 14 pixels. The first link is gonna say Follow me or follow us on ThemeForest. If it's a theme that you're selling on ThemeForest, if not, just adjust this to your own liking. And I'm gonna position this at 60 pixels from the left side just to mirror the 60 pixel padding that we have on the top. And I'm gonna place this at 30 pixels from the top border here. And what I'm gonna do different for this is I'm gonna add a small separator here between menu items. For that I'm going to create a rectangle. I'm gonna set a width of 1, height of 15. And I'm gonna set a fill of white. I'm gonna lower the opacity to about 10%. And since I'm here, I'm going to add this to the Document Colors and also create a new style, Container / White 10. Now I'm gonna position this at 30 pixels from the text. Do a little vertical alignment to make sure everything is okay. And then I'm gonna follow this up with another link that's just gonna say, View theme demo. And finally, I'm gonna duplicate these two. And the final link, we're gonna say purchase the theme or purchase the name of the theme. In my case it's Avalanche. Okay, so that is the secondary links area. Now, this, I'm gonna move up. 30 pixels, like that. And this will contain the main footer content. The first one is gonna be a logo for the author. In my case, I'm gonna use my own logo. So my own logo looks something like this. I'm gonna create a Symbol out of it. I'm gonna say Logo / Adi Purdila. I'm gonna use about 20% opacity here. And again, I'll position it at 60 pixels from the side. And for now, 30 from the top. Next, copyright text. This, I'm gonna use a paragraph, but I'm gonna make it a little bit different. So it's gonna be PT Sans, Regular. But I'm gonna use a smaller font size, which is 14. And I'm going to use white but with a bigger opacity. I think about 75% should do it. All right, let's create a new text style here, it's gonna be called Paragraph / Light, small. And also add this white, 75% to all our Document Colors. This, I'm gonna align nicely, vertically with my logo. And now we have to create the social media icons. Now, for the social media icons, I'm actually going to create this. It's a rectangle that I'll resize to 60 by 60. And I'll create a Symbol and call it Icon / Social. Now we're gonna double click and gonna go right inside this, you can call it the bounds of an icon. Basically, I want all of the icons to have the same size even if the symbol inside them has a slightly different width or a slightly different height. And creating an icon that's 60 by 60 makes sure that it's easy to click and easy to tap on a mobile screen. So this, I'm actually gonna hide. I don't need it. Now, inside I'm going to place my icon. And for that I'm gonna use the text trick here. I'm gonna use my Ionicons font again. I'm gonna search for an envelope. This is for email or mail. Let's see, yeah, this one. This is the one I like. I'm gonna convert that to outlines. And these actually need to be white. So I'm gonna set a Background color, just a temporary Background color on these icons. This will not be included in the export or it's not gonna be shown here. It's only gonna be shown in the Symbols page. Now, this icon, I'm gonna create a Symbol out of it, gonna call it Icon. And I'm gonna edit that. I'm gonna make it 30 by 30. Again, let's set a Background color here. And the icon itself, I'm gonna scale so that its height is 20 pixels. And for the fill, well, I'm just gonna use white, 100%. Align this in the middle. You might get a little bit of a discrepancy here. You have three pixels on this side, three on this side. It's fine you can just nudge this into place like this. It's not exactly 20 pixels but it can make it 20 pixels like this. So now it's positioned perfectly in the center. Let's set this to the original size. I'm gonna set this in the center. And now all I have to do is repeat the process for the rest of the icons. So I need an icon for Twitter, Facebook, and LinkedIn. And also one for an URL, maybe a globe icon. Well, we can easily find all of those in the icon font. So after repeating the same process, I got a Twitter icon, Facebook, LinkedIn, and a globe icon. So now what I can do is simply duplicate this icon. I'm gonna put them side by side because I have enough spacing around the icon. And then I can just choose the icon that I want. So let's go for the globe one, then maybe Twitter, Facebook, and finally LinkedIn. That's the power of sketches Symbols. So with these, I'm gonna group them all up, I'm gonna call them Social. Nudge them to right for that 60 pixel margin. And then I'm going to resize this container so it has the correct padding on the top and bottom. And then simply select Social. And I'm gonna align them. In the middle, vertically, like that. Finally, just resize this. And resize the main art board so we get rid of that, Space under and the footer. And with that we've just finished designing the home page. Now this is how the home page looks like on a Desktop. Which means a screen with a large width. But what about on smaller screens like a tablet or mobile phone. Well, we're gonna tackle those in the next lesson. So I'll see you there.

Back to the top