Transcripts
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 the depth. So vertical means you that you are going down deep down in the ground. Okay, so right now, if I show you the vertical prototype for booking tickets so it is going to hit or it is goingto be specific toe one feature of one function off your apple. Our website. Okay, so I'm going toe build a vertical prototype for book tickets, which I have done over here. So if you click on book tickers, this is going to be the next screen booking plan. You're going to slack dead and your route and you're going to see the seat availabilities. Okay. And up next, you're going to see the siege in trains. Then you are goingto get the details off. See details for more expanding more off this strain you have selected than you can click on this book to get now. And you are going to go to this booking details. Okay, so after you select your details, you are going to go toe the me show you this one last queen which I have designed payment options. You have repayment options. you select one off them, it is highlighted and you select This button is going to change. Favorite ubl this card and you're going to tap over here and your payment will be done. OK, so this is an example off Vertical prototype. No de prototype. As the name suggests, you can see over here. This is horizontal and this is vertical. So in the t prototypes, we're going to mix horizontal and vertical prototype. So let me show you here we have like, here we have this log in screen. Let me show you. Here we have the slogan skin for the same app drain booking app. And if you go to the steeper type, if I build justice log in screen and this sign up screen, it is going to be my d prototype. Because I am I can view these two screens horizontally and then I can goto this screen This one ok, also, if you build four different screens for screens for this, these three functions and group go into detail on Lee. This one. Okay. Still, it will be your d prototype. So, uh, one feature you are going to test in depth others You're going toe. You're not going to test in depth. There will be one or two screens for each off them. If Okay, then we are going to come toe this local prototype. Okay? Now, what local prototype means is that we are going toe test. Just a specific area off your app. Okay, so maybe if we have this, like, forgot forget password feature. Okay? We want to test different lay hours or different work flows off this forget password feature. We are only going to test this. Okay, so maybe if I tap on it, I the next screen will be that. Type your email to get your password. So this is my first idea. And if I tap it again, or maybe in the next prototype idea, if I tap over here, I get to a screen where I just put my mobile emitter. Okay, so maybe this four guard password. It asked me for mobile number in one prototype in another one. It asked me for email in another one. It calls me on my phone. Okay, so these are different options. You can try for this one. So if you are focusing on just one element on your inside your whole app on one single screen, you're going to use this local prototype. So this is all about paper prototypes, horizontal vertical de prototype, local prototype, All these types and how you're going to use paper prototype. So what normally we do is we show the user the first screen and this is goingto be hidden. These screens next screens will be again. So let me show you these three things. I'm going to do something like Thetis. OK, so I'm going to hide these screens and I'm going to show my user this screen, not this one. Okay, so this is logo welcome text. Okay, Entered your mobile number password, and I want him or heart toe. Think out aloud means they are going to say, OK, I want to put my mobile number here. I want to put my passport over here, and then I'm going toe press logging. Okay, so after that, I am going toe, slide it like this, and I'm going to show them this stash worth on may be sliding towards them. And once they see this dashboard, they are going to focus on it. Okay, this is these are my books. You These are depending tickets. These are my cancelled tickets. Okay, so I want O ticket. Okay. Before that, I want to make sure that my user, she knows that I'm I want hard to book some tickets. Okay, So let me remove this tag over here to show you the top over here. This is Pakistan. Railways help and profile. Okay, So, uh hello, Essen. And these are this is your dashboard. All your booked and canceled and pending diggers, and then you have only four things you can do. So I want hard protest. Just this booking ticket country. Okay, also, you can see over here. I have number them. You can see this is zero, and this is one. This is just to make sure that I don't lose my all my prototype and I don't mix them up. And then I need to, you know, combined them. I get confused. Ok, one more thing you can see I have taped this. This is very easy. In people prototypes. You can just use another paper and join it with the first screen on the portion you want. If you want just Jane, these buttons you can rip it off and you can attached another piece off people. Okay, so I think this is all about paper prototypes on horizontal paradise work, a vertical prototypes. I think we have covered all of them. And let's move on to the next lesson.
36. Level Of Fidelity And Prototypes: 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.
37. Adding Details To Your Block Design in XD: Okay. Now, in the last lesson, we were doing this block level design, and I showed you a lot of paper prototypes and different types off prototypes and everything about prototyping. Okay, now we're going toe the next step. Okay, So the next step in any design phase is fast. You started with block level design, and the next step will be that we are going toe add details. It is just like when you see a painter when he start painting something on his canvas. What she does is that she is going toe put just a few colors here and there. Major killers to just get the shape off her painting or something like that. Okay, Then they will start adding detail to it. Okay, this is how the sketches work. Even if you will try to sketch something, you are going toe first sketch. Very lose. Which doesn't look like too much like a Cardone or something that you start refining it. And in the end, it looks really amazing. Ok? Similarly, in Web design, mobile app, designers, user experience, design the all the physics off user experience design from getting information from users, user interviews, everything you are adding details, step by step. So as we move on to the next step, we're going to add more details. OK, so now what we can do is we can create a single killer fire frame. Okay, So what I mean by single color is that for any action I'm going to use just a single color . Okay? So rather than replacing these on this phone block phone, what we're going to do is we are going to replace it, toe some four, maybe source. Okay. So I'm going to use this. No NATO sends. Okay, So what I'm going to do is I'm going to add, like, welcome a person, okay? Something like this. So it is going to be over here, and then we are also going toe. Tell the user that this is going to be the logo. Okay, so we're going to add one more text layer over here. It is going to be saying logo. Okay, So what we're trying to do is we are adding some more detail. Do it. Okay, So this is going to be logo than this is welcome text. Then this is going to be our let's delete these and I am going to duplicate this because it's makes more sense. And it's easier like this. I'm passing my archy or option key. This is going to be boss word. This is going to be long in human. So make it more clear that email is easier for users to remember. So we are going toe use email over here, K. So also, we're going to use some, um, let's change this. So we are also going to use some visual cues like this is more important extent, this is going to be a bit smaller than this one. So I'm going to use, um, 24th and here I am also going to use 20 on. Then over here we are again going to He was two seam like this command shift front record to make it. I bring it at forward, and this is not going to be password. It is going to be, um, logging. No. Oh, are access. Okay, so make it easier. Log in. No. Okay, so this is this makes motions, and then we're going to select both off them by pressing shift, and I'm going toe press shift. I m so it see for centering it in the horizontal way and own Mac, You're going to press command shift? Si. OK, so these are the shortcut keys. I'm doing it again and again so you can remember it easily then. Here we have for God, your boss word. Let Shing it's phone toe. No need toe What is the root of sense and we have it. We're not going to make it pulled. Just going to be 20 big Oezil's And, uh, let's align it in the center. Okay, chef. See? Doesn't look a line in the middle. Maybe everything else is not aligned. So she sief in the for the windows and I'm going to align it over here like this. He looks great. And now we're going to add Ah, very simple detail over here, which is signed up. Okay, so sign up less Imo, keep this line and I'm going toe Replicate it over here. Sign. Oh, commute. New account. Always make your statement very clear to the user that this is going to be a separate action. OK, so I'm going to keep it like this. Now I'm going to use this on the line. This looks a bit veer. So I'm going toe. Use the same line. Let's see what the verdict off this one it is Ah, to 71 pixels wide. So we're going to make this one the same day. And then we're going to align these like this. I'm going to group them, Commander Control G shift, See? And it is going to be in the middle. Okay, Now let's see if everything else is in the middle. Do let's group them toe so it is going to be no go. And this is going to be our sign up group. Let's move. Move everything in the middle. Before that, We can also group these two now it looks balanced and everything is in the middle. That is what we wanted to create. Now everything seems in the middle. That is what we wanted to create. Now I What I want you to do is that you are going to create a sign up screen similar to this in the assignment. So I'm going to create another assignment. This is the next step. These are basically our wire frames. You can also use them to connect two screens and if you want to create a simple prototype protest with your users. This will be a low level or low fertility or, I think made Fidelity wire frame or prototype. So don't worry, you can easily destined because your action is visible. Now this is a Burton. OK, I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next.
38. Using Ui Design Patterns to speedup design: in this. Listen, I'm going to share with you two off my secrets, which will help you design faster and better. Okay, So these two seekers I'm going to reveal in this lesson, and we're going to design these to sign up screens in this lesson, and these are going to be the first step in building the prototype. Okay, so in the next section, we're actually going to design, improve and design the medical app I showed you in the beginning. And right now, I'm going to end this section with this exercise, and I hope you will enjoy it. Okay, So the first secret is that so when you're designing for something like this and you were you are trying to improve something. Our design or tryingto build a solution. You need toe use as less colors as you can. Okay? So just use one color, which is my recommendation. And I always you use this. You can see these are these two screens really look create. Even I am using just one color. Okay? And that one color is this blue color. So you can see this can easily simplify your process. And you can easily create something like this. Okay, Now, the second secret is that always try to use build up already buildup patron libraries or graphic libraries. But you can use in speeding up the process like you can see. What? Here. This is the keyboard. I didn't design it, because if I tried to design it myself, maybe I'm not able to design it First thing and second training thing is that it will take , like, maybe three or four hours just to design this keyboard. Okay, so what I did is I got this key brew board from the library, which I'm going to show you in a second and also the stop bar. You can see this is from my US standard at OPEC's De Library. They have built for free, but you can download for free on Apple's website and also this one and also this area at the top. This is also bordered from the same library. Okay, so these libraries pattern libraries, car Styx guides. They are going to help us build and speed up our work. Okay, So don't try to create icons like these. Are these Are this one this battery? I call yourself. It is going to slow down your design percent. And this is not going to help you in your professional life. Okay? Normally, what I do is I normally purchase Great are cool looking icons from creative market or some other website, because this is going to help me keep my designs and keep them, you know, make them very fast. Okay, So what we need is we need a speedy design. We don't want to waste like Dan Astor designed one icon. Okay, so this is all the talk about two secrets that first you are going to use libraries built in libraries already built design libraries, patron libraries, which were going toe borrow for our designs. These are standard libraries. And also these are standard rus keyboards. Okay, so we are designing toe. Are your screens basically So this is going to help you whether you design in photo shop or Adobe X'd or sketch. These built in libraries are you, Iike it's normally they call them usually interface design kids, they're going to help you a lot. Okay, so I'm going to share show you the resources we need for this exercise. Like me. Go to my browser. Okay. Now, the first thing we need is if you are on Windows, the first thing we need is this San Francisco Ford, which is ah, feel Ford off us, ABS and on Mac, it is already installed. If you are on, um, Latest Mac question and second thing, you can download it from here. Okay, so you can press this download, download, zip, and install the pdf version, not the open true dive. Okay, so let me show you. Okay, so here I have expected this folder I downloaded, which have s f pro phone San Francisco prove in San Francisco compact, which is for Apple watches, I guess. Okay, so San Francisco pro, I'm open and they have open type of true type. Tried. Install this one TDF. Okay, that will be enough. So select all of them, install them. And we are a little like me share with you the U workers you need to download before starting this exercise. Now, if you go to this development art apple dot com, such design slash sources. There are resources for designing these, You know, I us 11. Right now the version is 11. I us 11 interface. You can see we're here. This is from human interface guidelines for the show file sketch file and will be X defied . So download this file and we're going to need it when we're going to design this. Okay? Also, you can find a lot off. Other resource is like you can see your hair on extra grew. There is another kid like this one. Also, there is with this website, free by supply dot com. I search for XDR us. You can see there are you escapes also. You can see here is another case which I really like. Make sure they are standard graphics. They're not a you work it for specific app. You can see these are standard things which we need when we are designing. Like you can see, these are keyboards over here. Okay. And ah, that is it. Before starting your design, you need at least this this one, or at least this one. Okay, so don't let any off them. And to keep them in a separate folder and also try to download install. If you are on Windows 10 installed this San Francisco Prue in San Francisco Compact. You can see this is for men virtuous. So in the next lesson, we're going to actually start designing this. Okay, so let's move on to the next lesson and start designing the sign up screens right now.
39. Creating Signup Ios Screen Exercise: Okay, Now we're going to start designing this for this. We're going to open up a new file and we're going to select this iPhone 678 Click on it. And we have another file over here. Control or command zero to zoom into the maximum level we can have. Okay, now we're going to start with the top, and for that we're going to need our You like it. Okay, So before that, I think we should lay out our other things quickly. Okay. So rectangle DOOL toe get some textual hair. OK, so we have feel off white. Let's see if it is going to fit in the middle. Okay, so it looks great. Okay, now we have over text. Really? Now we're going to add a label over here, and for that, we're going to use text layer, and I'm going to go to the force, which is going to be San Francisco. So press s f on your keyboard and you will see as half display press center. We're going to use a chef's text or as a few latex, whichever you like. Okay. And I'm going to use except text. And let's type, um Okay, so here we have one. Ah, text field. And also, I'm goingto dark in the border off this one. Okay? And it is going to be two pixels like that. Looks good. Okay, so we have one field, and what we can do over here is we can create a make a symbol, and it would be, um next few simply said, and we can have another symbol by dragging or here. And you can see I switched to this SX, and there is my symbol, and I can go ahead and change x two. Um, possible so we have right now to feels, and now we need a button. Okay, so for that, I'm going to go back over here. Goto this rectangle tool, and I'm going toe create a bit more heavy button than this. These two. Um Okay, so this looks great. And I'm going to go for some color like this, Okay? So no, not the border. But I want the fill. Toby, we'll hear something like this. Well, maybe we're okay. So I'm going to add this killer to Michaela switches, so I don't need to access it again and again. OK, so this is one color. Okay. Also, I can add this grave ular this creative work next vehicular so I can use it again and again . Also this border color. This is another shade off three. So I have tree killers right now, so I I don't more toe, you know, add them again and again. Now I'm going to duplicate this text so you can see in this lease panel symbol and text is outside this symbol. Okay? And you can also press control, shift them and see for lining it in the middle. I'm going to shift it one big sell up because I like it that way. It looks more natural. Okay, so we have now this over here, two fears one log in and what we need is we need two more things. Like forgot password. Let's Okay. So you can see when I drag it near, the two feels on there is a distance. Shows that every distance is equal to 22 picks is OK, so I'm going to leave it like that. Okay, so also, I think that these, uh I left school to the symbol I'm going toe. Change it. Yes, I'm going to close it like two pigs is closer and now they looks more better. Okay, moving the this one a bit more down. Okay, so this looks create. Okay, so the slogan also needs to be a bit down. Okay, Now we we have just we need a forgot password and one more next. OK, so next click this copy and I'm based it over here. And then when the moovit and you can see when I try to pay something, it is always in the position. OK, make sure your distance is in good between the two capable elements. So if I want o tap on this one, you don't want me to tap also tap on this one. Okay? So make sure that your thes two elements they have good space among them toe alot the taps by your tom bouquet, so make sure they're at least 44 or 50 pixels apart from each other. So this area must be 54 pictures or something like that. Okay, then we have, um no, it will be a link, and I'm going toe move it a bit more down so users can easily tap on. Okay, Don't make it to closer to these edges are at the bottom or too much at the top because users cannot access that area. This is a great area. If you have seen my user experience scores, you know what I'm talking about. So I'm going to keep it over here like this, and I'm going to change its color toe this blue and also going to put a line in direct. Okay, So let's for see, what is the rate off this 1 81 And I'm going to use my line tool to create a line pressing shift. And it is also 1 81 I'm going to change the color to this blue, and that's it. Breast V. And I'm going to move. It goes out of this, something like that. Okay, Now you can see I have almost created most off my feels. Now we can add some shadows over here on this log in screen. So called the shadow. Okay, so I'm adding this shadow three on violation and blow 66 And the color is this one. I'm I can also use this one and ah, I can reduce it to 20%. Something like that. Okay, So we have ah added shadow and ah, these are our two password and this field. And also you can greet them out the border. It looks very heavy. I guess so. I'm going to use the same you can see once I change this one, it is going to be reflected to this one. Do so this is very I can see a very nice feature. I don't want them to be too much highlighting because right now, our primary action is this pathetically. Okay, So if we have ah, done this, let's move it a bit up 20. Okay, so now you can see if I move on this symbol. This is the area. It is going to be accessible. So if I tap on this corner are on this password, it should be activated. Okay, So this is one thing you need to consider. You can tell your developers about it. That this is going to be that this hole is going to be the capable area are interactive video. Okay, now we're going to add a few things for details from our you, like it's on. And I would like you to download the us You wake it from from my us and, ah, let's import that from here. Okay, so now I'm going to open that in here, and we're going to drag few things over here. Okay? So, no, I'm in my xdd sources for elderly, and you can see if I called this one. I can. This is the folder, and you can see here is for iPhone X, and this is for iPhone. So I'm going to open up the simple one, which is for iPhone, and I'm going to zoom it controls your command. Zero a little bit more. Let's import this title over here. Okay? So you can see this is going toe have everything inside it. So this is navigation bottlers. Try to hide it and show it. So what we need is we don't need the toolbar, but we need the state a spot at the top. So I'm going toe copy it. Command and control or control C. And I'm going to go toe my file. I'm working and control or command V to paste it or here and just drag it at the top and it is going to stick over here. Okay, so this is one detail we have added right now. And then we can also add the other detail which is going to be Ah. Okay, so what? I needed waas this. Okay, So, actually, I needed this white area. Let me copy it from here. And, uh, basically with this. So I remember now that I downloaded this for this white one because we need a white one on that target. You OK? So I'm going toe, use this navigation bar. Copy it, and I'm going to baste it over on my a year over here like this, and you can see it is at the top, So we are going to shift it at the bottom. Okay, Now you can see I have press command shift and back bracket, and it is all the way back. So I think I should just have pressed. Let me get that control and our core command this bracket. Okay, so there's moving back up over here, and now we're going to change the color off, so double click on it and I'm going to change the color toe. This it looks lead these stars because we don't need them right now. Right? Access it e and left excessive. You're here. And ah, next movement at the dog. What is happening? Okay, now it is fried. Let's change its color white and use. Sign up. Sign up, you know. Okay, So we don't have any text over here like this is free or something like that. We don't want the user toe get confused. That sign up costs or something like that. So we're going to add some text over here. Bringing sign up is free. Okay, Now, one more thing. We can also add this one to assemble toe. OK, so I'm going to make a symbol of this, but and so we're going to need these tools toe things. And also, I'm going to see if we can make this a symbol. Okay, so let's leave it. Because this underline will be a problem. If we can use underline off this textile here, it will be better. Solar's. You know, I'm also going to make it a symbol. So it is easier for me to add links, but understand this. Sign up. Figs. Okay. No, I'm going to arrange few things or air here and there just to make the spacing right and I'm going to leave the next screen Toby designed for you. And you are going to import the keyboard from here like this? No, I'm pressing my art or option key to see the distances. And I am hoping on this one. Suspect this one. Hold on this. You can see the distances. Now you can see I have finished lining everything up. And we have used successfully the RUS. You work it from Apple and that that guy toe copy these things and do it quickly. Okay, so in the next lesson, I'm going to give you an assignment to create more screens, similar screens by showing them the status is and going to link them toe, create a prototype. Okay, so until then, take care. Bye. And I hope you have enjoyed this lesson. Let's move on to the next
40. Starting Design Preparations: Okay. Now, Intersection, we're going to design our this great looking GP tools app in Adobe X T. And before we dig into this design stuff, I need to discuss a few things. Like how together these resource is I have used how you're going to download them and how we're going toe select this color scheme. Okay. So you can see these are all the different screens. Let's zoom out and, uh, show you what? 100%? I think it's better because it is rendering my force. Okay, so you can see over here that I have used three colors. Okay, if you look closely, one is this main color, which is over. You can say prime regular for primary actions like these are for buttons. You can see these are all our major burdens creating a car. Blogging. Now log in now. Okay. Also, you can see I use the same color over here in the slide out menu. And as this is our main color, I used another color, but you can see over here, which is a Betsy on color. Okay, so, no, these both these two killers are related toe medical field or medicine. Okay, So you need toe. Keep in mind like that what you are trying to use, okay? And you can see on this color I needed a very sharp color so I can have some elements highlighted on it. So I use this young color. Okay, so they are combining women. Then there is a problem that if I want to show link on this background this dark color, I needed one more color, which was this yellow color. So I used a yellowish color toe, you know, mix with my color scheme. Okay, so then we have let me show you. Okay? So I already have one more color for this links, which is an extra color. You can see if I switch to this one. You can see this also looks great. Doesn't look very bad. Okay, so if you want to go over discolor, this is our bluish color. You can see or hear it is one a six e c three. OK, so you can see here. I have a lot of colors. When I try to design something, I makes a lot of colors. Tried to experiment with them. Okay. So rather than having one or two killers. To start with, I start with one color like this one main color and try toe. Add few more colors in combination to this. OK, so you can see this blue is also working with this one. Okay. And ah, the other Hlinka leverage I'm using over here, which is my standard color is a purplish blue which is the same, I think like this button. Okay, so you can try different colors if you want Toe. There are a lot off online resources to create color schemes which I'm going to show you in just a minute. One off them is my favorite, where you can use just one color to create a whole color scheme. Okay, then you can see or hear in this stab are you can see I have used a dark color and on the whole were or active state. I'm using this color. This is a bit like all averages. I Okay, now you can see here on this button. This is different. It is a bit darker. Shade off the same See on very sharp color. Very bright color. So this is Britt are dull color. Okay. You can also use this color. But I am using discolor this dark, bluish purple color for my primary actions. Okay, And inside the ab, when you were inside the app in the stab I'm using discolor for different buttons. OK, so you can see this is also a button over here. And this is also about a no hair. OK, so you can see the similarity you need to be consistent within your app. So if I use a dark blue color purple Calero here and use ah Pil Seong color or here it will be this is inconsistency. So you need to take it off all these inconsistencies. So your app look amazing and consistent in your visual design and your colors and scheme everything okay. And before starting this design, I want you to download all the assets I have used in this exercise. You can find them in resources in this section in the first lesson on may be attached to this. Listen, the SPD icons force called the background I have used These are all free and this is the icon I actually designed for the air by belt. Okay, I designed Okay, So this is a UK app for doctors. Okay, So before starting this design, I want you to download these assets which are attached to this. Ah, lecture. And you need all these assets before starting this exercise. Download these force again. E sand said if you y Ford and you can also use roboto if you want. Oh, and this again, E. And they are also going to look very well. These other resources download them and we're going to start in the next lesson. Okay, So see you soon in next lesson.
41. Color Scheme And Insprations: Okay, Before we start designing this awesome app, we are going to discuss a few things. Okay, Number one is inspiration. Before you start any design, you are going to see the similar abs and similar websites to see what color schemes they are using. What kind off for short typography they're using. Okay, so for that, let me show you how I started this process. Before going into this, I had to choose at least two killers to start with. Okay, So let me show you my inspiration and how I use them. You can see this is my inspiration folder. I just have three things over here. This color scheme. I think I managed to create this one from coolers dot C o r. Maybe I think a job at a particular Okay, AB, And this is another one you can see. This is let me show you zoomed in. So this is also using one color and one green color and other one is blue. And there are these different shades off blue from bright toe alcohol. Okay, so this is another example at me show. You've heard one You can see over here. This looks great. And if you look closely on thes two killers that were the main aim for me. Okay, So I really love these two killers, which can be used in our ab. Michaela's Arabic variation of discolor is not similar. So don't try toe totally copy everything. Although I think you can use the same colors as they are or here. But I needed a bit bright fish and blue sea uncle rather than the style croquet. So this is my inspiration folder. And ah, I think I saw a lot off medical APS already. So, uh, that was not a big, big problem, but you can see mainly Michaela scheme is inside this. Okay, we're using van yellow, the sea on the stub blue That is between CNN and this purplish color. And then this phone is a burner bit bright blue. Okay, so you can add void or black to it, and you can make them dull by adjusting the brightness and saturation and get more killers out off it. Okay, so let me show you how I got different colors from it. Okay? So you can see this is one color. It is a big, dull blue color dark blue. Go on. Now, if I show you this one and this killer So this color Okay, so you can see it is almost the same blue color, but in the great side. Okay, so I have used ah, bit off gray and this black area moved a color from here. Okay, so if I go to this color like me show you so discovered, I guess. Okay, So you can see now what is the difference? How I managed to use on the same color and created a new color from it by dragging it in the this area, you can see. Okay, so here it is almost close to this. Okay, so go back. Okay, So I'm using not purely Kriegler. Over here it is a bit off grayish blue color. And also you can see this is also the same. You can see it is still in this 211 Hugh area and Ah, And if I go to this one, I think this is also 211. Let me go to this one. I see. So the who is the same? So this color is same. Just the saturation and brightness. I have changed. I have shown this technique in my other courses toe that you can You create many colors from by changing just the brightness and saturation and keeping the hue same. Okay, Who is the basic color which defines that? What color you are using? He was actually the color. These are settings whole situation house hattrick saturated. The color will be And that this is the brightness medical will be on the life side or the dark side. Okay, So this is how I chose this color scheme and how I got inspirations and different colors. How toe, You know, start designing with these kind off. You know, professionalism. One more thing is that your designs are going toe improve by time. Okay, so if you think that I just created this design instantly and there was no process in between where I, you know, tried different layouts or try different patrons Before that, I was using just ah, plane background. OK, so I was not using Let me hide this one and this one. Okay, so I was using something like this. Okay, Then I thought that I should use some context in the background, and I said I should use something behind you. OK, so that is how we use inspiration and juice it to create our some looking APS. There is no design in the world that is original. Okay, everything is taken from somewhere. Okay, so this is a topic off my dis lecture. I hope you've enjoyed this lesson. Let's move on to the next s and where I'm going to discuss the user experience points. We are going to improve and going to show you the old screens off the same app.
42. Solving Ux Problems Of Old App: Okay, now in this Listen, I'm going to show you what points off user experience aspects we improved in this every design. Okay, Now you can see this is the first version off this app that may zoom in 200% and you can see hoops. Okay, so here we have, You can see the log in screen. It says user name password, which is very confusing. We switched it with email. Also, This one There is no clear visual accuse and visual team, like you can see this dog blue bar and this log, and they are the same. Okay, so this action button, which is called primary action, it should be different from this because it doesn't need to know that this is an action. And this is a title that wasa very big visual design mistake. Then here we have a lot off different fields, which we are going to reduce toe three feels, and then we have the stash board, which is really doesn't look like a dashboard. And you can see all the colors and all the buttons. If you look closely over here, they are the same. Okay, There is no indication that this is active. This is blurred with the background, which is very difficult toe, you know, defense years. Okay, then we have this screen and there are a lot of different activities over here. And this is an activity entry screen which we're not going to design. And I'm going to show you a few more screens which are their recent and design. This is a recent design from their ah ah, android app. And you can see we are going toe. Make it more good. Okay, so this screen, we are almost taking the same. But you can see as you can see or hear this area is a button. This area is also a button, but they doesn't seem like a burden too much. Okay, so if you see my example in my team, I change this to a button. Then we have ah, very great gull background at the back behind, which is I don't know seems strange to me. There is no avatar image over here. Okay. And, uh, let me zoom, go to the other. Ok, so here is our activities. What they did is, rather than having ah, lot off very big navigation bar at the top. The Jews, they combine all the activities in this one. Okay, so any activity that is used most of the time you're mostly are mostly used by the user. They must be at the top. OK, so you can easily access them. And then we have the since sink screen. We're almost copping this same structure, but we are trying toe improve it. Okay, so the visual design off this app really sucks. Although it is better than the first version which was this one. But still I think we can improve a lot. Okay, so they doesn't look like that. These are possible. Also this they're using just one killer for everything. Over here, you can see same color for everything. For buttons, for status, for everything. Now you can see here this is status. There, there, five appraisals. But there is no color scheme that that different sheer that this is ah, possible button or not. Okay. Also, the gap between these seems a bit less for me, for my taste. Or maybe I think it is going toe leave. Ah, lot off. Missteps. Missteps means that if someone is trying to tap over here they are going to tap in this area because they are very close. Okay, so we need to separate them. This is one another user experience problem in it. Okay, So that is all I would like to say that we are going to improve the visual team off this. We're going toe differentiate between primary action, which is the button, which is a title. And what is the information? Okay, so we need to separate all off these. So let's start designing this. We're going to start with the first screen, so let's move on to the next lesson.
43. Welcome Screen Design: Okay. No, In this lesson, we're actually going to start designing this one. Okay, Now you can see at the top. This is borrowed from on you like it from apple. And I showed you before, and you can see this screen is a bit blurred. We are using background blood over here, and everything else is We're going toe designed, right? Gnocchi. So what we're going to do is create a new document, and it is going to be iPhone 67 year screen. Just press kick once and with zoom in control, command zero. OK, now, we're going to start over here before that. I already know that you have downloaded the assets folder I have given you. Okay, So what we're going to do is we're going to bring the photos and everything over here before that. We need this top navigation bar, so let's bring it in from, uh, are you were a kid from apple. So this is on apple. You like it. And if I go over here, I need this one north, actually. X iPhone X one. Okay, so we need this one. So let's copy the top. So we have it over here. Copy it. The state of ahead. Excuse this one. Okay, so here we have the Skopje and just drag it at the top, and it will stick out a medically Okay, No, we Garda status, but on at the top. Now we're going to bring the background image over here, - another rectangle at the top to create the effect off background blur. So I'm going to have one rectangle over here removed the border, and you can see the size is the same as a canvas. And then we're going to use background blood. Okay, Now the background blur. Values will be blood among tree. We need very small blood. Brightness will be minus one. We need a bit off. Dark darkish, bare ground and opacity will be 15%. Okay, Now you can see this is the effect I created. We again need to move it down like this over here before this image. Okay? Now what we're going to do is we are going toe, select them, group them, and we're going to lock it. That is our background. We have created our blurred background over here and the stop navigation. But now we need a logo over here. So let's track this logo. It is in PNG. Form it so we can use transparency over here. Okay, so this is a big big, So I'm going to shrink it down by pressing and holding shift. Maybe 1 72 So I'm going toe size it toe 1 72 pixels by 1 72 Why do you think I have a very big logo? Because maybe for other screens, maybe iPhone X. We need a bigger one. Toby exported. Okay, that is going to be in our later discussions right now. I just need to know that we need this. And we are also going to add some shadow over it. And the shadow settings are six and six. Okay, so six pigs ills at the bottom, and six is the blood, and it is going to be 10%. Okay, so rather than 16% I'm going to use 10% over here. So the color is over here. This is how much percentage off the shadow, the opacity. This is basically transparency and opacity off this shadow. Alfa, you can see what? Here. Okay, so here we have very nice, creamy shadow around it. And then we are going to create some of the text over here That's like tea. And I'm going to press once over here and we are going to use the Ford again. A I see. Okay, So let's first Taipower textile Hair GP toes, and then we're going to kowtow again. And I am going to use extra bold. And, uh, size is 32 pictures on 32 points. I'm going to press TV next, bring it in the middle, and also the color is going to be something like this. Toto. Also, if you want, you can use something that is goingto be in the blue shirt. Okay, so maybe something closer to this say, yeah, Okay. So the color you can see, what I have used is I have switched to this hue, saturation and brightness, and I'm using the huge 211 which is our main color, me and prime regular off this design. Then I'm using this situation and this brightness. Okay, so we are lowering the situation. If we try to increase it, it will put some more color into it. You can see it is moving towards this color side Okay, so if I move it over here like 90% it is going to be over here, so we don't want it to be a bluish black color. But we wanted to be something, uh, in this area. 17. That looks good. Okay, Now we're going to type our text over here, and let's first time the text. Now you can see I have clicked this area text because it is a paragraph. So we need to adjust it with that. Let's move the size down to 16 and we're going to move it down like this. So let's bring it in something like this. Maybe like this. Okay? No, we need a regular fort, and we need to change it to s f you I mix. Go to this. First, this one. Now, we're going to use the middle and center over here and let's align. Economical. Okay, now the line height and line spacing is 19. You can improve it to 20 if you want. Oh, but I think 19 looks perfect. This is a very pretty good readable phoned on very small sizes. And you can also use this again. It s if you want toe it's up to you. But I really like agony. Ah, I'm gonna ask the boat Are the free forms and really nice force. So I'm going to stick with again right now because I think I shared with you the agony. Okay, so our loading screen or the first screen off our ab is already done. I hope you have enjoyed this. Ah, make sure that this color off this text is a bit, um, less or maybe a darker like this. One more thing we need to do over here is that we need to select this color and added to our killer switch. Okay, so this is our first color. So we needed to be in the color swatch. And also, I want this color Toby in the color swatch toe. Okay, so we have two colors over here. In the end, we're going to, you know, find a tomb. Fine. Tune these colors, so don't worry about it right now. This is our first screen. If you want to switch it, toe this, uh, point X. You can switch it to point text if you want to, because right now we have already done with it. Okay? So this is our screen. Let's room 200% like this and it is looking really great. Let's make it again. The same color except looking really sharp. Okay, so our first screen is done. Let's create another screen in the next lesson. And I hope you have enjoyed this. One more thing you can do is that this is going to be our heading. Okay, so we need it to be in this sexy OK, so we need to right click and create and killer. Okay, so we want discolor for our text headings. And also we are going toe. You do one more thing, which is we are going toe create the text. Okay, so this is going to be at tractor style. One is this one. And this is going to be over heading and director style. Okay, So you can see we have already to correct a styles, so it will be easier for us to do the same in the next lesson. Okay, so that is all we have already started building over corrector style and our colors. I normally advise that you create and improve your sty guide colors and cracked aside and symbols as you go forward in your design rather than building everything first and then implementing it in the design. Okay, so let's meet you in the next lesson where we're going to design the next screen.
44. Designing The Login Screen: now in this. Listen, we're going to design this logon screen for the same app. Before we designed this one. This in the process, and we designed this welcome screen or loading screen, and now we're goingto go to this logon screen. Okay, so here we have this button a bit. Shadow these two buttons with these colors. So let's get started and really designed something like this. I'm going to close this one. And this is our last working file. Now, simply what I'm going to do is I'm going to duplicate this hardboard, bypassing my art option key and dragging it like this. Okay? No, we don't need this one. We already have the textile, so we don't need them at all. Okay, so first we're going to do is we're going to have a stop heading over here, which we can also get from my U Y off apple. Let me go to this one. And let's see with the title. Yes. Okay. So here we have this title. You can see that This is that our title in this navigation bar? This is a toolbar. This is the body. We don't need the body. We just need this navigation bar. And we need this, actually, yes. So I'm going toe control, See a command C and place it over here. Okay, so we're going to move it at the top below the status bar, and we don't need any color in this one. And I'm going to use the same this area for writing Jeep be Toole's face, so you can see right now it is on San Francisco pro display. What? We don't need it right now. Maybe we can use the same phone if you want. Oh, because displays for heading. So let's right click for stranger color to local every need, and then I'm going to add it to other cracked erstein. So maybe we can change this one tool this prodigiously. Okay, Now what I'm going to do is I'm going to align it in the middle like this, and we're going to remove these stars because we don't need them. Okay, so let's school to this layer and see this is our group right? Accessory and left accessory. We're going to remove them. Okay, so here we have the same specifications which Apple is using. This is the default specifications also we can do the same to it. We're going to click this one and that's it. You can see now this converted to this. Ah, this one. I'm going toe. Believe it to sf you a text. And this one is sense out of San Francisco produce. But you can also use again. That's not a very big issue right now. Now we're going to use candles. Were here are and I'm going toe career something like this over here. This is going to be our text field. Let's make it 60 high. I think 60 is too much. Maybe 50 six waas looking good, removed the border and we're going to add some shadow to it. Let's add some shadow. This is three and six. I'm also going to make some rounded corners and going to be very settled. So I'm going to use to or here And I think Shadow is looking good with the default values. I think I don't want every spread The shadow. I wanted to be close to this and also I wanted very light. So 10% you can see 000 10%. It is black color. Okay, so here we have a text field. Then we can have our text on it. And that side email like this. And now we are going to use a safe. You a text. And we're going to use another color. Add another color to it may be discreet. So we have this Kriegler. Now, that's press V and move it over here. Going to have 18 pixels off distance from this. This is our one text field. This is looking great. Next select both off them and right. Click and make a symbol. Okay, so now we have a text three lower here. Just drag it like this. So I'm going to have boss word so you can see how easy it is now. And it is very easy to create different fields off the same type. Okay, so we have two fields over here, and now we need the log in button. Yes. So what I'm going to do is again a rectangle and I'm going to have the same size like a little bit higher 60 for the height, off the burden because it should be different from our this field. Okay, so the color I'm going to use is 211 and 84 60. Okay, so this is the color. And Ah, I'm added. Or here. And we are going toe air. Some shadow, this button drop shadow and our values are the shadow extreme. The colors call off the shadow. This is the same color, and it is going to be 36 22. This is a shadow color, and ah, then we are going to change the values to four and it. Okay, so this is these values are going to be after some experimentation. Also, the rounded corner is four for this one. It is more rounded than these two. Okay? And be so it looks like a button. Okay, also, this percentage is different. It is going to be 30%. We need a more heavy shadow on it. Okay, So it is separated from the background. That said, the text, which is going to be void over here. Let's add the text log in. You know, something like this. White necks and the white collateral ahead. And, uh OK, so I'm going to move it in the middle like this. And this looks create because it is already have less space. The top. I think I need to move it at the top like this. So it's looking good. Okay, Now, we can also add this one two hours collection, right click and okay. So rather than adding this one, we're going to add both off them. So OK, let's add for Specter style, and then we're going to add group. Okay, so let's not group them make a simple yes. So we have a better know here now. Okay. So if I did something over here, it is going to be detained on everybody. So make sure this is going to be your button, and you are not going to change a lot of things in it. OK, now we're going to add a text which is going to be formed yet. Forgot your password. This is going to be link. So I am going to add the singular for the link right now it is going to be the middle. Make sure your attacks and everything is a line in the middle because right now we're designing everything for the middle. Okay, so this is good. Okay, So he doesn't are in the middle there small Everything in the middle. And then this one toe with respect to the scan was okay. So we can also move it a bit up like this. Like this. Also, we have a lot of space over here, so why not move it above? That's why I'm going to have 44 pixel away from the city. So we have a lot of space over here because we need it. We are going to design the log evidence for Facebook and Google. Okay, so now we're going toe, do the same again over here. And this time I'm going to have less height for the button. We're just going to be 50 four. I think it should be matching with this one. This is this is 56. Okay, so this is going to be 56 and the high. Very tough. This is 5 60 t. This is 5 63 or so. Everything should be consistent in this on designed. So we're going toe, move the border. Fill color will be, Ah, the Facebook blue to 18. 84% saturation and 60% brightness. Okay, so we have this blue color, which is from Facebook clicks. Let's move it a bit more up in the brightness like this. Okay, so we're going to add four around this study. Full roundness to it. It's a lord capacity for all this. Okay, so now it is looking nice, and then we are going toe duplicate it and use our other orange color for our, uh, Google Google Google. Okay, so we have in the scullery zero toe 70 and 85. So how you can get these colors? You can get the scullers from online. You can color pick them. You can picked a color from it with using some off the tools I have. I'm going to show you someday soon. Okay, so we have these two buttons, and then we need a text. We just sign up with email. Okay. So let's move them a bit up. Yes. So, like this, then we are also going to move it up because we have less base at the bottom and we're going to duplicate this. This is our link. So we're going to use sign up, human, something like that in the middle, that small in the middle. Okay, so make sure that these are separated so they can be easily capable. Okay, so right now I see a lot off less space over here. So I'm going to shift these Albert up, so there is more room for it. Toe repressed. Okay. Okay. So we have laid out everything. Let's bring our SPG icons from fondation icons. I'm going to open. This resource is asserts and SPD icons. Actually, I guard these icons. I have picked them from foundation icons and, ah, so you can have less time, you know, searching them. OK, so I'm going to bring both off them. Just drag them in tow. X'd so looks, but it like this and dragged him over here. Okay, Now you can see we have bought icons over here. Let's move them over here in this area. Next move to the layers panel, and what I'm going to do is okay, so I'm going to move them toe the actual position. And let's Jane the fill color the white for this one, too. I'm going to make them smaller. Let's make them 48 by 40. It Let's lock this. Let's try. 36. 36 is too small, I think for the it was looking good. Next make it in the middle like this. I think they're looking good. Now we're going to add some text over here. Let's move this text and bring it at the front. Okay, so we are going to change the color of white All we can use something like this. Select this and select this white and we're going toe change it. Log in going to align it in the middle of it closer to this log in with Facebook, going to duplicate it again and log in with Google. Now you can see these bought off them are aligned left with their text. OK, so don't try to misaligned them or move it in the middle over here. Okay, Now everything looks school. We're going to add one more character style, which is our text links. Right? Click and add Corrector style. Ok, so this is our test text links. This is text on a dark background. This is on light background. This is our heading. Or you can also use this one. Also used Roberto for it if you want. Oh, and that would look cool, Tok. So we are done with this exercise. We have created few symbols like this one on this burden and this. Ah, few more styles, character styles. I hope you enjoyed this lesson. If you need more help or want to ask questions, you can ask me any time. Let's move on to the next lesson.
45. Design Login activated Screen: Okay. No, in this Listen, we're going to design on these. Ah, clog and screens you can see over here. This is our Logan Skin were designed in the previous lesson. And I think we forgot to add this, Iike, on to show the password. And now we're going to design this activated, uh, Passmore screen. Let's move it. Let's move it somewhere else like this and move thistle here so it makes more sens. No sign up is on the other side. Okay, Now we have three logon screens. One is this welcome logon screen. Then this is activated one once you try to submit your password and email and this is while you are tryingto add tryingto write something. Okay, so once you click on this layer Okay. So this is our text field When someone tries to input something over here, it is going toe, get a blue border at the bottom, and this eye icon is going to be turned blue. Okay, so right now we are activating two things this field and also this Ah, button. Okay, so this is going to be a burden. This is going to be exciting area which I'm going to show you when we start creating a prototype for this. Fine. Okay. I had a lot of problems creating prototypes because we need to have a full background over hair to link toe a prototype. So this whole area is capable, right? Not only this one is step about. Okay, so let's get started. And ah, we are going to create these two screens there. Almost similar. Just a little bit of difference. So we're going to start with this one. Okay, so we're going to borrow this from our you wake it from apple and let's get started. Okay. Now, simply what I'm going to do is I'm going to duplicate the screen, and we are going to replicate it like that and the alerts aligning it with this one. Okay, so now it is a line. Now we are inside this screen and we are not going to change anything over here. So let's first add this II gone away. So I'm going to go toe my assets folder SVG icon. This is my icon dragged into our adobe X'd this file and oops dragged somewhere else because it is going toe. Clip it inside this container So I'm going to drop it over here. I'm going toe size it to 32 oaks, 32. Okay, now, I think it's looking nice. I'm going to drag it in all here and let's school over lace panel and see if the eye is inside this password field or not. Okay, So where is our password? This is our passports, So I'm going toe name a password. Make sure you are naming your lists right now. I'm not naming them because I don't want them toe like this because I'm going toe group this and the password I gave you up something like this. And this is I think this is our email field email field. I'm the bills looking over here. Okay, so this is our social, um, Google icon. This is our navigation. That's close. Everything X close, this one. Okay, So what is this symbol? Is this the button? Yes, it's okay. So log in B, T n Dash, Logan, VT. And forbidden. I'm going to enable it. Okay, so we have almost everything named probably over here and this eye icon. We're going to change its color toe. So we have two layers in it inside it. So I'm going to change. Your sculler does something like this. So there is one. This one. Can we combine them? I'm going to combine this boat to shapes. Select these two shapes and Prestes. Okay, so now we have just one shape with one color. So it is easier for us toe, you know, change color key. Our shift colors toe this one. Okay, now you can see there. This is looking great. Now we're going toe. Create another screen from this. Okay, so we have another screen, and now we need our keyboard or here, which we're going to get from our and this off. Sorry, this one. X evers, the keyboard. Okay, so here we have the keyboard. Next grad, This keyboard and control. See or command. See? And I'm going toe. Let's close this one. Okay, so I'm were bested. Our mind designed like that. Okay, So you can see now this is looking really cool. We are going to change the email to my email. Okay, so it is looking great. Password is goingto be, uh, statics like that. Next. Move it a bit. Sorry. Okay, Now we need toe detach. This one from the symbol. Okay, so I'm going toe, detach it from the symbol and let's move it outside. The symbol. So one group symbol. Okay, so we have under the symbol. I'm going to move it this one down a bit in the middle. Like this. Okay, now we have everything. Now we're going toe. We can group them if you want to, but I think they are already in this. So I'm going to leave it like that because we're not going to use this passport feel. We just need a genetic symbol, which is our text field we have over here. So let me show you. We have a text field. Look, it's what We don't really need a specific field again and again. So this is going to be like this. Okay, so this is one state. So if someone tries to click on this one in this area to see his or her password, it is going to be like this. So Hello, World on. Okay, so I'm going to My password is a one group. Okay, so this looks good, and I'm going to change the fill color toe another color, which is shop see Uncle A Let's see what waas that color C zero e six. Okay, so I'm going to add it right now. So I don't forget this color. Okay, so this is added to this one and of what I'm going to do is in photo shop. It's easier to clip on Ah ah, another layer into another layer, which is not easier or here because I want to shapes Toby clipped. So what I'm going to do is I'm going toe appeared and other rectangle over here. And it will be four fizzle high, not 40% four pixel high. And I am going to remove the border color will be this one. This is our activated state and I'm going to use this rounded corners separate round this corner stop will be zero top left will be zero. This will be zero toe. Ah, right. Bottom right is going to be do. And this one else is going to be okay. So now I'm going toe align it and the middle bottom off this you can see like that And we also need to move it a bit up like this. So now I think it is looking better if you won't reduce the size, you can reduce. But I think it is looking good. Okay, so we have one activated straight where someone is trying to tap into this field, and it is going toe change under exchange color off this one. So it is going to be a bit darker color, and our feel is right now activity, Okay? No, there are a few more things you can add right now. We have no colors over here, so I'm going to add a few more killers. Add color. Okay, so we have a few more colors at it over here. Also, we are going to add in this color this blue color over here. Okay, so I have I did few killers. Let's add this color toe. I'm going toe aired color. So this is one Greg Miller on. Then we have this a dark, blackish gray white. And these I think these are all the colors. We're going to need all soaps. I just thistle on by a mystic. Okay, so I think we have done these two screens and you can see now by using symbols and duplicating other art boards. It is how much easier toe, you know, produce thes kind of screens easily. Okay. And I think that you should rename them. If you want to know, I'm going green him them separately. But you should rename them. You should group them. And ah, this will help you create this easily. Were so like you can see here We have nothing group over here, which you should be grouped in a button. And Ah, Okay. So it is going to have less mess over here like this. Let's group it on this. Okay, So I have this one and Facebook. It is lately to Facebook. So I'm going to press control command and select both off them. Control G. Come on, G. And this is our Facebook group. Okay, I think we left this social. Uh, okay. Now you can see this is a problem you can get into when you have not named them properly. This is icon face book. Okay, so I normally try to use the type off this thing before that name. So now we can have this one looks, this one and this one controlling. Come on, G, to get this face radiant. Similarly, you are goingto combine all of these. Okay, So you were going to arrange your organize your layers like that. So I hope you've enjoyed this lesson. We have created these tow more screens. Also, I think we are not changing any title but in the middle. And we're done designing thes screens. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson where we're going to create sign up screen.
46. Signup Screen Design in XD: now in this. Listen, we are going to create and sign up by email screen and to tell you that this is going to be from the skin. Okay, So user is going toe klik this one or tap this one and he's going to move toe the sign up screen over here. Okay, Now, on the sign of screen, maybe he wants to go back and doesn't want to sign up. Maybe he passed it with the mystic. So you way must have something over here on the top toe. Go back to logon screen. OK, so now what I'm going to do is I'm going toe copy this screen. Okay, So I'm going to zoom out, and I'm going to move the screen or here. Okay. So I'm going to name it, sign up screen, because I think it's better to name this one because I didn't produce any name. Eso We need this button at the bottom. Maybe this text we don't need this one on. We don't need this one. Okay, so also, we don't need this one. Okay, so we need him to sign up. He's a doctor. So maybe he had some medical decision number. I think we are going to use that over here in the original air, but I think I didn't use anything like there. So we are going to expand to four fields right now. Email, password, and Ah, two more. Let's move these. Tow the bottom like this. And let's start with the duplicating, this one just going Toby DoubleClick. DoubleClick is going to be your name. And we are going to start with Dr Medical position number because I think it's a necessity for this app. Um, okay, so we're going toe, confine it to four farm fields. I think this is a necessity. So it is going to log all your details according to this position number. Okay, so now let's move this a bit at the bottom. Right now, this one is at 1 48 this one is that one for 34. So I'm going toe. Drop it, toe. Okay. So what if we try to select everything over here? Drop it won 40 years. Oops. Let's use this one. Distribute vertically and it is going toe distribute everything vertically like that. Let's move everything a bit more down. Maybe over here. Okay. and I'm going to move it a bit down already. Member. Uh, then you need to long in here. Okay, Maybe we can separate it into two lines because here we have this image just not looking really nice. I'm going toe center line this text and also lined this in the middle. So for this, I'm going to use the color This one already a member log in here. Okay, so this makes sense. Now also, we're going to add one line over here, which is going to be like this one Morsi It is better to use Reuse your elements and this is something over here. I'm going to use it. Okay, so let's move this button a bit down. 24 pigs ills and we need to change the text to it account. Okay. And we are going to center line. Okay, So before going toe Kamanzi, I'm going stepping, stepping back because I need to make sure they're the center line. Otherwise it is going toe Move things around over here and there. Okay, So center line. And now if I try to use something cleared account, it will stay in the center. You can see now it is in the center. I don't need to align anything, so make sure when you create a button and you're texting in the middle, it is center aligned. Okay. I think we have created this. I we don't need this sort here. Maybe, um, I think we're going to show the password. Whatever he's writing, we're going to show it. Maybe we need it. Or here. Okay. So maybe user wants to see his passport Erhardt password while typing. We're going to show it or hit. So, no, we need a navigation back toe this first previous screen which is missing over here. And for that, we're going to go to our library, and and we are going to zoom in a bit and we're going to see where is the navigation? OK, so we need this one this year. This is left navigation and what we need from it is this one left accessory? Yes, I'm going toe. Copy this. Now you can see I have selected this control from RNC, and I'm going to go back to my screen and I'm going toe based it over here. Something like that. Okay, so now you can see we can go back toe log in screen. And now we need to change the color to something else because we have something. And so we're here. And I think maybe we can go to some other colors, which is a bit sharper blue color, like this one, que Also for this one. I'm going to use this because we need to separate it from this one. Okay, maybe we can use this O r. This one. This one also looks good. Doesn't matter. Okay, so Okay, so now I think our screen is done and it is looking create. I think everything. Everything six made it should be. And we have just come up with four fields to create this easy sign up process. This is really needed in user experience off any app. Let's move on to create new screens in the next lesson.
47. Dashboard Design Part 1: Okay, now in this listen, we're going to create this awesome looking dashboard. And for that before that, we're going toe, see some off the color changes. So what I did is let me show you before this button war had her. You off to 11 or two. Then I guess now I have changed to 218. Now it is in a bit off purplish shade. Now, why I did it Because our discolored this color is in the hue off 20. Okay, so if you are using two colors, I don't want you to have too much. The difference between the who one or two points is good, but more than that will look totally different colors. Okay. Also, I wanted to be separate from this Facebook blue color. So it is a bit off purplish blue color. If you want to change more like maybe add more saturation to it, more collaborate, you can add it. You can see now how it looks different from these two killers. Okay, so this is our primary interaction over here. Okay, Now we're going to start designing this one, so we're going to switch to our other art board where we were designing. So let's get started. You know, here we are on the screen, and I think we're going to start with this one, so I'm going to duplicate it like this. Okay, so I'm going to line it up next. Snam it dashboard. Okay, So what we need over here on everything else we're going to delete? Okay, so I'm goingto name it Toe dashboard, and we're going to align it in the middle like this. Let's see. What is the 64? 64? Okay, this is perfect. No, we're going to name it so welcome. Okay, so I'm going toe, move it down, and we're going to create an ellipse taking an Ellipse stool. Okay, so this is far having the Abadan off the doctor. We're here. Let's move the border right now. We're going to use basically the white border on with four Saudi four thickness. Okay, Now we are going to drag the image over here. Okay, So this is the image off her doctor. Let's move it inside here. And it looks great right now. Also, we're going to change the color to the Stark Black for this welcome message. Next Move it more closer. Toe this doctor image a key. Okay, so this is done. Let's try toe use this bottom area and create the navigation bar. Are toolbar over here? Okay, this is called Gold Bar in the U. S. Design. And actually Okay. Now, let me show you that the size off this. Ah, dashboard. Sorry. That's board art board is 375. So if we divide it with three, let me divide it with 33 75 divided by three. So it is 1 25 Okay, so we are going to create. Sorry. So what we're going to be it is We're going to peer three boxes off 1 25 verdict, and they are going to act as a whole bottle navigation bar. Okay, Okay. So before that, I'm going to go to my A sex folder, and I am going toe get this apple. I us and we are going to use the same design specifications for toolbar or the height and on the deck size, which Apple has. Okay, so these are their specifications. Let's see, is a toolbar. Okay. So Okay, So there are two examples you can use one is this one. And the other one is this one. Okay, so basically, we need something like this with titles, so I'm going to copy command control C and I'm going to pay stayed away. So I'm going to stick it to the bottom, and we're going to change it to our colors where we're going toe colored with blue and purple. So let's do that. Okay, now you can see over here. This is our dad bar. And it's hide is 49. That is the main thing we wanted to copy. Or also, if you look at this text size, it is 10. Okay, so we are going to use similar sizes because these are the standards. So I am going toe, remove this, okay? And we're going to use the sec tangle, tool toe, create a rectangle, and we're going to size. It won 25. So I don't know why this opacity turns out. Okay, 1 25 and then 49 is going to be its height. We're going to remove the border and express V and movie take the bottom and we're going to duplicate it without option key. So one and okay, then we are going to have horizontal distribute spacing. And this is how we are going to create our bar ba
Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years
