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

1.2 Getting the UI Kit

Welcome to the first lesson of this course, where we’ll download the UI kit necessary for our website design.

Related Links

1.2 Getting the UI Kit

Welcome to the first lesson of this course, where we'll download the UI kit we'll be using to design our website. Now before we do that, let me walk you through a small project brief about to be the project that we're actually gonna build. Now this is a fictional project, of course. But I just wrote something really quick. So the website goal is to present and sell a time tracking app called TimeTracker, yeah? We also have a site map, which you can see right here. We have a few main pages, five. So we have the main homepage and then we have product page, which is actually just a section that contains these sub pages. Then we have some resources, a Help section, and finally About Us. And for each of these pages, I went ahead and outlined possible structures. It doesn't mean that we're going to follow these to the letter. These serve more like a guideline to the kind of content or the kind of layout that we wanna see in each page. So based on what you see here, I went to Envato Elements, and I found this, the Rapture Startup UI Kit. It's a very, very nice UI kit, I really like this. It's made by getCraftwork. A link will be available in the lesson notes, so if you want to follow along make sure you go to download and once you do you'll get something like this, The-Rapture-UI. Now what's nice about this GIT is that it has a Photoshop version. I can see all the Photoshop files here, but also a Sketch version. And because I'm a Sketch user, this is what I'll be using. But feel free to use any kind of design software that supports Photoshop files. Currently, of course, Photoshop, but also Adobe XD. And Adobe XD is a great option. It's much faster than Photoshop and can open Photoshop files, which is awesome, and its also cross platform. So in Sketch I went ahead and I opened the startup kit. We have a lot of pre-made pages right here, 20 of them to be exact, which is fantastic because the author gives us a lot of options in terms of layouts and various elements. And also a lot of inspiration for our project. And I also went ahead and created a blank sketch document called corporate-website. So what we'll do in this course is basically take a look at our structure that I've written down here. And we're gonna build page by page by going to the UI kit, grabbing the elements that we need, and then constructing our webpage design right here. Now before we get started I would like to mention that I won't spend too much time on customizing the copy, all right, so the text itself. Of course I'm gonna create the proper navigation and menu items, and buttons. But in terms of large blocks of text, I'm gonna use the defaults that come with the UI kit. After all, this is a demo project. But in the case of a real project, you would of course change that text to your own. Also, I'll see if we can change some of the imagery. But, if not, we'll just use the stock imagery that comes with the UI kit. And one other thing, I haven't done this before. Normally for a course like this I prepare in advance, where I try and sketch out the main ideas or the bulk of the source code for a specific project. But for this, I haven't done that. So it's gonna be kind of a live experience, if you want. I'm gonna see just how easy it is to design such a website by using the UI kit. So this is gonna be the first time that I'm doing it. So with that said, we're gonna start in the next lesson by creating our homepage, or at least we'll start working on a homepage. We'll see just how far we get. So, I will see you in the next lesson.

Back to the top