UI Kit Creation In Adobe Xd | Aleksandar Cucukovic | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (1h 2m)
    • 1. Class Intro

      1:31
    • 2. What are UI Kits and why are they useful

      2:39
    • 3. Types of UI Kits

      7:13
    • 4. Which components are important

      6:23
    • 5. UI Kit structure in Adobe Xd

      7:57
    • 6. UI Kit creation in Adobe Xd

      14:35
    • 7. UI Kit VS Design Systems

      3:43
    • 8. Premium VS Free UI Kits

      3:19
    • 9. Creating and selling your UI Kit

      12:05
    • 10. Your class project

      0:46
    • 11. Conclusion And Resources

      1:57
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

83

Students

--

Projects

About This Class

1c2522d2.jpg

UI Kits are really useful whether you are working on a big or small project, because they are going to save you time on repetitive tasks, make you more productive and deliver to your clients or developers much faster.

Hey designer, my name is Alex and welcome to this Skillshare class about UI Kit creation in Adobe Xd.

In this class we are going to explore:

  • What are UI Kits and what they can be used for
  • What are the 3 main types on UI kits and why each of them is good for
  • What is the difference between UI Kits and Design Systems
  • How to choose important components for your own UI kits
  • How to structure, create and save your UI kit in Adobe Xd
  • What is the difference between free and premium UI kits and how you can sell your own if you want to and much more

So i look forward to seeing you in class and show you how UI kits can improve your productivity and speed when working on any UI design project.

Have a creative day!

Alex

Meet Your Teacher

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Teacher

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

 

