Understand UI kits

- [Instructor] When we design apps and websites and different things like that we're going to run across features and content that we want to be able to create. Things like a hamburger menu for instance. If I look at my really, really simple app design here you can see I've got a little hamburger menu or we've got some chrome elements that come from iPhone or something like that. Or we want to create a simple contact form. Or we want to have something like a slideshow show up. Okay? These are all things that, you know, of course we're going to go in and design if we want to but there are a lot of people that have already created this type of content including, for instance, Apple, or for iOS where you can take content or pieces that you want to use in your app design, if you're going to design for an iPhone for instance, and already use them, already take them and copy them from a file that they give you or file that you take and put them into your own design.

These are things that have already been created. You don't have to do it. These are called UI kits and UI kits come in a lot of different forms. We can have icon kits, we can have complete design kits, we can have a lot of different things and I just wanted to show you a few examples of some of the kits that I have open here. Here's one of them. This is actually a responsive, resize UI kit. And you're going to notice here that it includes things like UI elements. These are elements that, you know, if I zoom in here you can copy-paste, bring into your own file.

A lot of these are symbols which means that if you want to edit one you're going to edit the original, for instance, in the original file in this UI kit and it will update in your file unless you decide to break the link. I'm going to open another couple examples and you're going to download these as you go through this course. But I actually have one for what are called wires. This is something that is available via Behance and I'll show you how to get this one but you have either web or mobile depending on what you're working on. If working on a mobile app, for instance, or a mobile version of a website I can open up this wire kit and you going to see right here that this is truly a little bit more like a wire frame kit where we have base colors, we have icons or iconography we have UI elements that we can use and all of this content if I zoom in here you can, like I say, copy-paste, bring into your file, and either un-group, add your own content, change the colors, change the fonts, do what you need to do.

But this is just a great way for us to be able to go out and even pick out whole designs. Like we want to have a sign in or sing up page, for instance, you can take this entire design. Select all the content if you want to. Copy it and paste it into your own and that way you have a starting point. So UI kits are a way for us not to reinvent the wheel, so to speak. To give you another example, I'm going to go open up another, now you won't have this open, don't worry about that, but I going to open this one up. This is actually from Apple. And this is part of their iPhone UI element kit.

And if I zoom in here, think about it, if you're designing an app for iPhone and you want to be able to use the base elements or what we call the chrome of the device, for instance, if I look out here I'll be able to see a lot of the different elements that we want to be able to use like the keyboard, if you want to have a keyboard show up, or UI elements, things that are part of the operating system or OS elements that you don't have to recreate or reinvent. So you can copy and paste and you can see these are all separate elements that we are free to use. So UI kits are something that you're going to want to take a look at and it's not just a great way to pull in little pieces here and there like icons an things like that but maybe even to use as a way to kick start your design.