2.1 Planning the Homepage
In this lesson, we’ll take a look at the Rapture UI kit and reference the elements we need for our homepage structure. Let’s begin.
1.Introduction2 lessons, 06:05
2.Designing the Primary Website Pages6 lessons, 1:11:45
3.Designing the Secondary Website Pages7 lessons, 51:15
2.1 Planning the Homepage
Hello and welcome to lesson number two of the course, where we'll start working on our homepage. So as I mentioned in the previous video, we have this sitemap and page structure to guide us through the entire design process. So let's take a look at the homepage. We have the main hero unit which displays the main statement of the product, and we can also add some imagery, maybe a video, client logos, or a call-to-action. Well, a call-to-action is definitely something we need to add. Then we'll have the feature or benefit list, testimonials. We have a section or we could have a section dedicated to the learning centre. Yeah, if you remember we have a resources section with documentation, articles, and blogs. So we can have a section that draws content from these three pages. We have a call-to-action, then a download section, this optional I guess, pricing information, and finally a client list. Now as I was saying, this is just a guideline. It doesn't mean that we need to use every single element that's in here. We need to keep a balance of what needs to go in here, and what actually is usable and looks good, right? So the page needs to convey the right information without it compromising the user experience, right? So if you just cram all that information in there, well, you're sacrificing in other areas where you shouldn't. So based on this structure, we're gonna head over to Sketch, and we're gonna have a quick look through these templates and see which one would work the best for our homepage. So this is the classic template. We see a navigation on the top, which is good. We only have about, let's see, five main pages, so we don't have a large navigation. This would fit in here quite nicely. We don't have Sign In and Sign Up, but we can get rid of this and right align the navigation. Then we have the hero which has that nice main statement and also call-to-action, and also imagery in the back. A section for features, yeah, that's good. So we have features here. This is a section for our recent work, we don't really need that. Another section for features, testimonials, client list, the team, we're not looking for this. These are some statistics, call-to-action, and footer. And this call-to-action and footer combination, I actually quite like this. So, yeah, classic, the number one template, definitely a good choice. Let's see, this one is for an iOS app. Now, our, app is not necessarily a mobile app. The way I envisioned it, it's more of a cross platform desktop app, so it works on Windows and MacOS. I actually did not write that in the brief here, so let me just write that down. So an iOS app template, I don't think it's really gonna be suitable for us. With that said, we might come back to this later and maybe find some elements that we need in other pages. And this is one of the nice things about this UI kit, well, it's a UI kit, it's supposed to be like that, but it's built in a modular way. So you can basically take an element from here, an element from there, mix and match, combine them together and It's all gonna look good, right? And that's a really nice thing about it. Let's see the next page, subscribe. So this is, let's see, this is also an interesting hero, but it's more geared towards capturing email addresses or generating leads, not really a good fit for us. I do like the feature section here, I think that's very interesting. This is an interesting use of the client list, nice. Okay, let's see about his desktop app because I think this kind of fits to our project, okay? One thing that I'm missing from this menu or from this hero is a navigation menu because it uses this navigation menu right here, but I like the other elements in it. I like the download button here, I like the button here, so this might be a good fit. We might get rid of these social icons, move the logo to the left, and put the navigation here in the center or align it on the right with this button, that could work. Let's see what else we have here. This is actually an interesting area that we can use for, let's see, this content from the learning centre with links to it, so we can have something like this, keep in mind. Let's see what else. Yeah, some features. Okay, let's see what's next. Showcase, this is also interesting, but I guess we can replace this play button with a proper call-to-action. Yeah, we have some features here, yeah, interesting. iOS app, I'm gonna skip that. Studio, let's see what this is all about. I like this section a lot, I think we can use it somewhere. Hey, this is also interesting for the client list. They offer, they show the logos, but they also add a little description. Interesting, also an interesting way to show the testimonials here. And this is a contact form, all right. Let's see what else. We also have a web app in here. Hey this is interesting, take a look at this. So we have the logo, navigation, we don't need these two, but I like the style on this page, on this section here. We have the call-to-action, some imagery, client list, testimonials, not that great, but I do love the pricing options. So I think this is actually the one that we're gonna use. Maybe I should start writing these things down, so I'm gonna go right here at the homepage and I'm gonna create a new section. Or actually, you know what? Let's just make a parenthesis here and say number eight. I'm just gonna reference the individual pages that I see here so that I know from which page I can get this particular element. Mm-hm, I also like this footer, so let's add footer in here. I'm also gonna say number, oops what did I do? Number eight. Let's move on. This is an e-commerce page. This is also an interesting hero area. But this is more geared towards e-commerce, so I'm not sure if we can get anything from here that would be useful. Let's see, Mac App. This is nice. I think in terms of hero areas, number ten is actually a winner for us, so I'm gonna say number ten, hero unit. I think it has all the elements we need so far. So we have a logo, navigation, a small call-to-action here, the main call-to-action right here with this blue button, and then the main statement. This is optional here of course but I guess we can use it for a subheader or something. This is imagery that we can replace of course, so yeah I think this is great for a hero unit. This is also great for a small call-to-action, I really like this. So, let's see call-to-action, I'm gonna reference number ten here. Let's move on. This is a blog, so yeah I don't think we can use much from this. Maybe when we create the blog page we can grab stuff from here, cool? Let's see, device. I do apologize for the continuous zooming in and out but I'm working on the small screen here so I wanna give you the best experience. This is also an interesting idea for a hero but I think I like the other one better. Interesting idea for testimonials but not that creative I guess. Hey, this is very interesting for features. So let me just reference number 12 for features, number 12, and I'm gonna say iPhone features. Even though this is an iPhone, we can replace the image with something else, but I like the idea here. Or maybe, actually this whole idea's probably based on displaying something on the iPhone screen, so let's remove that. This is an interesting way to present features. So yeah, let's say number 12, features block. Okay, let's see, number 13. This is an interesting way of presenting client lists and testimonials all in one, and we also have this bit. Yeah, I think this is interesting. So let's see, number 13, trust block for social proof. 13, trust block, and this also is also applied here to the client list. Team, we don't have that. This is an interesting pricing. Pricing plan or pricing table, so let's do for pricing, number 13. Let's see, this is for travel. I'll quickly glance over it. No, next product. No, not really. Digital product. No, I think this is way too much. I don't know what the purpose of this was. iMac, let's see. This is also an interesting [COUGH] hero area but it's mostly for generating leads, or for capturing leads, rather. This is an interesting way of presenting features. So let's do number 17. 17, that's called three feature. Hm, this is an FAQ, but we don't have one in the homepage, so let's actually go to the FAQ here. Do we have one? Yes, we do, okay, let's reference number 17 here. Okay, just three more to go. Also an interesting option for pricing, but I think I like the other two options better. Okay, this is for an Apple Watch. An interesting idea for features, let's reference this, number 19. Okay, and finally the studio, let's see what we have here. This is the final demo page that we're gonna look through. I like the idea of presenting features like this, but I don't think it's gonna work really well in our case. This is meant for projects. It can also be used for features, but I think it works best for projects. I'll reference this anyway. Number 20, featured product. Maybe we can grab some elements from it for inspiration. Team, screenshots, all right, so we have some inspiration for most of these sections here. Let's see for which one we don't. For this one, content from the learning centre. I think I saw one before I decided to start writing these down. So let me see if I can try and let me see if I can find this again. It's this one from our number four, desktop app, MacBook features, okay? So, we'll say number four here. What else we don't have? A download section for different platforms, but I guess this is optional, we can integrate that into the call-to-action, so actually I'm gonna delete this altogether. All right, so now that we have some idea of where we can get most of our elements from, the next step is, of course, to start building our page using these elements. And that's what we'll do in the next lesson.