Thank you for reading and have a creative day!

 Alex

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Intro: Ui kits are really useful whether you're working on a small or big projects because they're going to save you a bunch of time with these repetitive tasks. They are going to help you deliver it to your clients and developers much faster. And they're going to leave you with more free time for yourself. Kids enter in, my name is Alex, I'm a product's creator and so far I have created four or 500 design products and also our course creator. And so far I have created more than 20 courses. In this Skillshare class, we are going to talk about UI kits and why they're useful. We're going to cover what our UI kits and what they can be used for. What are the three main types of UI kit and why each of them is good for. What is the difference between UI kits and design systems? How to choose important components for your own UI Kits, how to structure, create, and save your UI kit in Adobe XD. And finally, what is the difference between free and premium UI kits and how you can sell your own if you want to, and much more. Your class project for this class is to create your own UI kit. You can use Adobe XD or any other software for a matter, you can simply choose a few elements, save them out as a JPEG and upload into your class projects. And I'm really excited to see what you guys can come up with and what are some designs that you can create for this class project. So I'll look forward to seeing you in class end to show you how you are kids can be used to improve your productivity no matter which type of UI projects you're working on. So I'll see you in class. 2. What are UI Kits and why are they useful: Ui kits are basically just collection of different elements that you can use for your UI design projects. Those projects can vary from mobile design projects to website design projects to product design projects such as dashboards and web apps and projects of that nature. They can come in different file types. For example, Photoshop, Sketch, Illustrator, Figma, Adobe XD. And in this class we're going to focus on Adobe XD. They can also be width images and without images. And we're going to explore some differences between those two types. Why is one better than the other and the other way around? And primarily you're going to use these UI kits to speed up your workflow because you're going to do these repetitive task, especially in UI design. For example, you're going to create navigations for all of your projects. So instead of a recreating that navigation per se for each particular project, you are just going to create one navigation type and then simply expand your ideation from that one navigation type, which I'm also going to show you later in this class. So basically are going to speed up your workflow next time when you start a design project, because you're going to have all of these different file types saved in your computer. And then basically are going to be able to use and reuse all of these different elements for all of your different projects. Now because we are going to work in Adobe XD, we are going to work with components and you're going to be able to reuse those components to change the colors, to change the file types, to change the structure, to change the background shadow, for example, to change the colors and much, much more. With your kids, you're going to be able to adapt for different projects. So once again, for example, if you are creating in Adobe XD per se, you can create components for, for example, website design on full screen, Let's say 1920 by 1080, then you can go down and create responsive resizes sizes for your responsive design projects. The same thing goes for mobile designs. For example, you create your UI kit for iOS apps. Then you want to create that same UI kit to work on Android. It's going to be much simpler when you actually have the file types and files already prepared, then to do that from scratch. And this is going to allow you to charge more for your projects because you're going to be able to deliver faster. Because you come prepared with these kids and you prepare it all of these elements for your future projects. So in the next video, we're going to explore these differences between UI kits with images and without images. What are some benefits and drawbacks of each of them? And I'll see you in the next video. 3. Types of UI Kits: In this video, we are going to explore some main differences of UI kits with images and without images. What are some main drawbacks and selling points for each of them? So let's get started. So here I have opened UI 8, which is a website where you can actually purchase these UI kits. And we're going to call a doc about these websites a little bit later in this particular video, I just want to focus on differences between UI kits with images and without images. What can each of these be used for? N, what you can learn about creating these UI kits for your different types of projects. So what we have right here is this quantum UIKit, which is, as they say, huge library of your cards for web services. And what they actually created right here, as you can see, are all of these different components, which are basically a website looking templates which you can use and reuse for your future projects. So why this is useful for, if I right-click and open up in the new tab and zoom in so you can see a bit of these details. You can see that right here we have, for example, this Sony Dual shock for black controller. We have the price, we have this icon. So basically what you can do with this design is you can quite simply work with this exact design. Just create a component, for example, for this dual show controller. And let's say that you want to replace this inside of the component, for example, to add a different product. Let's say maybe you want to sell the iPhone, then you can create debt component of this particular card. You can simply drag and drop your iPhone image. You can drag and drop the information of that iPhone that you have for sale. And Dario, you don't have to create the card once again, you don't have to add the drop shadow. You don't have to choose the specific font. You don't have to choose the typography layout, you don't have to choose the hierarchy. All of that is done for you in the previous project by yourself. And now you can simply use and reuse this exact same component in your future projects. I'm going to explain that a little bit later in the lesson specifically about Adobe XD, how you can scale these components, how it can change them, use them and reuse them and so on. But in this example, as I said, we want to focus on UI kits with images and without images and what you can use each of these four. So going back to this example, you can see how many of these they have. They have this sale car, for example, they have this load more components. So basically, all of these components are extremely crucial to create in a UI kit because you're going to use and reuse them for each and every project. So in the negations, footers, blog cards, these are sharp items and so on. So all of these are going to be really useful to have for your future projects. If we check out this one which is called platform our wireframe kit. So what's the difference here between this one and this one? Basically wire-frame kids are these UI kits without any images and you can find them online wherever you search. And I really recommend that you create these wireframe types or UI kits. Why? Because you can always drag and drop images into places of these wireframing kits and you don't have to log with these huge file types because obviously which are a software you're using if you don't have images included inside of your designs, your file types are going to be much smaller. It's going to be much easier to work with these files. Then if you have them with images, it's also going to be much simpler. To show these wireframe kids to your clients and just tell them, just imagine including images inside in side of image placeholder, for example, you can change the color. So let's say you can talk to your client, it can communicate this idea. For example, that image is going to be blue, like in this case right here, so they can know, okay, So this background is just going to be image. So it's going to be much simpler for them to understand and to visualize in their head that the image is going to go there. What's in it for you is, is going to be much more simpler to change and make changes to these wireframing kits then to the UI kits because you're gets with images are going to be much more difficult to change because you're always going to follow some kind of image structure. You're always going to involve some kind of image, don't perhaps you're going to sample your colors from your images. So therefore, it's good to be much more simpler to use colors into use all of these elements from wireframe kids because you don't have images in place later on when you determine the structure with your client during your work on that project, you can simply drag and drop images inside and then simply adjust the design a little bit. For example, include the drop shadow here and there, just to make the button, for example, standout or navigation or hero image or the text. Maybe you should change the text color from dark to light and the other way around depending on the image of your choosing. So therefore, wireframe kids are much more useful, in my opinion. And then UI kits because you are kids, as I said, follow the structure of images and therefore adapt to that structure and those images, while wireframe kids simply use the structure itself and don't adapt to anything. You can simply drag and drop images inside later. Now finally, there is one more thing which I wanted to mention, and these are flowcharts. And basically for flowcharts come in different types of file sizes, different types of elements. And this is something called schema mobile flowchart. And I can show you one of my flowchart products a little bit later because I have to, and I'm going to show you how I created them and how you can use them to communicate ideas with your clients by going back to this one, because you cannot see it. Here. I open it in a new tab, and here you can see that they don't use a real texts, they don't use real images. They just use these placeholders. For example, this is going to be paragraph, is going to be title subtitle. This is the image, this is the button, this is the pagination is you can see they're using icons for navigation and for search. Using these social icons for Facebook and Twitter. And what this is going to allow you to do is you're able to communicate your ideas and much faster with your client. Because once again, as with wireframing kits and new AI kids, you don't waste your time by picking these images, by choosing these colors. You're just simply creating layouts which you can communicate and share with your client. Once those layouts are approved, you can work on the details. So this is why these wireframing kits, UI kits, and these flowcharts are so crucial for you to create. So you can just imagine you can start working on a flow chart, for example, for your client. Then after that project is done, you can simply reuse that flowchart in terms of a UIKit creation for your next project, you can simply create components for shapes, for colors, for fonts, for images, for buttons, and so on. And you can simply use and reuse those components in your future projects, which in turn is going to save you a lot of time and he's going to help you move on with your projects faster is going to allow you to charge a much more because you're going to spend much less time in each project because you have already created all of these components. 4. Which components are important: When it comes to structure, these components are really important and less important. So it's really all up to you which types of components you want to use. So let's say that you're working on blog projects all of the time. Just take a look at your previous works and understand which types of components have you used in the past. Obviously, some kind of search bar, some kind of navigation footer, perhaps even sliders, hero images, doors are really mandatory because those are types of elements which you're going to use all of the time in your projects. But depending of the niche, you are independent of the projects you'll be working for previously and on previously, you are the one who is going to determine which types of these elements you're going to use in your UI kits. So I'm going to show you with the previous examples that I showed you. And you can determine looking at those which types of elements you can choose. And in the next videos in this class, I'm going to show you which are some types of elements which are used in the past and what you can learn from that. So going back to these examples that I showed previously, you can see that they have e-commerce right here. And if I scroll all the way right around here, so we can see e-commerce. And if I scroll all the way down, you can see Dashboard. So if you're working on projects which require all of these elements, you can just imagine how time-consuming goal of these are. So you can create them once and then simply reuse them by changing colors, changing for example, position of these different texts and so on. If we scroll all the way down, we have company cards. So these can be, for example, team portfolio About Us, testimonials, features, pricing, and stuff like that. If we scroll all the way down, we can see music and video cards. So these are perhaps not as important as these previous ones, and they can vary from project to project. News and magazine cards. Once again, if you're working on blog projects all the time, these are really crucial. So once you create an ones is going to be much more simpler to reuse them and repurpose them for future projects. And you can see right here, so we have different types of navigation. We have these social cards, which once again, depending of the project you're working on, can be important or less important. We have base elements and style cards. So we have base elements such as these navigation, footers, crumbs. We have these different icons, loaders, sliders, buttons, colors. And finally you have these sample pages in this particular quantum UIKit. And you can look at these pages for inspiration and see where they used all of these different elements. If we take a look at platformer, we have headers, we have contents. So once again, blocks of Contents, sliders, simple grids. So basically images in a grid left and right. We have this master grid. We have futures left features, right. For example, with mobile phone mockup, with website mock-up, sorry, laptop mockup with tablet mockup. We have different portfolios once again, depending on where you are working on in which nature, when to use one or the other. We have e-commerce, especially important if you're working with e-commerce websites. We have blog cards. And obviously you can use and reuse these different components. For example, these block cards. You don't have to use them for blog websites. You can use them, for example, for e-commerce websites. That's the beauty of these UI kits. You can simply repurpose these cards in your future projects and simply adapt them to work for that particular project. So we can have team testimonials, price stables, call to action. These price tables are especially boring to create because you are basically, let's say that you have, for example, 20 different examples of these pricing tables online. And all of these other examples are just variations of those examples. So why would you waste time recreating all of the time? All of these elements simply create, for example, five or six price tables at once in there, simply repurpose them for your future projects is going to save you a bunch of time, especially with these boring details where you have a majority of these different choices, especially with pricing table. So you have options, you have prices, a monthly plan, yearly plan. So all of these details are going to take you a lot of time to create for each particular project. So therefore, having them in one UI kit is going to save you a lot of time. If we take a look right here, call to action, especially important with all of these promo cards, we have forms and contacts. Once again, with these forms, how many of these variations can you actually have? So let's say that you can create, for example, 1520 contact forms. There you go. You can either use them for all of your future projects. And headers and footers, especially are boring for me to create because of repetitiveness and they are using all these different elements. For example, client logo is going to be left, right, center at the bottom, and that's basically it. So you can see when you start creating these UI kits, you can get the picture of which types of elements you need to create a more, which types of elements you need to create less obviously for any type of niche you're in, some kind of a contact form is going to be good to include. But basically once you start creating, you can use contact form for this, from this project. You can use contact form from this project and simply adapt into work for your future projects. That's the whole point of view I kid, and that's why I think they are extremely useful to have and to create. And obviously this UIKit creation is not going to come easy, is not going to come fast. This is the process which you're going to use and reuse throughout your career. So you can basically scrapped some elements which are no longer relevant in terms of style, in terms of function. Perhaps some elements are not used in the industry or in anymore, so you can simply scrap them. Use elements which are end, simply adapt and fit to that UI kit that you are using. So that's the beauty of UI kits and that's why I love them so much. And I think you should start exploring them too. 5. UI Kit structure in Adobe Xd: In this video, I'm going to show you some structure ideas for your UI kits in Adobe XD. I'm going to show you my examples because I have been creating these UI and UX kids for years now. And I have over 500 design products in my shop web dawn at dotnet, I'm going to leave the links to everything I'm speaking about in the PDF. You can simply click those links and visit and explore if you're interested, even Burgess, all of these different products which I mentioned n, which I'm going to mention in the future. Once you actually get to these selling types and these profiles on these websites, you can sell your designs. But for now, let's explore the structure of these kids, how they can work in Adobe XD, and how you can learn from it and create your own. So what I have right here is the convert landing page builder, which is the product that we created a while back. And this is the wireframe kit, obviously, as you can see. And if I zoom in a little bit closer, but you can see right here we have the navigation, we have the headers, story, features, benefits, promo, testimonials, team, pricing, others. And for all of these, we have multiple options, obviously because this is the landing page builder. These are the elements which are going to use for majority of landing pages. And this is intended for somebody who is creating these landing pages all the time because majority of these companies are there, are creating these landing pages all of the time, for example, for their kick-starting campaigns, for their product launches, for their product to a promos for all of these campaigns, for Facebook ads, for Instagram ads, YouTube ads and so on. So landing pages are extremely important for that. This particular product is meant to work with landing pages. So once again, we're going back to the niche. What is your niche and what is your type of project that you're working on? You're going to create components which are going to work in that niche. If we jump back right here, for example, I can see this is 1400. And I can jump in right here to create a new artboard. And I can jump right here, create this one. Click right here and simply adjusted to 1400, like that. In order for all of our elements to work. And I'm going to expand it further. So what I can do is I can, for example, click this navigation Control C, click right here, control V. And I can, for example, click right here, control C, control V, and adjust this to fit. I can even put them inside of the stack, and then I can simply drag and drop inside of a stack, but we can also do that later. For example, I want to show these different features. So let's see where are the features. Here they are. So for example, I can use this one control C, control V. And you can see how easy creation of these websites is. Let's say this one, positions right here. Perhaps I want to use this one now. Position right here. Maybe I want to use this one right here. Like so. And let's say now comes the time for the pricing, put it right here. And perhaps something like this. I want to persuade people even more footer right here. And position doesn't matter. Afford a moment and you're going to see why in just a second. So put them right here. And let's say that now that your landing page is completed, you can select all of them, hit Control G to put them in a group and then put them in a stack. This is the vertical stack and I can put the distance of 150, for example, between them and press Enter or Return. And now we have evenly spaced space between all of our elements. I can put them all to the top of the page like this. And for example, I don't want it to be 150 for this. So I can simply adjust just this one to 0. And all of these other ones are going to have 150 for the spacing. So you can see how simple it is to create your landing page. You can double-click right here to close off it right here. And for example, let's say that the copy is ready and you want to make some changes to the images. You can simply drag and drop your images inside of here, placed him in, and then simply make changes. For example, we have this image icon right here. I can simply hit Delete to remove it. And I can, for example, lower down the opacity of my image to make it stand out a bit more. For example, I want to add additional image to here. Maybe this image, I want to add something for the video. Perhaps. Maybe this image is going to work so you can see how simple it is to work with these different images. So I can select it hit for maybe, for 40 percent obesity. Perhaps I can use a different different eye icon right here. And perhaps I want to put this to be, I don't know, something a bit rounder. So I can jump right here, type in 2004, the corner radius. If I want to do that, you can adjust this so you get the picture how simple it is to create these elements. So this is basically my structure and how my team and I are working for years on these structures. And I'm going to show you a different structure for mobile kids. And this is chatty UIKit. And you can see that we have images right here. Obviously is going to be quite simple to replace all of these images. You're just going to use exactly the same structure. So if I take a look right here, perhaps I want to adjust these images so I can select it and this one, and perhaps I can select two different images, drag and drop them inside. And I want to use this one for example, so you get the idea how fast it is. But what you can also do is click right here, and here we have all of these different elements. Now, elements are really useful. We have this main blue and I want to right-click, click Edit, and perhaps I want to change it to red. So just notice how it applies throughout all of our different changes and simply adjusted to read. I can also go Control Z. To undo that. We can also change the font size and font choices. We can change the font weights. We can change all of these different elements. So what I can do is hit Edit. For example, I want to choose some other forms like Open Sans, for example, press Enter, and it's going to apply that change throughout our design. So you can see how easy and simple that is. Also, we can have all of these different components. We can change independently. So you can see, for example, that we have these dots which are black, right here, right here, right here. So throughout our design and everything else, which is black, we want to change it to something wild, like read one more time for example. So you can see wherever we had that color, it's going to apply throughout art design. And it's going to apply wherever we had it in the first place. So that's why all of these components are extremely useful. And in the next example and in the next video, I'm going to show you how you can turn your existing design into UIKit because you're not going to purchase these UI kits where every single project, and I think it's much better approach, even though I'm selling these UAC kids, it's much, much better approach to either start with a premium UIKit just for your structure, just for this element, just for some boring elements, which you can then repurpose for your own projects and then to create your own UIKit using these elements, using these tactics and techniques, which is going to work for your particular use case. Because I'm going back to the niche one more time. Because you are, for example, in a travel niche, elements which worked for you in your project might not work for somebody who is in a blog niche, for example, because they might need different elements. So in the next video, I'm going to show you how you can turn your existing project into UI kits. 6. UI Kit creation in Adobe Xd: In this video, I'm going to show you how you can turn your existing project into UIKit and then repurpose it for your future projects. This approach can be used for different projects so big and small. And you can use certain elements or you can use all elements and then simply go on from there. You can use one type of element, for example, navigation. If that is something which is repeating all of the time in your project, or you can use different types of items. For example, both navigations, hero images, footers, blog hearts, and all of these types of items. So I'm going to show you in this example or for the existing project how you can turn it into a UI kit. So this is the project which I have created for one of my previous courses. I'm going to leave it, leave the link to it in the PDF so you can take a look at it if you're interested. So all of these elements are created in that class. So it's already 20 hours long n once again, I'm going to leave the link in the PDF so you can access it quickly. And what we have right here are different components for the colors, character styles, all of these components for all of these different cards, we have different icons, we have different structures right here. We have the logo, we have the arrows cards and much, much more. So what you can do for this is if I click right here, once again, we are at 1920 instead of 1400, like we did last time. So what I can do is click on my artboard to create a new airport. Or I can simply duplicate the existing one. What do even better, what I can do is go right here to the File. And then New, sorry if it lags a little bit because I'm running all of these elements in my machine. And this file is quite huge. So I'm going to create a new file, and I'm going to simply reuse some of these different elements in my project. Or it's an added, we had that project created. What I'm going to do is jumping right here to this website design. And I'm going to jump all the way to here, hit Control C. And then I'm going to switch to the project that we just created, hit Control V. So there I can just paste inside this design. And what I can also do is jump back to here. And perhaps I can use one other. Let's use this one control C. And I'm going to jump into this project, hit control V. And then once there we go, just to save ourselves a bit of time, what I'm going to do is I'm going to actually turn this off. So skillet, and as you can see, some elements are already paste in from our previous project, like all these different icons. But we don't have colors and character styles and we can work on them separately. What I wanted to show you is this. So I'm going to enlarge this. And let's say that I want to use this navigation, but first of all, let's use the same grid. So if I switch it on, we have, let's see, 12 columns. So 60, 82, and I'm going to do the same for this. So we have 60, 82. There we go. So it's the same as this one. And I'm going to lower down your basicity of these grid lines like that. So let's say that I want to use this navigation circle, hit Control C, paste it in right here. And what I can do is position it right here. And let's say that this is our first navigation. Let's go to our layers. So we can use, for example, Nav 1. And what I can also do is unlink it. So let's right-click. Just let me see where it is. Only component. There we go. So this is the one end. We can create it to be local component. So we can hit Control K If we want to, and we can create different states from it. So I can click right here and type in, for example, let's say big button, big btn. And what I want to do here is I just want to double-click inside and extend this button to hear and perhaps move our navigation items more. Let's say I want to align them right here, or perhaps even better in the center like this. So if we take a look at this default state and this state, we have these two separate states. So what you can do with this one is simply hold Alt in your default state. Position at right here too. I don't know, let's say 60, then use this state. And already you have two types of different navigations. So let's say I want to create another one. So we can go back to the default state, which is this one, create a new state. And for example, I can to something like without text, something like that. So in this state, what we are going to do is basically go in and remove our texts. So open up, select our text, hit Delete. So now we're just left with our button. And we can either expand this button, leave it like this. It's all really up to you. So what I'm going to do is select this one, move it to 60, and click without text. So there we go. We have our three different elements and three different navigational elements already created. But you can also do is organize these. And I really like to do that. So this is now one, this is now two. And this going to be nav three. And let me give you just one more example so we can go back to this default one and create one without a button or no btn for short. So what we're going to do is basically make a select point. So from here we are 40 and I'm going to select a button deleted and select all of our navigation items. Like so. Position them to the edge shift 1234. So we are 40 from this edge, same like we are with this surge. And basically I'm going to do that one more time. So I'm going to hold my older option, select know BTM and Terry go, I can go back to the default state and you can see how quick this is, how fast this is. And it's going to save you a bunch of time. I'm going to switch this to big button like this. So it's going to save you a bunch of time later for your future projects. And you already saw how simple this is to simply copy and paste in previous video. But you can also do for these hero images, for example. So let's hit Control C. I'm going to V. And what I recommend you to do is to rename this to navigation and to create separate airport for these hero images for example. So in this case, let's say that we have these people on this side. And let's duplicate it. Control J, sorry, Control D, like that and position it to be 60. So once again, this is going to be in separate artboards, so let's actually create that. So I'm going to remove these two. And you can position footers inside of your navigation if you want to. It's already all up to you how you want to create them. And I'm going to call this Hero, for example. Because these hero images is something that you're going to spend the majority of your time on. So let's say that for this second example, which is going to be Hero 2. So this hero one. Notice how I don't create components from these ones. I want to show you this second approach. So as I already showed you with these ones, components are obviously extremely simple to create, but you can also go without components and you can simply create these separate elements for yourself. So let's say that I want to position this text to the right. What we can do with these ones is we can position these two in a group, put them in a stack, and simply reverse Order, like so. And now the text is on this side, people are on this side. And what we can also do is use these background elements. So this hero shape, perhaps I want to flip it around like this, and I want to position it like this. And all of these different elements. So Hero Elements, I'm going to position them right around here. So you get the picture how simple this is. And I also have a mask right here with my hero circle inside. So I'm going to position it right here. So there we go. We just a couple of clicks. We have two different options which we can show to our clients. What this is going to do for you once again, is we're doing to allow you to work much faster on these projects, especially with these repetitive tasks like I mentioned. So navigation, footer images, and all of these different elements which are going to repeat all of the time, like pricing tables for example. So it's much easier for you as a designer to create all of these variations in your style, using your components, using your design language, using your preferred font, using your preferred colors, and then simply reuse these components for your future projects. Is this cheating for your clients? Know, because your clients just want the end result. They don't care how you get to that end result. Is this something that you repurposed? Obviously it is, but just make sure to not use any logos that you previously used in your project and not to use any branding. For example, certain colors in your brand books that you get with your clients. For example, some colors are trademarked, some fonts are trademarks. So just make sure to use, for example, free Google fonts when you start creating these, and then simply adapt those to your client specifications. For example, for colors and for fonts. Let me just show you one more thing. So with the power of x D, we have all of these different elements. So just imagine that we want to use this image. So Control-C, Control-V right here. And let's say that this is our first card. So let's call it card one. Lambda. And here we have the stack, as you can see. So I'm going to hit Alt. What even better? I can create it as a component. So Control K, we have this default state is with the image on the left. So new state, right image. And then simply adjusted to here. Like so. And what I'm going to do for this one is I'm basically going to just flip them around. So there we go. And I'm going to adjust this card one, I'm going to make sure that my image is right here, and there we go. So this is our default state. This is our right image. And once again, I'm going to create one more. So center image like this. And I'm going to make a change like that. So 123, so we are at 60 like that. And obviously for this one, I'm going to go with center image. So what I'm going to do is jumping right here. And I'm going to change the position my stack. So what I'm going to do is put them inside of a group. I'm going to use a sec vertical stack like this. And basically just expand the image to the edges like so. Double-click inside positioned for example, right here. There we go. Text is going to be in the center in just a moment. So let's go for the default state, and let's work on the center image right here. Because this is our component. What I want to do is basically adjusted this text. So let's go with, let's see auto width. So what I'm going to do is double-click inside and adjust this text bingo bit outside. But you can also do is create or to height and you can adjust it like this. And simply bring in what you don't need here like this. So we're just a couple of clicks. We are going to be able to adjust it. And you can do ought to wait. You can do auto height, whatever you want. And I'm going to make sure this is center aligned like this. And I'm going to perhaps position this in the center and position my button in the center as well. And make sure we are 40 from all of these. And just make sure we are because we are in a stack, for example, 64 decimal. And you can also enter it right here. So if I select my group right here, select 60, and it's selected. So there you go with just a couple of clicks. You have three different cards which you can use. So basically we have default image, right image, center image. So you can do whatever you want with those. So you can see how simple it is to create these elements in Adobe XD. And once again, I urge you to start thinking about your project, to start thinking about your niche, which are some elements which already beating all the time. Our SWOT elements which are extremely boring. Can you purchase something or download something for free which is going to improve your workflow, which is going to speed up your workflow? Or do you have to create everything from scratch depending of the neat urine, depending of your design style. If that is the case, then simply start by creating all of these regular elements like I showed you in this example. For example, navigation, footer, all of these different cars which are going to repeat in all of the time and then simply expand from there throughout time. Finally, what I want to show you is if we go back to Adobe XD, you can see that it saved this file to the Cloud. This is extremely important, especially if you are sharing this with your design colleagues, with your clients, or if you're working remotely forms, for example, you have the office and you also work on a laptop. But what I also recommend is saving this to your desktop. To do that you can simply write here to File, Save As, and you can choose as safe as local document to your desktop. What that's going to allow you to do is you can simply have this file. For example, if the electricity is gone, you can take it to your laptop and you can take your laptop wherever you want. If you have to adjust and make some quick changes, if the Internet is gone, which is really the key benefit of local documents, you can simply save it locally and simply work or not. If you don't have Internet connection. 7. UI Kit VS Design Systems: There is also one more type of template which is available online, which is called design system. And design system is basically dead. It involves different types of fonts, different types of rules, different types of grids in many other project, especially if you're working with code. So you're going to assign a different code snippets. You're going to assign different tokens for colors, for fonts and much more. So the design system is much more complex beast then the UIKit. So depending on the projects you're working on, you can create design system which is smaller if you're working on small projects or if you're working with bigger projects, I definitely recommend working with design system. But the key difference between UIKit and design system is UIKit already has these pre-made components already created. So as you saw in the previous video, we already created that navigation. So it's ready. It has the logo inside which you can swap with your next client project. It has the type inside, so everything is already positioned. You can simply rename some of these types. You can change the font, you can change the styles, you can choose the size and everything else. And it already had that button in place. So you can simply adjust the width, the height, the color of the button, the background shadow, and all of these elements. And that's the UIKit in a nutshell. While with the design system, you would have to recreate that navigation from scratch. And because inside of the design system you have much coherent structure. So once again, I'm going back to the bigger project, especially on the huge project where majority of designers are working on that same project. Then design system is really crucial because you need to have one central repository of elements to be used for all of these different designers inside of your team. While if you're working alone or if you're working with just one other designer, or if you're working directly with clients, you I get is a much better solution in my opinion, because once again, it's going to speed up your workflow massively because you have all of these elements already created. You don't have to create them from scratch all of the time. While designing systems are extremely important, extremely valuable, and extremely useful, in my opinion, for these smaller projects, you don't really need to create these design systems because you have the components. So you can simply adjust the components. You can simply adjust the font size. You can simply adjust the font family. You can adjust the color. You can adjust all of these different elements, for example, icons. Let's say that you're using these image icon throughout your design and you just want to swap it out really quickly. Well, you can create a component and the next time on the next project, if you want to change that, you can simply drag and drop a different icon inside is going to swap that components. And there you go. You don't need a design system for all of these small projects. So once again, it depends of you what kind of projects you're working on, what kind of niche you are in, especially for these small niches, these design systems are not really that useful. Once again, it's all up to you and I'm going to leave the links to some of the most well-known design systems in a PDF, you can download the XD version. You can open them up in Adobe XD and you can simply explore what are these design systems and what you can learn from them. Because all of those are created by big companies. And once again, those big companies created those design systems because they have multiple designers working on a team at the same time. So they need that central repository of elements to be used by all of these different designers. Otherwise, if you are just one man band, if you're working with smaller projects, you can simply use UI kits and it's going to be just fine. 8. Premium VS Free UI Kits: It's all well and good to create these UI kits for yourself by yourself. But it's sometimes may be easier to just simply go ahead and download or purchase these different UI kits which you're going to be used for your future projects, perhaps for those boring elements like we spoke about previously, like the navigation, like the footer, like the pricing tables and so on. So where you can find these UI kits, I'm going to show you in the next lesson where we're going to actually discussed selling your own personal UI kits on these websites. But basically what I wanted to share in this lesson is these premium UI kits are made with just dumb brand in mind. I mean by that is there is no certain connection between debt UIKit and a certain brand. You can just imagine that if iOS release their UIKit is going to be specific to those branding guidelines, to those great guidelines, to those topography guidelines and all of these different elements which comprise of that particular UIKit and of that particular operating system in that case. So it's the same. If Facebook, for example, launch their own UIKit, it's going to be recognized by that blue color, by debt font and all of those elements. While with these premium and free UI kits, which you can find online, there is no certain brand in mind. Why is that? Because it's meant to be used by other designers. It's going to be quite simple for you to change the colors, to change the fonts and all of these elements which you spoke about before. So that's the whole point of the premium or free UI kit. Now what's the difference between free and premium UIKit? Obviously, number 1 is in price. Free UI kits can be downloaded for free, obviously, and the premium can be purchased. And the key difference, in my opinion is number of elements. Usually these freeway kids just come with ten or 20 different elements. While premium UI kits like the quantum UIKit, especially that I showed you before, comes with, for example, 11000 different elements. Also, there is difference in file types. For example, with free UI kits, it usually comes with just one file type. For example, there'll be XD or Adobe Photoshop or Sketch or Figma or whatever. While with premium one's desires are usually striving to include all of these different file types. So no matter what you are using, you're going to be covered. Also, there is a difference in differentiation of elements. So in free you, I guess you're just going to simply get, for example, 23 categories. While with premium UI kits, you're going to usually gets 10, 20, 50 different categories. And finally, I want to mention support. If something breaks, if something doesn't work. Week three, UI kits, basically, who cares, It's free and you're not going to get any support from the designer. While with premium markets, especially if you're buying them directly on their website, you're going to be basically entitled to the support. And you're going to be first in line to get help from these designers who created these UI kits. So in the next video, I'm going to talk about selling your own UI kits. And we're going to basically browse through these different websites. And I'm going to show you where you can get the premium UI kits for yourself. And you can also sell your own UI kits on those particular websites. 9. Creating and selling your UI Kit: When it comes to buying premium UI kits online, or when it comes to selling your own UI kits online. There are just a handful of websites where you can successfully do it. There are many different websites out there. And my advice as somebody who is in this for six years is don't try to sell everywhere because you're just going to leave yourself tin. You're going to spend too much time wasted on these websites which are not going to generate your sales. Followed this advice. Follow this video from somebody who has done it for, as I said, six years now and I have or 100 thousand sales on all of my different products. So I should know a thing or two about where you should sell and where is it profitable or not. So in this video, I'm going to show you, as I said in a previous video, these websites where you can buy premium UI kits and where you can sell your own UI Kits. Now first of all, why you should sell your own UI kits in the first place. Actually, it's just a good sense to do so, and it's just a good source of additional income for yourself. If, for example, you have created a nice looking UI kit for one of your previous projects. You can simply expand on it using the tips and techniques we spoke about earlier and simply prepare it and sell it on one of these different websites. You can put it up for sale for the price of which is represented on all of these different websites. You can simply adjust for the market price. You can explore what other ones are doing and simply adjust for yourself. So if you have, for example, 100 elements in your UI kits and you're offering just one file type, which is Adobe XD, makes sure not to charge too much because you're competing against somebody else who is creating it in Adobe XD sketch Figma for the shop. So perhaps that your kid is going to sell much better than your UIKit because they're offering all these different file types. So let's jump inside and I'm going to show you all of these different websites and where you can sell your products. And first of all, cell hosting. So basically self-hosting is where you are hosting the products and you are in charge of bringing your customers in. So you are in charge of promotion, you are in charge of sale, you are in charge of delivery of everything else. And they're also marketplaces where you can sell on all of these different marketplaces and they are doing all the work for you. So let's start with self hosted in basically the website I'm using for years is gum road. You can adjust, you can upload all of these different products. You can create custom links, custom discounts, custom colors. You can create these different call to action buttons, like it says right here, start selling or buy now, or purchase now, whatever you want. And you can basically tie this up with beacons presentation, with dribble presentation, you can simply take your viewers here and they can purchase from your camera shop. Or you can do what I did with my team is create a website. And on this website you can create, for example, UIKit. And let's say that you can see UIKit right here, your kids right here. So we have a bunch of them. And let's say that users want to purchase this one, for example, they can simply click. It's going to take them to the specific page for their product, which is going to have. The description right here, what's included? It works in which software and when I click Buy Now, it's going to take them to the gum road page. They can simply click, I want this and they can purchase this product. And as you can see, it's quite simpler to go from website to hear. What you can also do is integrated sale. What that means is when they click Buy Now, one window is going to open right here and they can purchase straight from there. But just make sure to understand if you're using Gmail, especially, and you're using something like Google Analytics for example, those two are going to crash. So basically just make sure, and that's why I say it redirects you to a secure buying page. So I'm going to go right here. As you can see, gum road is really secure as it is my website, but I just want to have that additional layer of safety because people are leaving their credit card numbers, they are PayPal e-mail addresses. So I don't want anything to happen to that. So basically that's my opinion. You also have a website called sulfide, which is basically quite similar to gum road, but in my opinion, gum road is there from the beginning of this online game and you can, as I said, are adjusted to fit whatever you are doing, whatever your product looks like, in this case, UIKit, but you can sell all kinds of different things. Now let's move on to marketplaces. And I'm going to show you which are some of the main marketplaces out there. And as I said, you can explore all of these other marketplaces, especially when you start selling, when you start getting traction. All of these different marketplace people are going to approach you and say that they have this revolutionary new website which is going to bring you so much money. You are not going to know what to do with it, but just don't listen to them. Make sure to start selling on these major websites and then expand to the small websites. But just with one product at a time. If you have 500 products like I do, it's literally impossible to upload all of those products to all of those different websites. And why should you even want to do this if they don't have, for example, a million different sellers or if they don't bring you enough sales. So to get started, what we have is Envato market and this website is Graphic River. Inside of that you have Web Elements and you have user interfaces. You can jump inside of there. And you can see how some of these different products look like. As I said previously, you don't have to sell UI kits. You can sell whatever you want. But this class is all about UI kits. Next, we have designed model and these guys are fearlessly selective about what is able to go on their website. And you can see that all of these elements are really high-quality, really top notch, especially for these UI kits n, For example, if I click right here just to show you these different presentations because you are working with them to create these presentations. You can see they are really fullscreen. The real look polished, the really look professional. They really look high-end, and that's the key thing about them. And I think that you can also add a different animations when you're creating with them. Next up we have Creative Market and basically graphic river and Creative Market, or are there since the beginning of time. And you can browse through all of these different templates. So let's go with web templates for example. You can see how many of these there are. But if we go with templates and I go with Let me remind myself where all of these are. So graphics web elements. And if I click there, we can filter through. So let's go with Adobe XD. And you can see all of these different elements for Adobe XD. And we can even for filtered this further by going to template social media websites. And we have wireframe kids, for example. I can select that. And you can see wireframe kids, how they look like, how much are there? Here are mine. And you can browse through them if you're interested. And that's basically it. You simply go right here and see what these other designers are doing C, which of their categories they are using, C in which software they are creating these wireframe kids, your kids and so on. And basically start from there and explore what works for you. Finally, what we have as well is UI 8, which is well-known in the industry. They are also high standard, high-quality, and they're really frugal when it comes to selecting who's able to sell on their website so you can check them out. I really recommend them. Finally, we have Envato elements and we have designed bundles and water elements is just the part of Envato market. So you have to apply separately to sell on Envato elements. But once you do, you are basically paid by the amount that somebody downloads your product. So if I search UI kit for example, you can see all of these different elements. And basically the difference between this marketplace and all of these other marketplaces is except for UA because they have all access pass, but they have limitations on how how many items you can download per week, per month, per day, and so on. While Envato elements does not have any limitation, you can now load whatever you want, wherever you want, and you are paying a yearly subscription rather than three months, six months, one month, whatever. All of these other ones are basically just pay as you go. So if you choose to purchase this product, for example, you just purchase it. Or if you choose to purchase my products, you can simply purchase it. And same story with all of these other ones, and same story with gum road, but Vidkun road, you can choose to create separate bundles. So if we go back to here, I scroll down, for example, I can create UIKit bundle from all of my products. And I can choose to create massive iframe bundle, like a half done. And you can do that quite easily inside of gum road, while you cannot do that in all of these different websites. Now going back to Envato elements, as I said, you are not earning money for a separate products that somebody else purchase, but you're earning money. But how many of your products somebody downloaded and also how many downloads that do you have in that category for your contributor bonus? So for example, how many of these different products that you have in majority of these other things. And once again, if you're interested, you can simply browse their website. And once again, here is my product and Austria UI kit. And finally, I want to share design bundles with you, which is one of the newer websites in the industry, but it is worth pursuing because here you can also sell all of these. Hey kids, like we mentioned, but they also have different bundles which they are running from time to time. And basically bundle is something of a package and you can purchase a bundle. For example, 10 different designers have 10 different UI kits. They use all of those you're kids put them inside of one package called the bundle slash the price down really hard and then simply marketed like crazy. And basically that Mundell is going to bring few thousand sales and then discipline divide that money from that particular bundle throughout these designers, usually what happens is there are two different models. Either 50, 50, 50 goes to the design bundles. In this case in 50 goes to all other designers. And there is also a model 50 and the rest, 50 percent goes to the design bundles, and the rest goes to whoever has the biggest UIKit gets the most money, who has the smallest joy kids gets the smallest amount of money. So basically depending of the website, depending of the deal, depending of the bundle, you're going to get a certain percentage of the money. I'm going to create a separate course in the future, explaining, explaining how to prepare presentations, tags, how to prepare descriptions, how to choose your targeting, how to best describe your product, how to create these shot lists, how you can create these cover images and all of these elements. Especially I'm going to talk about support, why support is important, how you can get around providing support by providing a good description and by providing a good product in the first place, what makes a great product and so much more. So if you're interested in that class for the future, just follow me on social media or you can leave me a message. You can follow me here wherever you're watching this class and basically just stay tuned for the future. And you can also follow my YouTube channel. I'm going to leave a link to it as well. In the PDF. I'm putting all kinds of Adobe XD content out there. So if you're interested, make sure to follow me there and I'm going to announce that class in the future. 10. Your class project: Your class project for this class is to create your own UI kit. You don't have to create majority of these elements, so you don't have to create 50 different elements. You can just create one or two or three, maybe five elements. So you can start, for example, with navigation, with hero image, and then you can go on from there and you can simply save it as a JPEG image and upload it to the class projects. I would really like to see what you guys can come up with and just to practice creating UI kits for the future. Because as I said, once you start doing this, you're going to appreciate it more and more because it's going to save you a bunch of time in the future for all of your future projects in is going to allow you to work on your projects much faster. So as I said, I'm looking forward to our class projects and really excited to see what you guys can come up with. 11. Conclusion And Resources: Thank you for watching this class and I really hope you found some value in it, and I really hope you understood how you are. Kids can really help elevate your time spent on these projects. How they can improve your workflow, how they can increase the time you spent with your family, with your friends, and decrease the time that you spend in these projects. Once again, start creating UI kits. Small style, started creating them a width. All of these elements that you are going to use in all of your projects. For example, navigation footer, pricing tables like we spoke about before. And then you can simply add an adjust and include different elements. And that's why Adobe exist so great. And I showed you in the previous video how you can easily create your own UI kit and make sure to adjust it and to change it as you go along. And what's most important of all is to find your style. Some designers don't like to create components. Others are swearing by components. So basically whatever you want, whatever you are into, whatever it feels the most comfortable to you. Use that technique, use that approach to create your own UI kit. Also, make sure to select your niche and make sure to explore your niche and to see which types of elements your niche requires the most, as I explained in one of the previous video, it's not going to be the same for everything. Some blog websites are not going to use shop websites elements and vice versa. Of course, there are going to be elements which are cross compatible with all of these different niches. But in majority of the cases, you are going to create for a specific niche. So make sure to do that once you start creating your UI kit. One more thing to mention is resources are going to be in a PDF, as I explained in the previous videos, simply click the link that interests you. It's going to take you there. It's inside of that PDF. And I wish you luck in creating your UI kits. And I really hope that they're going to save you a bunch of time like they did for me in all of your future projects. Take care.