FREELessons: 15Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Features Page

Welcome to the fifth lesson of this course, where we’ll build the features page. Let’s begin.

2.4 Features Page

Hello, and welcome to lesson number five of this course. In the previous lesson, we finished designing our homepage, using, of course, the UI kit, Rapture, that we downloaded from Enviro Elements. Now it's time to move on to the next page in our project, which is features, so let's have a look at its structure. We start with a hero that has a strong message. It has a CTA and an optional video or image. We follow that up with an optional in-page navigation. And I actually saw one of these in the UI kit, so that's definitely gonna be handy. And then we'll have the main features, and each feature can have this structure. Finally, we have an optional social proof. We'll see whether or not we want testimonials in there. And CTA, and of course, footer, which I forgot to add here. But the footer is in every single page, so even if we don't see it in the list, we'll add it anyway. So let's begin by searching for a hero which would fit our bill. Now, the hero should actually be relatively similar to this one, in the sense that we would keep the same header with the logo and the navigation, but this bit right here will be different. So actually, what I'm gonna do is create a symbol out of the header menu, and just remember where it was placed. And in this case, it's 69 pixels from the top. I'm just gonna, oops, paste that, In. Align it in the center. Make sure it's properly aligned within the grid, and place it at 69 pixels from the top. Okay, so let's group this up as Hero. Now, let's see what kind of hero area we can grab from the UI kit that would match our description here. So let's start from the very top, and because we are only dealing with hero areas, now it should be a very easy search. I'm looking for something very simple. So something that doesn't have an image in the background, like that one, for example. That one, no, that's too much. This one could be interesting. But the point of this hero is to not just say, you're on page X. It should also provide us with a message that's related to the product. So in the case of features, it could say something like, awesome features for an amazing product, or something like that. So it shouldn't just say, well, features. That's just bland and boring, right? So we're looking for something that could fit that description. I think this does a pretty good job, so #7, we'll keep that in mind. Let's look over the others as well. No, that doesn't really work. We use this for the main structure. Now, I'm not gonna keep searching. Which one was it? This one, I think this one would work just fine. So I'm going to, Copy this bit, Along with this bit and this bit. So I'm just gonna paste that in. Let's position it at 120 pixels from the top. And let's say, All the features you'd want to track time, something like that. And here we're gonna say, TimeTracker has everything you need to get started. And I actually thought about creating an extra call to action here, in the form of this one. But in truth, there may be a bit too much, because this is a secondary page, and we already have a call to action here in the header. So I'm gonna remove that completely. And I'm gonna place these inside hero. Okay, great, now, what's next? We have an optional in-page navigation for jumping between sections. I also saw that in some of these apps. Let me just find it. There it is, in #4. Now, we have this bit. And this also has a little call to action, so it can actually compensate for the lack of a call to action in here. I like that, so let's go for it. So yeah, copy this, secondary menu. Paste it in, let's place this at 90 pixels, that should do the trick. Okay, I guess we can fill this void later with an image if we definitely want to, or we can bring up the layout, and, Let's quickly adjust these. We can make this longer. So let's say it goes to about two-thirds of the way. I'll bring this up, and also bring this up to 60. Yeah, I quite like the look of that. Maybe just a tiny bit more space here, so 30 pixels more, okay. So we have the navigation in place, let's grab some features, and at the end, we'll put the CTA and footer. So, For features, let's see if I've written down something. I found some interesting features here. But actually, let's go ahead and have a quick look through these and find some interesting features. So these shouldn't be like small previews. They need to be more detailed, like for example, this one, right? We have some imagery, we have the feature name, a small description. We don't actually need a button on it. This is a great example of a feature. So let's see, we had one on #1. This is also interesting, because it has a feature and then a list of sub-features. So that's definitely a plus. This is also very interesting. We have a lot of material to work with here. Let's see, I'm just quickly glancing through all of these. Well, I think this is interesting, from #19, so let's grab that. And I'm gonna put it right here, and so basically we have a big feature with a list of sub-features. Of course, we need to change the text here, but what I'm gonna do is get rid of this ghost button, because it doesn't belong there. And let's find other ones. This is interesting, from Studio. So I'm gonna copy this, gonna paste it under it, and I got the one with the different background because I wanna create a nice contrast between sections. Here, I don't actually need this text. I don't actually need this button. And this, I'm just gonna position at 120 pixels from the element above. Now, before we move on, I just wanna make a quick mention. These measurements that I'm doing right now are just quick measurements to quickly align things up. Before you send this over to a developer, you should really focus on getting all of the elements properly positioned. For example, on these sections, on each one, you should have the exact same padding on both top and bottom, right? Well, in the case of this, this is an exception because we have an image that goes here. But in the case of this, for example, right, the distance here, 168, should be the same as the distance here, right? You can see it's a little bit off right now. But before you send this over to production to be developed into HTML, CSS, you should really take your time and get these measurements correctly. Right now, I'm just running through these because, well, time is limited for a course like this, but in the case of a real project, you really need to get those measurements down correctly. So let's get one more features section in. So I'm gonna copy this. I like the styles of these. So I'm gonna get rid of this. I'm gonna get rid of the button. I'm also gonna position these at 120, like that. There is a small issue that I don't like here. The white from this image kind of seeps into the white of the next section. So there isn't a clear separation. So what I'm gonna do is just change the background, From here to here. So now it looks much cleaner, okay? So we had, let's see, one, two, three, four features here. Let's reduce that number to three, so we have three features in the menu, and we will have three feature sections right here. Yeah, one, two, three. And then after the actual features, we have a CTA and footer. So for CTA, we're gonna grab, Our dark CTA, and notice that it creates a nice separation in between the sections. And finally we'll get the footer. So align that properly. And let's select the art board, And make that the correct size as well. And just like that, we've created a features page. Pretty, pretty simple. In the next lesson, we'll build the pricing page. Again, just using the same technique as before, have a look at the structure and then glance over the UI kit, grab the elements we need, mix and match, and it's all done. So see you in the next lesson.fe

Back to the top