3.7 “About Us” Page

Hello and welcome to lesson number 14 of this course. This is actually the final lesson and we're gonna complete our website design by creating the About Us page. So let's take a look at our structures. Besides the Hero we have a couple of sections. We have the team. And then kind of a middle section, we have a large picture of the team and then the offices. Let's go back to sketch. And after seeing that structure, I think we're gonna use something like this. So I'm gonna duplicate the features page. I'm gonna call it About Us, excuse me. And the reason I duplicated this particular layout is that we want this header, but also we want this bit to navigate to each individual section within our page. So let's just remove these. For title I'm gonna say who we are, and what we do. And I'm gonna say, Time Tracker has a great team behind it. Take a look, so for the actual sections here, we would have, The team. And then, our office and then you can make this, you can expand it to create other sections within this page. Like for example, maybe press releases or our mission, road map, company history, and so on. So you can grab a lot of stuff in here. Jobs, job openings, if you have something like this. So that's why I decided to use this navigation method, because it's expandable. If you decide you want to add something later, you simply add another menu item here as well. For now, I'm gonna delete that and I'm also gonna delete that bit. All right, so for the actual team, let's see. We are looking for a layout that has a picture, name, and position in the company. So let's go back to our UI kit and find a layout for the team members. So the first one here, it's pretty simple. There's nothing really creative about it, so let's move on. And startup, we have another option. And this is actually quite cool. We have a picture, we have the name and we have the position in the company. So, this is what I'm going to grab here. So that's gonna be the first section. And then we're gonna separate this with a nice picture of the team. So I'm gonna create a rectangle. I'm gonna make it 16 by 9, As an aspect ratio. Bring that up and we'll go to craft, photos, we'll get some from unsplash, search for people, it should have a category called people, maybe. And there we go, people. The idea here is that you would find a picture or you would place a picture of your team. What we are doing here is actually just a placeholder image. What I was looking for something that would be close to the real thing. But let's search for party because we always have parties at the office, right. So yeah, I think I'll stick with the happy birthday. And after that we have a picture of the offices. So we need a layout that gives us a picture, location, and address. Let's see if we can find something like that, or we need to create it from scratch. Actually, this is pretty interesting. So I'm gonna grab this section, and just customize it. So here, it's gonna say Our Offices. This is where we work. And there's obviously some things here that don't belong. So for example, These price tags. Or the avatars and the price tags. Of course you would change the names here. But this particular layout uses several different styles. So I would choose one of them. I would probably choose this, because I quite like the look of it. And let's say that we just have three offices opened, right, so how would we display these? Well, to be a little bit more creative, let's get rid of these, and let's also get rid of this. So you can basically use the grid and just change the width of the placeholder. Make sure you properly align that, right? And the other office could be a copy of this. And you can make the placeholder here about this big, right? So then we can increase the size of the picture, eventually get another picture in here. So let's say something like, I don't know, City. And also change the picture there. So you would have, I don't know, New York or wherever the office is, and then align it right here. And say, the next location, whatever that is. Paris, for example. Right, now, simply resize this and let's bring these back up, resize our art board. And let's see, do we have anything left? Well, we don't have an address here, but we can actually make one of these, on mouseover or when we click it, to flip and show the address on the other side, right? So let's do that right now. Let's remove the photo. Right, so when click, this will be flipped, and we can type in an address. Let's see if we can some style for that, for an address. I think I saw one somewhere in the footer. And yes, actually we do have an address right here, there we go. So simply copy those. Let's paste those in, I'm gonna make both of these white. But this, I'll give it a slight opacity decrease. All right, so we now have 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 pages designed by using the UI kit downloaded from the bottom elements. What do you think about this? Is it worth it? Getting a design kit and creating a website like this or should you just Design it from scratch? Well, I'm gonna tell you my opinion on the subject. If you're doing like a super custom thing, then designing it from scratch obviously is the way to go. But if you're not a very experienced designer or you're short on time and you need to present something to the client, a UI Kit might come in handy. Especially one that's pretty well designed, like this one, Rupture. If it's a modular kit like this one, and to be frank, all of them, very much all of them are. You can simply grab elements from left and right, mix and match them to create, basically, your final design. And this approach saves you a lot of time basically. Because you end up with a relatively professional looking product but with minimal effort. You saw we are at 14 lessons right now 14, 15 lessons. So it took us about two hours to get to this point, two, maybe three hours. But that's because I actually stopped and discussed what I'm doing. But if you just get to work and not have any kind of distractions, I think you can do something like this in about two hours. And two hours for an almost full website is not that bad. Of course on top of what I did here, you need to add your own text, your own images. Maybe work on the positioning of the elements a little bit under distances, maybe you want to change the font sizes a little bit, the font families, the colors, right? So on top of what I did here, there is another layer of customization that you can have then. That will potentially take a bit more time, but even so it's still significantly less than what you would normally spend to design something like this from scratch. So with that said, I would like to thank you very much for watching this course. I'm Adi Purdila and until next time, take care