Adobe XD de iniciante a especialista — design, protótipo e colaboração

1. Introduction to Adobe XD Course: welcome to my course about it. Over 60 and in the schools you are going to learn all the basic stuff and all that stuff offered over 60 we're going to design, we're going to create prototypes, were going toe, learn all about paper prototyping and all the different interactive prototypes, live prototypes. And we are going to collaborate with your developers. So what collaboration means is we're going toe hand off our design to over developers using Zeppelin and Advil cold. So don't worry if you don't know about this this advanced stuff because you're going to learn that in this course I am going to cover all the basics. Shortcuts? What are the different tools you can use to build your design? And then we're going to move on to the prototyping phase where we're going to go generate the flu off app and different skins. We're going to connect the different screens with each other. And then in the end, we're going to use our design to collaborate with other developers. We're going to design, we're going toe, give them design specifications and different the distances between different elements and the quoted style guides, which your developers can use instantly there us app design or iPhone app design. Now we're going to cover a lot about border typing. You will see me creating different paper Prototypes were going to cover the sketching part or the block level design, which is the first face off any design. So this course is a mix off user experience techniques, few off them. I have discussed in a lot of TD like prototyping and also about Adobe X T. How you can use and create instant prototypes originate instant prototypes using Adobe X'd . Now a lot off designers, I have seen that they never talk about design guidelines, I US design guidelines or the guidelines. Every designer and developer should know that the navigation bar or that they're but off the U. S. App should be 49 points or the burden should be 44 points. All these specifications I'm going to cover in this course. And, uh, if you have any problem or you face any problem, you can easily contact me. Why are question answers and you can also ask me directly by messaging me. We will do a lot off stuff together, so see you soon in that course, and I will be your instructor 2. What Is Adobe Xd?: Hello, everyone. Today we're going to meet the new tool off Adobe, which is a job x d and I was reading for a long time for few features the introduced just now in X t. And now I'm going to show you some off the great features off it. And they are ah, Robur team. They're working a monthly on these and releasing each feature monthly on the basis off of awarding from different you A designers and user experience designers from all over the world. Okay, so this is at over 60. I am right now on Windows. There are just few minor differences within the macro version and windows version, but they are almost similar. OK, now I'm going to show you some off the great and cool features off X'd and why you should use it as, ah design via frame and prototype tool in your user experience, design, workflow or your you a design work. Okay, now why these three tools for shop sketch and ago backs D They are great for your design or user experience design because apple are U S leaders version, they are producing their graphics in these three for Max Okay, so right now they're sporting for the shop sketch and aerobics T. And if you look at the file sizes the adobe X t file sizes the smallest eighties, 18.9 MB so you can see it is very close to sketch file size, so it it's five size is very small. Okay, so this is a very big plus point because you can create, like, hundreds off different art boards in it. Okay, So different screens, maybe hundreds are 20 or 30 different screens, and your file size will still be small. Okay, so it is easier to share one off the grid features off a job X t is. It's repeat. Good. Know what? Repeat greed is that you create your design element once, and you are going to repeat it by making a great UK You can see in this design example which we're going to create an an end off the scores. You can see this is our repeat creates. So if I try toes short short on it, you can see it is removing all the other, uh, these, um, content templates over here. Okay, so it is moving these. Okay, So you can extend your grid in destruction and in the vertical direction, both off these directions and it is going to multiply your single content and you can change it. You can. I did it. And you can do whatever you want to do it. And ah, it will mean a group. Okay, so this is very great feature to create origin. Read content instantly. Okay. So you don't need to generate everything again and again. You can see over here. These are duplicates. Okay. My child protection. Child production, child protection training. Then we have another feature which is called prototyping. You can link all the screen you can see or hear. Here is a section prototype, and you can view the prototype on your desktop. You can see your hair. Here is a prototype. This is a great feature because in the user experience design, you need to test your prototypes with your users. You need to see how users are going to really use this. Whether this button is enough for their Tom or whether it is missing there, Tom. OK, so all kind of thes things, whether the spacing between these two elements is in good enough that the user is not tapping on this one and opening this one. Okay, so these are some great features off Adobe X'd, and ah, we're going to cover a lot of things in it. Okay? Also, you can move. I'll preview your, uh, these prototypes. You can view them directly on your mobile. Your user's mobile. Also, you can share the design specs. Okay, let me show you the design specs. Here we have the design specs off the same project, and you can see if I go to any of thes. It is showing me that this green is linked to this one. So if I go to this one, Okay, so it is showing all the colors used on this art board along with all the correct er styles . So if I click on any off thes item, it is going to show the details off that What is the village in height off this item? What is the distance between these two items of eso? 16 points. So all these things colors, roundness. This is the roundness off this button. Okay, Rounded corners. And it is showing also other facts, like shadow and this stuff. Okay, so this is very handy. It is right now in bitter design specs, Peter. They are trying to improve it for the and I hope it is going to be a great feature in the near future. Okay. Okay. Now back toe, Adobe X'd few more features, which I really love is this symbol library. You can see assets. I can add all the colors I have used all the different textiles, and, uh, styles I have used in the symbols symbols is actually the reusable element. You can create one symbol and you can multiply it or use it on any screen. And if I did any off the symbols, you can see overhead. I know we are in prototype more. So here we have a symbol. Okay, so this is a symbol. And if I try to change the color off the symbol you can see it has changed all across. Different art bores in the whole design. Wherever I have used this symbol, it is going to be changed. So this is a great feature. You can instantly change anything on your any art board. If it's a symbol, it is going to be updated on all the art boards. So this side is basically in the style guides we normally used to create in another Softwares or anything in Zeppelin. Or if you have washed my other courses, you know what style guides are? They're basically the styling, coloring and typographic guides for using different four sizes, different colors and how they are going to be used in our design. Okay, so these are all the great features off X t, and I will show you a lot off deal and how we can quickly generate these designs in X t. In the real world, situations creating designs with a lot of speed is really necessary. You want to show your a prototype or you're working ab demo. Do your client or your user and you wanted to do it instantly within two hours or two yards or maybe four hours. I think this kind of designs with these many screens, like a door nine screens. I think you can do it in just to ours. And also you can share your prototypes. You can see her hair publish prototype. Okay, you can share your prototype link toe any off your customer or client on the instant, and they can do it on their devices. Okay, Now, in the next lesson, I'm going to show you how to download it and how to purchase this software if you really want to purchase it. But right now, if you're learning, you just need toe download the trial version. Okay, so let's move on to the next lesson. 3. Download And Install Adobe Xd: Okay, now moving on. We are going to download at Obey X'd trial version. So you are going to go to this jewel adobe dot com products slash x deed artist TML or I'm going to share this world with you. Okay, so this is the free trial. You can download the trial for one month, and you can also buy it. So if you click on this by now, it is dirt cheap right now, and it is available for $10 apartment. Okay, so this is just recently, I think there are other APS there for $20 per month, but actually is available for $10 apartment. Okay, if you want to really want to purchase it. Okay. Now coming to the system requirements. Okay. So before installing it on your PC are Mac, this is very great cool thing about this app that it is available for both operating systems. Okay, So if your user or your client they are working on a PC or a Mac, they can see their design, and they can play with it. Okay, so here we have the system requirements for Mac OS, which is Mac os 10.11 and later. Okay, these are the memory for G B, 1.4 gigahertz known. Ready? Not display. Retina recommended. Okay. And then we have Windows 10. Anyone? Three update. OK, so if you have simple windows, then and north and mercy update or anything below this version 16 07 it is going toe. Give you problem. You cannot install it a lot off students. They asked me that how to install it on Windows 10. Make sure that you have any mercy update or the latest version off Windows 10. Okay. And these are the requirements CPU, two gigahertz memory for G B A, G B, off installation space and display. And descend there. Okay. I really prefer that you have a good graphic card at Leeds. At least having Koji bi or one GB off ram on your graphic card. Okay? Because it is necessary for most off them design intensive applications. Okay, now, these are the requirements, so make sure go ahead. If you haven't installed at all Baxter yet. Try to install the free trial version and download it and install it, and I will see you in the next lesson. 4. Why Adobe Xd Is So Awesome: three and going to introduce you. Wired will be extinct is so popular among user interface designers. You're designers and user experience designers. There are several things or you can say, features that should be present in any kind off design tool to make it perfect for user experience. Designers enjoy designers. Now. The first feature is that it should generate prototype Are you? I design or screen off any app quickly so we can build swiftly in it. We can design. Certainly. It should not take like whole day to create five or six things, often app. Okay, so this is one thing. Second thing is that we can easily share it and we can is a fantastic with users, that is also you can build a quick prototype dammit, Prototype off your product X Test it with your users swiftly. So if you are testing with the user and showing him or heart your first idea off your app and hey doesn't like something or he says that this is this is not what I want. You can instant instantly change it in adobe X T and generate another prototype ride away and showed that do you really want this one. Okay, so this is another feature. Third features, which they really introduced right now, is for developers. What developers need is they actually need specifications, colors the cords off colors in accessible values or RGB values or sometimes some other value rgl for value. Okay, so they are more interested in the specifications that what colors we need to use in our this team off this app or website. And what are different specifications that elated with? Okay, so these are recently introduced in Adobe, Actually, which is that you can extract your generate your elements, your design specifications, that this element is this much far away from this button. Okay, you can generate in it in within inspect element, which is, I think they're feature Adobe's feature in B division right now. Also, they have recently introduced that you can export your adobe extra designs in Tow Zeppelin , which is another tool for creating on design specifications and recorded any mention off your design. And then also they have introduced that you can export your layers into ever cool. Okay. And also there is one more. I think proto by to create any missions off your prototype. More detail and emissions are micro animations. Okay, so this is all about this lesson. I hope you have enjoyed my this introduction operative txt and what you can do with it and why it is getting popular among other tools. Because there's one more reason it's file size is really small. I think it is even smaller than sketch. If you know a sketch map, it is smaller than sketchy. So it is developing at a fast and peace and a lot of features are added every month in it. So I really advise that if you enjoy designer are into some UX design feel you should really learn how to, you know, mingle with this hand away excess offer. Okay. It is really cool. Lightweight, and I hope you will love it. Okay, See you soon. In another lesser 5. Welcome Screen Updated: I hope that up till now, you have already installed Adobe XD on your machine. Now we are going to see what this welcome screen here. So whenever you run Adobe X D, this is the first screen you are going to see. So over here at the bottom you can see these are my recent files. So these are my recent projects or files I have opened. I can reopen them by clicking on any of these. On the left, we have different areas like home learn. Learn is if you want to see some of the videos from Adobe company on how to use this Adobe XD. Then we have cloud documents. Adobe XD has recently being shifted to cloud. So whenever you open up or save any file, it is also saved on cloud. So it brings you the changes and the modified history of your document. So whatever you design, for example, like one hour to go to our ago, if you've saved it, it will reflect all the changes you made with time. So it is going to auto update it on the cloud. So these are cloud documents. If I click over here you can see these are all the documents I have uploaded to my cloud. You can see over here, these are few documents. If you want to delete them, you can click over here. You can delete them like this. Also, you can sort them. These are different options. And then we have dab shared with you. So these are the files if someone else has shared their projects with me and I am working with them on the cloud documents. This is going to be over here. These are all the files deleted. So I recently deletes it, lifted this file. So this is all here. Now, if you click on Manage links, it is going to go to your cloud over here you can see this Macleod and once you click the management, but then these are the all published prototypes or design specs or projects I have shared with those. So you can see if you look closely on here at the bottom it says prototype, prototype, prototype design specs, design specs prototype. So these are different files I have shared with others. You can see over here, this is published links, so these are all the ones I have shared with others. You can manage them over here. You can click over here, you can copy that link and share it with others. You can permanently delete this shared or published links. Now, let's go back to our Adobe XD screen and you can see if we go back to home, that is all we have are here, our cloud documents shared with me, deleted files, managed LINCS, managed links for the files I have shared with others. So that is all about this welcome screen. I hope you have enjoyed this lesson. Let's go further and discuss the interface in the next lesson. 6. Intro to interface adobe XD NEW 2020: Now we are going to open up a new file for that. We have different templates over here. Here we have iPhone, different few want to design an iPhone app or Google App or Android app, you're going to go and here, if you want to go for web design, you will be using some of the templates over here. If you want to design something for social media, Instagram posts, Twitter posts, Twitter header fade, Facebook posts, shoot your video. You are going to go over here. Right now. I'm going to select something from here. Like, let's select this Google Pixel for, for Excel. Now, this is our art board over here. So let's maximize this one. And you can see at the top it says untitled and here is a small cloud login and it is showing me the time over here. So let's click over here and change the name to our, let's say first visit to XD save. So now you can see I already have some plug-ins and star, so it is showing me that one plug-in needs update we have right now I'm going to close this one. And this is our simple interface or Adobe X on the right you can see we have few options over here like this is zoom level. We can zoom to 100%. This is a 100% of this design. This is our desktop preview for the prototype. This is our Mobile Preview. If we have installed the mobile app and we want to view this screen on our mobile. This is going to be o here. If I want to invite someone else, someone other, some other designer, I can click over here. This is still in the beta, so I can enable editing. So another designer can edit my design two. On the left over here, we have three tabs, design, prototype and shear. Design is where we will be designing boast of our screens, we will be putting different. But as we will be making different stuff over here. For example, this button over here. And in the prototype section, we will be linking two or three screens. For example, if I have another screen where we learn every shortcut and everything, I'm just trying to explain. So now you can see we have two screens. One is this 11 is this second one. I can link them together like this. And this is going to be in our prototype. So our interactive prototypes will be overhead. Our designs files will be overhead. Sharing will be when we want to share our designs with someone. So you can see we have different options where design review to get feedback on your design or prototype. Then we have development where we will be sharing our document with developers to show them the code we have for all those elements over here. Then for presentation, maybe we want to show it to our clients. And then for user testing and then for custom custom settings. So these are different settings for sharing your document. No, I'm going back to home. And if I click Home, you can see we can go back to this home screen where we can open up any other recent document. Again, we have some menu over here, you can see on the left in Adobe XD is Mac version, we have the same menu at the top of MAC over here. So I can click over here, you can see we have new open document. Then we have different UI gates. Then we have recent document, rename this document, save as save as local document. So you can also save this one as your local document. Now the problem will be if you try to save it as your local document, your changes are history will not be saved over here. So you can see these are the two changes I have made at 302 PM and 03:04 PM. Three our 3pm and fourth minute, I actually added this second screen. So it is actually saving all my changes into cloud. So whenever I want to access it, I can go back, for example, to this one. I can revert back. You can see open in a new window. So if I try to open this in a new window, you can see it will have only one screen. So you can see we have this time borrower here. And it is the first screen I think I started with. This is the fun. We started with empty screen. So it is going to save all the history of all the changes you are going to make or maybe save after four or five minutes. I'm not sure anyhow. So on the left we have all the tools. These are the tools we are going to use in the next lessons. I'm going to explain each of them. Then on the bottom over here we have assets, we have Layers panel, we have our plug-ins over here. So whatever plugins you are going to install, these are free plugins. Some of them are paid. You can install them over here and you can use them like this. So if you click over here, you can see it says an error. Color scale too wide. Let's create, you can see this is a color scale over here. So these are the plug-ins they are going to automate and enhance your Adobe XD capabilities. So these are the tools. These are the three we will mostly looking at this art board over here onboard Arbor, Pelham. These are art boards, actually, these are called art boards. And that is all about the interface of Adobe XD. We have main three tabs over here, design, prototype, and share. And this is the zoom level. We will be using it a lot. This is the play button to preview our perfect time away. You can see in this window, this is also going to be used a lot. So that is all the introduction about the interface. We will dig more into Adobe texting in the next lesson. Let's jump to the next S And now. 7. Properties Panel Adoe Xd Interface: So if I again go to this design, you can see here we have another panel, which is our properties panel. Okay, so if I click on this art board So this art board is selection selected, and this blue line shows that this art board is active, I'm going to show a see all the options alleged. Do this art board, like with on the position of this art board height off the starboard. What is will be the scrolling and view board height. How much height is visible, then we have appearance, the fill color. I can also change the color if I want. Oh, and I mean, I'm need to click this. Okay, so I I can also create grids and Leo's on it. We're going toe talk about Gretchen layouts later on. I'm just showing you that this is the properties panel. Okay, So if I click on this rounded rectangle, okay, so if I click on this round reject angle, you can see all the options later to this, like alignment. A repeat grade. This fit and these angers relation Everything Okay, So this is all here. Okay. On the top bar will be alignments. than we have. The repeat created our union. Are these options? I don't want to explain right now. Just you need to know that this area is for controlling your design objects. Okay, so if you have an art board, you can control its height and other features. If you have ah, rectangles, you can create different effects and different sizes and different roundness and different capacity as using the's property panels. Okay, so everything, most of the things about any object will be on this side. You can see what here. Now, I have selected this text and the text. Um, options are over here. You can see. And if you select the art boarded up, properties related to art board will be over here. So this is how we use a job. A x t. OK, Now, there are two more icons on the left. At the bottom, you can see or hear layers and assets. Okay, Now, these assets are there going to be all the colors. Character styles are symbols I'm going to use throughout my design or all the art boards. Okay, So if I try to add this like Aunt Corrector style, you can see, it has added an R tractor style in these assets area. OK, so don't confuse this design and prototype with these two. Okay? These are going to show you all the layers and this is going to show you all the assets you have used in your design. Okay, so this is the introduction to the interface off Adobe X'd. I hope you have enjoyed this lesson. Let's move on to the next exercise. 8. Adobe Xd Mac And Win Differences: Okay, now in this listen, we're going to see what are the differences between Max version off. No, B, x d and B. C's version off, so be extra. Okay, So the first thing you are going to notice is this stop bar, which is shortcut bar over here, which is not present in windows. And though the shortcuts are very easy to remember, but still it is going to help a lot. Okay, So you can see you know what you can do with these objects. You can add them. You can. There are text options than we have a range and everything else cape on. Then we have this a date and file. Okay, so this is the first major difference. Then we have a few more differences. Like you can see the recently adobe X t. They have at least some, um, plug ins that are supported, or the third party tools that are supported by Adobe X'd on. And if I go to this export, you can see over here there is Zeppelin. Now, Zeppelin is a tool, and one other tool is ever called and two, or see these type off tools that are used for generating cord and generating specifications and documents specifications. If you don't know about Zeppelin, you should take my workflow off more than represent course where we generate all the style guides, colors, teams, everything within Zeppelins using for the shop. Okay. No, we're all set. I have one created, one paragraph one heading in a one button, and we're going to export it. Toe Zeppelin. Let's see what it is going to happen over here. Okay, so let's select this art board, and we're going to export it to Siplin. Okay, so that's important. So I created it in one X. So I'm going to import it into one next, and it is uploading the design right now. Okay, so everything is done. Let's see this. Okay, so that's very cool. I really like it. Okay, So this is our heading, and this is all the sizes are you can see in the points which are for mobile development. You can see over here. Then we have this also, the color is also coming in RGB. I think it is for us. So you can see over here how we can export it into ah Zeppelin. Okay, so we will see this later on. We're going toe. See this in detail later on. In the last few lessons right now, just I wanted to show you that you can do a lot of things with Adobe XY. So what Adobe Extra do is they normally released their new features first for my question, and after one or two months, it is going to be included in tow. The windows question. OK, so don't worry if you have windows that you are lacking behind. Okay, so that is not a very big difference. Okay, so there is one more difference which I forgot to tell you if you create a prototype over here, So I'm going to duplicate this repressing my art option key. And I'm going toe. Just create a simple prototype. I would link these two screens, appear so dissolved, and just change the color off this button. So we know that we are inside. Another went over here. Okay, so all done. Now we're going to play this and you can see over here. Uh, so what you can see over here is a small button, which is record. Okay. So I can press this and I can record a video off my preview. Okay? And then I can export it like that. It is going to be a video. It is going to save a video renew, brutal type. And you can share this video with anyone. Okay, Right now, this official is not available in Windows. I hope it will come soon in them. The next few upgrades, maybe next month or maybe from March or Apple. I don't know. This is also a neat feature which is only present in Adobe X'd Mex version. And I hope you have enjoyed this lesson for the Mac users. I think this is a creator, Will and you can do a lot of things with it. I hope you have enjoyed this lesson. If you have any questions to ask me unless move onto the next lesson. 9. Updates And Upcoming Features Xd: one of the best things about aerobics T is that it is updated regularly. So adobe a company and they are working on it a day by day and night by night and the almost give you an update every month. Okay, so you can see the last update. WAAS 11 December 2017 and the latest one is generally 22nd 2018. OK, so they have better zone performance. Dropbox preview for extra file switch between color morse three different colored morse they are offering right now and new greedy INTs. Really Ingredients improve mental design specifications display are bordered 100% and new feature, which is called batch export. Also, they are starting third party work through integrations like Zeppelin. Never court. Simply put a pie and guide composited. Okay, so ah, you can see here they have shown that available for Mac on Lee. So there are few features which I'm going to show you in the next lesson. A few off the differences you are going to see on my question. Mac version is like, uh, 10%. Or maybe I can say 5% head off windows vision. Okay, so they have more features on Mac. First they launched them on Mac first, and then they launch on windows. Okay, so this is about the updates. Let me show you one more thing that they are working on a lot of feature requests. Okay, so this is adobe Extra feature request form, and you can see here people are voting for different new features, like text for mating. And then we have the static fixed object between traditions. So you can see this is the review from a debating? They're saying feature under review. Okay, so they are reviewing this feature than they have feature needs more information than they have featured in the backlog. Okay, so there are few features which they have already working, started, started working on, like you can see or hear about refugees sport features started, so hopefully they're going to lose it in the next month, Or maybe two months after this. Start working on it. So you can say this is very cool Feature. You can stay updated with what is coming up next in a doorway. X'd. Okay, let's move on to the next lesson where we're going to see how to start using X d. Ok, so we are actually going to start using it 10. Exercise - First Assignment Simple One: No. We're going to get some practical stuff with Adobe Extra. Okay, We have talked a lot about it, and now I'm going to show you how you can create some simple stuff in it. OK, so we're going to do this first assignment. This is going to be your assignment. I'm going to create a simple screen. Let me show you. So I have opened up this art board, which is iPhone 678 and I'm going toe press control zero command zero, zoom in. Or you can also go over here and zoom 200%. Okay. Now, what I want you to do is just click on this ellipse stool and just drag and hold your shift key so you can make a proportional circular. We're here, and now we are going toe press this, select we and we're going to make it in the middle. Okay, so once it's in the middle, you can see there is ah, pink line or smart guide, which is showing us that it's in the middle. Then we're going to go over here in this area and this is our border size. We can increase the border size to four like that. And I'm going to grab my image Jewel ahead, and I'm going to drag it and drop it inside this circle like that. Okay, so I want you to do something like this. You can use your own image. You can also change the border color. Click over here and I can change the border killer toe to 7 to 7 to seven. Something like that. And then I want you to write some text over here. For example, this is my title. Um, like Mohammed s and CES. Something like that. And I want you to type your ah favorite court over here. Okay, so maybe Okay, so if your text is a bit longer so I'm going toe this'll is attack size over here. Don't worry about I'm this. I'm going to go in a lot of detail in the next section, so don't very right now. Just seeing the text size to something like 16 like this, you can see No, when I try to move, it is showing me the distances between different elements. Also, I can select this one and I can go from here toe something board, okay? And I can also align them in the middle like this. This is already in the middle. Okay? And then I want you toe. Have ah button over here. So we're going to create a button with district angle tool. Click on the sect angle. This is very simple exercise. Don't worry that you are No. You are going to get into problem. Remove the border and for the field. I want the color. And I'm going to use my tax tool to create something on it. Like hire me. Okay, so I have breast escape or V two selected. And then I'm going to select somewhere else. Yes. Move it in the middle like this. And I'm going to change its feel. Color is over there on the right. I'm going to make it void. Okay? You can also select both off them like this dragon slack, and you can align them in the middle like this. But normally I like that. I should move it of it up. And I have selected bought off them again like this and move them up like this. It's very simple Tools, toe design and work over here. K Also, if you want, you can also type something over here like this. So if I want a paragraph off text are a lot of text, I'm going to click and drag like this and blah blah, blah, blah, blah, blah, blah, blah, blah, blah, blah. Okay, that's a nice poetry. And I'm going to change the fill color. Okay, so first I need to select this text and watching the film color to something like this. Okay, so I don't want you to write blah, blah. Hey, so I'm going to go with regular and I am going toe. Get it? 18 exits off size. Okay, so let's write something over here. I'm going to skip it. Okay, so I wrote something about me. OK, so I'm going to remove this one, and I'm going to use this over here like this. And you can use that in the middle. Something like this? Yes, because it's a very lying in the middle, and I can use something like this. And now you can see here we have Let's change the fill color toe darker color like this. Okay, so this is going to be your first assignment. Just your name, what you love and what you do and what you like And what you've watched in just two lines and Abberton. Okay, so if you want to change the radius off the burden want toe, make the rounded corners you can do it over here like I wanted to be. Eight pixel rounded. You can see your hair If I want to add some shadow, you can click this shadow don't change anything, Don't do play much with these values were going to cover Ah, lot in the detail. So this is going to be your first assignment that you want to create something like similar to this. Just create an ellipse. Drag your image into it your name, what you like. You can also change it toe a bit grace color. So there's a contrast between these two and a nice burden and some shadow around it. You can also round the corners if you like, and you can also use something spooks. So I'm going to use four for the rounded corners. Let's make capacity 100%. Okay. So you can do something like this. Let's me let me change this color to something like this. So this is more professional. Okay, so I want you to create something like this and ah, posted in the next assignment. And I will see you soon in the next section. 11. Artboards and grids in XD: Now, the first thing I'm going to talk about is art boards, because this is the first thing you are going to encounter in Adobe X'd. Okay, so I'm for this example. I'm going toe select this web, and I'm going to select this 12 80 yard board and let's zoom in command or control plus or just press command or control zero toes. Umit toe the fit and within this canvas. So here we have over our board. This is the art board name. If you want to did you can double click, and you can edit like website design or something like this. Okay, Now, whenever you want to select an art board, you need to click on its name, so click once and it is going to be selected and you can see different options and later toe this art board over here. This is the width and the height. If you want locket, you can if you want. Look, it will lock the aspect ratio. And once you increase this, the second value is also going to be increased, which we normally don't want. Okay, Then we have this portrait and landscape more, which is not uh, makes sense in Web design, but in mobile app, so it makes sense. Okay, then we have this scrolling. Okay, So scrolling is that when you create a prototype off this design, whether you want a scroll bar over here to scroll their design and okay, so something like this. So Vieux Port Height is going to decide where the scroll body. So if I have this, uh, Vieux Port Heights said to 600 you can see here is my school bit. Okay, so this is my you can say page full gesso in web design. Time fold is the area which is going toe visible on the first time, and someone visits. Okay, so until this area, the website will be visible next, we'll whisk rollerball. Okay, Now moving on to this appearance. Appearance is basically the background color off your whole design. You can set it to whatever you like, but I think keeping it toe white is the best option. Or here. Okay, let's click it again. Okay, now we have the grids. This is very important concepts, and this is used primarily in web design. A lot. Okay, So, even in graphic design, there are two types off grid layouts. One is this layout, which is column based, and the 2nd 1 is square best. Okay, so square size is normally meant for mobile abs. It is not good for I think Web design, but it can quickly place objects if you want. Oh, like this. Okay, so this is very, you know, it is going to snap toe every box. Okay, so it is easier toe yours like that. Okay, But it makes more sense in mobile design came and you are designing for mobile labs. It makes more sense. Let's delete it again. Go to the square and this is the size off the tile. You want to if you want, like 24 pigs, illiterate, tough scare, square size. You can set it to 24. You can set it to 64. It all depends on your own choice. Then we are going toe. Discuss this other layout, which is column based. We normally use in Web design. A 12 column layout and the good of it depends on your own choice. But normally, if you use the bootstrap settings it is going to be 30 pixels. Then we go to this margins. Margins are basically this all the space on the right, this white space or and on the left. So I am going to adjust it to 30 something like this. Okay, so it is showing me that. Do you want different margins on each side or same margins? So if I click on the same margin is is going to set it 31 pixels, so one pixel doesn't matter much, so I will live with that. Okay, So this is our almost bootstrap style greed. And if you want you congee in the size toe 12 under 11 70 something like this. Okay. And if you want different margins on each side, this is the option you are going to use Stop, stride bottom and left margins. Okay. You can also make it the default column later Settings. Okay, like this, and it's going to be set to default. So whenever you start using some columns, it will be said to this Defar settings. So this is the basics. Basic properties off any art board. Now, if you want another art board, maybe I want another dart board. So click on this art board tool and I'm going to click one. So what? Here? And she's going to generate another art now. The second option is that if I want toe, just click V. D. Selected first and click on the art board again and you can see different art boot options . So if I want and iPhone six sound a template over here, I can click on that, and it will be parallel to my Web design. Okay, so if I saw you, I clicked once more. So let's move toe this again, moved all and I'm going to zoom out a bit so we can see bought the art bores. And now if I want to move it, I just selected it and then I can move it around, okay. So I can place it over here, or I can place it over here whenever wherever I like. OK, so this is how you create different views off the same website Norgay and I'm going to click outside and select the art board tool by pressing a and I can also click android tablet. Okay, so, no, I have three views. One is a website or desktop you than we have template, view, and then we have iPhone view. If I click over here, I can change its layout toe four columns, which we normally use on Mobile APS and got over. It is going to be 16 and I want margins on the right and left to be 24 s. So I'm going toe select 24 or here. Okay. So Okay, so it is surrounding it to 25 which is good. Okay, so here is my set up for Web Web version off the same website a game. So I'm going to use four columns over here, and then I am going to use eight columns over here, so you can see it is set pretty far to eight columns, which is very create. I really love this software. They have very good default values, so let's set it to 32. Okay, so this is looking great. So this is how I will set up my art bores if I am designing different views off my website . Okay. So mobile view, Andhra tablet view and desktop view. Okay. So I'm not going to go into details and create a website design into this, but this is how you are going to set up your crudes. Now, if you want to delete an art board, you can select and press delete, and it is going to delete this art board. Okay, so it is that simple. Also, you can select from here and delete. And also you can duplicate copy and different commands you can see over here. Okay, So this is how you use thes art books. I hope you have enjoyed this lesson. Let's move on to the next lesson and see you soon. 12. 8 tools in XD: in this lesson. We're going to learn about that toolbar we have in Adobe X'd. So I'm goingto go through quickly around all these objects and the stool bar. OK, so we're going to start with this iPhone 678 Let's zoom in. Command zero on control zero. And here we have our hardball. OK, so this is V richest selection tool, which is, uh, this you can select anything with it. Okay, then we have the sect angle tool, which is our r and you can create but ends with it. Just press are, and here we have just drag and drop it in the middle. And this is border. These are different properties off it. We are going to come to this area later on. OK, so these are alignments. Repeat grade heights with appearance and different this radius corner radius feel border. We are going to look at these in another lesson right now. I'm going to just introduce you to all the tools over here available over here. OK? We have very limited tools and this is the street thing about this adobe extra. Okay, then we have this eclipse and you can share hold shift toe, you know, have it in a proportion proportional and you can press art with it are option key toe make and grow it in destruction. Okay, so it is going to grow from the center like that. So it's up to you. I'm going to place it in the middle. Okay, then we have this line tool. You can use this line tool anywhere you like. Okay, so here we have this line. Then we have the spent fuel and these shortcuts are very easy. And ah, what we call in user experience. Design, mapping, mapping It is easier to remember. Okay, so ps pentti is text our borders a Exumas e. So these are self explanatory. You don't need to remember them. Okay, then we have this text tool than we have this pen tool With mental, you can create different shapes like that. Just keep on flicking. And then we can also click and drag. Click and just leave it like that. Then click and drag so we can create many different shapes. It's almost similar to for a shop. Okay, we will come towards it later on in depth. Okay, So this is textile. You can just select the 30 or and you can write something over here like something. What have press escape and that's it. Press V, and you can select and move it around. Now, the alignment options. Or you can say smart alignment is very sophisticated for the new upcoming. Your design software is like sketch, and it'll be extra UK. Once you move something, it is going to show the distance off with all different elements elements over here in relation to them. OK, so it is telling me that now it is aligned to this one. And the distance between these two is 15 pixels. Okay, then we have this art board tools. I I think we have already discussed this. You just selected and create another art board. This is the art board for iPhone X. And then this is the zoom tool you can zoom on any element. Are that some back? I pressed control zero command zero, and you can zoom on the whole art port like this. Okay, so this is very simple. You can also set the zone level from here on in. Zoom out. These are you can see different shortcut keys. Control one control toe control plus plus and control plus minor. Zoom out and ah, zoom to selection, Control or command three. So if he was using Mac, it is going to be replaced with command. Okay, so very simple. Very easy. Shortcut keys. I am going toe. Create a separate lesson for all the usable shortcut keys. Okay, so we can quickly use and start using Adobe X'd. So these are all the tools. 3456 and eight tools you have over him. And most of them are justice. 123456 So six tools one is art board and one zoom, which is kind off a utility to use on. Zoom in and zoom out off your art boards. That is all about the toolbar. Over here we have. If you have any questions to ask me, let's move on to the next lesson. 13. Rectangle tool to create buttons: in distance. And I'm going to talk about this rectangle tool and how we can use it and how there are different properties. Let it wait and how we can create a nice looking button with directing. Okay, so I'm going to just select our press are and we're going to drag over here and create a rectangle like this. And you can see on the right side we have the width and the height. Let's set over to 75 in the height of 60. Picks is here. So we have set it to 60 and hiatus to 75. Now you can see here we have the first control, which is this opacity, which is how are back. It will be. And I am going to leave it 200%. Then the next one is corner radius. So if I wanted to be around, I am going toe. Use some corner radius like six over here. You can see now it is 100. So if I d selected to concede Okay, if you want different for different reasons for each corner, you are going to select this one. Okay, so if I press zero over here and also zero for this one. Okay, so you can see now we have two corners charge nor truncated. Okay, so this is how you can do it. So if I want 32 over here, I can have something like this. Okay, so I'm going toe press this one. So if you want a pill shape, you can increase it to, like, 39 or something like this. Soy this 1 39 and you can get this been shipped. But then we have these two properties, Which is one is Phil, which is the color. So I'm going to fill it with some nice blue color. Maybe this shop Buchler over here like this. Okay, then we have this border. I think we're going to remove it right now. And if you look at the border properties, you can see here is how much you want the border around it and fill the border will be It should be in a stroke. The Bader should be inside. These are outside our in the center. Okay, s. So I'm going to use outside and let's change the size toe 10 pixels. Okay, so now you can see here We have the selection and the border is outside this. Okay, so I am going to use some border off this color like this just for showing you what we can do with it. Okay, then we have this shadow and background blood. I'm not going to talk about the background blood. We're going to talk about it in the next lesson right now, we're going to add some shadow toe this button, and you can see we have this vie position and this blood. So this is basically the blood radius. How far it is going to blur the radius blood. This shadow. Okay, so if I set it to 20 you can see now the shadow is more blurred in this area. If you look closely, okay, why is the position these two axe? And why are the position off your shadow? Okay, so if I want toe, make it a bit more below my shape, I'm going to add more of I and you can see No, it is at this area. It is. I don't know. Okay, So also, I can move it horizontally in the direction. So if I add 50 you can see now it is on the right side. So X is the moment in destruction. You can also put negative values over here minus 10 and it is going to be in this area so you can also use minus nine. If you want to, it is going to move at the top. So this is how you are going to set your shadow? No. If you want the color off your shadow, you can click on this area and you can set the color off your shadow. Maybe I want some shadow in the blue color brew range. And ah, this is the opacity off your shadow. I wanted Toby like 20% off pick, 30% transparent. So you can see now the shadow is like this. So this is how you are going to use the shadows and different things with your shape, rectangle and ah, this is all about this rectangle. You can also align them alignment. I am going to talk about alignment in another lesson. And also you can reach it. But normally we don't need to repeat it like that. But if you want to, you can do it. Okay, so I'm goingto go back. Come on. See your control, Z And these are all the properties. If you have any question on to ask me and try to create somebody like this, I'm going toe. Put some text over it. Hello, dear. Okay, something like this. And I'm going to press V and the export it in the middle and change its fill color toe white. Okay, so let's move it a bit down. Okay, So 16 pigs is at the top and 17 picks is at the bottom. So if you can clear something like this, I would love to see it and try toe. Show me the buttons you can create in it. And I would love to review them and see what you can come up with. Okay, So this is all about how you can create different kinds of buttons rounded, rounded, corner square or Bill saved, but ansf it using x d. Let's move on to the next lesson. 14. Background and Object blur: Let's talk about object. Blood and background blur. Fact in Adobe X'd. These two effects are very cool. One of them. I use a lot background blood. Okay, so I'm going to show you examples off, both off them how to use them properly. Okay, so let's get started for using object blood or this back on blood. We need some image. Okay, So I am going to just drag and drop the image on this art board, which is iPad, and I'm going toe align it in the middle and pressing shift. And although I'm goingto make it a bit smaller thank you. So something like this. Okay, so we have this image now. I want a background blood for that. I need any shape. Maybe I am going to use this rectangle and I'm going toe use the whole ripped off this canvas press we and no, this rectangle is selected. The image is behind. So no, I'm going to use my background. So once I click on this Bagram blood, you can see the whole background is blurred. Let's hide this border and you can change the amount off the bloody want. So maybe I want this much blood. Do you want it to be bright in the vital side? Or you wanted to be a dark on the darker side. You can see the effect is different and also the opacity. I don't use this much. It is going to change the opacity of this effect, so keep it toe 0%. Okay, so maybe something like this and something like this and I'm going to extend it outside of this area. Okay? Okay. So this is how we use background blood. So even if you want to use it in the middle like this So maybe I just want this area to be blurred. I can use that similarly like this. OK, so this shape is basically our main background blood area. So this shape is going to define which area is goingto be blurred. Then we have this. If you go to this drop down, we have this object plan which is going toe blood. This Onley this object. So if I click on object that you can see now our rectangle is basically blood nor the background. So if I change your sculler toe black or something like this Okay. So you can see now this shape is actually blending in the background nor the background. Okay, so this is the difference between object blur and a background blood I have used in my mobile app You're going to design in the end off this course, so stay tuned, and this is a very cool effect. You can use this background blur in many locations and it is going toe. Make your text and your buttons visible if the background is very busy. So this is about Bagram girl and object blood. I hope you have enjoyed this lesson. Let's move on to the next lesson. 15. Ellipse tool: today, I'm going to talk about the lips stool and ah, its main purpose. Why we use it. And it is very quick toe, you know, clip most off my avatar images. OK, so we're going toe click and drag like this, and I'm holding shift to make it in proportion. And if I wanted to be growing from the centre, I'm going to press art option key along with my shift key. Okay, so I'm holding shift and art and option key right now to make it like this. Okay, now I'm going to place it in the middle like this. I'm going to hide its border, and I'm going to change its fill color so you can easily view it. Now I'm going to drag and drop any image onto it to create an avatar. Quickly. OK, now you can drag and drop any image onto this ellipse you can see or hear to create an avatar quickly. So what it basically does is it is clipped inside this circle. Okay, the problem with it is that you cannot change or move this image. Okay, so what you can do is just you can increase the size off this circle. It is going toe. Increase the image. And also you can change the shape you can see over here. Okay, Now it is an egg shape, and the image is you can see adjusting with this ship. So mostly we use Ellipse tool for this purpose. The other options we have for a lip stool are almost the same. We have border, fill, opacity, shadow and background blood. There's nothing much about it. So most of the time we use it for this purpose. We just drag and drop any image into this to create a radar. Our icons like that. So that is all about the slip stroll. If you have any questions to ask me, let's move on to the next lesson. 16. Basics of pen tool in XD: in this lesson, we're going to create these three icons. One is this cheese. One is this map icon, and one is this chat icon using Adobe Excuse. So first we are going to learn how to use spend two looking. I don't recommend that you go ahead and create all different kind off icons using Adobe Extra because it is not meant for creating AARP. Icons are icons. You can simply use SPG icons from all line. There are many free online on libraries. Off SVZ icons are so first we're going to see how to use Bento. So I'm going to create another art board expiration of that iPhone X and assume in a bit. And first we are going toe. Select this pen tool, and this is how you can create simple shapes. Click, click, click, click, click or click OK and click back on the first point and it is going to close the ship. You are going to press V, and now you can move this shape around here. So this is how you create simple ships now against, like this pen tool, click and click and drag to get some rounded corners and then I'm going to click, were here and then click back. So here I have created one arch over here. So if you double click on this shape, you can see you can click any off thes and there are the handlebars. You can adjust them afterwards you like, as you like. So they are moving as I move this around. Okay, so I have selected this one. So if I just want to move this one and it should not affect this one press you invest your option or Archy. Okay, So on your keyboard, if you press your are key and then click and move this, it is going to move. Just this one. Okay, so these are the two handles, So now this is going to move independently. So if I align it with this, you can see it is now a straight line. So if I d selected, this is a straight line. This is a curved line. So this is how you control and edit your parts and ah, different anchor points. So if I double click it, there are three anchor points over here. Okay, So one is this one. I can also use something like this. So I'm pressing shift toe, align it in some perfect angle. So it is right now, I think 90 degree or wanted to degree. So this is how I have created this bump. Very nice. Smooth bump. Okay, so this is how we use our pento. 17. Pen tool to creat Icons: Okay, so I'm going toe delete this shape. And now I'm going to start with the rectangle Tauqir, this first icon. So we are going to create one rectangle. Okay, so, press V And now we have the sect angle. Double click on it. And we have these four anchor points. Now we are going to select Ah, mental Right now. If you don't even select a pencil, you can see the venue, Khobar. On these lines where you can put some anchor points, it is turned toe mental, So just click once but here, once over here and one somewhere. So we added three more anchor points to this ship. Now what I'm going to do is I'm going toe press V, and I'm going to move it at the bottom like this. Okay, so now I have this basic ship, So if I double click it again again, I can select this anchor point and I can move it around. If you want something wrong in over here, double click it. And you are going to get this rounded around nestle here and anchor points more handlebars to control the roundness off your shape again so you can see now I have rounded this area like that. So this is one way of creating multiple different shapes from basic ships. Okay, now we're going to create this cheese, OK? So most mice are really going to love this if they are watching my dad, Dorian's. Okay, so we are going toe, create this one click once, click twice, and I got handlebars over here. This is another way, and I'm just going to click over here, and then So what I'm going to do is I'm going toe at just them right now like this. And I'm going to press my art option key to move this like, Okay, so, no, it is straightened out. And let's move it to make a perfect She's like this. Okay, so we have our ship. Let's make the border two pixels. And during the fill color toe, this yellow all may be a bit lighter, yellow like this. Okay, so we have over shape. We are going to add some few more shapes over here with this ellipse stool. So I'm pressing shift toe cleared, shift and drag to create thes circles like that. Okay, so we have our shapes now we can change the bottle color to this one, which is a darker yellow and ah, we have a very destiny. Jeez, Not good for call a stroll If you have like me. I have high cholesterol, so it is not good for me, but still. Okay, so here we have our cheese icon. So this is how you create custom shapes, Icon. Now I'm going to create this one. This is basically mayor by corn. It is very easy. Just select this ellipse stool reared, Ah, lips over here. And what I'm going to do is I'm going to press V DoubleClick and I just want to change this handlebar. So I just selected this one, this anchor point, and I'm going to press shift and arrow keys to move it at the bottom like this. Okay, now our basic shape is complete. What I'm going to do is double click over here to get our sharp corner. Okay, so this is very nice trick DoubleClick toe get rounded corners differently to get sharp corners. Okay, so I got some sharp corner over here. Now I'm going to create another small shape ellipse inside it like this and just select the outer shape and, ah, just remove the border and use the fill color to something like, Yes, I am going to use this blow. Let's use this blue. Okay, so for this one, I'm going to remove the border, and I'm going to add some shadow here, which is going to be zero zero and six. Okay, no overshadow is there were going to sack this shape and just align it over here like this . Select these two, and I'm going to align it in the middle like this. Okay, so you can see over here our map icon is also built. You can expand it if you want to. You can make it a bit vital to make it look more professional. Okay. Okay. So these are how you can create different icons using mental. I don't recommend that you go ahead and create something like these or something like this one you can use already built, professionally created SVG icons. SPD stands for scalable vector graphics and in the next lessons, few lessons or in the last lessons where we're going to create our app. I'm going to show you how to use SPG icons. So until then, I'm going to see you soon. In another lesson, let's move on to the next list. 18. Line tool: Now, let's talk about the line tool. If we click over here or press l it is a line tool and you can create a line or separator with it. Okay, so this is our line. This is the border off this line. Let's create a five pixel border like this. Okay? So also, you can see that these options are hidden over here. I'm not sure whether they are enabled or not in the first place. Let's create into the line. Okay, So this outside border is not option for this one. It is just a line. And, ah, you can change the color if you want. Oh, and also the opacity, shadow and back on blood. These are the four options we have over here. The only use off the line tool, which I see is that it is going to be used for the link text. So if I have a link over here, I can put a line and it like this. Okay, so this is the one news I can think off. And you I design for this line to looking. So that is all about the line tool. If you have any questions, you asked me. Let's move on to the next lesson where we're going to see the text tool 19. Text tool in Adobe XD: No. We're going to talk about this text tool, soap, lusty or text. And I'm going toe drag over here like this to create a paragraph. All you can simply click anywhere to clear. Just at line off Dexter here. So I'm going to create a paragraph over here. Okay, Now, I have some text in my paragraph. I can just click anywhere else to create a paragraph and breasts V and I can extended are contracted by using the's handles you can see over here. Okay, So I'm going to use this like that and just move it over here like this. Okay? Now, on the right side, you can see we have text. This is the phone. You can change the phone, whatever you want, Toe. And then here we have the fort. We'd all the styles off different. And this Ford, this is the size I want 24. I can select 24. Now it is hiding. It's make it full. And, uh, that some in to see actual corrector size. Okay, then we have this alignment. This is the center. This is tried, aligned, left a line. And this is the difference between our idea text or you can see paragraph and a line point text. Okay, so here we have this point text. It is better for alignment. You can see now it is a fixed square. Okay, so if I try toe change it. It is not basically a paragraph. This is a paragraph. So this is just a new feature. They added in it. Then you can underline it if you want to. And then we have this line spacing which you can set toe something else if you want. Oh, like I have set it to 32. And this is cactus pissing How wide the space should be inside the director. So if I, um he was 10 or 25 years, you can see now the space between the letters is a lot. Okay, so these are the main controls than we have again. The same similar controls, like all other rectangle. Laura, the tools. We have a pass ity. We have failed. We have borders, shadow and background, blood background, blood. We're not going to use anywhere on this one shadow. Maybe we're going to use when there is a dark background or something like that border. I think we're not going to use the bottom. So just stick with the Phil and ah, use any color you like. Like this one. And that's all about this. Ah, text video. Now there is only one shark coming to this area, which is it would be great if I can see different four styles or hair. And now I can just see the phone name off the force part Nordea how it looks or how it feels like. Okay, so I actually have to shift to that for to see that force style. So I think maybe they might have basically done it just to a wide more processing and make it swift. Okay, so maybe in the later versions, they might add some preview textile here for different force. So that is all about the text tool in adobe X t. I hope you have enjoyed this lesson. Let's move on to the next lesson. 20. Polygon tool - UPDATE: No way we're going to talk about a very new tool that has been introduced in Adobe EC. Steve itches. They're spotting on tool and you can plus why, too slick it or just click over here. And now we're going to draw a polygon. So here I'm drying it. If you can hold a press shift, it is going to be in proportions and just leave it like that. Now you can see on the right over here in the appearance stab, we can control its opacity. We can change its size Conch, for example, on the sites we want, like five sides and we can change it to fight. We can also change it's filled color. For example, If I want to have it, maybe in this color and I want to hide the border, I can hide the border, and I can also have a corner radius off like 50 20 or things like that, something like this. And I can also control the corner radius from this so you can see this is a small circle inside it. If I want to change the corner radius, I can use it. Okay, So if I want toe have like eight corners to concede. I can have eight corners, so this is a very handy tool. If you want to create some arrows or things like that. I think this is one of the basic shapes other than rectangle, ellipse. And this is polygon or triangle. So we needed something like that. Sword tanks at obey. You have added something like this, Senator B X d. I hope you will try it out and create some shapes using this polygon tool. It is almost similar to other rectangle and ellipse on. And that is all about this new polygon tool. Let's move on to the next lesson. 21. Colors and Palettes: today, I'm going to talk about colors and how we can create who create color scheme in Adobe X'd. Okay, so let's get started. Started with this art board, which is iPhone 678 And what we are going to do is just create a very nice, round, grounded corner. Britain. I'm going to press TV and move it around and let's create some six pigs of the wrongness. Okay, so looking great. Okay, so I'm going toe, remove the border. And when I go to this fill color, if you click over here, you can see here we have our colors. Okay, so here we have this. Ah, you bar where we can change the hue which color you want. Who is basically the color mean color. Okay, so maybe if I like to go in this, you and I want it to be over here, okay? So when I move up in destruction and the hue or saturation off, this color is actually increasing, Okay, So when I moved in discover area, it is becoming more dark in this area. It is going to become more light. Okay, add invite to it. So I am going toe keep almost in the middle over here. Okay? Now, this is the opacity. So if you wanted to be transparent, you can move this, I think. Ah, I should keep it over here. Okay, So this is how your solid color box, Okay. No. Ah, here are few options we're going to discuss one. Is this exact decimal value? So this is what your web designers are going to need. Toe color the Britons. Okay, so this is for developers. So if you want, you can convert this rgb more, which is red, blue, green and Alfa RGB. Okay. And, ah, normally we designers, I normally use this hue, saturation and brightness, which is easier to control and easier toe. You know, I just your colors in create beautiful color schemes. Using this, it's SB. Okay, so here we have you than saturation. How much color you want to put in saturation off that color. And this is the brightness. Okay, so how bright should jocular be? So if I reduce it to 90% you can see now this color is looking created is a bit darker blue color. Okay, let's again go to this year. Okay? So no you can add your color toe your color stretch. So just press this plus icon and you can see here we have $1 added over here. Okay, Now, if I want to add an a circular, the best way is just change this. Okay, so I want this gonna that is create. And maybe just two very something. I am going toe. Ah, reduce its brightness toe 80%. Let's see how this color comes up. So I'm going to add this one to then we can go to something like this this dark black. So you can see here. I have created a very nice color palette and you can see most of the colors I have generated over here. They are really matching. Great. OK, so these are all medical colors, this Seong blue and this blue color. Now, this is all about this color panel. How you can be a different color schemes over here, moving around in this space 22. Color Gradients in Xd: Now we're going to goto this linear radiant. So lenient. Brilliant is that we have one and two colors and this is the angle over here from top to bottom. So 90 degree is the angle off your ingredient. Okay, so we had mixing together So you can see No, if I move the angle how the ingredient is changing. So if I move it like this, Okay. And, ah, let's change the colors to something else. So you can see now I have created a very nice, greedy int button over here. And if I want to change the angle, I can change angle like this, maybe move it like that So you can see now how it is looking great. Now again, I'm going to click on this and going toe, Phil. And you can see here we have our radiant Let's try to add disc. Radiant. So it is not adding over here. So this is one thing. I think they should have something. Eso if I press this button, it should add my greedy. And over here. Okay, so it is not adding over here, but we can add it to something somewhere else. Right? Click and click this ad killer. Okay, so once I add this color, it is going to be in my assets killers. You can see over here. This is my style guide. Basically. So I am going to cover everything later. Two killers in adobe Extra. Okay, so here we have this color. Then we have thes four colors. Right now, these are not added into this. So we can do is just create few rectangles I'm going to create Monday tangle. And I'm going to duplicate it by pressing art or option key than just dragging it like this . And like this chick now, I'm going to use the same colors I want over here. Just remove the border and I'm going to use this sculler than discolor. Okay, then discovered Now here is my color scheme. Just created this instantly, so don't worry much about it. That what is this color scheme? Okay, so I'm going toe like, select all these colors and I'm going toe right click and add color. Okay. So you can see No, I have all my colors move to my assets. Okay. You can also advi color or variations of white or graze. If you want to add it to your color scheme. Okay, so this is the way you can add greedy INTs and all the cholesterol, your color scheme or the style guide. Okay. Style guide is basically the guide toe for your developers and your designers that what colors are used for what purpose and how we can build that design system using those colors . Okay, so now, coming to the last point, which is a Zadie ingredient, they just added this really ingredient, which is a greedy int from the inside. It is moving in a circle, so let's make it a bit bigger like this. Okay, so let's make it a background. So I'm going toe, create a bag like this. It is more visible. This kind off radiant is more visible when you have a background. Okay. So you can see now it is looking grid inside a bag round. Let's change our colors to this one. Okay? One is a bit darker. One in the 2nd 1 is a bit lighter. Let's remove these. Okay, so let's experiment with these. Let's change this darker color with this blue. And, uh okay, So it is looking great. Let's move it, Add some more points to it. So I just clicked over here and added one more point to it. Okay, so here I am going to change the color to black. Or maybe something sharper than like this can No. I'm going to tell you heartedly these radial ingredient points. Okay, So only point you can delete is the point you have created so far an ingredient. There must be two colors. Okay, so they are not Ah, I'm not ableto you can say delete these two points and this is at that's right. Most or 0% and 100%. And the point I created in the middle I completed by just pressing delete on my keyboard. All I can move it away like this and drag it away, and it is going to be deleted. Okay, so these two colors, they are, you know, needed for this greedy int, and you can control the ingredient from here. Okay, so if you want, it's something like this. You can see now this is looking a great background. Okay, so let's put some text over here so you can see what I did. I just added one line with the thickness of five. And I didn't just some text invite. Hello, Doctor. And this is looking great. Okay, so you can be these kind of backgrounds for your logon screens or sign up screens. Okay. With some ingredient in it. So this is all about the colors and radio ingredient in solid colors and linear ingredients . And these three Moore's off colors Hexi decimal RGB and be normally we will be using this one or Hexi decimal for Web mostly, but I think this one is perfect for creating the color schemes, okay? 23. Using coolors.io to create color schemes: one tool which I recommend for color scheme generation is this one coolers dot ru? I guess you can search this name on Google. I will share the u R l So go to this. Generate? Yes. So I'm going to go to this generated and it will start with some random colors. Okay, So what I suggest is that you first try to use one color you already have. Okay, so I am going toe based a color blue color from my color scheme or two colors from there to get the rest off the colors. Okay, so let's go back to X'd. Now. What I'm going to do is I'm going to copy this blue color and this Ah, see, on a color toe, my color scheme. Okay, so I am going toe, copy this value exit decimal value, and I'm going to go back over here. Okay, so I corporate one color, and I'm going to lock it over here. Okay, So press this lock and it is It is going to show you closed lock. Okay, then I'm going to copy the second girl over here, and I'm also going to lock this color. Okay? Now, I have to log colors. Now I'm going to press space bar to get some more colors. Colors America to these two killers. Okay, so we have this purple color. This is looking good. Also, this blue color I'm I like this blue color. And we can also use something like this which is a bit orange. Now, in my original color scheme, I use something closer to yellow and ah, this purple is a bit dark purple so you can create any color scheme. No, I'm going to press space bar again and I like this color. Okay, then I am going to press space bar again so you can lock any color you like. Okay, so I have locked these fuckers. So this one is only going to change. So I don't like this too yellow color. Maybe this one is good, Onda. Maybe I'm going to try a few more time. I really like this yellowish color, although it is a bit dull, but I think it is going to go well with these backgrounds. Okay, So once I have this color scheme generated, I can take a image or picture off this or Ah, I can export it in a PDF or PNG file or SVG five. So let's use SVG file. So it is clear created this SVG file. Now I'm going to import this svg file into my, um X'd. Okay, so less. Let's move it over here. No, you can see here we have this color scheme, svg file, and, uh, I am going toe. Make it a bit smaller like this. Let's dilute this background and everything else. Now you can see you have this color scheme and it is inevitable. You can see here we have 45 boxes and you can change your color scheme. So this is how I advise you took it. Color schemes. You must have at least one or two colors to start with. You can grab those colors from the app icon or logo off that company and start from there. So this is all about colors and how to create color schemes. Instantly with this stool and these few tips. I hope you enjoy this lesson. Let's move on to the next 24. Masks In Xd : in this lesson, we're going to learn about masking and how we can do it in a no b x d. There are two ways, and one is ah, which I really love is how we can where we can control our mosques and the image inside it . Okay, so right now we're going to create this one, and you can see if I double click it, I can move the image around like this. So this is a controllable mosque. Now, if I create a simple elipse like this one, Okay, so I'm going to show you both. Master, this is the simple simplest one, and it is not irritable. So I'm going to just drag and drop this beautiful girl image in this one. Okay, so we have this clip inside this ellipse, and you can see we cannot edit it. So if I double click it, it is going to edit the shape, but I cannot move the image around. Okay, so this is its limitation. So this is one way of creating mosques instantly. Now I'm going to lead it, and we're going to create this mosque. Okay. So, custom mass. I am also going to delete this one. So, first off, all what we're going to do is you can either use any rectangle in the shape you want, or you can build your shape with a mental. So I'm going toe here the shape with my pen tool, click, drag, click, drag. And I'm going to create something like this. Just a custom ship. So I have this custom shape overhead, and I have this rectangle over here. Okay, that's round this rectangle. Toe pixels. Okay, so we have two shapes over here right now. One is this one. Okay, so this is another one. Okay, so we have this part, which is Ah, custom shape. Let's name it custom shape. So I developed, like, this area, and I use this thing and we are going to create Call this rectangle. Okay, so my spelling sex, So don't worry about it. Okay, so now what we're going to do is that streak is that you are going toe. Ah, drag and drop any image. So I'm going to drag and drop an image over here like this. Okay, Now the image is very big, so you can just shorten it with shift and art I'm going to use it and goingto make it short . Just zoom out, control or command minus, and we're going to use this one. Okay, so like this. Okay, so I am going to place it over here so you can see the shape. Okay. Now, the trick is that you are going to use I'm going to use this rectangle. So I'm going to move this rectangle above this image in my layers panel. Okay, so right now I'm this in this layers, and this image is below, and the sect angle is at the top. No, I'm going toe shift and click port off them to select boat off them all. You can select both of them from here. Right? Click. And you can see there's an option mosque with ship shift. Control em or shift command M is a shortcut key, and you can just press this and now it has slipped inside this box. Now, the cool thing about it is that if I developed like, I can move the image around like this. So this is really cool. So I have more control on my mosque, and I can I changed the location off the image. Maybe I want to focus over here. I can use something like this. Okay, now here we have us custom shape. And similarly, let's just make it up it bigger and let's rotate it toe 30 like this. Okay, now I'm going to believe this one, and I'm going to use this ship instead. And I'm going toe import this file, Just drag and drop, and it is very big. So I'm going toe, make it a bit smaller. Okay, so that's home. Out. You can see the image is too big for our clipping area. Now they are almost good. OK, so I'm going to move this custom shape above this image and go to select both off them by pressing shift on my keyboard and right click and may mosque with ship. So we have a nice mosque or here and that's just moving around and ah, go Something like this make it more interesting. And now you can see I can also change this asking idiot our heads. If I does something like this, you can see I can change the mosque ing area, so double click. And you can also change this mosque in area and then also this image so you can see the bounding box off this asking India is different and this image is differently. For select this image you can see No, this is de selected so I can move this around like this and I can then again click anywhere else toe, see my mosque. Ok, so this is how you can create mosques on custom mosques in Adobe X'd. They are really helpful in your design. I hope you enjoyed this lesson and let's move on to the next. 25. Character Styles In XD: Now I'm going to talk about practice tiles and how you can reuse your textiles in your whole document A game. Now, Right now, I am this in this assets depth, which is over here. Okay, So you are going toe press this one, and you are going toe Come to this assets so or everything in your assets step whether their colors, corrector, styles or symbols, they are global. So if you change something over here, it is going to be reflected in all your art boards. Okay, So let me illustrate example off tractor style and how we can add few. This is my heading. Okay, So I have created a heading lex changer, Sculler toe something else like this one. And I'm going to create it in a paragraph. Let's move it in two lines like this. Okay, so this is my heading, and then I'm going toe create. Ah, paragraph over here. He used regular. Okay, So this is my paragraph, okay? And also, I'm going to change its color to something else. Maybe I want some. Ah, light grey black color over here. Like this one. Other than ah, pitch black. Ok, so just to differentiate between my heading in my paragraph. Okay, so this is my pantagraph. Let's add another link. Okay, so home I links will be click here to move on. So this is my link. I am going to use color, which is this one for this link and I'm going to use an underline. Okay, so this is my link. This is my paragraph. This is my heading now. What I'm going to do is I want them all to be in my character styles. OK, so I'm going to select all of them and going toe Click right? Click and add character style. Okay, so now you can see we have three styles. It is showing me the fourth name. I have used this. See Goy, you I and also different sizes and colors 48.20 point. It is a bit dull, Grey. It is a dark, blackish color and then we have this fun for our dext links. Okay, Now let me show you what is the power off this? Ok, so I'm going to press our drop shin and I'm going to duplicate this to another art board. So we have no to art books Okay, so I'm going to change it. Do something. Those Okay. Okay. Now what we're going to do is we need to change the color off these headings simultaneously . Okay? Now we can do it from over here on this. Cracked aside, right? Like at it. And I am going toe. Use some else. Something else like this one. And I'm going to use some other color. Maybe I want this color on may be discovered. Okay. Now you can see how I instantly changed all the director styles, which is basically my four styles. And they are global. So if I change it in one area, it is going to change everywhere else. Okay, this is really cool. Okay? So if I want to change my paragraphs, Yes. So where is my paragraph? I think this is my paragraph. I'm going to edit its color. I don't. I wanted to be more degree. I can change the color from here. Now you can see I have changing sculler toe degree and I can also change other siding. So if I want to change, the Ford are the spacing. Everything is going to be changed. So if I want a telly go over here and I want spacing to be line. Hi, Toby. 28. I can change it from her. Okay, so this is very handy. You can change anything instantly across all your different art boards. Okay? So if you have, like, 20 art boards are screens and you want to change heading, you can do it instantly. Okay? It is going to save you. Dunn's off time. So this is how you use these corrector styles? You can add them and you can delete them from here. You can also delete ones text style, director style. And ah, this is how you use this power off director styles and will be X t. I hope you have enjoyed this lesson. Let's move on to the next lesson. 26. Using Guides in Adobe XD- UPDATE: now. Recently in May 2019 Adobe X T has introduced a new for new feature, which is guides which was essential to any design tool. And I in this video, I'm going to show you how to use them and how to copy them toe and other art board. So right now you can see I have on our board. And if you go on the top over here, you can see discuss er has been changed to something else. So this space over here, you are going to get this one and drag it and leave it like this. OK, so you can see we have the stop toe top navigation where we have account settings and back button. So I'm going to have some guide over here. Then I'm going to go again on the left side and I'm going to grab another one and leave it over here, then an under one, and I'm going to leave it over here like that. Let's use another one, and I'm going toe. Get on the right side over here. Okay, so we have right and left Margin, stop, margin And we can also set our bottom marginal here, and we again need to drag it from the top and leave it over here just below this next button. Okay, so we have made over these guides. If you want to hide them, just track them out. S o. What I'm going to do is I'm going to create a new art board. Let's create another art board X s and we are going toe. Copy all these guys by right clicking. And let's see where we have guides, copy guides. And here we are going toe press control or command V, or you can based our hair guides or place cards. Okay, so that is all. You can also hide all guys by control. And this semi colon, this is, I think, the same keyboard shortcut across all adobe extra abs. So if I want to quickly hide them, I can go to this one, and I can control or command semi colons. Okay, so here we have it. You can see they're hiding all over on all the art boards. So this is another new feature off Toby X. T. I hope you will enjoy it, love it and try it out. Because it was very necessary. Sometimes we have toe have some guidelines to place our objects quickly. So now if I have these guidelines, I know that I'm going toe place my primary but a no hair and like this. OK, so it will perfectly match all other screens. So that is all about guides and how you can copy them and how you can delete them and how you can use them. I hope you enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 27. Repeat Grid: So far we have talked about symbols, character styles, colors and everything. Now we are going toe talk about most powerful feature off a no B x d, which is thistle. Repeat crude. Okay, so what it does is that we have this content block like this one. This block post, for example. And I want toe create a repeat. Create off it. So I'm going to kick this and just medically drag at the bottom like this and you can create multiple instances copies off that in sexually in this direction and also in destruction. If you want to, you can use something like this. OK, so it's up to you, Restriction. You want to go now? The second great part is the distance between them, so you can change the distance between them. So maybe I want this 48 pixel distance between these two block posts. And now we have this. And the third create part is that you can create a text file and on each line you're going toe clear text for different headings. So we have this heading, which is similar. Change it to something else. Change it to something else. Now we're going to create a text file and change this heading instantly. All these headings easily. Okay, so this is my text file. So I'm going to clear this heading one, and then on the next line, I'm going to see heading do for you. And on the third line, I'm going to say, heading 34 Comey. Okay, so I'm going to save this file. And now the trick is that you need to drag and drop this file on the first instance off that repeatable grid. Okay, so here is my text file. So I'm going to drag and drop it onto this. Okay, so this is my heading. So on the first copy, this is my first copy off my instance. So always drag it over here. Not in this area. It's so first copy and I went toe, drag it and drop it. Just drop it. Or here, like this, and you can see instantly. The three headings are created. Okay, so this is the magic off repeat cred. Similarly, you can do the same with the images. Okay. So, for example, if I just go back and, uh, just remove this paragraph and I'm going toe, create an image. A warhead. Okay, now you can see I have opened up the all the collection off my people images from my free image collection. And I keep my collection like this. Okay, so what I'm going to do is I'm just going toe drag one image into this one. Okay, so now you can see I have this image lets him off the border and no high. I have this heading image and then this link. OK, now I'm going to select all of them, and I'm going to create a repeat crit and just clear something like this. Okay, so now I have three block boasts and I want to change these three images instantly. Okay, So what I'm going to do is I'm going to drag these three images, and I'm going to drop them over here in the first instance. Now you can see all the three have been changed instantly. Okay, so this is the magic off. Repeat creed. And I think it is one of the best features off adobe extra you. Now we have ah mastered this. Repeat create. You can also extend your beat Great over here like this. If you want. Oh, but I don't recommend it right now. We are not into this. Okay? No One more thing is that now you can see here we have something clipped. Okay, so this content is moving outside. Now, if we move to this prototype dab and ah, let's hear it. Two screens just to placate this one. Okay, so move this, tow this prototype, and when I click on this area, this is going to be my home screen. So just make it home. This click over here and I'm going toe movinto this one. Just his all look, So that's it. Okay, so let's try to run it, and you can see I just can't go. What's cleans. It seems when I am not able to see the difference of just change this to something else so we can instantly see the difference. Something like this. Okay, so now we're going to run this. Okay, so we have no on the second screen here. Now, what we're going to do is on the screen. Now we have the view board hide 6 67 No, we're going to move it to something else. Next. Change it toe this So we can view the whole content. Okay, so now we have this. And, uh, let's go to the hour. Preferred type and no, you can see we have this bar scroll bar. No, it is cruelly. Will first week have cool air? Just the vertical scrolling and few board height is going to be the same. Okay, don't change this. Otherwise it is going toe here. Some problems. The door change the view board height. Just drag your click your art board and drag it at the bottom off your screen. Okay, so everything is visible. So that waas the lowest part off your screen view board area, you can see the daughter lines. And now we have this. If if I can extend if I want to extend it more like this. And if I extend this some to something else you can see now we have more space over here and we can scroll down a bit more. Now if I run this preview again now you can see we have more scroll level area. Okay? Now, if you want to remove this repeat create, OK, so I'm going to click it and on group Good. Now, Why do I need it? So if you go to layers, you can see here we have nothing. So just one group called repeat. Great. I cannot edit or change something if I want to. Okay, So what I'm going to do is UN group grid and I'm going to change something. Maybe. Let's move on. Okay. And again, I'm going toe create a beat. Great. If all these groups now you can see I have all selected all these three groups and clearly that appeared great again. Okay, so you can see now I created this and one off them. I just had it edited. Okay, So if you want to customize your read great and edited like this, just just Hoy did you can either right click and un group grid or use this on group create and edited and then against, like, the every group you have separated. So if I am group again, you can see we have this one group right now and ah, inside Discover we have three groups. Okay? So you can change anything you want over here. Maybe I won't change this one. Yes. So I'm going to go to this group and I'm going to Owen Group it because this is an extra group. Okay, so we have now three groups. One too wintery again. I'm goingto create Beat Creed and I can create a great out off. Okay, So this is the way you can, uh, on group your grade and a group your great again And you can instantly update your values, your text to your images, anything you want. Just drag and drop. That is all about this new feature, which is repeat grid. So I hope you have enjoyed this lesson. Let's move on to the next. 28. Components in Adobe XD - UPDATE: yesterday. Adobe X'd waas updated to version May 2019 and they have released a massive update. So in this update they replaced the symbols with the components. So rather than using symbols, which was my old lesson, I am replacing it with components of what? Our components. I'm going to explain this whole concept in this lesson. So stay with me and let's begin. So here we have just one art board with just a few extra were here one button and this You can see these are separate This one This layer is background and this is text. Then again at the bottom. You can see we have this for this these four groups on do we have? Ah, another group, which is bottom navigation. So all these four icons you can see over here they are inside this and then we have the background. So, um now what we're going to do is in every way, design system or user interface designs is some. The best system is that you can reuse your components so component is just like symbols, But they are a treatable. You can change their words. You can change their sizes. You can change their colors. You can override a different properties off them. So you can see we're here for how we can make a component. Just select the layer of groups you want. For example, this one and I'm going toe press command or control K or And this is going to be a component you can see here we have component von Dishman. So you can rename it like, um uh, primary underscored button. Okay, so we have this component now, there is one thing to understand over here. You can see here we have a small green jack tangle around this component. It means that this is the master component. So if we try toe, go to this assets and you can see here we have another tab over here, which is called Component. We can rename it over here prime re reading something like that. And now what I'm going to do is I'm going toe drag this one warhead and and I'm aligned it like that and you can see or hear on this button we have. We don't have any squarish or diamond kind of thing over here, So if I select this one, you can see here we have a diamond. And if I select this one, this is actually an instance off that button. So this is master of this is a child. Instant instance. And it is You can change it without changing this one. So don't try to change the master. We're going to edit this one, so I'm going to double click toe goto this layers so you can see how this has been opened up. This component is open. We can see the layers inside it. We can change the color. So I'm going to go with, uh uh, this color and you can see the master component is there. Okay, so we are using the same component. And if I want to revert back to the previous component, I can right click and reset to Mars Master component. So it is going to reset my settings toe the previous master component, which was this one. Okay, so, um, this is one thing. We can also change the size off it without you can say, exchange the size off it from here. So you can see now I am selecting the whole component rather than its parts. So I'm going toe crab over here, and I'm going to expand it like this, um, toe my whole screen and you can see everything the same. We have no changes in the master component. But if we try to change something over here, for example, the force trial, let's change it to something else. Let's change it to serve better. So you can see once I t and make a change in the martial component, it is going to reflect in all its Children. So I have changed my typeface, and now it is reflected in all the Children. So this is a great I think, improvement because we can edit, we can create different instances off the same button, maybe to your four different kinds of Putin Primary secondary, tertiary Burton's different adul straight messages or things like that. So this is great. Okay, so I think that is all for this one. Now I'm going to create another component using this one. Okay, so you can see here we have this bottom navigation and I'm going toe create a component. You can also right click. And here we have make component and it is going to be a component Okay, so now you can see if I goto art board pressing a and I want to go with this screen iPhone six emanate. I can go to my component section over here, and I can drag it like this. So now if I want to change the size off it, for example, it was iPhone X are access screen and this oneness charter so I can go over here and I can addict over here. So that is all about components in the debris. Actually, I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 29. Linked Assets in XD - UPDATE: in this video, we're going to talk about a very new feature latest feature which Adobe actually has just released two days ago in May 2019. And that is actually a design system. You can maintain a design system in Adobe X T. And if you open up any new file you can see on the left we have link assets. So we're going to see how we can develop a whole design system. And we can link our design system toe any new project we are designing. For example, um, Airbnb or uber you can see those websites they have Their whole design system there pretends they're icons there, Di biography. Everything is, you know, in a design with a system. So what they do is they just use the whole design system and Jews those components from those design system and use them to build a new design. Now, before going into linked assets, we are going toe download this beautiful design a semantic. You wake it for over 60 semantic. You is actually a framework for front end developers to build fab abs and it is a great one . You can visit their website. I'm going to show the link. So here is a free kit and it is very detailed. You can see we have buttons. We have steps. We have die. Bogra fee colors, forms, placeholders, command, search everything we have over here. So this is actually called the whole design system. We have components. We have burdens. We have typography, scales and every heading and all that stuff. So once you have downloaded this, you can see over here. Download Semantic. You like it? We are going to open up this X T file in our adobe X'd. Now where you can see I have opened up Semantic. You like it and it is a detailed. You like it with a lot off art boards. You can see where if I zoom in, you can see these are few warning messages. A few other things than if we goto over here. You can see we have icons. We have burdens. Onda, This one this document you can see exist, master component. If you remember from my last previous lesson, that master component is actually the one you originally originally created. And if you make any changes or here it is going to be reflected across whole your design system. So everything they have over here it is not master. These are in this many. We have burdens. Thes are not master components. These are just instances off the same button. Defile primary. Let me zoom in. You can see over here. Defile Primary secondary. These are not master components as we don't have any diamond on the left. So here we have discard save. Okay, then we have colored buttons. Then we have labeled button with likes or things like that. Anyhow, so the first step, if you want, if you have developed your whole design system So how you are going to do that? You are going toe, specify some colors. You're going to have some typography, scares and all that stuff and you are also going to add them over here in the SX panel. Okay, so you have created this file. You can see all these colors are over here. They are named properly warning, message, background and all that stuff. You have to make sure that everything has been added over here and then we are going toe save this document. We're goingto go to save as and We're going to save it as our cloud document. So I'm going to save it as my cloud document. Okay, so it is right now saving it. It will take some time because it is uploading it to my cloud several off Toby, and let's see how much time it takes. Okay, so now it has been saved. We're going to close it. We're going to open up a new file. So I'm going to open up a new file. Let's open this web 1920 and we're going toe klik. Now, if we want to bring all those components which we saved in semantic you way we're going toe klik or here link assets and we are going toe go to these clouds, document cloud documents, and we're going to select this one. So now you can see it has brought all the assets on the left side. You can see I have all the asserts. I have all the typography system, everything over here. So if I want to build something quickly Oops. Um so if I want to build something quickly, I can drag over here. And this is my button. You can see now. Right now. it has been. It has some small icon over here that it is a linked asset. So we can also unlinked this component if if we want to know if we want to stay with the component and use this one the same as our semantic um, Kate or design system, we can do that. Okay. So we can also reset to master component. If we have made any changes, we can also added this component in the master source documents. So if we click over here, it is going to open up a source document, and here we have it and we can edit it over here. So there are many things you can do over here and let's drag this fund So we have Facebook , but and then we have basic card components. You see, we're here, and, um, maybe I can add this button over here like that. Move it above something like this so you can see within just few drags and drops. I have created this guard for Christie and we can, you know, use this one. OK, so these are actually components. They can easily go together with each other. We can also drag a few more things like we have over here. A manual vertical school bar. So we have this menu navigation menu, then we have many vertical. So these are built in components. We can reuse them. We can adjust them if we want to. If we want our link them and change them, we can do that too. So let's override it over here, and I'm going to you some my inbox. Okay. So simple. Simply, this is, I think, the perfect system you can do. And if we go over here, you can see that we have, um we don't have icons over here. Okay? So if you want Oh, use those icons which were in the other document. We're here. You can see these and all the icons you need to add them to your assets. Okay, So if we have this or maybe this one way, we want to add them to over assets. So I'm going toe select their selectees. Icahn's this icon and ah had make it a component. I'm going to make it a component. Okay, so let's name it, Iike on expand. Okay. So make sure you're naming is perfect. You don't need to, you know, do something like this game. So it is a sight. No, saving this. The same document, which is my master document. I change. I created an asset, which is my icon over here. No, let's go back to the first document which was linked, which we were designing in Over here. And you can see here we have a button saying update. So it means that someone has updated in the master documents. I'm goingto press after the word here or if I go down, you can see I'm going to press the update and is going toe You could see. Show me one new as it has been added from semantic. You like it so I'm goingto go down. And here is the component. I just added This is icon. Okay, so this is how you can seamlessly integrate your design system in tow. Any design you are doing, so whatever you're designers are doing, if we have ah already made system, we have a design system. We can use that and we can up their changes into the master components or master file, which is our semantic you wicked way have linked over here and it's going to link all the components. All the styles were here from heading styles, all the colors, everything it is going to import into our new document. So that is all about linked assets. I think it is a great feature. We can usually is that, Ah, and create awesome You eyes user interfaces. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 30. Common Shortcuts: If you want to learn any software, any app, any design software and according software, if you want to get fast in it. And if you want O make your workflow very fast, you need to learn it's shortcuts on the shortcut. Keys are, ah, bit different, not very different in Mac and Windows. There are too much similarity, and I really love the shortcut keys that are mapped in this Adobe Exley software because they are very easy to remember. Okay, so we are going to cover the more basic or mostly used Crocker keys in this lesson. And in the next lesson, we're going to explore a few more which can help you in, ah, speeding up your workflow in Adobe X'd. Okay, so let's get started. So first of all, we're going to see some off the tools on the left. These are very easy. Selectable is V as always like we had in for a shop and I think in illustrator then we have this sect angle, which is rectangle for our and if you press are you are going toe. So I'm going to select this and I'm going to press our and now I have a rectangle Let's draw a rectangle over here and remove its border. Okay, so we have a rectangle then we have this ellipse and very easy And you are going toe get an ellipse. You can press the shift key to make it proportional like that. So this is very easy. I'm again going to press v Saudi. Not over here. I'm going to press V and I'm going to click anywhere to de select it. Okay. Okay, then we have this line tool, which is l. This is also very easy. Just a line you can control it. Options were here again. I'm going to press V and I'm going to click somewhere else than this mental. This is be very easy. You can you can drag and do something like that. So this is our plant tool and I'm again going to press escape to leave it like that and v d selected and selected again. Also, you can use the filled if you want to. So this is Bendel. Then we have this text over HST D is for text tool. You can use any kind of text. Okay, so these are very easy. Then we have this art board A and you will have more our boards. Let's create an iPhone X hardboard over here, and I'm going to press space bar, which is also very common key to move everything and how. Okay, why? You are designing controls the and I'm going to press V, and I'm going to press space bar to hold this canvas, and I'm going to move up to focus it in the middle. Okay, so this is another short card. You can press space bar to move these things around like that. Okay, then we have the zoom tool Z, and you can use it presi, and you can use it to zoom on one element. OK, Now, if you want to go back, you can press and hold your art or option key, and you can zoom out like this. OK, so click once and you are going toe. Zoom out. So this is the new crazy. It is going to be in this more. If you want to zoom out, you need to press art or option key and keep pressing it and it will be zoomed out. Okay, Now we are You can see or hear in the zoom tool zoom magnification that we are at 75% or 100% right now. So if I zoom out, we are now 75 50%. Okay. Now, if we want to go back with shortcut kids, zoom in and zoom out. That is also very common, and we are going to use it a lot of time, which is control or command. Plus like this. So press control or command and then the blast ski than the minus for zooming out. This is going to be used many times. Then for a zoom 200% or zoom toe this window, then we're going to press control and zero. Okay, so now you can see it is owned out to 79.44% and it is zoned out of respect to the area I have over here with my canvas. Okay, so if he was using, I met forecasts King five k. It might assume over 200%. You're right now, I'm using my windows PC. So I have less space. So it is zoned out to 79.4% which is comfortable for me toe Do my graphic design stuff. Now, if you want to zoom it 200% you can do that to you can command or command or control Press one. Okay, Now you can see it is almost going out. Off my range are my screen and canvas. So that is why this software expanded toe 79.4%. OK, so you can press zero to zoom toe the fit. You can press control or command one, and ah, and control and command zero for fitting it back to the canvas. Okay, so these are some tools. We're going to use them a lot of time. Zoom in, zoom out and zoomed off it. Now, in the next lesson, we are going to cover some mawr shortcut keys that are going to help us move around with the layers. So if we go inside the layers off this panel, you can see we have 12345 years. So we are going to do a few things with these layers, move them around, align them and things like that. So let's move on to the next lesson. 31. More Shortcut Keys: Okay, Now, let's begin with learning some most shortcut keys for adobe X T tow work. Foster in it. Now we're going to lock something years. Okay? Now, if you have a background layer over here, for example, let's create a background over here like this. Okay? Now you can see it is at the top. I wanted to be at the back. Let's create a linear ingredient and choose some of the colors over here. I like that on like this. Okay, so we have one ingredient. Let's cited two colors. Okay. Now you can see this is where some of the border and now you can see it is at the top. No, we want it to be moved to the bottom. Okay, So what we're going to do is if you right, click over here, you can see the option arrange. So this is very easy. Center back. Bring to a friend. Okay, So keep in mind. Very easy tip shift. So we're shifting this to the bag. So we're going to press command shift and the back bracket or the reverse bracket to send it back and the forward bracket to bring it at different. OK, so I'm going to do it right now. Command shift or controlled. Shift back, Back. Beckett and front record. Now you can see at the left in the layers panel. It is moving up and down. Now we can see that this layer is at the bottom. Okay, So as it is our background so we want lock it so you can do it in two ways, right? You can right click. And you can see Here is the ready. Easy shortcut key command or control. And so just lock it like that. Now you can see a little lock. I gone over here now. We cannot move it accidentally like this. So if we select, we're going to select these texture and everything own on this later. Okay, so we're not going toe selector background layer over here. Okay. Okay. So you can see now we have three layers over hair. One is at the back and it is locked. Now, one more thing you can do is you can hide your layers. So if you select any day like this one and if you want to hide is you are going toe press control and semi colon or control or on the Mac, It will be command, key control or command semi colons. And it is going to hide like that. You can see I am hiding and showing it again and again. So this is also one common key you need to learn. Then there is one more thing. For example, these two. I want them to be linked. So I am. What I am going to do is that I want it to be and grouped with this one. Okay, so I'm going to cover it white. And so I'm going. I want them to be group. So I'm going to press shift key and keep on clicking that the elements or the layers. I want to be in one group that I'm going to press control or command G. Okay. So you can see on the left. Now it is group one. No, If you want rename it, you can double click over here and you can rename them. You can see we have grouped one of three years and we can also on group them so far on grouping them, we are going to just change one key with it. So command and our control G was for grouping and command Shift G is to on group now you can see they have been grouped. So these are few things we are going to use a lot, for example, grouping and and grouping. Now one more thing is that if you want to duplicate earlier, if I want to duplicate this one, I can either breast are drop shin key and drag like this and it is going to create a duplicated. The other way is that I can also press commander Control D and it is going to duplicate. So these these are two ways to duplicate any leer in Adobe X'd now a few more things. For example, if I want to select everything, it is coming Controller Command. It is almost common in all the apse design, APs, even Microsoft Word. And if you want to de select, you can again add a shift key in the mix, control or command. Shift it and it is going to dissect it. So we're going to select it back now. One more key that we're going to lose a lot is alignment. Alignment is very necessary. For example, if I have this over here and I wanted in the horizontal middle. Okay, so what I'm going to do is I'm going toe use shift and see on windows Szefc So it is very easy. Just shift this this layer in the center. Okay, So shift see? Makes sense. Okay, Now, on the Mac, we have a different set off keys, which is controlled command and see on windows shift See, and on Mac operating System Control, command and see. Okay, so keep that in mind. Now, this is for heart is under center in destruction. No, if you want it to be in the middle off this, for example, if I delete this and I want it in the middle off this whole canvas, what I'm going to do is I'm going toe press shortcut key. Shift em, which is for middle. So middle is vertically. Center is horizontally, so shift em is the key. And on Mac, it is going to be controlled command and m he is the same. Just the mixed off the keys like command and control. That is different. So if you are on a Mac, you need to press control, commander. And ok, now there are a few more which we can use, which is related or decks. So if I dyp some Dextre What? Here. Okay, so we have texts over here. And if I want to make it bold, I'm going to select it and control command be toe, make it bold control command you to make it underline and italics for I, which is very similar to text editors will use This is handy now if you want to change a your next size and if you want to increase the text size instantly, what you can do is just like the steps next and on windows it is control shift and Iraqi inside your keys, which is basically your full stop. So control shift full stop. And then there's a coma, which is another arrow key back Carol to reduce the size increase reduced. So I'm pressing my shift and control keep on my windows on Mac operating system just removed the shift key. And it is going to be Kamande and your Iraqis, your daughter and your comma. Okay. And now the last shortcut key which I want to show you Is this one masking. So if you have two years, one is at the top, this image, and then this is a rectangle. You were going to select boat off them with shift key. And you and you are going to press command. Shift em or control. Shift em. Okay, so like this. Okay. So I can now move this around like this, and you can see I have masked this image inside this shape. So this is the last one control shift or command shift M m form asking. These keys are very easy to remember. I just love them. These adobe X'd shortcut keys are very easy to remember because they are mapped with designers in the mine and they are easy to remember the function they do. For example, masking it is for them. And that is why this is the main thing. I love about this tool other than through the features. So just make sure, Jack, you have learned the most basics and you can easily do these stuff within this software. And now, if you want to create a repeat creed, it is very easy. Just select this one, and press control or command are and you are going to have our secret like that so you can see or him. This is another short card, but I think the big good We have this button over here, so it is easier to access over here. So these are all about these shortcut keys. If you have any questions, do ask me. Let's move on to the next lesson. 32. What is Block level Design?: today we're going to create this block level design and we're going to learn very new technique off designing mobile app, store websites or anything you're designing. So this technique is basically used when you are starting your design. So there are two things you can do when you start your design. One is that you can build multiple layers off different elements you have on your screen. Second is that you start basically with pen and paper. So I really commend that whenever you were designing, you start with a pen and paper and I'm going to show you my pendant paper sketches and pen and paper pen prototypes in this in the coming Nellessen soon. But right now we are going to focus on this block level design and how it can help us speed up off our design ideas. And, ah, lay out the different layouts and different compositions that will. The image will be where the text will be, where the headings will be and what elements are going to be interactive, interactive on your screen. Now we're going to start this exercise and I am going to do one off the screen and the 2nd 1 is for you. For your assignment. I'm going to create assignment video in the next lesson, which is going to be this article one. You are going to generate this and know what we need is just two or tree killers. Like you can see. His gray color is a bit dark, agree. And here's a blackish gray black regular and one color for our interactive elements. Like buttons. OK, so you can guess which screen is this one just by looking on the elements over here. Okay, so this is our logo or any image. This is introductory text. Welcome to our A new creative app or something like that. This is log in and password. And then we have this log in button. Then we had this. Forget your password text, and then at the bottom, we have signed up link. You can see a bit off small and the line or it. Okay, so this is very easy. Very simple. Don't worry about it. We're going to learn it in no time. So let's get started. So what I'm going to do is I'm going to create a new art board going to click on the art board and we are going toe create a iPhone 67 plus are Okay, let's click it once. Goto we retool, press my space bar, and I'm going to move it and control zero does omit toe the fit. Okay, so we are going to create this log in screen now. It's very simple. What we're going to do is we're going to use this rectangle tool and just draw a rectangle over here like this. Removed the border, used the color. This one I'm using two D two D two D for the images on DA for the images. I'm using this one. Okay, so the middle agree color. Okay. And then we're going toe press escape. We I'm going toe line it in the middle now for the text. You can see your here. Here are different lines of different lengths. How I am able to use this is because off a very nice viral framing fort, which is called Block, let me show you. It's ah, a website where you can download it. Okay, so you can see this is block for dot com. I'm going to share the link with you, and you can download this phone over here. Download phone. It is also invest phone farmers. So if you are going to use any web phone are you want to display this forward on your website? You can do it, toe. Okay. So you can see over here. They are using this to create very simple layouts like this. You can see over here. And let's start over, Leo. Choosing this. So download this fourth, install it, and that is all we need. Okay, So, no, we are going to use the same phone, and we're going to Presti on our keyboard. Click once over here. So this is the fourth. You are going to select it from here. I am using this block new fort. And once you click over here, you can type something like any. Any letter type, any letter. OK, if you press space, it is going to be a lot off distance between the two items. Over here are the two text areas. So what I I do normally is that I remove this space backspace, and I just select one character and change its color toe white. So I also have right over here. Now you can see It looks nice. Great. And also, um, make sure that this sex color is 707070 Now I need toe do the same again. Now you can see events I used to killers inside. One element of fill color is moved to this dash, and there is no Colette in it because we're using multiple cars. Okay, so here we have our two elements said, Now we're going to use our this ah rectangle, Samer tangled tool, and we're going to draw for a text field. We're going to make the border toe five five. And I'm going to use the same border killer for this one, which I use for this image. Okay, so we have this one that I'm going to press art option key to duplicate it. You can see over here. I have complicated it. We can all sort of forget this one portrait over here. Just remove something from here in the front. Then we're going toe again to placate it by passing out our option key on your keyboard. Just move it over here. Okay? So let's see the distance. Best art on option key and keep select one off the elements. If you want to see the distance, let's zoom in a bit. Let me show you how I am going to my ear. The distance between these two elements I click on one of the elements, press my art option key and you can see against it started showing me the distances. But the element I want to compare with is this one. So I'm going to just over on my mouth on this one, and it is going to show me that it is it pigs. Ills of your eight points away from it. Okay. Again, If I do this, it is seven. So I'm going to make it eight. So they look professional and look similar. There is harmony in design. So we're going toe use. That may also let's move. Remove this one over here. So, no, I would align it in the middle. Okay. Like that. Now we have completed our This one was image or low. Go. This one was welcome. Tax. Hello, Essen, or something like that. Here are our two fields password log in and password. And then we're going to use a personal here so far. But we are gain going to use the same rectangle or what you can do is just to placate this one are corruption and use it or here, like this. Remove the border. Change the filter. Oh, this or this one? I'm going to use this color right now. Just toe change a bit. Change the team a bit. Okay, so we have this color right now. It must be very bright color. So it makes it is different from the whole background or the whole interface, because it is a possible, but Okay. So again, I'm going to click over here. Just use the shadow three three points down. So it is the at the bottom in the vertical position. And this is the blood. How much? It is blurred. Okay. And we can also use 20% so the shadow is visible here we have the shadow again. I'm going to duplicate this, and I'm going to move it. And the job command shift control shift, front record and ah, using the color vied Next more Go ahead. There's you something like this. So space is very big. So I What I normally do is I just Okay, So this one is also looking good. And we can use something like this for the burden which is looking nice and crisp. Okay, so we have finished our burden. We have two elements left. One is forgot. Your passport and one is going toe the sign up screen. Okay, so you need to think all the elements that are going to be placed on the screen, you need to list them first. So if you can list them, you can easily plan them over here. And you are not going to miss any often. Okay, so now we have left this one and this one. Okay. So again, we're going toe replicate this text over here looks keep it close to despondent because it makes sense. It's going to be. And then I'm going to duplicate it again, and I'm going to put it a bit. Ah, far away. And I'm going to use this color, which is seven Trudy. Trudy. A bit darker color. And also I'm going to lose this Underline. Okay. If you don't want to use this underlined, you can also use this line tool to place a line below it like this. So it is a bit far away from this one. And ah, just escape V and I'm going toe move it a bit closer to this. Like that. Eso this expect is 105 So let's make the bit off this one. This 105 Buddhist, one pixel short, and I'm going to select. Fought off them and shift. See? Okay, so they are shift sea. And in the Mac, you're going to press control shift. See, I guess command ships easily. So it is in a line in the middle. You can see I have used a little bit off different technique from this one air. I'm using space in the text over here that it is going to be two words like Logan hair or something like that. Here I am using just one. It doesn't matter. It is just a representation. So if you want something like this, just use of white Colette over here and let me use vital. Uh huh. Okay, so now you can see it is all looking great and nice. Let's move the vital from this one. And here we have our log in screen prepared. Okay. Now your assignment is I'm going to make another with you in the next one. OK, so I'm going to show you what your assignment is. It is very easy. You are going to use this block a new fort to create this block level design. It is really going toe. Um, make your designs, you know, look professional. And it is the first step in your design. Rather, you are an experienced designer or you are a big no designer. You need to start like this. It is really going to improve your design skills. Okay, You can see the spacing is perfect between all these elements. Some are, you know, aligned properly. So this is one tip also, you are going to start with just one color. This is the best tape I'm going to give you for any design. So whenever you start your design, don't try to introduce five or six colors at once. You can see over here on these are very simple screens in just using one Greg color and different shares off three. And I'm using just one to see on blue Color or him here. I'm using a purplish blue color and you can see how well this screen looks OK So keep these steps in your mind. And, ah, if you have any questions to ask me, let's move on to the next lesson, which will be your assignment. 33. Sketching First Design Idea block Level Paper: okay today. What we're going to do is we are going to create a block level design using pen or paper, or I have these few highlighters over here with me. One is this Sharpie, or you can say the marker a bit. Poor marker. Then we have this. You can also use this gel pens, which are a bit darker. And you can also use just defensive on just this kind of paper. Okay, so what I have done is I have folded it in tow. See? Folds like you can see over here. So this is going to be one screen, second skin and her skin. You can separate them after you draw joy. OK, so the benefit of pencil is that you can draw it many times and you can remove it with this reserve. And so let's begin. So first I'm going to do or use. I'm just going to use my pencil to draw this block level elements. So this is going to be our logo. Don't don't believe they are not big zipper factor day. It doesn't look very good. Okay. And then we have this extra look here. Okay. Okay, then we are going to have to fields over here. This is the same one I'm going to. This is a log in screen you can see over here. So we are going to abide. Details overhears. Okay, So we can have something like this then this is going to be of a second field. This is going to be our Burton. Okay, So make sure the textures in the middle like this. Okay, so we have put our elements. Now, this is forget password. Do you? Maybe something like this. Then we have over here. Sign up. So here we have the sign up. Okay? Now we have built our firstly, we can I trade on this layout a lot. Like we can have our logo over here and then the welcome text over here. There's something like this. Maybe some stats. We want to show that something like this, something like this. Maybe a few elements over here. Okay, then we can have this, uh, again, this Logan and this again, this Spotswood field. Then we have this button we can also have over button over here and forget password field over here. Okay. So you can see how this layout is different. There are no titles over here. They are going to be in here. Okay, Something like this. Maybe we will use some icons over here on these fields, and this is going to be over button. So let's use some text over here. And then we have this sign up over here, okay? So we can have another button, which is going to be a bit different. This is going to be over. Sign up now, but okay. So you can see that these two layoffs are totally different. Okay, so you can see over here how I have drawn these. If you want to share, you can share them like this. Like this is don't make them very pretty. Just we're going toe. Fill it off that this is going to be an image. Okay, another way is that you are going to use any highlighter like this one. I'm using this blue color, and what I'm going to do is I'm just going to highlight the buttons. So this is going to be my button. And this is also going to give my button, okay. And ah, what I normally do is I use another killer like this yellow to highlight the text links or something like that. Like this is a link. So I'm going to use yellow for it. Okay, So these kind of things. So if this one is linked, I can also use my these gel pens to highlight something like this. Okay, so maybe this is a field input field, so I'm going to use some highlights. 100. Uh, like this. Okay. So you can see how easy and quickly. We just were totally out for the same page. Okay, so maybe we need some terms and conditions or something like that for another iteration. Like, maybe we have some something over here, one that he meant more. So you can see here. We have more elements over here. Maybe we have terms and conditions. Or maybe help line or something like that. So here we have more. Let me move. This one here. We have more items are on one screen, and here we have less items. So you need to make sure this layout help going is going to help us decide what we're going to use an hour markup or wire frame. Okay, so these are going to be very less detail. No detail at all. Just the placeholders for all the elements. Okay, so you can see I have used just two colors. And if you want, you can use this kind of gelatin toe highlight. Different links like this is password. So I'm just going to underline it. Forget your password. It's a link. So I'm just going to underline it. Something like that. You can also use this Sharpie toe. Highlight it. Maybe I want This is a shadow. Something like that. Also, I'm going to put some shadow over here that it is animated. It's important. So these are the details which are going to be in your, um, people block level design. Okay. So you can see I have been truly out. You can decide many layouts. This screen is very simple. We have few elemental here, so if we have too many elements, like maybe 10 elements over here, we can switch to another layout. So this is how you can create a lot of Leo's quickly with just pen and paper and few other markers or maybe highlighters like these. Okay, so let me show you one more thing like you can see over here. This is our people prototype which were going toe. Discuss in the next lesson and hall weaken. Break this one. So these are the four steps. Whenever you were going to start designing or solving a problem designed problem or any app you are building you are problem solving that user experience problems. Okay, so for solving those problems, you are going to be switching toe these paper prototypes. You can see here we have this surge in the number off this screen. So this is number one. Screen our dashboard eso I have used this one. Okay, so in the next lesson, we're going to design something like this. We're going toe, create some more details for this screen and assure you that you can use put paper prototypes toe, test it with your uses. So this is going to be your first you can see for step. If you are not going to use paper prototypes, then you are going to say to Adobe X'd to create the same prototypes. And you can click, click applicable or interactive prototypes to get better and judgment are see what their users think about this app or how they behave using this prototype. Okay, so that's it. You need just few things like this gel pin and this mercury and this pencil. And that's all. One highlighter when gel pin and one pencil. And you can create these type of block level design layouts multiple layouts instantly. Now, in the next lesson, let's move on to the next lesson where we're going to discuss how to design the detailed, thes kind of detailed paper prototypes. So let's move on to the next lesson. 34. First Paper Prototype - Adding Details: Okay. Now, in this lesson, we are going to start with detailing this paper block layout, and we're going to use that creative I frame static wire frame all you can use the same via frame in tow. Prototype paper prototype. So what we're going to do is now we're going toe use their titles or text over here. Okay, so I am going to use something like this and call it a logo. Okay, then we are going to use some text. Welcome, sn or something like that. So this is welcome text. Then we are going to use text fields over here like this one and two, and I'm going to use maybe pencil over here to show a great ext log in and password. Okay, so we have reached this point, and then we're going to use a button. So let's see that we have decided to use this one over here. Log in. Okay. And here we have court court boss work. Okay, so we have used this layout, and then we can use something like this. Uh, don't have a count sign. So we have our elements laid out, and now we're going to use the same highlighter to highlight our buttons s. So this is a cable. Better we have it. One of them. And now I'm going to use this red gel pinto Sure that this is going to be a link. OK, you can use this or you can just use this one This black help in tow Highlight it like this . So this is going to be a link. So here we have everything laid out. You can also use this Sharpie are marker to highlight this feud like this K also like this . And if you want, you can also highlight this logo a bit if you want to go. But this is how it is going toe Look now so you can see here we have the simple block technique and here we have our wire frame or people prototype or paper design sketches for building up a paper prototype. Okay, so you can build multiple screens like I have big for this app. This is basically a ticketing app and I think I don't want to go into too much details, but this is how you are going to build it. So basically what I use is a few colors, one color for links are highlighting my prime second reaction. And these are my family or me in buttons on my screen. These are primary actions user must take on this button. Okay? In on the screen. So these are a few things I really wanted to show you before going into Adobe X'd because this is the planning phase off any design, it is more important than creating very nice looking or very brilliant design or pixel perfect design in Adobe X'd. So this is all from me. And I hope you have enjoyed this lesson. If you have any questions to ask me, I'm going to give you an assignment toe, create one people, a prototype or paper block design, and one detailed wire frame off that same design and take a picture and submitted. Okay, so in the next lesson, we're goingto period that assignment. So if you have any questions to ask me, let's move on to the next lesson. 35. Vertical Horizontal Prototypes T Prototypes: Okay, in this lesson, we're going to talk about these five things paper prototypes and over used them. Then we're going toe horizontal prototypes. What are vertical prototype STI prototype and local perfect type. We're going to cover all these. I'm going to give you the examples. And first we're going to go through the paper prototype. No, paper prototypes are the best and easiest way and the cheapest way to create any prototype at the sport. Like you can see over here is a paper for a write off. Different screens off booking process Off this train app you can see over here. This is the logon screen. This is dashboard that is booking. And then we have the seats and dreams and then we have see details you can see over here. Then we have a few more filling the details, booking details and so on and so forth. Okay, so what are the horizontal prototype? Ok, so I'm going to give you example from using these paper prototypes I have over here horizontal prototype. As the name suggests, it is going toe be in this direction. Direction means that if I am building ah Horace under prototype you can see over here this dashboard. If I build horizontal prototype for this stash board screen, there are four interactive elements over here. Maybe this fight. So what I'm going to do is, if user clicks over here, they I'm going to design these four and five more screens that are going to be linked with this statute book. But on the other hand, I am not going toe create in depth booking process. So if someone clicks on the book, takers is going to see the next screen for booking like this one looking plan. But after he clicks over here is not going to go to any of the screen he's going to go back to catch. For. Why? Because we are not testing the detailed work through off any off these features over here. Okay, So, uh, so this is going to be our heart center prototype. Very limited in destruction. It is going to cover mostly the information, architecture or the navigation off your website. So if you have, like, 10 categories, you're going toe, create 10 pages, and user is just going toe tap on any off them. Visit that page. Okay, so this is about horizontal prototype. No vertical prototype. This is going to be in