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

3.4 Support Page

Hello, and welcome to lesson number 11 of this course where we'll create the support page. As a structure, the support page is similar to the documentation, it has the same hero with a search form on the top. But other than that, we have a support team schedule and availability, and also four different ways to get support, chat, email, phone, and ticket. So, let's jump back to sketch and we're gonna duplicate the documentation at Word. We're gonna call it support, we don't need this. The heading should say something like search the, or no, it should say this, what are you looking for? This should say something like search the help center. And then, we have a section for a support team's schedule and availability. Now for this particular piece of content we could really use a table. So let's see if there are any tables designed or provided in this UIkit. All right, so after looking through all of these, I found two possible options, either we can use this bit from number 15 and customize it or we could use this bit and customize it as well, but I think the combination of both could work in our favor. So what I'm gonna do is copy this. Yeah, I'm gonna paste it in. And I'm actually going to use one of these dark backgrounds, because I want a nice way of separating the content here. So background, table, let's position this correctly, 90 pixels from that form, and now let's bring in the actual table. Okay, well, first thing I'm gonna do is change the color of the text inside all of these to white, and I'm gonna lower their opacity to 50%. We also need to change the color of these dividers, so select all of them. And change their fill to white instead of black and keep the same opacity. So we need support team schedule and availability. The availability can be represented by these check marks or we can use text. The schedule, we can use this bit. So, let's say to make things that are a little bit simpler for us. I'm gonna delete these, I'm just gonna leave one row of each, one with a check mark, one with an X. And then I'm also gonna bring in some content from here, specifically this text- And this is actually going to be used as a table heading. So let's duplicate this bit, and let's align it like this. Let's position this at 33 pixels, because 33 is also the gap here. And let's actually make these bigger. So let's bring in the layout. Let's say we're gonna use just 8 columns out of the 12 available. We're gonna resize these. And we're gonna move these checkmarks to somewhere around here. So the first field is gonna be team member, and then we'll say schedule. And, as for availability, we're gonna say, available in weekends. So, actually, just copy these, and these, select them and central align. So our first team member, let's open up craft here again- And bring on the names. As for schedule I'm gonna say something like 082 or 08 AM to 17 PM, something like this. Let's also add east or GMT or whatever time zone there is. And then of course we can basically just duplicate these rows, and that's our team member schedule and availability. But I feel we also need some kind of title here, so let's add a title. Let's use something like this, something that says team member schedule and availability. Position this correctly on the top, and you know this doesn't actually seem right. Let's take a look at other sections, because I think I remember seeing a section that's similar to this but has a slightly different layout that I feel would work better for what we need. Yeah, so this is what I was talking about, the FAQ. I like how the text is on one side and the content is on the other. Let's see what kind of layout are we talking about. So, we have one column offset on each side and then three columns for the text, one column gap, and then the main content is on the rest. All right, so let's see if we can replicate that here. So we have this on three columns. Let's rename this to schedule and availability, and we're gonna align it to the left. And then we'll actually place it like this. And since we have such a large table I think we need to skip those offsets on the side, and that looks just much much better. All right, let's resize this to the correct height. And let's move on to the next element, which is the content that shows four ways to get support, chat, email, phone, ticket. Well, for this bit, I saw something around page 8. It was a collection of basically three columns with an icon, a title, and a description. I think it's this, yeah, okay, so just this bit, that's exactly what we need. So I'm gonna copy this, paste it in here. So for the title we're gonna say it's easy to get support. The first section should say chat. The second should say email. This should say phone. And the fourth should say tickets. So, now it's actually quite easy to resize these. They're using four columns at the moment but we can resize them ourselves to just use three columns so we have room for a fourth option. Just to make sure you keep the correct spacing here, I'm gonna use 30 for the button. Okay, so that's one. Let's do the same for the others. And let's add a fourth that says ticket. Now, of course, you will change the icons here and also the text, and also, and the text in these buttons. So here you would say something like, let's chat or start chat. Here you would say something like, e-mail us. Here, give us a call. And here, create a ticket. Next, we have the called action- And a footer. Resize the art board. And our support page is now complete, very, very simple. All right, only a couple of pages left to do before we complete the whole website design. Next on the list is the FAQ or frequently asked questions. We're gonna tackle that in the next lesson, see you there.

Back to the top