2.2 Hero, Features, Testimonials, and Client List

Hello, and welcome to lesson number three of this course. Now, in the previous lesson we had to look at all of the demo pages that came with the UI kit. And based on the structure that I've written down we've kind of hand-picked various elements from different pages and reference them in this particular structure. So what we're gonna do in this lesson is try and finish building the homepage. We're gonna grab the elements that we've written down and we're gonna mix and match them together and see what kind of result we can get. So let's get started. Now, the first thing I'll do is copy the grid configuration that's used in the Rapture kit to my newly created sketch document. So to do that, we go to View > Show Layout. Yeah, and as you can see, the author of this kit used this particular layout, to align everything precisely. So if we go to Layout Settings, we'll see the total width, the number of columns and the gutter and column width. So we're gonna use these exact values in our own document. So we're gonna use 1170, the gutter width is 30 and 70 for the column. So 30 and 70 here. Let's see, the gutter should not be on the outside. So 1170 offset, we'll use 215. 12 columns 35, 70. All right, so let's actually make this as a default. Okay, so now, I'm going to create an art board that's the same width as the art boards within the UI kit, which is 1,600 pixels. So hit A, Let's call this Homepage, 1,600 pixels, and let's say about, I don't know, 2,000 for the height. That's of course, a temporary value. So now when we show the layout, everything is displayed nicely in here. Let's start with the hero unit. And I've written down here a single value, number 10. So we'll go to page number 10 and we'll grab the header from here. And we're gonna paste it in. Let's take a look at the layout, and see if we created that correctly, and we did. As you can see, all the elements are aligning nicely to the layout. Now let's do a little bit of customization here. Let's see, the logo as in just text. Yeah, it's actually a path, so we'll tackle this a bit later. But we also have access to the navigation. So let's go ahead and change that. So we have homepage product. Homepage, let's see what kind of spacing we're talking about here. Well, it's not even, but we're gonna use about 30 pixels of spacing between these elements. So Homepage, Product, Resources, Help, and About Us. All right, I'll probably align these to use 30 pixels here. 30 there. Oops, 30 here. Okay, by now, yeah, the button looks good. Let's see, for the main statement, we're gonna say something like, take control of your time. And I actually liked the way this was looking. So it uses Droid Serif, italic. I'm gonna use the same combination, Droid Serif, Italic. Okay, get started for free. Sure, we can keep that but oops, I'm going to bring it up a little bit more to about- 90 pixels, and these. Would it be interesting to find the icons for MAC OS and Windows so we can put them here. But for now, let's- Let's actually ungroup this bit. Let's position this at 30 pixels from the button. And then I'm gonna group this up, and align it vertically with the image. Of course, we'll change the image a bit later, but for now, this will do. Let's see if we can find some icons here for MAC OS in Windows. I'm gonna go to some of my icon libraries and see if we can find anything here. No, not really, zoned icons, let's see Apple or maybe MAC OS. No, we don't have that. So let's actually go to Icon Finder and we'll search for MAC OS. Let's see if we can find any free icon that's also a vector. Let's instead search for Apple. Okay, we can get an SVG for this. And let's see if we can find one for Windows as well, yep. And actually you know what? I think I prefer the version with the circle. So let's download that. And I'll also see if we can find one for Apple in a circle, like that. I'm not exactly sure if this violates the Apple guidelines for using their trademark logo. But for a quick demo, I think it should be fine. All right, so I'm gonna replace these logos. Let's see, each one is about 40 pixels in width-height, so let's delete that. And let's grab- These two, we don't need that. So I'll grab these. I'm gonna put them under Logos. Let's group them up as Logos. Let's place this at 30 pixels from one another. And let's scale these down to 40 pixels just like the previous icon. 40 here as well, okay? Let's align this with the layout, and we'll position them at 30 pixels from- The text above. But actually I think I'm gonna bring in the distance here to 50. I think that looks a little bit better. Let's see if we can get a different color for this though, I'm gonna use this fill color here- For both. And so they don't really take away from the rest of the content here. Actually, now, that I look at it, I think I can position these a little bit further down, so there is a bit more balance here. And let's also align this properly. All right, and I think with that apart from this image here and apart from the logo, I think our hero is complete for now. Let's move on. So we have the hero and then we have the features, or the benefit list. Now here I listed several resources, we have number 12, features block. So let's take a look at that. See number 12 features block, which one is this? It's this one here. That's interesting, definitely. What else? 17, three features So this one here. Yeah, definitely interesting. And what else? 19, four features. I'll choose this, okay. So I think we can copy this bit. I'll paste them right here. And what else? Number 20, featured project, it was this bit, okay. Now, I think I'll be using the one from number 12 This, a little bit changed. So let's copy that and we'll paste it in. So I'm gonna change it the following way. I'll just make this art board a lot bigger. Because we have a white or a very light hero, I want the immediate section to have a very strong impact and also a very good separation. So I'm gonna use this black section here to highlight the features. So I'm gonna delete that, see what is this a place holder. I'm gonna square it off and make it as wide as my art board. And I'm gonna change the text here to, All the power of TimeTracker, okay? As I was saying, I'm not gonna tamper with the copy too much. I'm just gonna change a headline here or there, maybe a button. And we actually do not have a dedicated features page. Or actually, we do, sorry, we do have a dedicated features page. So this button here will link to this page, where it says features. All right, let's see if we can still use this somewhere. Now, I think it's gonna be two different takes on the same thing really. So I'm not gonna use that. But I do like the contrast here, so I'm gonna go with this bit, okay? What else? Let's see, features, we've got that covered. And then we have social proof testimonials where we have number 13 listed. So number 13 is this. Yeah, I was talking about this bit. Okay, so I quite like this. I'm gonna use it. So copy, paste that immediately after. I'm gonna change the headline here to, TimeTracker is trusted by 1,000+ entrepreneurs and professionals worldwide. Let's see as the same Droid Serif Italic font. And I'm gonna keep these logos. Apparently we have some arrows here. I'm not sure what's up with these, probably just for navigating or from switching between testimonials. But they don't seem complete, so I don't know if this is a mistake or not. I think I'm just gonna remove them completely. Let's see about that color though because I think this could work really well on white. So now, maybe use white. But the logos here are actually just straight up images with that particular background and I don't really like that. So let's see if we can find some other logos somewhere that would work better. Because I like this setup, but I don't like the color. So let's see, client logos. Where can we find those? There we go. I think we had the same logos but on a white background. So, I'm just gonna copy and paste those from there. Let's quickly do a little bit of clean up here. Yeah, we also have this quote, which has a quote icon. There's also an image, unfortunately, I cannot change that or actually, I do. Let's pick this color from here as a fill. And for these, let's- Use a nice dark color. So for example, the color of this text. Yeah, I think that looks pretty good. So that is the testimonials section. Now, what's left to do in the homepage is the content from the learning center, call-to-action, pricing info, the client list we actually included here. So I can get rid of this and the footer. But we'll tackle that in the next lesson and we'll also make tiny adjustments to make sure our homepage is ready to go. So I will see you in the next lesson.