Learn UI UX Design With Adobe XD

1. Intro of adobe xd: Hello everyone and welcome to our class of Adobe XD for learning I. If you're planning to learn user interface and user experience from the beginning, then you are in the right place. Because we'll cover in this class from the basic to advance. This is beginner level class. If you have no previous experience, then you can join this class. Let's take a look at what you learned from this class. Introduction, workspace and interface. Then we'll learn about basic tools and low fi wireframe in Adobe XD. How to use type option in XD using shapes in XD Stroke. Copy and paste free icons to use in projects and existing UIkits. Grouping and editing icons, prototyping in Adx D, animation, how to share your word frame and comment. Also, we'll be learning creating moodboard coloring in AdobXD and images in OobXD. Lastly, project on how to make web page design. After completing this class, you will be able to make your own mobile app and web design. Make your own color gradients and color palettes gain a good knowledge coloring in web designing. Do the prototyping, select images to make buttons and also make the style of the web page. This is a project based during learning, you will have class projects. What you learn, you will be able to participate in class projects, so you can do practice while you're learning. You'll have supporting resources in this class, so it will be easy for you to learn during learning. If you guys face any issue or if you have any question, then feel free to ask me. I'm always there for you to help you. Let's start learning XD for YU X together. 2. Introduction, workspace and interface: Hello everyone, and welcome you all to the tutorial on Adobe XD. Here this is the first chapter, and here we'll be learning about UI UX designing. Okay, so in the first chapter I'll be telling you guys what Adobe XD is and how it is different from any other UI UX design software available in the market, okay? Then I'll be telling you guys about the workspace and also the interface of this particular application, okay? How you can actually one how to work and how to start making your first mobile app or a web page. Okay, let's not waste time and let's get started with this UI UX designing together. Here you guys can see that I am in the home page of Adobe XD. Here you guys can see if you're familiar with other applications of Adobe. You guys are familiar with this workspace, okay? Whether it is a hotel shop or it's in design, or Illustrator, or after effects. This particular home page, it's quite the same. Okay. On top of the left corner, you guys can, this is the logo of Adobe XD. Okay? So this is the logo after that. From here, you guys can make a new file if you did any work previously and you have saved that one. If you click on Open, this type of menu ba will come from where you can get access to your system. And from here you can basically choose which one you want to open. Okay, I'll close as one and here is option like it will take you to web page from where you'll know how to get started with this particular application. Okay, so from here you guys can see there are a few things which we can learn. Here are tutorials, few of the user guides, and few of the common issues that you can face. They do have the solution for all that as well. Okay, let's go back again to my de page here after that. If you come under the files option. In the files option, you guys can see if I do have worked anything or I do have anything saved here. As you guys can see, I do have one file here in which I worked previously. If anyone is sharing this particular work with they want to work in this X D together with you that you can also work, they might share with you like share some file with you. From here, you guys can access all those from here. You guys can manage links if you have put any links in your work before. From here you guys can view, but I don't have any for now. It is just taking me to another page to just show me that I don't have any links shared. Okay. I'll just go back again. Come to my X D from here, you guys can see if you have deleted any file from here. Okay. From here you guys see the deleted file. Like if you want to recover, you guys can recover. But within 30 days it will be permanently deleted if you are putting your work here in the delete option. Okay? So you need to recover that before 30 days, okay? As I'm using the start up plan, they're telling me to upgrade from here you can get access to all the recent files you have worked or you have viewed. Okay, from here I'll be showing you guys how you can open a new file or how you can create one. Okay, here, suppose I want to create a new file. I can just click on this one, Okay? Here, this the workspace. But as I've just selected that one, this web 1920 by 1,000 ATP. This one is the default frame size, or the artboard size, okay? From where we can start working. But for me, basically if I want to do anything in that case, like if I do have a particular size in mind for which is it a mobile app or it's a web app for what I'm creating. In that case, what I can do is I'll come to my home page again. In my home page you guys can see I do have different type of presets here. You can see I do have different here like for iphone, for Google Pixel ipad. If you're doing it for any web page, you guys can do for web page as well. Okay, come here again. If I just drag this down here, you can see for the web page also, I do have different sizes. If you're creating an Instagram story or any Twitter post, Facebook post or Youtube video, you guys can use this particular preset from here. If you already do have any size, you already know the width and the hype. There are many websites. From where you guys can get the screen sizes. Like from there you can see the width and the height according that you guys can put here as well. You can also save this customized size from here. Okay, I'll be showing you guys how to create an artboard here. As you can see, now I am in the workspace here, Okay, This is the basic workspace from where you guys will be working. If you want to go back to your home page, you guys can come back here or click on this home button. Okay, I'll close this one after that, Let's get to know what all pages do I have here. Okay, so here you guys can see this one is called the tool bar. From here I'll be telling you guys about all these tools, what all we can use after that, You guys can see I do have the option for prototyping. Okay, I'll be telling you guys how to prototype as well. Beside of my page here, you guys can see if I just zoom out. Okay, let me take another presets here. Okay, let me take artboard, let me create one from here. Let me come here and I want to create a artboard. In that case, what I'm going to do is I'll select, I can basically create different artboard. Let me show you guys by creating one, come back to your design file. From design file just here, you guys can see Artboard option. Once I have selected this artboard here, you guys can see I do have different templates or different presets. Let me take iphone 14, Pro max here. You guys can see I do have one artboard here. Basically, artboards are like frames or the same thing. Okay, if you're using Figma or if you're familiar any other UI UX designing application, then you guys will frame an artboard here in X D. It's quite the same. Using this tool. I will just move this one here. This is the option for prototyping. Suppose I want to prototype this with this one. I can do that like this. Okay? After that, I can just delete this one again. Go to the design option. Okay, I hope you guys have understood how you can basically create artboard. Here, you guys can see this is the layer of artboard, okay? From here I can basically view, okay. This is called the panel, okay? So this can be called the design panel. Here. You can also do prototyping and also if you want to share in the file, you can share the file as well. This is the design panel after that. Here you guys can see I do have different options. Okay. Here. This is the library from where we can take out different colors. If I want to add any color I can add. If I want to add any character styles, I can add from here. Okay, Different components, videos, whatever I will put here in this box will appear here. Okay, let's see about different plug ins. Okay, here you guys can see I can get to a plug ins here. Plugins are basically a place from where you guys can actually import different type of images, icons, web design, and so many things which we can do. Let's see and let's discover our plug ins. What all we have, it here. Okay. If I click on that, you guys can see I am being redirected to auto page here. From here you guys can see what all do I have, okay? In what all application. I can use those if I want Were frame, a lot of wire frame templates. I can take the Were framer here. You can see if I want any icon, three day illustration, I can take this Icon Scout. I'll get this one. And here they're asking me for some recommendation, or they're asking me for a permission. I'll click on. Okay. Because I want to use this Can Scout here. Okay. Here you guys can see many more. I do have this one icons for design here, you guys can see, you can actually download basically up to your need. Okay? Whatever you need, you guys can take it from here. These are a few of the resources. Now if I go or come back here again, this is the icon Scout From here I can click on next if I want to log in, or if I want to sign up, I can do that as well from here. Now I have successfully signed up. Also after you sign up, you guys can see this is how it will actually look. Okay, this is the page here. From here, you guys can choose. Okay, if you just want the free one from here, if you click on free, here are all the icons which you can use for free. Okay, here are different icons which you can just put. Let me just put one and show you guys and the. There are many packs if you want character, if you want any social media icons, any theme like Valentine or for Christmas, any NFT's, you guys can get access to all of this here. This is the use of plug ins, how we can get different icons according to our use. I'll just go to individuals again. From here I'll be taking one on. Suppose I want to insert this. Okay, Now they're asking me, do I want to import a small PNG file or just a basic PNG? Okay, here the scout is working. So that import my image in the autobXDbox or inside my frame, okay? Instead of that, it might take a little while. I'll stop this one and I'll take this and I'll just insert the small PNG. Okay, here you guys can see I do have this icon on my frame here. I can resize this. And if I zoom in, you guys can see this is how I can basically work out. If I want to make any pages or any web page regarding whatsapp, I can use this icon. Okay. I can also search different type of icons if I do have any relevant searches here. I hope you guys have also understood the usage of plug in here. Okay, here I do have the were frames as well. If I want to download anything, I can actually get started. If I click on Start here, you guys can see I do have different frames here which you can use for your work as well. Okay, you guys can edit those. Let's come back from the plug in option. I'll just close this one. I hope you guys have understood three of these things as well. This is the basic toolbar. Now let's come here and let's go to the art board. Okay, From here, basically this one is called the control panel. Okay? Whatever character or whatever object I choose which is present inside this frame, I can actually transform those width and the height. If I want to change it individually, I can do that rotation. And so many things which we'll be learning in the later stages of the class. We can also change the opacity. Increase the opacity, the blending mode and different type of effects are also here. Okay, if I want to export that particular thing, I can just click on Mark For Export, and I export those as well. Or if you want to just select a page from here as you can see. If you select a particular page, you guys can get access to all that, Okay? If I want to change anything or if I want to change the width, height, or if I want to change the color, I can do this from here. Okay, This is the way how we'll be working on this page. Let me just go back again. I want to keep this in white color, hope you guys have understood this much about the control panel as well. Here I do have the share option, okay, so from share option I can actually send them the link. Okay, I can basically create a new link. From here I can also set the view settings. Okay, from here, how I want to use them, like will they be able to do any work here? Like will they be able to design and who all will have access to the link? Okay, only invited people. Only one with password. I can set password as well. After that, if I create link, a link will be created then we can share it to my colleagues or my client. Okay, here if I want to get any preview from the device, I can use this option. Like after I finish making a mobile app from here I can get the preview, or I can test it. Okay here. Another option is zoom option, okay, As my screen is now in 30 degrees. If I do it 100, you guys can see how it will look. If I do it 50% this is how it actually looks. Make it 33, This is how it will actually look from here. This is how we can basically work. Here is another option is like Desktop Preview. Okay, if you want to see this one in a Desktop of web page, okay, I can click here as well here. If I want to save this document in my creative cloud space or in my creative cloud, then I can also save this one from here. Okay, It's the easy way of doing this. Now if I click here. Okay. From here I can also change the name. Okay, let me come here, Let me just unmark this one. Come to the design option. From here, I can actually change the name as well. Okay, if I click here. Yes, from here you can save this as you want. I hope you guys have now understood about the workspace and the interface. Now you guys are quite familiar of how to start working on this application. I have explained to you about the workspace, the interface, and what this Adobexd is. Basically, as I've already told you guys, can create UI UX design and also test it from here as well. Do the prototyping. After the ending of this tutorial, I'll make sure that you guys will know how to make your own design, how to make your own mobile application. As we also do have class project we'll be learning and at the same time we'll be practicing those things as well. See you all in the next class where we'll be learning about all the basic tools here in the toolbar, which you can see. I'll be telling you guys how you can use those. After that, I'll be also telling you guys about low fi and the high fi were frame. Okay? Tell them, take care and see you all in the next class. 3. Basic tools and lofi and hifi wireframe in adobe xd: Hello everyone and welcome you all to another chapter of Adobe XD tutorial. Okay, so here in our chapter number two, we'll be learning about the basic tool. And I'll also be telling you guys what a low fi and a hi fi were frame is. Okay, so I've got two of those. I have got one low file application, and also I'll be showing you guy a hi fi were frame in this particular tutorial. So let's not waste time and let's get started with this UIUX designing together. Here, back again at the workspace. Okay, now let's try to understand all of these basic tools which I do have in my tool bar. Okay, let's start. This is the first one. This is called a selection tool selection tool shortcut is V from our keyboard. Suppose if I select this, if I now click V on my keyboard, it will be turned into a selection tool. Okay, from here. As you can see, after that, using the selection tool, we can basically move around. Also, we can select any particular item if we do have it in our page. I can also change the workspace size as can maintain. And here you can see I'm changing the height from here. And if I change the width, it will look like this. Okay? Once we are working here, we guys won't be able to move if I just tap here. Okay, If I do have any content or any object inside my frame here, okay, In that case I need to select this one from here. I can basically move, okay, from the name I will select and I can move around my frame from here. This is one. And I can also rename it from here. Suppose to not get confused in which frame, or this slide I will we or prototype with another one. In that case, I can rename it accordingly. Now, I hope you guys have understood about the selection tool. And you can also scale this up if you want. Okay? Now, this is called the rectangle tool, just underneath the selection tool. The shortcut key for that is R on the keyboard. Okay, if I come here, I can make rectangle box here. You can see I made rectangle box here. I will select this, I can delete that one. Now I do have the selection tool. Using this, we can basically change or change. As you can see here, you guys can see the change in the shape. We guys can do that basically from here using this rectangle tool. Okay? I can also decrease the size, increase the size. If I want to scale this one up, I can do that here. If I want to rotate, I can rotate this as well. Okay, This is how we can basically work with this tool here. I hope you guys have understood much. Now let's move on to the next tool, which is the circle or the Elipse tool, okay? This one is the Elipse tool, and you guys have already understood using the ellipse tool, you guys can create a circle, okay? This is how you guys can create a circle. If you want to create a new circle like proportionally, you just need to press on control shift and you guys can make a proportional circle here. Now, you guys won't be able to change the shape. As you can see, this one is proportional and this one is not, okay? This one is not. I will delete this and move circle here in one side. Okay? Using all these, we can make our buttons. Any designs if you want to do, we guys can do that. Here is another shape too, which is the polygon. Okay? Basically I can create a polygon here. As you can see from the options, as you can see, there are a few options. Using that, what I can do is I can change the strength of the corners or just decrease the strength of the corners. This is one way I want to just move this down or shrink this down. I can do that. If make it like this, this type of icons, I can do that from here. I can scale this one up using selection tool. I will put this one here. Yes, this is fine. After that, let's try to see here about the line tool. Okay, line tool is basically used to create lines. Like if I want to create any line from the corner, I can actually change the length or the positioning. Okay, here once this is in the middle, it's showing me like that, but now I'm diverging from the line. It will show me like this. Okay. This is how we can actually make a line from here. If we take our selection tool, I can basically move in or move out as well using this tool from here. Now this is one way of using the line tool from here. I'll be telling you guys in detail about all of this, like how you can change the stroke or how we can change the stroke color, the field color, and also the strength or the width of this particular line here. How you can change. Okay, I'll select all of this from here, I will delete, hope this all was clear till this much. Okay, Now I'll be telling you guys about Pin tool, okay? Using Pen Tool, you guys can create different type of animation and also different type of logos, okay? But Pin tool is quite tricky. Let's use the Pen tool here. Okay? Just, I'll show you guys a basic use that you guys can understand, how you can use those in your word here. I'm just making a shape according to myself. I'll make a shape here. And here I do have a particular shape. Okay. What I can also do is if I want to change the size of this one, increase the length here, bring this one somewhere here. I can do those as well here. As you can see, I already made a logo from here. Okay? This is one way how we can do that. And we'll also learn how we can basically fill this with colors from here. These are some options, you can make it according to your want or how you want it. Pento is quite helpful. After that, I also do have the option for the text. Okay. Here as you guys can see, I have selected the text option or the text tool. Now I do have my cursor here and I have clicked on this frame. And now I can write things according to my need. From here. What I can do is I can select this particular layer here and I can resize this, or I can change the size. Suppose I want 60, I'll click Enter, And here you can see the letter size or my font size. Here I can write it like that. Here you can see whatever objects I have here in this particular frame or the artboard. You will have these layers here. Okay? If I just go back here, you can see this one. I can also greene this particular artboard From here, I can basically come up here, and once I select this, I do have all the objects in this as well. Okay. Here, if I want to hide this one, I can click this. If I want to log this one, then I won't be able to change positioning or anything as such. Here I also do if I just want to export this particular writing from here. I can export this as well. Like if I want to use this particular same thing, or the same button, or the same design in other page, I can do it as well. Like if I want to use it in other applications while making any poster, I can use those as well. I hope this text option was also clear. I'll delete this as well here. This is how you can make Db, which I have already shown you here. You do have all these presets. Don't want preset, you can just come here and make art board of yourself, of your own size. Here, I do have the board from here, I can basically change the name. Okay, I can do that as well. Okay, after that, the last option in our toolbar is the zoom in option. Okay, If I click here, you guys can see I can just zoom in. Okay? This is the option for zooming in. From here. I can copy anything, or I can just move around. I can move around as well. Okay, This is the option for zooming in. If I click here, you guys can see I have also shown you guys different ways of zooming in. Zooming out, okay, here is another option. Or if you just press on your keyboard and with your mouse also, you can just zoom in, zoom out, It depends on you. Okay? They do have different functions for doing the same thing here in this application as well. If you want to move the frame, totally like the whole frame or the whole page, you guys need to just click on Shift from your keyboard. And using the mouse, you guys can now drag in here on my keyboard. You guys can see. Now I do have a hand sign. Okay. This is called the hand tool. Okay. Using hand tool, I can basically move around with my selection tool. I can't do this one. Okay. With selection tool, I can select any particular frame and move it around the page. But to change the positioning of the whole page, I can shift. And after that, with my mouse, I can just move around. Okay. I can also zoom out using control and mouse. I hope you guys have understood about all the basic tools. Okay, now let me show you guys. Hi. And what is a low fi were frame? Okay, there are two kinds of wear frames, basically. The first one which is low fi, the full form is low fidelity. We frame Hii is high fidelity were frame. Okay, let me just open up a file. Come here. And from here as you can see, I do have this page here, okay? Now this one is loading. This will be an example of how does a low page looks like here. I do have all these frames here, okay. Now zoom in one frame, okay? And I'll tell you guys why does they call this one as the low five. Okay, I have just increased this one here. Basically, they didn't put anything. This one is just a prototype which if you like, suppose here you guys can see I do have the side in options, sign up options here if you like the design and everything, you guys can make this one only as Hi Fi were frame. Okay, this one is just an overview if you like the style and everything here, you guys can actually check out the styles and everything from here. As you can see, after sign up, he'll have options here and all this here. You can see on top he have renamed this as well on boarding. Okay, this will be the profile here. Basically, you just need to put those things as I have shown you. This one is the low fi one here. You can actually edit all this as well. If I don't want this one, then I can just click here and delete. I can put different styles as well. Here you can see I can the cornering as well from here in this icon if you see. Or I can change the size as well. Okay, this is one way of doing a lo fi. First, creating a lo fi showing it or just keeping it for recommendation will help you to get a better knowledge about designing. Okay, here comes the L one. Okay, Now let me show you guys high or high fidelity. We, if I show you guys, you guys will be able to understand and differentiate between a hi fi and low fi wire frame. Now let me go to my home page again. From here I'll be opening up a page. I'll go to downloads, or I'll go to my desktop here. I do have this one. Now if I go to any file, this is a PSD file. Let me just search it and show you guys. Now I can show you guys the high fidelity wire frame. This one is a dark high fidelity wire frame. You guys can see this one is the high fidelity Were frame from here. Basically what they did is here, as you can see, all these buttons and all these designs and icons. So this is just based on, or made on the basis of the low fidelity were frame. Okay, By the use of a low fidelity were frame. This one is made, okay. Now, this one high design, okay. From here I can also basically edit this one. The main thing is that they took a low fi thing and they have here the hi fi were frame is a direct link between the user and the work. Okay? So they'll see this particular thing and the UI, UX designer will try to make it more user friendly and will directly deal with the interface or the experience of the user, okay? This is what they'll be able to see, okay? The user never gets to see the low fi okay, or the art frame or the workspace. Okay. This is made based on a low fidelity We frame. But now this is the end product. It deals with the particular set of customers or the targeted people. From here, I can actually add different buttons. Now this one is quite done and now you can give this particular work to your coder and explain them what you want them to do. Okay, I hope you guys have understood. As you can see this one is just a small were frame of a cryptocurrency app, I guess. Yeah, I hope you guys have understood this class. Hope to see you all in the next tutorial where we'll be learning about how you can type in adopt were frames. Okay. Hope to see you all in the next class. Till then, take care and goodbye. 4. How to use type option in xd: Hello everyone and welcome you all to another chapter of Adobe XD tutorial. Okay, so here in this class we'll be learning how you can use text option in X D like how you can basically write or make a text box. How we can actually manage those. How we can change the kerning, also the letting, and also other font size. And also the font styles as well. Okay, so we'll be learning in this class all about these things in detail. Let's get started with this particular class now. As you guys can see, I'm here in my workspace or in the home screen, but now I'll go to my workspace from here. As you can see, I do have a page here by default. Okay, I'll select this one and I will just delete this. Now, I'll be creating on my own from here. Okay, I'll come to the Artboard. Let me this Samsung Galaxy S ten size. With this selection tool. I will move this one. I'll create four of it. Okay, I'll keep this one here again. I'll pop another one here. I will have four screens here as you guys can see. I can also rename it from here if I want to. Okay? I'll just put this as one. This one has two, this one has three. This one as four. Okay? I do have this named as well. For now. Now, let's try to understand how we'll use our text option here. Okay, let me a little bit now here, there are two basic ways, okay? So the first one is if you just click here with your mouse, once you select the text option, okay, from here you can just type anything as you want. Okay? So it can go outside the box as well. Okay, So this is one way. Now, another way is if I create a text box. Okay, let me just go back, dielect this. Now, if I create a text column here, as you guys can see, I can create a page here. Okay? Or a text box. Now, I can actually put text inside this particular box. Once it reached the certain level which I had created the box, it will automatically go down. Okay, here you guys can see, okay, I'm filling my box here. It will just extend on the vertical side. This is one option of how you can do that. Now I'll select this text box again and I will delete this. Okay, so again, let me just write something here. So maybe I'll write Roberts Toy World. Okay, so I'll write Roberts toy, Robert, Toys Toys World. Now I do have this particular sentence here. What I can do is with my selection tool, I can select this here. You can see I can bring it in the center. Okay, maybe I'll keep this one here from here. Again, what I'll do is as I'm making a toy world page here, I'll just put up my marketing message. Okay, from here maybe I'll create a box. I'll choose the size from here. As you can see here, I made a box as well. Okay, I'll just type marketing messages to be drop down here. Okay, I do have this and now I'll select this. After that, you guys can see here are different options. Okay. Here. If I want to bring it in the center, I can do that. And if I want to go or align it to the right, I can do that as well. Okay. I'll come here again. I can also increase the size from here. I will change the size of the box. I'll select this text. Now what I can do is Click on control shift and I can increase the size accordingly of this marketing message. Okay, I'll just keep this one till here. I'll decrease the size here as well. Okay, This is one way how we can do that here in this particular now, I will change this for that. First I need to select this one from here, you guys can see I can change the font type. Okay. Here I do have different font types here you guys can see if I select that, I will be able to get those types. Okay, I'll take this one. I will go for the basic Calibri. In Calibri, I'll choose the bold italic. Now, I can also change the size from here as well. Okay, let me take 30 here. You can see here is the title. Okay, I'll select this one from here. I'll put it in one corner or on top. Okay, From this end. Basically what I can do is if I select again all the text, I'll select this again. From here I can double click this and here you guys can see I do have few options here. Okay. Here. As you can see, if I come here and if I type like 50. Okay, First select and yes, 50, I'll click on. Okay. So here you can see this is the option, the line spacing, if I do have two lines here, okay? Or I will apply in this one here. If I select this line spacing from here. Okay, 18 here, you can see the line spacing increased in between. Okay, here is another option is like water spacing. I can increase that if I increase it by five. Here you guys can see. But as you can see, I do have this option. I'll just frank this down again. Now, here I do have many more options as well. Okay. Auto, wind. You can see if I click on auto with how my text box is changing. Okay, If I click it on the center here, you guys can see here. As you guys can see as well. Okay, here are different options. I hope you guys have understood this is the paragraph spacing. Suppose I do have this one here. Now I want to increase the paragraph spacing. I can do it from here. If I just make another text box here. I just fill this with simple text, okay? And now I'll create another paragraph. Now as you can see here, Okay, here I do have this and here you guys can see. Now I want to do the paragraph spacing. In that case, what I can do is I'll select this box from this box here, I'll come down, and now you can see it's ten. I will do 30. Okay? Here you can see the spacing between the paragraphs changed here, okay? I can also increase the size. The paragraph distance will be the same, like will be the same, but the words will move out. As you guys can see. I'll delete this one again. I hope you guys have understood till this much. Okay, So the first thing you guys need to do is like you guys should not do any changes with your words much, okay? But just select the size and everything, okay? Like which font size you're going to use for the title and what all you're going to use here. I do have this now. I will copy this particular text again here. Okay. But here what I'll do is I'll put the product set and now select this particular text box from here. And now I can bring it in the center. Okay? As you guys can see, I'm bringing this in the center. Now, here I do have this one as well. Now what I'm going to do is I will take my old button and I'll also drop one here. Okay? But I will write this one by, and I'll take another box from here and I will write Learn More. Now here I will write Learn More. I'll write more as I've already told here. I will select this one and now I can actually decrease this height. Okay. So I'll keep 010 is fine. I will just put 20. Let's see how it looks. Yeah, this one is fine, I guess Now what I can do is I can actually bring it here and this is how we can make our buttons as well here. One more good thing about this is here, as you guys can see C here, you guys can see it is aligning me to the top of the other button. And here it's aligning me with the middle. And here, down from here, I can also see the width here. Okay? Between the paragraphs here, I can see the width as well. Okay, here, basically what I can do is I can also rotate this. Here you can see there is a change in my icon. Using this, I can rotate this and I can also put it according to my one. Okay? But in this case I don't want to rotate this one. I will put it in center. You guys can see here as well. Here is the rotation option. From where you guys can basically rotate, okay? From here I can see or check the positioning. I will keep this one here. I hope you guys have understood this class of what we have learned here. Okay? After this class, we'll be learning about how you can actually make shapes. Okay? I'll be telling you guys how to make a rectangle or I'll just give outline for this boxes here. Okay? I'll give those. I'll add those as well. See you all in the next tutorial ticker and goodbye. 5. Using Shapes in xd: Hello everyone and welcome you all to another chapter of Adobe XD tutorial here as we are learning the UI UX designing. This is our chapter number four and we'll be learning how we can use shapes. So here in this class, I'll be telling you guys how you can use shapes, how change the corner radius of those shapes, and how you can make any shape proportionally as well. I'll be telling you guys how you can basically decrease it individually as well. I'll be telling you guys how to bring your text in front of a shape. Okay? Suppose if you do have your takes backward, how you can bring that formed. I'll also tell you guys about how to do grouping that while making buttons or while making any icon, which is the final preview, in that case, how you'll bring that forward. Okay, let's not waste time here and let's get started with this class. As you guys can see, I'm already in the workspace in which I was working in the last class, okay, Now I'll be showing you how you can create basically, I have told you guys all about the basic tools which I have my tool bar in. Okay? From here you can create a rectangle box. Okay? I want to create a rectangle box. First of all, what I'll do is I'll just increase the spacing from here. Okay, I'll bring this one down here. Product image, want to fit in here? Now what I'll do is I will put a box here. Okay. That I can put my work first up. What I'm going to do is I'll select the rectangle box. From here I will make a box. Okay. Now, as you guys can see here, it covered. I do have my text covered here. Okay. Just inside this box to bring this one in front. There are so many different ways using which we can bring that text in front of this rectangle. But I'll be showing you guys the most basic ones and what you guys can use. Basically the most basic which I use is if you just click right on your mouse here, you can see option is called send backward, okay? So the shortcut control, open bracket here. If you want to bring that forward like suppose if I want to bring anything forward in that case I can click on Control plus Bc close option. Okay. I'll send this one backward or I need to select this whole text from here. I have selected this send to backward. Here my control or my cat lock was on, that's why it was not working. Basically. Here, I'll click Send this product backwards. This is how you can basically do, you can fit this one in the center, or the other way of doing is if you select both of this, suppose I will put this one here somewhere. Now I want to bring both of this in the center. In that case, I'll come here. And what I'll be choosing is here. As you can see, I can bring this in the center. Okay, I go to the alignment option. From there, I can choose here using the shortcut key. I have bought this one in the center. Okay. This is another way of doing it. Now I hope you guys have understood how you can basically play around with this. Okay? I'll also come down here and here. Now, actually I can change the width as well. Okay, For this one, how I can basically do that is if I come here, if I go back here, suppose I want to select this page, okay? Now, what I'm going to do is here, as you can see, the small dots here, okay? Using that, I can actually change the radius as you guys can see from here. And the other way of doing is if we come here, okay? Basically from here also, I can change, let me take 50 here, you can see it changed by 50, the corner radius. If I want to change the radius for each corner individually, suppose I want to put here 80, I will 70. Here 20 and here 40, okay? This is how it will actually look. Okay? But I don't want it, I will go back again. Now here I will just decrease the corner radius here. Now I can just basically move around. Okay. If I want to make any changes here in the shape, I can do this from here. Okay. You guys will be able to see like this. I do have these corners as well. From where I can maintain the size till here. I hope you guys have understood. Okay, now I'll make another box here, the same way. I'll take this here and I will make this come to the selection tool. From here, select this, send backward. I do have my message here, I'll just fit it inside this particular box. I'll also change the corner radius from here. Okay, I do have this here. I'll keep these buttons down here and I'll also put boxes for those. Okay. I hope you guys can see how it actually looks. I'll just make plus option here. Okay? That plus option, I'll take a circle from here. Okay? Maybe I'll put it here in the center, creating circle. I'll be showing you guys how to do that. Once I select the ellipse button. With that I can create or play around with the circle. I can choose the width and the height. But here as I do have this kind, but if I want a perfect circle or a perfect round shape, in that case what I can do is I'll click on Control Shift. Now you guys can see it will just give me a perfect circle. I can't play around with the width and the height here. It will give me a proportional circle. I hope you guys have understood this one. I'll select this and I will delete this. I'll just scale down the size again. I'll click Control Shift. Now here I do have this button here. I'll put this button here. Now I'll put a plus sign. Okay. Plus sign. Or I can just select something else. Okay. Let me just take a line or I'll just take a plus only. I'll go to the text option from the text box. I'll come here, I will, to select this particular letter from here. And put this one in the center. Okay, I'll try to put this one in the center. Now as you can have this particular thing here in the center, I'll put it like that here. You can see the plus option here as well. And now it's quite visible. Okay, I'll be making more boxes. Suppose I want this box, I'll select this. I can just copy any box if I want. Okay? Maybe this is the rectangle one. Or a rectangle one here. And learn more page. This one. This page here. Okay? Maybe I'll take this rectangle from here. Okay? What I'm going to do is now I will copy this one using control. I can come here and I can click on control V. Here you can see I do have the same size box. From here I will decrease the scaling or the size of this box. Now I'll just fit this one in. Okay, for my buttons here, as you guys can see, do the same thing. Send backward, or just select this text first. If you send it backward. And there are other ways of doing that, okay? If I just remove the field, I can also do that. Okay? I can select this from here. This is one way of doing this thing. Again, the same way I'll come here, maybe here, rectangle one, I'll copy this one. And I will just paste here. Okay, I have this box as well. Now with this, I will just move, now. I'll move this one here. You guys can see now I do have this letter as well. Okay, From here also, if I want to change, I can change it, but I hope you guys have understood this much. Okay, I do have this and I can also decrease the size if I want to bring this one in the center like that. Yeah, fine. I do have this page ready. Okay, I hope you guys have understood this C here. I have shown you guys how you can actually make a page like that, how you can use the shapes and how to bring this one in front. Like if you do have two, you guys can also group it out. Okay, if I select this two from here, I can basically select or if I want to change the width, I can do that. If I want to rotate, okay, I can do that as well. Okay. If I want to rotate it by 5% here, you guys can see the rotation took place with both of them. Okay? So this is how we can basically group. Right click here and here you can see the group selection. Okay, From here, if I just move one of the, the whole text will be removed. Okay? This is the use of grouping that you guys can actually move around pages or a button altogether. Okay, I hope you guys have got this class and now you can start making it like this of your own. In the next class, Copy paste and strokes, like how it is helpful and what all we can do using those options in this Adobe XD. Hope to see you all in the next tutorial. Till then, take care and goodbye. 6. Free icons to use in projects and existing ui kit: Hello everyone and welcome you all to another chapter of Atop XD where we'll be learning UY Ux designing. Okay, so now we are on our chapter number six. And we'll be learning from where all you guys can get free icons which you can use in your projects while making a new mobile application. Or you're just starting on with this application. Then from where you can get those resource file. Okay. I'll also be telling you guys how you can find existing UI kits which you can use and take icons or color size and different colors. Primary, secondary background color, how you can take suggestions from workers. And I'll be telling you guys about few of the websites from where you guys can get all of this in free and how you can use those in your work as well. Let's not waste time and let's get started with this particular chapter here. As you can see, again now I'm back in my workspace. And now I'll be showing you guys from where you guys can get few of the free icons can use in your work. Okay, first up what I'll be doing is I'll be showing you guys website which is called the icon finder. Okay, here maybe I will search for the page one home page icon. Here you guys can see I do have different options. If I want an illustration or a three day illustration or any sticker, I can get hold of all this from here. If you guys just scroll down a little bit, you guys can see here are different recommendations of different works here. Okay, so here are a few of the stickers or illustrations. You can download this as well and use it appropriately. Come to the icons search for home. It will give me a suggestion for like home icons from here. Okay, so here this are few of the icons which are loaded. Okay, so suppose here I do have this, okay, but let me make you guys understand about the prices, the premium, and all the licenses as well. Okay, so here, first stop. If you want to see the premium products as well as the free products, you guys can click here and see this. Okay? But for this project, what I'm going to do is I'll be selecting the free button from here. Okay, now I'll have all the three icons, which is under the home icons option. Okay, here I can select all styles. I don't have any problem with styling. Okay, here you can see Action Call all licenses from here. Basically you guys can choose for what you're going to use. Okay, here you can see no link back, Basic license. If you want to take a basic license and you want to use this, you can take this here. I will choose the no link back. Like I don't have to mention their name or something as such, I can do that. And this one is for commercial, like if we're using it for any commercial use, like making any company's web page or anything as such. In that case, you can give this one and they'll show you the options. Okay. I want all the free, so let me come here and let me take this one. Okay. Here there are basic two ways of how you can download. Free icon. Okay, here this is the PNG form and this is the SVG form. Hope you guys are familiar with what PNG form is, but now here we'll see about what SVG form is as well. Okay, I'll be downloading both of these simultaneously, side by side. Okay, I'll click on 48 pixels. First, I'll download the PNG. As you guys can see, my PNG is being downloaded. Now I'll come to the SBG option and from SVG I'll also download SBG icon. Okay. There are other icons as well. In what format? If I want to download, If I want to download it in a Illustrator format, like if I'm going to work on Auto Illustrator, then I can download this one here. If I want to download it in the ICO format, I can do that as well. From here you can see for you can use the CNS format as well. This format can only be used ins or if you do have Apple product. Okay. Now I have downloaded both of these. I'll be showing you guys from here. Okay, I'll go to the downloads from here. I do have two. Okay, I'll be showing you guys what we can do from here. Okay. Now the easiest way of putting down your work here is come to the file option. Okay, from file you come to the import option. The shortcut key for that is shift plus control plus I. In Macs or PC, it's shift control or command plus I. Okay, I am just simply importing this and all my files are being downloaded in the downloads Jo, I will bring this one here or I will select this. I will try to import this one. Okay, here as you guys can. I do have this image here now. I'll import another one. From there I will go and I will check the properties from here. This one is the PNG file. As you guys can see, I will just cut this for now or I will delete this. Okay? I will be downloading SVG file, okay? I will download the SVG format from here. Okay, let's view from here. Here you guys can see I do have the SVG format here. Now as you can see, I do have this. I'll be importing the same thing here in my X D as well. Come to the file, go to it, and it, this one here, you guys can see this is the SVG format. Work here, okay? Let me put this side by side and show you guys the difference between the SVG format and the PNG format, okay? Let me zoom in more, okay? So now I will zoom in more. Here you can see this is the PNG file which is breaking, okay? And here I do have the SVG file, okay? Here, if I increase the size, okay, from here, I will select this or make it one group, okay? I can just change this one from here, okay? So this is a group. I can move it around, okay, according to my want. And I can also divide this as well if I want to. Okay? This is the PNG file. I can also increase the size from here, but the quality is not that great. Okay. As you guys can see from here, I can maintain this as well if I want to make it round. Okay, I will go back. I hope you guys have understood the difference between SVG file and also a PNG file, okay? Now what I'll be doing is I want to delete this one again. From here I'll delete this and I will delete this PNG file as well. Okay, from here I have got access. You guys can also get access to all of this icons from. Okay, so I'll download the SVG version only from now under this. Okay, I'll search for an image icon. Okay, I will search image and I'll click on Enter Here. You can see I do have a different set of image icon here. Suppose I want to install this one, or I want to download this one. I will click here, and here it got downloaded. Now I'll come to my XD file again out here. As you can see, I will just delete these lines from here. Okay, I'll delete this line as well. I'll also delete this, two sides. Okay, which I have here. I'll delete this. Now, here I will come with my hand tool. Now zoom in to select this. Now from here what I'll be doing is I'll be putting that SVG file here. Okay, I'll come again to the import option from here. Maybe I'll select this one. This is the first one and I want to import this. Okay, I have my file here or I can just choose from here. Okay, Maybe I'll choose this one. Now, here as you guys can see, I can actually break this down and move it around. Okay. Now, as you can see, I have bought this SVG file here, but as you also can see from here, I can select the layers individually. Suppose I just want to import the middle part in that case. Only select the middle part from here. And from here, basically I can select this and actually bring it down here. Okay, the place I want, this is one way of doing or working here. Now I'll just import only this one. Or first I will just unlink this. Okay, I'll just put here now I'll try to keep this in the center. Okay. Now this one I will delete. I am left with only this one from here and I will bring it in the center. This is how you guys can basically put an image option if you don't like any other thing. If you want to take any other icon from any other frame, you guys can do as well. Okay, I will download this SVG from here. I'll import in the same place. Okay, come to the X D again and play on file import. After that you guys can import it from here. Okay, I do have this file here now. I can basically change the size or shape of this as well, okay? As you can see, I can change from here. If I just want to select a particular layer, I can come here and I can select a particular layer like this. I can just implement 23 things at the same time. This is one way of doing this. I can come here with Shift. If I press on Shift, I can select both of this, just this inside layers. I can click on this and I can just make them okay. Now if I try to move any icon from here, suppose I am selecting this. I can basically move this around as well. Okay, this is one way how we can work here. I hope you guys have understood till this much of how we can import and make use of your icon from where all you guys can get here. Free icons which you can use down in your work. There are a variety for various uses which you can use. If you want something colorful, you guys can get it from here as well, okay? Already in other classes, I have shown you guys that how you can take some resources, icons from your Dob stock. Okay? Here for that I need to come to Plug ins, and here you can go to Scout. And under the icon Scout, he also, you guys do have many options. Okay, if I just want the free ones, then I can search here. I'll just search for icons here. Also, you do have animation, three D's illustrations. You guys can search from there. What type of format do I need in here? Also, you guys can see, do I want it in PNG or SVG format? For me, I personally recommend that you guys use the SVG format. Okay? Because I use that tube and that is good, not bad. Okay. Now we'll be learning like how you can get a different type of free UI kits when you try to practice, okay? Or just copy their textile or ready met textiles and use it in your work for making a new web page designing or mobile app designing. Okay, let's get started with that one first. Okay, for that again, I'll come to my Chrome. Okay. I'll add a new web page. From here I will search X DUI kids. Okay. So this is a site called the Xd Guru.com So from here you guys might get a few of the free UI kits, but now I get the charge amount from here so you guys can actually look out their communities and from here you guys can join their group. If you have anything to ask them about, you guys can submit your comment as well. Okay. Here are the few UI kits which you can get for yourself. Maybe you need to pay a small amount for me. What I'll recommend is at first you guys start with free UY kids. And after that, when you're just advancing your level of working in this platform, then you can just get a premium one, which will be a great investment for your work. Here you guys can see R few of the premium kits which can be used. I'll just type free UI kits. Okay. Maybe I'll take this one and I can try to get it. Now. Let me see what they're asking me here. Are they asking me for anything as such? Here you guys can see this few of the kits. Okay. You guys can use this color here. You. Icons. Now I can save this in my mood board. Okay, I need to create account for that. I will just go back and I can get free trials here. Okay? As you can see, I can use this while working. This is one way of how we can get all this, okay? From here you guys can get this as these are a few of the hands web pages which you can use. Okay? Now let me go back again to my E here and I will try to get a different file. Okay, I'll try to import from here, inside import here. You can see I do already have imported one file here. Maybe it got deleted again, I need to download those again, lip download it. I'll again go to another website which is the adores from a stock. Also, you guys can get different type of UI, okay? But for this you guys need to pay some for that. You guys can use the premium one as well. From here you guys can see different things here. Okay. So this is a e commerce platform, So let me just download this here. You guys can see this is getting downloaded. Okay. This is a XD resource. I will just try to open this here in my file here. I'm downloading the kit. Okay, let me go back to my X D and import that file from here. Okay, I'll come to the import option from here. This one, the E Commerce side, I'll import, I guess not from here. Basically what I need to do is I'll cancel this. I'll come here. From here I can actually open the file, okay. Basically now you guys will be able to see a web page which is being designed by someone else. From here you guys can see he made some of the pages, he named it as well. Okay? The sign up page login and the forgot password page. Here are the home and categories. Okay? But the main thing which I'll be focusing on is of components. Okay, Let me just zoom in and show you guys what all components did he use. Okay, here you guys can see he have used different type of icons or logos. Basically, you guys can take the logos, maybe change something or take it like that and actually change the color for me. Right now what I can do is I can take home button from here. What I'll do is I can ungroup this one. Now I can individually select one and click on Control plus, which is the basic copy. Come here, come down here and type, or just click on the Pace option. Okay, Here you guys can see I do have this thing here. Maybe I will put this somewhere here. Just think it as the logo, okay? So this is the logo of the robbers toy world from here. You guys don't need to put any colors, but if you guys want to put any colors or anything as such here in this icon. So let me just take another one here. Come to this page and control V. Now I'll just increase the size of this one. And suppose I want to change the color. Then come to the field option from here. Choose the color of your own liking and you guys can put that color, okay? And you can also choose the opacity from here. And you can also choose the border size, okay? Maybe I'll change the width a little bit, so I'll make it three. And I'll give this one yellow color. Or maybe something in red. Okay, something in red. And I'll also change the size, maybe six. Okay, this is the icon which I want. I will decrease the size from here. Okay, I can decrease the size from here. Basically what I can do also is if I double click on this from here, if you guys can see I do have the small buttons here, okay? Basically from here I can decrease the icon size. I can also basically make any changes if I want. Okay, Here you can see different points. Using those points, I can actually move around and play around, but it will look ugly here. For that, I will come again here and delete this hole. Okay, This is how we can actually put colors or any detail into our icon as well. Like we can edit it as well after getting it from anyone else. Where few of the free or useful website where you guys can get your UI kits and as well as different kind of icons which you can use while developing your web design or your mobile application design. Hope to see you all in the next class where we'll be learning about groups. And I'll also discuss with you guys about few of the issues that you guys might face when you just edit the icon. Okay, till then, take care of everyone and hope to see you all in the next class. 7. Grouping and editing icons: Hello everyone and welcome you all to another tutorial of Adobe X D Here. Now we are on our chapter number seven and I'll be telling you guys how you can do grouping and grouping. And also in last class as I have told you guys, that you guys can take different type of icons from different places. If you get those icons, how you can basically edit those icons according to yourself and what is the most precise and the most best or the unique way to edit those icons as your own self. Okay, I'll be showing you guys everything here in this class, so let's not waste time and let's get started with the designing. Now as you guys can see here, I'm on my workspace again. Now what I'm going to do is first stop, I'm going to take fee of the icons. Okay, here you guys can see I'm in the page number one here. You can see I do have this page here, some icons, and I have named those accordingly that I don't get confused when I increase it. Okay, I'll be working and I'll be showing how to group group accordingly. Okay, First stop you guys know the basic use of grouping as I was grouping things while taking other classes as well. Okay, first up, I'll come here in file it. Suppose if I want to import more than one page. In that case what I can do is I can select Control. And after that I can select two or three images at the same time. Okay, I will select this, I will import all these three icons here. Okay, after that I can import those from here. Okay, so maybe I'll select here with my selection tool. Here. You guys can see these are the few icons which I have just bought it in my workspace. Now I have imported it in the page number two. Now let's see first about the grouping and ungrouping. The most basic way to know that is once you select the whole frame here or the whole icon, right click on your mouse here, you guys can see option, okay, here I can ungroup this one again, select this whole thing, you guys group. Now if I try to move one frame from here, suppose if I select this, now I want to move this, okay? Or if I'm just selecting the outside layer, I can move this one independently. Okay? Here. The same way if I click here and I can click on this one, I can basically move around as well. Okay, For that, let me just increase the size. Okay? I'll just group this one again. Now, I'll try to scale this up, okay? As you can see, I'm scaling this up. If I want to scale it like properly, in the sense proportionally, in that case, what I can do is I can come here, select this, and click on control shift. Then try to move this house around here. You can see it will increase proportionally. Okay? Maybe I'll take another image, which I had it here before. Import now take this card here. The shopping cart is being selected here, as you can see. Okay, maybe I'll put this card somewhere here. And now basically I'll just zoom in that you guys can understand better. Okay, so as you can see, I do have this card out here. If I want to make any changes or edit anything from here. First up, I need to click on this one. And from here you guys can see I can change the proportion, but I want to do more, okay? In that case, I will double click here. You can see I can change the size, okay? But as you can see, once I have clicked a many times, you guys can see here are a few options, okay? Basically, if I want to increase or decrease any particular size from here, if I just go back from here, suppose if I just select this end, okay? I want to change something from here. Okay? Maybe I'll just put this one here. The same way I will bring this deal here. Okay? So I can do this, bring this one a little down or just. Check or do like this. This is another way of how we can actually work here. Okay, this is one way. Now if I select it individually, okay, I can click here, or I will just select this whole frame. I'll select right click. And I'll keep on clicking on Group Option from here. Okay, I will click again and again, I will click on Group. Now I don't have group option anymore here. You guys can see all these are not grouped, I guess. Okay? I can select it individually as well. Here. Now I don't have the under group option. We need to understand that this is just a simple thing here. Okay? What I can do is I can just decrease the size here. Maybe take this one if I want to add up any line here. Okay. Then I will add a line here like this. Maybe from the same one. I'll copy from this side. Okay, so maybe I will this click on Alt and bring one here. Okay? And I will select this one here. You guys can see basically how it actually looks here. This is how it will actually look. I can also change the stroke size from here. Okay, come to the border option, change the border. I'll take a five. This one also. I'll click here, Copy. I'll just paste appearance here. I will just paste appearance. This is how it will actually look my icon. If I want to add anything more, I can do that. I hope you guys have understood how we can actually work around with the options. Okay, Basically I can work from here, okay, I can actually decrease the size from here as well. Here, you guys can see these options. Okay? So this is how we can basically work around. Or if I want to change the color here, I can change the color here as well. Maybe I want to take a red here, I want to take green. Okay? The field, the border, okay, here. This is how we can basically work around. Come to the border again, take a yellow color, pick one, and you have this here also. You can add different colors in this particular icon as well. Choose the blue color, maybe I'll take a blue icon here. Okay, so this is my shopping cart, which looks quite different from the time where I have downloaded this one. Okay, This is how you can basically work around with your design. Suppose I want to put this or make it as one group. I will select this and click on Control. Okay, now I can move this one around. Okay, Now I can move it around here. I have just copied this one again. I'll just zoom out a little bit and I'll try to see how this basically looks. Okay, So I will this one. I can select this and now I can move it around here, okay? Or instead of the buy option here, maybe if I just delete this, I can just put in this one. I do have this. I will put it here between. Okay. So this is how we can actually work as well. But now I don't want to put this logo here now. Okay. For that, I'll delete it. I'll go back. Yeah, I hope you guys have understood how you can actually edit your icon, whatever icon it is. Okay, so if I go to icon finder, there are different icons which you can pick from. Okay, here I can take any icons and actually I use it for myself. Okay. Let me download this sale one. And again, come to my X D from here. Now I can actually import, okay, shift control. Plus I also, I can use shift control. I will be redirected this page here and here you guys can see I do have the sale logo as well. Okay? This one, I want to expand this one proportionally for that control shift. And I'll select this, this one, you might put it in one corner somewhere. Okay? Or somewhere here. So we can work around with all this as well. Okay? If I click on this and I can also ungroup this one, okay? Now I can basically change from here, you guys can see, okay? So this is how we can basically put you guys can see this is how we can actually work around. Okay? But I will delete this one for now. I don't want this, I hope you guys have understood this class on how to use this grouping. Okay, so this is one of the main thing like how we can edit all these icons which we get. Okay, I've also showed you guys about grouping, how you can basically group around the other way of importing anything from anywhere else. Suppose I do have this component page here. I can just zoom in, move around with my hand tool here. Okay, from here, basically what I can do is maybe I want this icon for this icon. What I can do is I can click on Control. Now go back to this page here and maybe select this page. And now click on control V. Okay, so here you guys can see I do have a component here, okay? So this component I can put here. Or if I want to increase the size, I can increase the size. If I want to increase it proportionally, I can do it from here. Okay? Like this. I can basically increase the size of this one as well. Okay? This one is basically a component and I can just select this from here. I can basically select the group option if I want to group this one. But here you can see this consists of all of these things, okay? From here you can see if I want to ungroup component, I can do that here. Now you see I do have this one different. This part is different. I can just move this one around, suppose I don't want this. In that case, what I can do is I can select this and I can delete this one as well. This is how we can actually break down a component. Just come here and how you will know that this is a component, basically something green in color. The way I just showed you guys before sometime, if you guys want to see it again, this is how the margin will look for a component. From here, I can just select this particular component, come here and ungroup component, or the shortcut for that is shift control. For Mac, it's Shift plus Command plus. Okay, I'll delete. Okay, I'll delete this as well. Here you guys can make out. I'll select this, put this one here. And this one I will delete. Okay. Now here if I want to edit this as well, I can do the editing as well. Okay? So I can just zoom in. The better view I have, the better way I will be able to make this. Okay, so from here maybe I'll choose this here. I'll take this. Come here. Yeah, choose this one. Come here again. And now you guys can make something like that. Okay. Here as you guys want to make this something like this, you guys can make it as well. Okay? Maybe if I decrease one from here, this is one way of doing the things. I hope you guys have understood this class of how to work around here, okay? This is how you can actually make your logo and you can do it accordingly. If you want to use these options, you guys can always use these options for yourself. This is on which I have made. Okay, let me just back. If I want to place it somewhere in the middle, I can do that as well. Okay, but for now I'll just delete this icon as well. So this is one way of doing that. Okay, so see you all in the next class where we'll be learning about how to start on with your prototyping. Okay, so prototyping is basically like I'll be joining this icon with this page or here if I click on this icon, I'll be moving onto some other pages here. As I do have four pages, as you can see, I have only started doing the work here on the first one, Okay. So we'll be doing the prototyping as well that you guys understand how to do your IBX designing. Okay. Till then, take care of everyone and see you all in the next class. 8. Prototyping in adobe xd: Hello everyone and welcome you all to another chapter of Adobe XD tutorial where we're learning about UI UX designing. Now we are on our chapter number eight and we'll be learning about prototyping in Adobe XD. Prototyping is basically connecting pages with pages of how the appearance will be. Okay, so here in this class we are going to learn about the prototyping. And I'll also show you guys different way of putting interaction between your frames. And also I'll be showing you guys about what all animation you guys can do using that. Okay, so let's not waste time and let's get started with this chapter here. So here you guys can see that I'm in my workspace and I do have four pages here. Okay, so I've shown you guys how to make the pages, so likewise, I made this particular frames here, okay. So you guys can see if I want to As, okay, now all these are aligned. So here you can see I do have four frames, but what I want to do is in prototyping, I want to connect these pages with each other. Okay, so let's first try to understand how we can start doing that or how we can start with prototyping. So here in this particular panel, you guys can see beside the design option, I do have the prototype option and the shortcut key for that is Alt plus two on our keyboard. I'll come to this prototype page. As you can see, when I'm in a prototype page and when I click any icon, I do have this kind of sign on just beside that. Okay. If I click on the home page, I do have this one here as well. Okay? But the same way if I go to the design file, and if I click here here, you can see I don't have the same option available here in the design panel. So I'll go to the prototype option. Again. Here I will be able to connect with pages. Okay, Maybe I want to connect this particular home page to this one. Okay? This page here. This particular page. I want to connect it with this one and this page with the last one. Okay? Here you guys can see I do have all of this here. If I show you guys example of how it will look. So I'll go to the Dekstop preview panel if I want to preview it, but I will go to the device preview from here. Okay, here as you guys can see, I do have the frame here. Okay, If I just click on this, I'm in my second page. Now if I click here, you guys can see this is the third page. This is the last page as I did specify anything in particular. So this is the preview which I'll have here. Okay, so here you guys can see I can't go back. And another way what you can do is from your keyboard, you can just click on the button, the arrow buttons. From here I'm clicking the left arrow button. And I can click on the right arrow button here, as you guys can see. But this is just the basic of what you can do here, okay? Just the very basic. If I come here, if I click on this, delete, I'll delete this one. I will delete this as well. I'll delete this as well. Okay, I hope you guys got an idea of how this basically is basically, I have deleted this message as well. Okay, But I just want to delete this. Okay? Not the message here. I'll come here. This is the way how we can start working here. Okay, I hope you guys got a brief idea. Now I'll tell you guys about some of the easy way to do your prototyping, Okay, once I'm here. Now what I want to select is I want to select this particular By option. And directly I want to go to the checkout page, okay? Now if I click on this one, and I'll connect this page with this one, okay? With the checkout page from here. As you guys can see under the Learned More option, I'll connect this page with this one here. As you can see, I do have the home button here. I'll connect the page. This one, maybe this home page. I'll connect it with the first one. Now as you can see, I do have this icon here. What I can do is if I want to also page the same feature, I'll just copy this one from here. Delete this, come here, I will paste this one here. You can see once I have pasted on, the same feature is also being pasted here. Okay? As you guys can see, the same way, if I come here, okay, in this particular button and I just want any drop off I can do as well. Okay, I hope you guys have understood the basic of how you can work here in this page. Okay, way, this one also to go here, I also come here, I'll, this one, I'll click on this, I'll click control C, and I'll paste control V here. Okay, so you can see the feature here as well. Okay, now let me just go to the preview option from here. Okay, here I selected only this button, okay? And here now if I click on the By option, here, you can see I am being transferred to my checkout page. If I want to go back again to my home page, what I have to do is I just need to click on this icon on top. This is one way of doing this. And now if I just move around and I want to go from here to the home page, and let's come to this page here. From here also, I can go back to the home page as I have just copy and paste it, the same function if we do have so many pages and we have to do a things like in a sense I make prototype or do prototyping like I do have 500, 600 frames. In that case, I can use this method which is quite helpful. Now let's see the preview again. If I click on the Learn More option here, you can see I can go to the product page here. Okay, I'll click on this, I'll come here. I'll select this by now option. And this one will take me to the last page. Okay, here I do have the whole thing and I hope you guys have understood how this prototyping works. Okay, I hope till this much it was clear for you all. Now let's try to see the animation. What all animation we can put while doing prototyping. Okay, your page will just jump in or it will bounce in for that. As you guys can see, I do have menu popped up here on my control panel, like I do have all these things here. Particularly if I, if I click, you guys can see where all it is connected. If I come to this page here, you guys can see, if I come to the checkout page here, you can see all this lining or the joining. Okay, here you guys can actually manage this from here. If you want to add any other, you can do as well. Okay, if I tap, I can put it in anywhere I want. Okay, I can change the placing. Now let's try to understand. Suppose with this more button, it will come here, but I want it to come in a style, okay? For that what I'm going to do is maybe I'll select this one, okay? This particular lining here, you can see the transition mode from here, okay? Here you can see different type of transition, okay, if I click on auto Animate. And where is the destination, okay, From here. Also, if you don't want to choose or link it from here, you guys here, okay, here. As you can see, once I am here on my home page here, you can see where I want that page to link, the product page, the checkout page, or the order placed page from here. Also, we guys can do that. We do have here an option for ease out, out, snap wind bound. I'll be showing you guys all that, okay? This is another option which is called the trigger. Okay? Trigger is basically how your app will move, Okay? Suppose I have selected this button here. If I select drag, I have to drank the button. And then only I'll be moved on to the next page or the next place where I have selected. Okay, I'll choose here. Let me show you guys an example from here. Okay, let me just decrease the size from here. Let me keep this in one corner. Okay, here as I have selected the auto animate. And tap here. If I just click on this, this is just easing out. Okay. I can also select the duration of how long I want that animation. Okay, suppose I want it 2 seconds, so I'll give it 2 seconds. Open the preview again and click on Learn More. This is how it will basically look, okay? It will ease out like that. If I want to select this one from here, suppose now this lining, okay, or this joining here, in that case here, you can see it is linked with the checkout page. And I will choose the dissolve option from here. And I will choose the timing as well, okay? I'll take 0.5 second. I want a transition, okay? I don't want to give any kind of audio playback or speech playback during that. If I select all this, I need to choose a audio file. And all I can do that as well. Because in many places you guys might have seen, like if you're going to the next page, they'll tell like once you click a button. Once moving onto that page, they'll say page number two or welcome to the order page. Welcome to Amazon. Welcome to the Tesla, something like that. Okay, that's what we guys can do as well. Okay, from here I will come and I'll go to auto animate option. From here I will choose this instead of ease out. Now I'll choose in. Okay, let's see the preview again. From here, this is how it will come. Okay, now let's see other options as well. Okay, I did this one. Now let's come to this option. Okay, it will lead me to this page. Now, I will animate this one. I'll be showing you guys all the animation. Okay, From here you can select the dissolve option. From ease out, maybe I'll choose snap. Okay, let's see the preview again. Here you can see with a snap, I am back at the same place, okay? Instead of dissolve, if I come to the slide right option here, If I click on bounce, okay, now let's see the preview from here. Here you can see this is the bounce. I can select the timing from here. Suppose if I want 1 second, I can click here. And now click on this option here, or go to the preview button. Now click, you can see the way my page appears or the animation, it is different. Okay, so I hope you guys have understood about what trigger is. Okay, I'll just show you guys an example of drag. Suppose I have chose this one, maybe not. This will select this one. Or I'll go back here. Yeah, I will choose one. Now I'll select instead of anything and I will choose the easing option. From here is in and out. Now I'll go to the preview option. Now if I drag, I can go to the next page. Okay, but I didn't apply the same thing here. Okay, if I come here. So this is one way of how I can drag this thing. Okay. Here also, I'll choose drag. And now I'm in this page. If I drag it with my mouse. Okay. So here in this case, maybe I did some mistake here, because this is quite, yeah, I hope you guys have understood here. If I just need to drag on and if I come to this page and if I give this one here, I'll put drag, okay, let's see the preview. Okay, I'll drag it here. Come back here, drag, drag. This is how we can basically do this work as well. Okay, I will delete this. I will delete this one as well. Okay, I hope you guys have understood till this much of what all we can do. I hope you guys have understood about the option trigger, about the type, like how I want to do it to animate or do I want an overlay. If I want to give any see playback, any audio playback, sometimes once you click anything there will be a sound. If I want to add that, I can click on audio playback. If I want to tell anything, I can click on the speech playback. Okay? In that case, I need to upload that audio file here. Okay? This is about the type, okay? And this is the destination. Where do I want my page to end? Okay. This is another option called the scrolling. Okay. If I want to fix position while scrolling, then we can just mark this one. Okay. I do have this easing options as well. If I don't want any, I can just select none, nothing will be applied, okay. This is one way of how we can basically do our prototyping here. If I want to add this, okay, add this one, then I can add like any interaction. If I want to add, I can add by clicking the plus option from here. I hope you guys have understood there are actually so many ways of doing a simple thing here in all the application, especially in X D, this is quite useful and quite healthy. I hope you guys have understood about how you can start doing your prototyping. How you can also do prototype animation at the same time. Take care everyone. In next class, we'll be learning about animation in autobXd. Okay? We'll be learning more about animation. How you can animate, like how any object, suppose this object is here. Once I come to this page, it will just drop off somewhere, or it will just appear here, or this particular button, it will just drop in. We'll learn about animation as well after this particular class. Day by day, when we're going further into the lesson, the class is getting excited and I hope you guys are understanding this class as well. Till then, take care and hope to see you all in the next chapter. 9. Animation in adobe xd: Hello guys and welcome you all to another chapter of Adobe X tutorial where we're learning about UI UX designing. So now we are on our chapter number nine and we'll be learning how you can add animation in this particular application. In last class I've told you guys about prototyping. And now in that same war frame, I'll be showing you guys how you can do your animation. How particular object can pop up in your screen by its own. Once you just go to that particular page, I'll be showing how you can select a particular object or I can from the box or even a button, and animate those in your style into your frame. Okay, let's, let's get started with this particular chapter here. Now, here as you guys can see, I'm in the same workspace here. Okay? In last class I've shown you guys about prototyping. Okay, here I do have this page with my hand tool. What I'll do is I'll just zoom out a little bit. Okay, with my hand tool, I'll move around from here. Now what I'm going to do is first stop. If I want to do any animation, what I'm going to do here, as you can see this icon right over here. I want this icon to just drop in like that. When I come to this page first stop, I need to duplicate this page from here. Okay? There are many ways of duplicating using all two can duplicate, otherwise I can just copy this one, okay? I will copy this and I will paste it here with control V. Okay? Here you can see I do have this. Now let me just zoom on both the pages here, okay? Now what I want is I want this icon to be here. I want this icon to come here. Okay, this is one way how we can do that. First we need to make sure that once I'm in this page, let's first select this icon in particular. Here, its name is arrow icon. Okay. Now again, I'll come to this page here. Okay? In this page I will select, okay. This one's name is also arrow icon. Both of these names should be similar to make happen or to make this work. Okay? This is the order placed page one. I will name this as two. Okay, I do have both of these pages here. I want my animation to take place here. Okay. First what I'm going to do is I will just keep this page here. I will connect this one with this one here. Okay, here in this action option. By default, it always stays as transition. But I'll be just changing this auto animate which was there before. I can also choose the duration of how long I want my animation to be. Okay, let me take 1.2 seconds here. And what type of easing in I want? Okay, I want it to ease in here. Okay, now let's try to see the preview from here. Okay, As I'm on this page here, if I click all this icon, you guys can see it moves out here, okay? This is one way of doing this, okay? If I go back again, if I click here, you guys, it just moves on to this path. Okay. I hope you guys have understood till this much how you can start on with your animation. But basically what I want is I don't have to click here. Suppose I am in my page. Okay, I will just go to this last page here. I don't want my page that, I don't have to press this one basically to get this animation over here. Okay, what I'll do is now, so now let's move on to that. Okay, for that we need to make sure that we are not connecting here with this icon. Okay, like the icon with the page. Then if I come here, okay, see I can only do this kind of preview. If I click on this, it will come here, it will appear like that. But what I want, I want to auto animate, okay? In that cage, I need to select this whole page. Once I select the whole page, I will move this one here, okay? Now, once I select this page with this one, if I come to the trigger option, you guys. I do have the option for time as well. Okay, But suppose I will delete this one from here. I'll delete this here. Let me connect with this page now. Let's try to see here in trigger option, I don't have the time option, but to auto animate I need to do that. I'll delete this. I'll select this order page one. Select this page with this one from here. Now, once I come here, I can choose the time option. Okay, how many seconds delay I want? Okay, here as you can see, I will not delay here anything. And I do have the option for auto animation. Now I do have the duration here for 0.3 seconds, which I'll change to 0.5 Okay, I'll choose 0.5 here. I'll click on Enter. Now come to this particular page here, and let's see the preview from here now. Okay, now let's go back. Yeah, I'll come to this page. I'll try to see the preview. If I click on the By button here, you can see it is just auto animating here. Okay, if I go back again by and check out option, I'll click here and you can see the auto animation from here. I hope you guys have understood this particular part from here. With this one, I can actually choose how I want this to appear like do I want it to? I can also do that as well. Come to this page, see the preview. Click on by now. Here you can see the option here. Okay, In the same page, what I can do is maybe I want this one to just fade in. Okay, now I want this icon to fade in. I'll come here, go to the design option. From here in design option, you guys can see that my opacity here is 100. What I'm going to do is I can change my opacity. Something like this, Like this, I can actually work. Okay, now let's see the preview from here. Okay, come to this page here. See the preview. Okay, I'll click on this. This is how it will basically appear. Okay, here I can change the opacity. Or if I want to just rotate this one, I can rotate this as well. Okay? Suppose I want to rotate this, something like this. From here. Also I can do the rotation. Okay, here I do have this. Now, let's try to see preview from here, okay? Click on the By option, this is how it will appear, okay? If I want to see it slow, then I need to manage the prototype option from here. Okay? But I will just keep it up straight from here. Now I do have this, let's see the preview again. From here, I hope you guys have understood how you can do your smart animation from here. Okay, now if I want to smart animate this icons as well, Suppose I want this particular icon to drop down here. This page particularly, I'll keep this one here. Now, I can basically select from here. Suppose with this page, I'll go to the prototype again, here I will select this. Okay, from here I can actually choose, maybe I'll create another prototype here. Let's see the preview from here. Okay, it's click on By now, this is how it will drop down. Okay, this is how we can do this. Or if I want to put any bounce option here, I can do that as well. Suppose I have selected this one here. I do have this keyframe here. I do have the interactions. I'll come here, type this one. I will tap, come to the auto animation here. You can choose the bounce option from here. At the same time I can put Three interactions here. Okay? This is how we can basically add. If I want to add another one, I can do that from here as well. At this time I do have two. Okay, here are a few of the actions. If I want to add any auto playback I've already told you guys about. Okay, now let's try to see a preview from here. Click on by now. Here you can see this is just dropping down here, okay? Or suppose I want all of these three icon to just appear here on my screen. In that case, what I'm going to do is come to the design option again. This, bring this here. Now, I will just take this outside the screen here, here and here. Now, let's try to see a preview. This is how it will appear. We can do this as well. I hope you guys have understood this class of how to do your smart animation. Okay, now I'm going to show another way of how you can actually advance in animation. Okay, for that I will select this particular icon here. Okay. As I'm already in my design option, I'll change the opacity tie hundred here. But here in this one I want this to disappear. Okay, I'll decrease the icon here. Now what I want to do is I want to copy this page. Okay, Before that, let me just out, I'll just copy this page here. I do have this page here. Okay, so as you can see, it will just fade out. So let me show you guys and preview how it will fade out. Okay, so this is how it fades out. But I can basically work with the timing here. Okay, maybe I will increase the time to 1 second. Now, let's try to see the preview. Come here. Or just move around with my hand to see this one. Click on this and this is how it will appear. It's looking quite fast Again, I will come here, tap on this. This one is 1 second. I will just make it two, 2 seconds here. Yeah, this one is fine. I guess this is how it will appear here. Come here and select this. Now, just delete one from here. Okay, I'll delete this one from here. Now, let's see. Okay, here I do have this second, select this page, see the preview. Click here, you guys can see it disappears like that. Okay, now as I have created another page here, okay, now what I'm going to do is I will import an icon here. Okay, from file, I will go to the import option. In import option, you guys can see I do have SVG. Here is my icon as you guys can see here. Okay, so I will select from here. I will also decrease the size of that particular icon. Again, go to the design option from here. From here. Basically with control shift and with your mouse, you can just decrease its size according to yourself. Okay, now I do have this mark here. What will happen is, as I do have this one here, once it comes here, this one will disappear in this particular screen. This one will just appear here once this is done. Okay, let me just connect, come to the prototyping option, Place this one and connect this page with this. Here you can see the intrigger. You also do have the time. Okay, maybe I will delay here maybe 1 second. And I'll click on Enter here. Now I will try to see the preview from here. Okay, now let's see the preview as I've told already. Okay, come here to this page. Click here, you guys will be able to see the animation here. Okay? Or just let's start it from the beginning, okay, Select this page here to go to the by option. And To this checkout page, once I am done with buying. Here you can see the animation. Okay, so here you can see my order has been received, and here I did the animation. I hope you guys have understood how you can actually do an advanced level of animating your work here. As you can see, I do have three art boards here. Okay. You can have 20, you can have 15. If you have so many animation, you guys can do that using this particular option. Okay? So I hope you guys have understood about this animation in detail now. Okay, I'll tell you guys a few of the things of the problems that you guys might face while you're working with artboard here. Okay, I'll come here, Go to artboard. I want to select or make artboard from here. Suppose I do have this. I'll duplicate this one only with Al. I have duplicated this artboard. Now, here I do have two pages. Okay? Now, suppose I want to create a rectangle box here. Let me just fill this with a red color. Now what I want to do is with my selection tool, I will duplicate this one here as well. But what I want is I want to put this outside here. Now I want to do prototyping, okay? I want to do the prototyping, okay? From here it will come here if we choose like this. Now if we try to see the preview here, you guys can see have anything here. Okay. So this is how it auto animates, but we should not select or move these things inside or outside before it is already there. Okay, now let's see the preview. This is how it will basically look, okay? But the right way of doing this, same thing only is if I move this one after I do the prototyping. Suppose I did this one here, okay, I'll delete everything. Started from the beginning, okay? As I do have this one here, as you can see I do have this now after I go to prototype option, after I move this one here, and maybe I will just delete this now if you want to see it fading out. Okay, I can do that. Okay? I can change the opacity as well. Go to the design option. Change the opacity here. We can basically do this, or maybe change the opacity, change the capacity from here. Now let's see the preview. Okay, so this is how it will basically look. I hope you guys have understood these different parts. How you can basically animate everything if you want to do any transition. So you guys can do the transition from here. Okay? I have selected this one from here. And suppose here I will change the opacity of this first. Let me copy this one, control C, come here, control V, Okay. Now I will do the prototyping from here, as you can see. Come here, go to the design option, change the opacity. Now from here, if I go to the play option here, you can see the animation. It looks good now, but if I put this directly outside or before doing the prototyping, it won't appear here. Okay, This is one way of doing this. From here you guys can see I can also use the Pin tool options from here. Okay. Like I can just make my own logo or anything as such. I can do all this as well from here. This is one way of doing this, okay? So if I come here, I can do this from here as well. Let's see the preview from here again, this is how it will basically look. I hope you guys have understood this class also, what all you can do here in this class. I have told you everything about animation, all problems you guys can face during animation, and what are the advanced ways as well. Okay, hope to see you all in the next class where we'll be learning about sharing and commenting. Suppose you sent your work to your client, then your client want to comment and give their preview. Or your feedback telling you guys from the sharing, like how you can start sharing, how they can add comment and everything in detail. So see you all in the next tutorial. Till then, take care and goodbye. 10. How to share your wireframe and comment: And B one. And welcome you all to another tutorial of autobXt where we're learning about the UI UX designing. Now we are on our chapter number ten and here we're going to learn how you can share your wire frame. Okay, in last class, I've shown you guys about prototyping, creating your wire frame. Now I'll be showing you how you can share it. Suppose you do have your client or maybe someone who wants to preview your work. You just want to give them to check out like your mentor, you can give them that and tell them to check how it actually looks. I'll be showing you guys from the beginning how you can start sharing and also at comment, which you'll be able to view as editor. Okay, let's get started with this class now. You guys can already see that I'm here in my page, okay? This is the same workspace where I was creating my page here, okay, the mobile application page. What I'm going to do is I want to share this. Okay? Just beside the prototype, you can see the share option. Once you click on that share option, you guys can see a few of the things here. Okay, are the link settings here. I do have the links. If I want to create a new link, I can do that just you need to manage. That's it. Okay, here is one option, here is another option, which is the view setting. This basically means that whomever you're sharing with your work with what they'll be able to do, will they be able to design the review or will they also be able to develop like are they allowed to edit? Like they'll be presenting your design or user testing or customize the viewer experience. You can click here if you want to customize what all they'll be able to do. Will they be allowed to put comments or you want them to open it in full screen and include design specs? I can do this one from here. What I'll do is I'll click on this one, Design Review. I want to get review of my design. Here you can see a small preview of what this option will do is here, just underneath. Okay, this one will get feedback on your design and prototype. Here you can share this one with the developer. Now you have shared your design to the developer. Now they'll try making the website or the application. Okay, so this is for presentation and this is for testing your prototype. So I'll give design review. And now the last thing here is the link access. Okay, so basically here, this means that who all will be able to access to this link and what will be their work? Okay? First one is anyone with the link will be able to access my particular design here. Okay, so this one I hope you guys have understood, and now the second one is only invited people. Okay, so if I click on only invited people, okay, So I can just invite those people here, and only those people will be able to get my design from here. I can also select any password. Suppose I will select a password, and after that I'll share the password and also the link on the click. Once they set the password or once they put the password, then they can get a view of my work. Okay, I will just select here link, access anyone with the link. Now I'll create a link, and here you guys can see they're creating a public link here. Okay, now it is taking few time. So here you guys can see I have my link here. Okay. So here you can see a few options. If I want to copy the link, I can click here. And here I do have another option like copy Embedded Cut. If I want to copy the embedded code, I can do that from here. The other option is share on hands. Okay. If you want to share this project in the hand website, you can just share your project in the hands. This is a public prototype like where you can get different type of ware frame from here. If you want to update your link, you can update the link from here. Okay, so maybe I'll come here on Chrome. I will just past this one and I will click on Enter. Okay, it is taking me to the war frame. Now here I am, and it is just loading up the work. Okay, so here you can see I do have it in one page from here. Basically I can see how it actually works. Okay, here I click on the bio. At now I'll select this and I can look at the animation of what they have done. Okay, And I'll click on. The Robert again. Okay, I didn't select on this. Go back here. Yeah, I'm back again to this page. Click here. From here, you guys can see the total preview here. Okay, so this is how your client or your mentor can view your work and they can also comment up here. This is the basic way of how they can comment. Okay, if they're telling change the back ground color, they're telling me to change the background color. And I can just submit it from here. As you guys can see from here, I can basically add a comment. There are two ways I can sign in with an AdobID. This is more professional. So they can sign in with an Adobe ID and they can add a comment here. But if I want to add a comment as a guest, I can write Darren, I can continue from here. Okay. Here you can see what Darren have told have message that. Please change the background color here. Here you can see on my Creative Cloud here I can see pop up menu which shows new activity on Adobe Eggs D class, which I have named my class. Here you can see Darren commented on Adobe Eggs class. Okay, from here I can basically view, if I want to pin this comment, I can pin this comment as well. Okay, now as I'm here, I can add comment here. You can hide notations from here. You can comments accordingly. Okay, if you want to see the resolve option, if you want to clear what are the comments for today and all you guys can see and you can see who all are your reviewers. Okay, this is one way of how your client can basically review down your work. They can tell you if you need to change anything or if the work is okay, they can appreciate you as well. Okay? This is about from the client side, okay? This is how your client will view your work and can comment accordingly. But if you come here, how you're going to resolve that issue? Okay, come here in the design option, go to the prototype, and from here you guys can basically get access to the comments. Okay, now maybe come here from here again, I will come here, okay, go to the design options as they're telling me to change the background color. Maybe I'll select this page. From here, go to the fill option. I can choose color accordingly. Okay. As you can see, I can choose color accordingly. Once my thing is result like I have done everything, what I can do is here, go to the share option again. Once you're done with update a link, share this link the same way. Okay, you can view those comments from your Creative Cloud box. Okay, from here you will get a notification. Okay, from here you can see what is the comment in X D, change the background color. From here I can, I can just dismiss the. Otherwise I can go to this particular file again. Okay. Maybe I want to go to this page here. I have created a lot. Many. I can come here in this page and I can reply to Darren that, yes, I am done with your word by just signing in. Okay. As I did sign in, I don't have the option to view. Okay. I hope you guys have understood like how you can basically share, how you can update your link, how you can get feedback, and also how you can edit those once you get that feedback. Okay, so in next class we'll be learning how we can basically make a moodboard and what a moodboard is. Okay, so we'll learn about how to make our own moodboard. Till then, take care of everyone and hope to see you all in the next class. 11. Colouring in adobe xd: Hello everyone, and welcome you all to another chapter of Adobe X Diutorial. Here we're learning about the UI UX designing. And we're on our Chapter number 12. So here in our Chapter number 12, we'll be learning all about coloring in this application. Okay? So I'll be telling you guys how you can create your own color palette, how we can play around with your coloring, how we can make your own gradient for any button or any background color. And also I'll be showing you from where all you guys can get your color inspiration. Okay, so we'll be learning about all that in this particular tutorial. So let's get started with this class. So now what I'll do is, as you can see, I'm here in my workspace. Now, first up, I'll show you guys how you can create your own color palette. And why do you use color palette basically? Okay, suppose now I want to create my own web page, and there I have selected a color theme. Okay, suppose here in Moodboard, I've shown you guys this are a few of the colors. And now what I'm going to do is I'll take the boxes from here or box of colors, okay? Suppose I want to make something like this. Okay? So let me just zoom into that. And suppose I want to use this coloring in my web page. In that case, what I'm going to do is first up, I will create a box here. Okay, I have created this box. And now using the Eyedropper tool, what I'm going to do is I will select a particular color. Suppose I want this color, and yeah, I do have this color, this is going to be my primary color. Okay. Now here I do have this primary color. With this tool, I will just duplicate this layer. Okay, I have duplicated this layer from here. What I'll do is I'll come to the fill option and I will change the intensity of the color. As you can see, I have changed the intensity of the color again. Now select this again, copy this one here. Now I will change the intensity of this particular box as well. Okay, come here to the fill option. Maybe this color or something in dark, okay? This is how we can actually make our own color palette. Okay, Now again, take this one and we'll repeat the process of how many sets of color we want. It basically depends on us. Okay, All paste it here. Now, come to this one and change the fill from here. Maybe I want a little dark. Okay, now I do have this color palette. Suppose from here I want to take color theme from this picture as well. Okay, in that case, maybe I will come little bit this side. Okay, I'll create a color palette here. I'll just repeat the same process, create one box here. Okay, now with your eye dropper to keep this eye dropper tool here. Now from here you can select a color. Okay, maybe I have selected this color. Now what I can do is I can now copy this, or I can just make a duplicate of this one. Okay? I'll make a duplicate of this one. Now, I can change the intensity of the color from here. From here. As you can see, I'm changing the density again. Repeat the same process. Suppose I want a particular color here from this eye dropper two, maybe I can something here. Okay, This is the darker one. Again with Al. Duplicate this layer and now change the intensity from here. Okay? Maybe something dark, change the positioning from here. Okay, I have this color palette as well. Okay. Now we can basically group this one and move around. Suppose I want to keep this one here. Okay, This is another color palette. Suppose this is going to be my primary, and this is going to be my second recolor palette. As many colors you want to use in your web page, you guys can add it up or stack it up. I hope you guys have understood how you can create your own color palette. Now I'll be telling you guys how you can create your color gradient. Suppose now I come here and I will create a box here. In this particular box, what I'm going to do is I'll come to the fill option here. Under the fill option, you guys can see on top I do have an option. Okay. I'll drop up menu. Okay, here you can see if I want to take any solid color. I can do it from here. As you guys know from here, I can change the intensity as much as I want. This is the eye dropper tool. From here you can actually save the color. Okay? Now, let me come to the linear gradient first. Okay? This is how a linear gradient looks like. Okay? I will select this one. Okay? This side I will, this one from here, I can change the color. Okay? Suppose I want to take this color again. I'll choose this one. And this side, I want a different color here. You can see this is the combination of both the colors here, the green and red. If I want to add a different color anywhere, I can add a different color as. Okay, I can change the positioning and I can add as many colors as I want. It depends on which one will look better. And I can also change the positioning from here. Okay, Let me select some different colors. Okay? I will select another color here. Okay? This is how you can basically create your own gradient. You can put as much as you want. You can also change the opacity as I've already told you. Let me take this here. I am done with the gradient and this is how you can basically work here. You can actually change this one. Particularly come to the field option again. And from here, if you want to change this from here, you can select how the color will flow, okay? Basically, if I want to move the color like this and which part will have which thing it is showing me right here, I have created one gradient. This was the example of linear gradient. But let's now see how you can basically create a radial one. Okay? I will select another box here. Now come to the fill option. Again, under the fill option, I have this radial gradient, okay? It will come in a radial form. This is also the same. Maybe I'll choose a red color. I'll change the opacity a little bit. Now I will select this one will green color. Okay. From here here you can see this is the red outside. I do have the green here. Okay? I can change the positioning as well if I want or I can just add more colors to it. Okay? As you can see, I can change the opacity of that one. This is in radial. The same way I select how much color and what all colors do I need. I will come here. Okay, I will select another one here. Okay, I'll put another color here. I will select this one. Hope you guys have understood about the radial thing as well. This is how you can, if you're making any logo or any design, you guys can do that. I can also change this one. I can make it around. I can also rotate this if I want. Okay, suppose I want to rotate this one. I can rotate it according to my want with my selection tool. I'll move this one here. I've shown you guys how to create your own gradient here as well. A now I'll see about the last gradient which you're going to make. Let me take ellipse or I will this one. Okay? A polygon shape too. I'll create a polygon here, move it here, and keep this one. Now, select this tool from the field option. Come to the angular gradient from here. The same way you guys can basically choose what color you want. If I want to add any more colors, I can add it from here. Okay, I will add more colors. I will add a few more. This is how we can basically create this gradient. Yeah, I hope you guys have understood this class of how you guys can make your own color palette. How you can create your own color gradient. Okay. Particularly in coloring, there is no such thing that you need to put this one, you need to put this particular color for that thing. There is nothing as such. But I'll always recommend you guys to check out work of others, like how they're using their colors in their web pages so you guys can take inspiration. And that's why the mood board is quite important. Okay, so now let's come to my Chrome and I'll be showing you guys from where you guys can take some of the color ideas. Okay, if you guys are using your gradient from here, you guys can basically see these are some gradients, okay, which are being mostly used here. You guys can check out what are the gradients that people do basically use and see here you guys. Now the question you guys might have is, okay, I see all these colors are fine and good enough. But the thing is how I can take these colors if I want this particular color here, how I'm going to get it on my workspace. Okay, here you guys can see a code is written. These are called the color code. And I will copy this particular color code from here, and I will go to my X defile. Suppose I want to get the same color, I can a box here and come to my field option, or the coloring option here. You guys can see I do have a code which I told that I'll tell you guys about this later. In that case, what you can do is you can just come and paste that particular color code here. Okay, so I will delete this first. Now paste it. I'm having some difficulties here in pasting this. Okay? I will take this copy here in the egg T, we can just paste that particular color. Okay? Or I just need to take this one. Okay, Not the hash tech. I can click here. Delete this. Now I can paste this. Or I can also do it manually. Like if I see what, 99? So I'll come to the X, D, D nine. Okay. And I can click on Enter here. You guys can see the particular color which I do have here, my bench, E. I'll come here again. Okay. I'll click Enter here. You do have the particular color. You guys can't simply choose anything. Okay? These are codes, basically, if I want to create a palette of this one, I can actually do the same way how I did before. Okay, come here, change the intensity. Maybe two of this copy this one again, change the density from this to this. Come here, take one. I do have my color palette here. Okay, I can use this as my other color palette. We should always keep the colors which you're always using. Hope you guys have understood the usage of coloring, how you can basically do coloring here. If you want to group this, you guys can come here, click here, and you can click on Group. No. If I move this one, it will move accordingly. Okay? This is the color palette. I can also name it as well. Okay, from the boxes I can go and name this file. Okay? Now, suppose I do have this particular color here. Okay? Come to the fill option. From that fill option, I can basically choose this one. Okay? I do have this from this, I can actually save this color. Okay? If I click on this one and I come here here, it will be saved. This particular color palette will be saved. This is about coloring here in this class. In next class, I'll be telling you guys how you can play with images and what are the different of using images in creating your own web page or developing your own mobile design. Okay, so see you all in the next class. Till then, take care and goodbye everyone. 12. Images in adobe xd: Hello everyone and welcome you all to another chapter of OBX tutorial. Okay, so here as we're learning UX designing, we're at the end of this tutorial. And after this I'll be just showing you guys one project of how you can create your own design. Okay, I have already shown you guys about the mobile application, how you can get a low five wire frame. Now you can fill it according to yourself. Recommend many works as I have done. But I'll be showing you guys a project as well and we'll be giving you class projects as well. Okay, here now we'll be learning how you can use images. Okay? This is our last chapter, which is the chapter number 13. Okay? Images. We'll learn how you can do masking, how you can use your pen tool while using images. Let's get started with this class here again, back at the same work space. Now here as you can see, I'm here in this workspace. So now I will just try to upload some images from here. I will go to the import option. From import I will go to the resource file, okay, Or I will go to a few of my screenshots I do have here. I'll come down here and these are the few images which I do have, okay? The most basic thing is you can just drag and drop. Otherwise you can just import. But thing about importing is you guys can see it comes in a total size here, okay? The size is quite big here, okay? As you guys can see. If I zoom out so you guys can see, this is the size of the image. But what I can do is I can just decrease the size of the image from here. Suppose this is the web page. I can decrease the size accordingly, and I can put this one here. Okay? Before that I'll decrease the size. From here. I can shift from my keyboard and it will resize accordingly. Okay, suppose if I keep this one on top, and now I select both of these layers. Now what I can do is if I select this layer here, and I can send this one to the back. Now I can decrease the size of this here. I do have this here. I do have my image as well. Well, I'm not able to see now. This is one way of how you can basically do this. Okay? You can just take any of the images as you can see. Change the width or the height from here. You can change the positioning of the image. Okay? This is one way of masking it. Suppose I want this image to be here first. What I need to do is I will select this. Come here now to mask this again, maybe I'll take a different image from top here, okay. Or go to the file option import. I can also click shift control plus I come here, maybe I will this image. Okay, From here I selected this image. I will import this, but the size is too big. What I can do, I can decrease the size again in keep this image here. Now what I'll do is I'll select both of these layers. Okay, my down box is also selected. Now what I can do is I can basically group this one or I can just ungroup these things as well. Okay, suppose if group now I do have this layer separate here. You can see this is not going outside, okay. This is one way of doing this. Here you guys can see, okay. Now I can also decrease the size and try to fit in here. One basic way of doing this thing is here. I do have this select both of these layers. Now you guys can come here. And you guys can select and try to make this a component. Okay, This is one way, or I can just mask this one with a shape. If I just increase this one, my image is also increasing. Now this is inside a shape, and the same way you guys can bring any image down here. Suppose I want control shift I. Okay, I do have this page here again. I will come here and I want to put up an image. I can select Import. And here you guys can see that I'll just click on Shift, decrease the size. Keep this image here. Shift, decrease the size. Keep this one somewhere here. Now we can select both these layers and use this mask with shape. From here. Basically we can actually maintain the image of how we want. If we want till this much, I can put this much and you can do the masking from here. This is one basic way of how you can do masking and use images accordingly. Okay? These are a few options. And from here you can change the opacity as well, okay? If you want to change it right here, here, you do have that option. Okay? Basically you can change the borders as well. Okay? Suppose I want to take a yellow border, I want to take this three. Okay? I can do this from here. Hope you guys have understood how you can use images. There are different ways of using images. Suppose if I come here and take another image. Suppose this image from here, control C. I'll paste this image here, or I'll take this image from here. Okay, this particular image, what I want to do is with my pen to first I'll zoom in. Now I want to just keep this shape here from here. I want to do the shaping from here. Okay? I just want this part. I don't want the background. Instead of that, I want to put green background here. Okay. I can basically do all that right here. I do have this, I have done till this much. Okay. Now what I can do is basically I can select this particular frame. I can outline the strokes, okay? I can outline this particular stroke here. As you can see, I can basically select from here. I can actually change the border. I can strengthen the border. Six, Yeah, here you guys can see. And I can also take a particular image. Okay, I will come here, click here, and you can also select Mark to export. You can just select a particular part of the image if I come to another image. So let me delete this one. I'll be showing you guys in a simple image. Okay, let me come up here or here. This image I will just copy and I'll paste it here. Okay, here I do have an image. I will just increase the size with my pen to suppose I just want, uh, this much. Okay? I want to take this much only of this particular image here. Okay? This is the outline. Okay? So now what I want to do is I want to take on the mark, okay? I just want to get only this mark option from here. In that case, what I can basically do is I can this one to export. Okay, This particular option here, this is how we can basically take and mark it and just remove it and put any other background here. Hope you guys have understood about images. Now I'll be showing you guys how you can basically take one image and how you can export that. Suppose I have taken this and I have marked this one as export. Come here in the file option, export this. And if you want to select all the artboards, you can select all artboards. And you can see the export size. I'll web page size this artboard. And where I want to save this, maybe I'll just save it in my downloads here, I can just export the assets from here. Now if I go to this page here, okay, so let me come here, go to the downloads. Here you can see my artboard is being exported on my desk. This is how we guys can actually select the particular artboard. Here you can see all these pages, frame by frame, is being downloaded. Okay? This is how you can basically download to get a preview of your work. Okay, this is how you guys can, I hope you guys have understood this whole tutorial, how you can work on this particular application and make your own design. In next class, I'll be showing you guys by making a project on web page, how you can design your own web page, how you can do the coloring, do the prototyping all together. See you all in the next class. Till then, take care and goodbye everyone. 13. Class Project 1: Design your mobile app: Hello everyone, and welcome you all back again to the Atop X D class project. Here, this is our class project number one. Now we'll be designing our own mobile app artboards. And we'll be doing prototype accordingly. So basically you guys need to make your own design artboards. Okay? Maybe create four to five and after that prototype those accordingly. Use the ease in ease out method, different type of transitions, and also different type of effects. Okay, let's see what all you need to do in this class. Here, as you can see, the name of the class project is designing your mobile app artboards and do the prototyping accordingly. Okay, you can see the description, what I've written. This is a mobile app in Adobe XD which involves creating artboards, designing user interfaces, and prototyping interactions abd it will offer you a range of tools to help you through this process and it creates a user friendly and visually appealing mobile app. Okay, here you guys can see what are the different steps that you guys will be following. First up, you need to collect all the necessary icons and color palettes and different type of font sizes for your artboard. After that, you need to create your own design in all the artboards, okay. Simultaneously, four artboards you can create and go to the prototyping option and do the prototyping accordingly. I've shown you guys where the prototyping takes place. If you guys have any problem, you guys can always refer the tutorial minimum, use four artboards, okay, to create the linking. At least create four artboards and also use animation in the artboards, which include smart animation and also the basic animation. The last thing will be, copy the link of your particular file and upload it in our project panel. After this class, you'll have a fully functional app design which you can check from the preview option. And it will be a well defined interactive and user tested design which will serve as a foundation for the development process. Okay, let's see how this is done. As you can see, I'm in my workspace, and now from this prototype option, I'll come here after that. You guys can see once I click any particular thing here, this type of icon appears, which I've already shown in the tutorial from this page. I won't select the whole page, I'll select this particular button. If I click on this particular button, I will be redirected to this page. Here, I can change the transition. Okay? I'll give auto animate here. I will change the timing. You guys can do it according to yourself. Okay? You guys take various actions. If you want to choose any audio file, I'll be doing this one as Tap. After that, this particular page, maybe I'll select this one. And this one, I'll link it to the first page. I'll do the same. This one. You guys should link it together. I've told you guys about different shortcuts which you can use here as well. Okay? So this is one way of doing this. Now I will link this particular page, learn more option here. I will connect this one with this page here. Okay. So as you can see, I have done this one. Now what I'll be doing is, as this is the smart animation already in my tutorial, I have shown you guys how to do the smart animation. Okay, come here or select the whole file here. After that, move on. This one here, select the time option, and I won't delay anything. Okay, after that I will select this as well, like the whole page from here, not any particular icon. And I'll drop this one, maybe here I will take two or 1.5 seconds. Okay, 1.5 seconds. I'll click on Enter here, I will give auto animation. Basically, this is how it will look and you guys can check it from the panel. Okay, so let me first go to this page from here. Okay, so as you can see, you guys can see the links between that. If you guys want to change anything from here, you can do that. Okay, let's come to this page. Click on this preview option. Let me click on this by now option here. It's going to that page here. Again, I'm having some difficulties coming to this page to late this. Now again to the prototyping from here. Now you can see I came here in this option. If I click on this by option, I will just redirect here. Okay, now let's see. As you can see the animation here as well. I hope you guys have understood how you can basically do the prototyping. But this design, as I have made by myself, I request you guys to make it yourself. This particular designs you guys can put if you guys have any problem. What is about the smart animation I've showed you guys everything in detail in the class, Create a page like that. After that, the last thing which you guys will be doing is you guys can come up here, Click on this share option. Okay, this all are selected already. Okay, you can update the link from here. Okay, you guys don't need to update it, will create link for you and you guys can just copy this link and share this link in our project panel. Okay, here you can just give it as a review and you can just put it anyone with the link or only invited people. This is how you guys can share your work with me, that I can review your work. Okay, thank you all for joining this class project tutorial and I'll be hoping that you guys submit your project as soon as you can. I'm really interested in seeing your work and your design of how you design your web page. Okay, so see you in any next tutorial. 14. Class Project 2: Create a mood board: Hello everyone. And now this is the time for our class project. And now we'll be doing our class project number two here. You need to make your own moodboard and you need to make your own color palettes. Okay, so for that first, you need to import some images, and after that, create your color palettes. Any question you have regarding this, how to do that? I have those covered in my tutorial. You guys can again recommend that for yourself. Okay, so let's see what all steps you need to follow in this. Here on top, you guys can see the name of the class. Project is creating a moodboard and make your own color palettes. Okay, here you can see the description. What is the description creating a moodboard and why you not to make a moodboard and a color palette? Okay, so you guys can see here it is. Having integrated tools that makes convenient to create, manage, and implement these designs elements effectively. Okay, The first step which you'll be following is you need to get your color inspiration from different websites which I showed you. I've showed you different websites like Hads Awards, something like that. From there, you guys can get your color inspirations. After that, you can import those images in the page. Later on, you stack all those accordingly and create color palettes of at least three colors. And adjust all those in one artboard, export that selected artboard into your system, And after that drop down your artboard into a project panel. After this one, you'll get a set of images and few set of color palettes inside your artboard, which will be quite visually appealing. From here, you can also make custom color palettes, creating your moodboard. It enhances the overall design process, which leads to more cohesive, visually appealing, and effective design outcomes for your project. It helps you to stay organized, inspired, and align with your project objectives once you create this particular moodboard and also few color palettes. Okay, let me now show you guys how this is done. Now I'm here on my workspace, and from here I'll come to the artboard. I'll be creating an artboard here. Okay, in this artboard, I'll be taking different kind of shapes. Okay, let me create shapes here. Okay, maybe more like this. I can actually this one here. And now I can duplicate these layers as well. Okay, from here I can just duplicate this. Okay? I will duplicate this as well. This is how basically I can duplicate, or if I want to create many more boxes, I can create it accordingly. Okay, here I will be putting the color palettes. Maybe I'll keep this here. I'll just put a few colors here and one image, or I'll just create that just outside. Okay, no worries With that also, I'll just create another rectangle box here. Now from here, what I'll do is the most basic way I will try to import down the images here in this particular box first. Here. Okay, I will import, if I come here, step file, go to resource files. From here you can take different images. Okay, you can drop down images. I do have six images for now, that if I import this one, I do have all these images here on my box. Okay, If I zoom out, you guys can see here, there are all these images which I do have here. Basically what I can do is I can just select one particular image, I can just drop the sizes down. Then you guys can actually zoom in this image and then bring this one here in The mood board. Okay, suppose if I'm keeping here, if I just go on top here, you guys will have the board here somewhere. I have created a board. Otherwise I'll just create another art board from here. Maybe I will select the artboard size still this much. Now I can just put up these images here. Maybe decrease the size. All these images which I have here, I can keep like this. All these frames which I have taken my color inspirations, I can actually increase the size of this as well, according to my want here. Also, I do have different images, which I can put it here. Okay, decrease the size. Come here on the corners. And decrease the size from here as well. I can import more images. Suppose if I want to import this whole frame here, which I have created. Okay? This whole frame. I can select this frame from here, and I can put this one as well. Okay, I can do that, but now I will just dilate this here. You guys can see I do have different things here, so I can move those there as well. Okay, the different options here, you can see these are full size images which I can basically copy for myself as well. I'll keep this one here in one corner. Maybe I'll increase the size of this one as well. Select the extra things and move it aside somewhere here. Maybe you can increase the size like this. You can put it here. This is how you can make a mood board for yourself. Now let's try to understand how you're going to create a color palette. Okay, come here, select one box. Suppose you want to take color inspiration from here. Come to the eye dropper tool here. And with eye dropper tool, select this color the same way here. Then copy this. Now come here in the field box and change the intensity of the color, same way. Repeat this process four to five times. Now select this box here, and change the intensity a little more. Okay? Again, come here, select this box, come to this one, and change the intensity. This is how you guys can basically change the intensity. How many times you guys want, you guys can do this as well. Okay? Suppose I want more light colors compared to this. Come here and go somewhere here. This is how you can create your own color palettes. You guys create like this color palette, three of them, okay? As you can see here are different colors. You can experiment with different colors as well. This is how you can make your own mood board. The last thing will be you select both of the frames here. After that, come here, go to the file option. From here go to export, and you select the selected one. Export those. As you can see, it will export. Now if you go to the system, if you go to the downloads option here, you guys can see, okay, first I think I need to group this down. Okay, I will group this down. Select this sole moodboard. Now I can mark this one to export a one here. Export, selected one. So this is how you can basically export your artboard. Here, back again. Okay? And here you can see I do have my artboard, so this is how you guys can take, export your artboard and also your color palette the same way. Okay, so as you can see here, I do have the color palettes. Group those down and just those selected. And here, this is how you guys can basically export. Yeah, I do have the color palettes as well, so you guys can send your work like this to me and drop it in our project panel. And I'll be quite happy to review your work and give you guys the instruction accordingly. Okay, till then, take care. Everyone, hope to see you all in next tutorial. 15. Project on how to make a web page design: Hey hello guys, and welcome you all to another tutorial of Adobe XD. So this is going to be the last lesson basically where it is just a project class. I've told you guys everything about X D, how you can use the particular application, how you can start on with UI UX designing. So here in this class I'll be showing you guys from the scratch how to build a designing web page. I'll be showing you guys about all of that. And let's start with the class and let's start designing a web page. Well, back again at the same page, okay? And now from here I'll be creating an art. Okay? From here I will select the artboard, and as you can see, I have different webdectop size. I'll select the 1920, 5,080 size from here, and move it somewhere here. Okay. Yeah, this one is fine. Now, the most basic way I will select an image. Okay, for that I have saved an image. What I'll do is I'll cover this page with image, then I will write my things and I will edit it according to myself. Okay, from here I will go to the import option. Import. I will go to my downloads. From downloads, I have downloaded a picture from pixels. I'll put this one here with my shift. I will decrease the size of this particular image shift here, I will decrease the size. Okay. I do have this particular frame here. As you can see, I do have this here. Okay. I can basically decrease the size now if I want. Okay, But I'll keep it till this much. Now, see the layer of this one is good to go, for me to start my work here. Okay, Maybe I will select this if I want to make it a component or if I want to edit in the Photoshop, I can do that. Okay, I can basically work with that as well. If I want to move it around, I can just move it around according to myself. Okay, now the background of my web page is ready. Now what I need to do is I need to edit this particular page here. For that, what I'm going to do first up, I will go to the textbox here in the text box, I will create a particular text box here where I will be putting on what I am going to write here. Suppose here I will come and I will increase the size. I'll give it a 30 and enter. Okay, I'll come back here. Selection tool. With this selection tool, I do have this page here, create a text box. What should I name this one? Okay, let me name this box 45 home for everyone. I do have this criticar web page here. Click on this and now change the size from here. Suppose I want to take 45, and here I have taken it in this size. I can also the size from here, or I can scale it up from here. Okay, If I come here, I will increase the box size. Select this text again. Now what I'm going to do is from here I will come click Enter, select. This basically depends on so many things of how you want. I'll put it in center. Now I want to change the text type. Okay, the style I want to change. Okay. Maybe I will take something. I'll take the basic Collaborate. I'd like to keep my work quite simple. Okay, so maybe I'll take the bold italic, and I will change the size to 90. Yeah, I need to increase the box size as well. From here, select this. I do have this one here. Select this one, and choose a color according to yourself. Okay, suppose I will. Uh, something, which goes on with that particular color here. Okay, I will take this color, Suppose I'll also select the border of this color as red or something dark. But here I'll change the border to two and I'll click on Enter here, you can see the logo is ready here. Now I can put different images or different type of icons if I want to put for icons. I'll go again to this one here. So in the finder from here, I can take many type of illustrations, many stickers as I want. Okay, maybe I will type home. I'll click here. Here you can see there are many three D animations which I can take and no link back. And I want the free ones from here. It might take some time to load here. As you can see, I can choose it accordingly. Suppose I want to take this one, but I am looking for the free ones. I will go to the stickers option illustrations. This is how we can basically take okay. The images, but they are trying to charge me some box here, but I want some free version of that. Okay, I'll just take this one. I'm downloading the vile now. I have downloaded. Go back to my X D. Come here from this, I will import this one here. You guys can have this. Okay, Maybe with shift I can just increase the size of this one. Okay, I will select this and bring this here. Okay. And from here what I can do is I will select the border size as ten. And I'll click on Enter here. You can see I do have an icon here. Okay, I select this here and I will just group this one. I do have this now here. This one is done. And all I want to put here, Okay, If I want to put any images or like different images about the group. Okay, I can put here, suppose I want to put up like the menu or something as such. Again, create the text box or just bring your text box right here. Create a text box here. I'll decrease this to 30. I'll click on Enter here, come here and write Menu. Now what I'll do is with this one, I can create different boxes. Okay? Suppose with Al, I will create a different box here. Suppose I want to have five boxes here. Like five options, Okay? Here, I will move on here, but later on I'll be explaining you how you guys can basically here. I do have five options on top here, Okay? Now what I'm going to do is I will write, okay, first one I will write us, the next I will write work. Then I'll come to this menu and we, what should I write here about our work? And we write here events. I'll come here and I'll write, okay, all these options are quite different here. The last thing which I'll write is join us. I'm trying to make a NGO page here, okay? I'll make sure that the spacing between all these are quite appropriate, okay? I will keep a good spacing between each and everything. Here I do have. I'm aligning also at the same place. Okay. Yeah. As you can see now I do have a good spacing between those and they can understand that this is like, this is the menu ba from where they can basically work around. Okay, I'm done with this one and now I can create from here. I want to give a brief of what this is about. I can use a subtitle if I come here and I want to create another box here. So I will create one text box here. Now in this text box, I write, I'll write, inspiring change and hope. This is going to be my subtitle, okay? Or the motto from here. I will just resize this one maybe to 60. I'll click on Enter Now, I can change the color from here as well. Suppose I want a contrast of this color and I want to check the border as well. Okay, maybe the border. I'll take something in green. I will change this stroke to two is fine. Okay. I'll keep this one here with my selection tool. I will select it, place it accordingly. Now, I can also create a box here. Okay. A box for a box for search. Okay. Or I, any icon. Come to the icon finder here and I will create a search button here. Okay, I'll come here. As you can see, I do have different search buttons here. I can take one from here, I can do this, and again, go back to my XD file from here, I can basically put that one up somewhere here. Okay, go to the import file again. From here I will import this and I will scale this one down. This one, sometimes it's quite hard to just move this around. I'll just move this one around this particular circle here. Now I can just decrease the size of this. Yeah, I do have. Yeah, this is the surge button here. I can basically put up a few images of this particular NGO. Okay? The name of the NGO is the home for everyone. The slogan is inspiring change and hope. Okay, Now if I want to create a page, suppose here I want to create particular boxes. Like I want them to fill up their names. Here, Okay, here. And the same box. I will duplicate this one. Okay, Come here, check the selection tool. Click on this. This one. This one here you can select. I will take another box here, and here I will be writing with my text box here. I will write Don. Okay, select this particular text. With this, I will bring this one here. In between. I'll also change the color. Okay, Maybe I'll black color. I don't want any borders. Okay. I want that to be wide. I will keep this one here. Maybe I can just increase to bold. Now I will copy the same box here. Okay, Now I will select this. With this one, I will take it here. Here, here. So basically I can put it like that. Okay? So from here, so now I will type name here. I will type phone number, amount, E mail address, E mail. Okay. So I do have this one here, guys can see my web page is ready here. Okay. I can add a few more things here, donate us from here. You can see I do have the text options here, but if I take the bold Metallic here, you can see this is how it will basically look. Okay. Here you can see my web page is almost done, but I want to put few of the buttons here. Okay. I will come here again. Okay, Here I want to login button, log in or I'll see which one looks better. Okay, maybe I can take this one. This one looks quite good. I'll download the SVG form from here. Come to my X here. Now you guys will be able to see that. I will import it again. From here I will. As you can see here, I do have that particular button. Okay. Click on Shift, and after clicking Shift, you guys can come here a little bit. Select here. Once you click this one, it will take you to another page here. Okay, so hope you guys have understood. And now I can also import few of the images. Like maybe I'll put here and I'll write our campaign campaign. Select this, put this somewhere here. Move this one, a little top under this one. I'll add few of the images. Okay, here, I want to add few images for that, I will select this particular box here. First, I will duplicate this box again. Okay, here I have selected a particular box here again as well. From here, I will align this with the same line here. Come here, go to the import option. From import, I'll be importing some of the images. Okay, from here again I will select suppose this image. I will import this one, but the image is too big. With my shift, I will decrease the size of the image and I'll import another file as well. I should have done it at once, but maybe I'll take this image. I will import this one here. Okay. Yeah, I do have this image. I'll try to bring this one here and this one here. Now, I again zoom in to my work place here. Now as you can see, I do have both image, but what I want to do is I want to feed this inside. Okay? Suppose I do have this and this one. Now what I can do is maybe I will select this, this together. I want to select both of these together. In that case, what I can do, I will come here, click this. I will make this one a group. Well, I have here two images, as you can see in my background. Also I have images. What I can do here is, okay, let me delete this one. Instead of putting my images inside this box itself, if I come here, group this one, and now I can select, delete this one. And select this. And delete this one as well. Okay, this will be the last step where I'll be putting on everything and I'll be page here. Okay again, come here. Go to the import option. Under the import options, select both of these images. Import it. And as you can see, I'll just zoom out a little bit. And now I can just select images accordingly. Suppose I just want to select this image here. And now I want to decrease the size of this particular image here. Okay? And the same way I want to decrease the size of this image as well. Okay, now let's come here. Let's put up this image with my hand tool. I'll come here and with old I'll zoom in. Move this around here. You can see I do have this image here. Okay. From here, just clicking on Shift, I can basically move around this image where I basically want to put this one. Suppose if I want to put this image here, I can put this. And I do have another image as well here. Okay, I'll bring this particular image here as well. You guys can see here. I do have the image here as well so you guys can see I can basically change or increase the size of the images. Yeah, now my web page is ready. As you guys can see, I have made a web page for NGO. Okay. So the name of the NGO is the home for everyone and this is the motto and this is some of the images of their campaign. And here you can donate, give your name if you want to know anything. So this is how you can basically do web designing. Okay, So I hope you have understood the easiest way. And now the last thing which you'll do is come here and you can basically group this one. If I move this one right now, it will move all together at once, okay? So if I select this here, as you can see, once I select this one and come here, you can see there are different groups. Okay? This is the group one, group four, okay? Here you can see there are different types of things here. This is the web page which I was working on. I will delete this one from here. This is the art board. I hope you guys have understood everything about this class as well. At last, I've shown you guys how to create our own design of yourself while creating a web page. Okay, I've shown you guys the most simple way of how you can actually start doing your designing. Hope to see you all in the class project, and I've given you all some projects. And I'll be hoping to get those back from you all, okay. That I can review those and send you guys feedback of how you guys can make it. Okay. So here I have just made quite simple web page here. You guys can actually enhance that, use some of the three D animations. And this is how you can see other website pages and see it accordingly. And I've shown you guys prototype so you guys can do prototyping as well by creating more pages. Okay, so if you guys are sending more pages, I don't have any problem in checking those out. I'll be really glad that you guys sent. Till then, take care and hope to see you all in any other class. If you guys have any problem regarding this tutorial, if you're not understanding anything, every time you guys can get back to me, I'll be there to help you guys out. Take care guys and goodbye.