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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Complete the Homepage

Hello and welcome to lesson number four of this course where we'll finish designing the Homepage. Now previously, we took care of the hero. And since where at the hero, I just realized that we don't actually need a link for the homepage. We'll just click on the logo to get to the homepage. So I'm gonna delete this. Okay, so as I was saying, we took care of the hero area, and then the features, and then the testimonials/client list. Now, let's see about the rest of the page. So going back to our notes. Now we have to get some of my content from the learning center with links to it. And here I referenced #4 Macbook features. So we'll go to #4 and we'll get this bit. Copy that, paste it in. Let's bring it a little bit further down like this, okay. So I'm gonna change this headline to Getting to Know TimeTracker, because we're essentially grabbing stuff from the learning center or the documentation. And here maybe change the text to something like we offer a wide range of support articles and documentation, so you'll get the most out of your time tracker experience. Now here, instead of this image of a laptop which really tells us nothing, we can put something else, of course. But for now I'm gonna keep it. And I'm also gonna keep these two links because they go to the documentation. One thing I'm gonna do though is move this button a bit further down because this is just not in a correct position here. So I'm gonna move it 30 pixels from that text. And I'm gonna do the same to this. There we go. Just showing the layout, making sure that these are properly aligned. Now look, this one wasn't. Just a tiny bit off there. This one seems okay. However, I'm going to move the icon, kind of like in the middle of this column and I'm gonna do the same here. Yeah, I think that looks pretty good. Now one thing that I don't like is the fact that there is very little contrast between these sections. I mean, sure you can tell immediately where one of them ends and the other begins because of the center title here. But I think I would like Just a tiny bit more contrast here. So I'm gonna go through the rest of the pages and see if there are any like light background colors that are being used to separate the various sections. And not so far, there aren't really any. There is this darker color that honestly, I'm not a big fan of, but we might as well try it. All right, so hopefully this image is a PNG, so we won't have any problems with the background. And it is. And actually, you know what, that's not too bad. So I think I'm gonna keep that. See what kind of text colors they're using here. So I'm gonna copy this color and I'm gonna go back here and paste it in, like this. Because that was just too light, there wasn't enough contrast there, okay? These ones seem just fine. Maybe I'll change the button style here to be exactly like this. So I'm gonna copy this color, I'm gonna come in here, Autofill and remove the border and change the color of the text to white. All right, not sure about if the author intended specific padding for these buttons. And we have 20, 20, 21 there. We have 17 here so now it's just do a little bit of an adjustment to get an equal padding on the left and right. All right, so that is for the content from learning center with links to it. Next up, it's the call-to-action. And here I listed the number 10. And number ten, Let's see what kind of call-to-action we have on number ten. Yeah, we have this one, which is actually fantastic. So I'm just grab that, And paste it in, and bring it up. And instead of, Start Your Project Right Now, I'm gonna say Try TimeTracker for Free, and that should do it. Okay, so here I'm going to say something like, Try TimeTracker, I'll just zoom in here. For free for 14 days. And I'm also gonna mention, No credit card required. Okay, so try a free trial. And I'll just move this up 60 pixels. I'll move this up to 30 and, That should be it. And also the price, $55, let's change this to 19. Let's assume that our app is $19. All right, and finally what do we have? We have pricing and footer. Actually you know what, the pricing should go before this bet. So, let's see pricing. I listed number 8 and number 13, so let's see what's up. Okay so we have this pricing option, very nice and we also have this pricing option. This one here, which is also very nice. So will we be using this one or this one. Well, here it's really up to how many pricing tiers you have on your product, right? Because this is a demo, we can go crazy with it. But I think we'll be using this one from number eight, so I'm gonna copy this. And let's see exactly where we could put it. And I actually just had this crazy idea, crazy, crazy idea. So what I'm gonna do is actually switch this back to white, okay? And we're gonna move these down, and I'm gonna increase the size of my art board here, because I'm gonna put the pricing right here. First I'm gonna say Pricing for Everyone. We'll keep the annually, monthly switcher. 14 day free trial, no credit card required. And, of course, here you would go ahead and enter the different prices for your tiers along with your various benefits. In my case I'm just gonna leave it like this. I'm gonna bring this up, I'm also gonna bring this up like that, but I'm gonna go crazy here, and I'm gonna use this dark background. Let's see what kind of colors are being used here. So just white, white, and this one is a lighter gray. So we're gonna use that a bit for the background. Because I think it creates a nice separation between sections and also draws a lot of attention to the call-to-action area, which is a very important area. So just for the sake of it, I'm just gonna decrease the opacity so I can see what other elements we have. Okay, here I'm just gonna go back up and copy this gray color, and I'm gonna use it for this bit, the buy button should just say buy. Try free trial, I'm gonna use white for this button. All right, now I quite like the way this looks, I'm gonna make it a little bit shorter in height. I think that's a good looking call to action area. When you scroll down, you immediately see it because of the very high contrast. And also because of this red color for the call-to-action button, which immediately stands out. So, yeah, happy with that. Let's move on to, what else? We have the Footer. The footer, I liked number 8, Which is this one right here. So we might actually end up changing this a little bit. Let's see if it works for our structure here. So we actually have three big sections with sub-pages. So I guess we could fit those in here. It's nice that we have some social information. An address, this is not actually necessary, but we can keep it. And a little call-to-action in here, which is not actually a bad idea. So yeah, let's go with this footer with a little bit of modification, I think it's gonna do just fine. So I'm gonna delete this bit, and I'm gonna change this to Product, and then Help and Resources. That's great. They are in the correct order. I just need to make this uppercase, okay? Let's change the links here. So we have Features, Pricing, and Our Customers. Features, Pricing, and Our Customers. The Resources, or the Help, is Support, FAQ, and Contact Us. So I just need to do this. And Resources, we have Documentation, Articles and Blog, okay? I'm gonna keep the social icons, but I will bring this and this up to, let's say about 90 pixels I think. Let's see what kind of distance we have here, 99 pixels, so let's make that 90. Let's make that 90, just like that. Here the logo, we'll have to replace this at some point. Let's see, address, I'm gonna keep this, and I'm also gonna keep this and this, okay. Cool, let's also resize that placeholder so it matches the total height of our footer. So with that, we've actually finished the homepage. Let's remove the excess spacing in here, Just like that. These two aren't aligned properly, so let's fix that real quick. Probably we'll just align them inside this container. And this as well. All right, so what do we have? We have our hero, followed by a section that takes us, that shows us a couple of features and then links to the Features page. Then we have client list and testimonials, pricing information, some links to the resources section with the documentation. And I think this one should link to, it should say Read All Articles, let's resize this button as well. And then we have the call-to-action here in the footer. And then the footer itself with links to our other pages, social media, and then an address. Also a smaller call-to-action, and then the usual privacy policy and copyright information here at the bottom, all right. Now, the footer is actually something that we're gonna use in all of the other pages. So what I'm gonna do is simply create a symbol out of it. This call-to-action is also something that we're gonna use as you can see in all of the other Pages, we have a CTA present, right? So we're also gonna convert this into a symbol, we're just gonna call it CTA. And what else? Well I think as far as symbols go, this is all we have to do right now. Right, so with that, we've actually finished building the homepage. That wasn't that hard, right? As long as you have a structure in mind, and you have a set of pre-built elements like the ones in this UI kit, it's fairly easy. Simply copy and paste. The other ones make the necessary adjustments, maybe change the texts. If you don't like the color, change the color. Change the images and you've got yourself a complete web page. All right, so what's next in line. Let's see, next in line is the Features page. So we're gonna create that in the next lesson. See you there.

Back to the top