Day 74- High Fidelity Prototyping 100 Days 100 Skill Booster Sessions

I'll be just starting the recording as well. Yes. Welcome guys. Welcome to this morning skill booster session. So today we are going to see something very, very interesting topic. Okay. So which is how do you convert your basic wireframes and prototypes into something like a little interactive based prototypes. Okay. So how you can use a little close to a reality which is somewhat like a high fidelity wireframe. Okay. And mainly we are going to discuss what are the things which needs to be ready before you start making this, what you call this high fidelity. Because a lot of people think just this final screens is very important. To be very honest, there are a lot of things which needs to be done before you even start doing the final frames. Okay. So there are something like your design system should be ready. You should be able to use certain components repetitively. You should be aligning with your brand. So these are all the things which we are going to see in this particular session. I just wanted to spotlight myself. Just a second. Okay. People who are learning new, don't get overwhelmed. Just. Just observe this, okay? Because I'm going to teach you certain basic options only you can first try and experiment with that slowly. You can go and experiment with some advanced level of concept as well. Okay. But do not get overwhelmed or feel that, okay? This is not for us or something like that. Okay. So I will just share the link as well. Okay, just a second. Sharat, you have shared something else in the other group. Sharath. Sharath is there in this call. Okay, let's guys please be little mindful where you're posting the information. Okay? Okay, fine. Anyway, got it. Guys, just a second. So I'm just putting out for the people who wanted to join live in our YouTube stream as well. Let me help them out. Just a second. Okay. Oh, where am I? Yes, one second. Okay. So yesterday were you able to complete the activities what we gave? Can you just confirm me? Ram Raj, Shashank, were you able to complete that activity yesterday what I gave you? Yes, small activity. Okay. Can you just share with me? It would be fine if I'm able to start from there. Is it okay? Actually I did the task what you gave day before yesterday. So I. I gather some inserts from real users and regarding that inserts, I creates. I create a digital storyboard. Huh. So can I share this? Yeah, you can share, no problem. Generally have you got something? Guys, please switch on your camera. Shashankaridar Jayanandani. Vishwesh. Kamath. Sharat. See guys, this is a very, very important session. Okay? So if you are Paying close attention and you're watching it live with me. There is a different level of learning which you will get if you switch off your camera. Then there is no point in learning. I'll tell you. Your attention will not be fully here either. You will be in half sleep. It's better. You can go and sleep. No. At least complete that one properly. No problem. Okay. Yeah. Yes, yes, yes. Extremely nice. Good morning. See, everybody looks fresh. But why you wanted to hide yourself? I thought everybody will be sleeping like this. Okay, see, Shashank looks fresh. Giridar is like I'm in the midday jagdish. Tell me what you like. That level of freshness people are there. Excellent guys. Yes. Okay, okay, fine. So let me share my screen. Let me share my screen. Okay, so first of all to just before sharing the screen, I wanted to tell you that this high fidelity prototype is a very, very fancy thing. And lot of people are mostly alluded by this terminology of building the screens and building the final prototype, right? So. But being a product designer and a UI UX designer, it is very vital to understand what are the steps behind doing this in order to come to this stage. Okay. I assume that your research is done properly. I assume that your customer requirements are understood properly. I assume that your wireframes and ideations and concepts are discussed properly with your team. I assume that your team is also totally aligned with the wireframes. What you created confirmed that the placeholders and the wireframes and the which if you're not aware of this before, that becomes a hell a lot of problem for you in the case. That is why it is very vital to understand creating a multiple number of prototypes and iterations is very high. It's very good for a designer to first learn this new way of doing the design. Lot of people, they don't even take a chance. Including my development team and my design team. I'm saying this much, right? Even in my team also, I was the one who will stop everybody. Don't, don't, don't, don't, don't, don't, don't, don't. Stop, stop, stop. Let's wait. Let's do it one more time. Let's try to find out the best user flow possible and then we'll try to build. So there is one graphic designer in our team. Okay. We don't do any screen building. This guy does everything. We will have to give the exact concept, idea, wireframe in a more detailed way. That's what we'll do. Ideally speaking as a designer, that's what we have to do. If you are going and building each and every button and detail of the screen, then your time will go. Okay? There would be team to do this who are very specialized in doing this. And also if you want to collaborate with those guys and do it combination, it would be better. Like let's say you may expect something else like this. The gradients of the color could come like this way and it would create a different experience for your user. You could communicate that. That is why there is something called tokens. There is something called notes. You can write it in figma and you can communicate with your designers with your. What you call graphic designers accordingly so that they can able to build those exactly what you want in your screen. Okay? And also many times in a lean organizations or in the startups, mostly the people who does this, they do end to end everything. I've heard people doing HTML, CSS coding and Java and everything as well. That is like a complete kitchen road. Your career is going in a complete wrong direction. Your targeting is also not correct. Maybe your targeting is correct. You are not working in a proper environment. It is very important. See guys, we spend more than 70 to 80% time of our career in office more than in home. That is why these kind of things needs to be taken care while we go before working in an organization. If we don't choose this, then I will tell you, no matter how much salary you get, you will again find a new job. You will again find there is not fulfillment again. You will go for job search again. You see, you are, you are. You will not go into a fulfillment. So that is why it is vital for you guys to first understand the overall process and development. Even some designer itself don't know this how to develop this. Some people ask, hey design system. Why should we have this kind of things in our organization? It's a waste of time. What is this system? What is this design system? Many top design studios also don't have this. Okay. See brands like Accenture, IBM, they have this kind of a design system. They have a proper Vladik team to to. To create certain assets, libraries, style guides, particularly design system. There is a difference between design system, style guide, everything library and all these things. Guys. O so every company has. Some of the predominant companies are very well practicing it. But many companies, I would say more than 80, 90% of the companies don't do this because they think what is the value add in this? What is the point in doing this? Let's build the screen, let's put it in the market start increasing the download rates and start bringing the customers that's the subscribers. So the ultimate objective of design and development is not understood. See, I would recommend you to go and watch my YouTube video where I created a seven part video. It was actually last three, four months before called Design Systems where I talked seven days about design system. I kept it for public so that everybody can learn it. So today after this session you can go back and watch it. It is actually called developing design systems in a more optimal and a lean way. I've also introduced a lot of AI tools and particularly I talked about the font joy and lot of font pairing tools. And you can use this IBM design system. You can use Google Material design system. These are well predominantly used systems. You don't have to break your head much. Much of the components are already there. I would say if you are, if you are at least one or two years experience or fresher, please first go and experiment with that. Please go and play with that. Don't create any new design system at your level. It takes a lot of time to create a new design system. You should be an innovator, you should be a. You should be at least having four to five years of experience dealing with products in day in day out. Understand how the successful design systems have worked and why people have really become success. And then you build it own for your organization. If you are a fresher, don't prematurely. I will build design system. And I've seen people in the portfolio, they say design system, they put four colors, they put four typeface, they put four palettes and then they put what you call. This is called design system. Hello. People are joking. They don't know what is mean by design system. That's what learn it properly before you do it. Nothing wrong in putting but know these things preferably because if somebody comes to their interview who knows well about design system, they get really angry by seeing that. Okay, either it's good to good to tell like I'm exploring this. Write a reason why you have choose that particular colors. Bring a justification why this typeface has been used. Bring an understanding that why the buttons having a particular radius and why it is reflecting your brand language. If you kind of write these descriptions and explanations and then go for a particular choice then that becomes justified. Okay, so this is actually called using a design system and it reflects in all products of your screen. See, Google has totally 50 plus products. I think it's 100 plus every product. If you go to Google you will find the similarity and you can see Google has product designers and developers across the world. Okay? If everybody is have to do the same kind of an interface and experience, imagine there needs to be a great team manager who has to play with all these things, right? Even though a team manager is able to communicate and effectively do all these things in spite of it, a lot of people will do very eccentric things. Like let's say if Giridhar is there, Giridhar will be like hey Jagdish, I'm more interested towards this orange color. Here let me put this. Ram Raj will say hey I don't like this round buttons. Here let us put square buttons like Microsoft. Shashank will say hey I don't like this too much screenshot. Let us go with minimalism. Everybody will have different preference. But if three people are working in Google, like let's say Giridhar is working in Google Scholar. Like let's say Ram Raj is working in Google homepage. Shashank is working in Google Drive. Typically. Okay, how all three people will be aligned because of design systems. If you understand the power of design systems and then you start building your screens, first of all you will not find lot of time here. See your time has to ideally go on doing research and bringing out the insight. This is a tool to build it. Okay, what happens ulta is people sit 95% time here and do experimentation. There is no point in doing experimentation with the tool. You have to do experimentation with the customer input. You have to talk to people and get the insights properly. You have to talk to your developers and bring which is really correct for your development, which works better for all the screens and options. And then what happens? Your time will be majorly saved. That's what in design system I would have told more than 40% of your time of design iterated cycles can be saved once if you have design system in place and still people don't know what is the difference between design system, library, style guide, brand language. They think everything is one. Please go back that video and watch it. You will understand that clarity. Okay? Yes. So fine. So continuing to the last few days like let's say in the day 70. I don't know in the day 70. Ah fine. See guys, I would say from the day 69, okay, we started from the day 69. In fact this is an interesting thought process. If you guys want to get a full flow, I would recommend you to watch the 69th day do the activities, 70th day do the activities and then come for the 71st day where paper prototyping and UI UX product designer. How they created and 73rd day digital and physical prototyping and 74th we are building some high fidelity wireframe. So this is like a one set fully. Okay, maybe I'll teach design systems separately one day. What are the common design systems people use and what are the importance? Certain case studies. But now we'll talk about this. Okay, so how to use data and things into building your high fidelity wireframes. Okay, so that is what is a user centric approach. I would say because you should not build your favorite option. I've seen my graphic designer telling many times, Jagdish, this option is not there. That is why I built this. I said are we working for the options which is there in a software or are we working for the people's functionality, people's requirement? We will have to find a way to implement it. It's not like there is no option. Jagdish, I'm not going to do this. We cannot talk like this. We have to talk. What can I do in order to make this option come? Because if this is proceeded, only user will be able to interact with it properly. You need to understand this guys, this is our responsibility being a designer. Don't, don't, don't think like we have to just complete this work and go ahead. Okay, so think about how it is going to be user centric in nature. 90% designers use these tools like Figma. Data driven design improves 40% preparation reduces design revision saving time. So all these things is fine. Guys, we know all these things. Okay? Yesterday also we have little bit talked about it. Design aligned with the user needs have 35 percentage better retention rates. Very important. Cognitive psychology in design journal says. Okay, so you need to understand it's all about user centric design. It is not designer centric design. How many of you understood what I said? Now please write in the chat box user centric design, not designer centric design. I wanted you to write it consciously because you'll be also going into the development and design team, right? You will definitely be getting this problem and a lot of people will also do this mistake. Okay, you do not understand. Okay, I'll explain You always you should make a user centric design. That means if your screen requires an option which the user is going to use it. Like let's say, like let's say if your user is using the device like this, if he's a patient. Okay, I'm a medical product designer. I'll take one use case. Okay, so there are certain devices where the users will only use like this. Because that user cannot come what you call sit, sit like this and use the product like how we used to do every single day, right? We used to have a mobile views. There are certain medical people, okay? Their condition is like they have to only sleep in the bed like this. And their operating condition is only like this for these people. How do you create call to action buttons for these people? How do you choose buttons and screens and other things? You should think about how they can able to see this particular option like this and they can able to interact. Have you seen in the interface of like let's say, have you seen the interface of submarine people used to have interactions like this here. Think about how the navigation should be designed. Don't think I will only design mobile app. Okay, then your career is going in a different way. Think about, you are a problem solver. So you're designing some interface for a guy who is working in the submarine. Okay? You're building that screens and you're building that meters and buttons. Like let's say if you keep too much of interactions here to take a decision, that attention span for that user is very less, right? So you create another interface. Probably they can able to use it here. But the final decision could be put here. You will have to simplify that flow of the user by thinking the use case properly. This is called user centric design. You should not tell, hey, let me put all the complex things here. Let him do all these calculations here. No, try to have a split screens, try to have an auxiliary screen. Try to have a primary screen. So you should be able to understanding the user. What is the final use case, what this product is going to be used, who is the ideal Personas for this user? What will be the typical time he'll be involved in the screen? How we can able to increase the retention rate and how I can able to decrease the retention rate. See, many times it is also opposite you being a designer has to make the people decoupled from the device. Like let's say people play this addictive games, right? People go into using certain applications for a long time. That should also not happen right on the other side. So you should know how to disengage the user. Also sometimes it's exactly the other way around. Okay, See, if you're a design thinker only if you're a user centric designer only you'll be able to understand this. Or else you'll just you. You will not be very consciously thinking how people will use this. And you'll be just putting some random stuffs and people will not be able to get the point. Okay? So there are six elements, guys. First of all, your data should be clear. I already talked about this. Okay? Do the surveys, interviews, competitor analysis, pain point, everything should be there. Then your wireframes are finally tested. Please make a note of it, okay? Before you do all these things and your stakeholders should be aligned. Your client should be properly understood. Okay? And make sure all the feedbacks are incorporated from the testing. It's not like, hey, I'll do testing. But are you implementing all these things in the reality that's what is a major thing. Okay? And get your management reviews. This is very, very important. Your team review and then the design systems are ready reusable components for consistency. Okay? So try to use the reusable components. Don't reinvent new. If you start inventing new buttons and elements while you're building the Figma screen, I don't think you'll complete project. Maybe you can do a home project. That's okay. But if you're working on industry, you should be in a high speed. Because time is money in industry. People will give you half a day, two hours to build this entire solutions. You should be fast, fast, fast. That is why these things should be very, very ready. Okay? You will not have time. Jagdish. I'm making my portfolio for one week. Putting portfolio in one week. If you're working in industry and if you're talking like this, people will easily send you home. You should be ideally working super fast. That's why these things should be ready. Once you're starting this, you should be rocket speed. Okay? Accessibility compliance verified this. You don't have to worry because there will be UX auditors. There'll be also people who do this kind of testing, UX testing and then they will able to give you. And there are a lot of plugins to also do this activities. See. If you want to become expertise in this, please become an expert. There is no problem. But this is not our main scope of work. When we do it, okay? To a certain extent we should think about WCAG align, how it is compliance and all these things. But when you go deeper, this is a separate subject, guys. You can learn this for two years also. Okay? But don't get lost. If you're interested, go for it. Or else you just stop your boundary. Okay? And then there needs to be a strategy for choosing colors, graphics, layout, consistency, pattern guide and everything. Okay? Then your screen and flow plan should be very clear. This is what is the major thing. Okay, so please, please type if you are. If you're understanding all the points, type six Jagdish. I understood all the six points. Great. Okay. One of the top features of building this what you call high fidelity frames. See there are many methods, there are many options in Figma. Okay. Building frames, building some kind of interactions, building auto layout, how it can be very easily used and scaled up. How we can able to create some interactive prototypes by creating some small animations. How you can use certain library components which I'm going to show you. There are components which you can use from your library. You can get it from the open source, like let's say IBM Atlassian design system, like Google Material design system. These are like very, very good sources where you can create that. And you can also create your own libraries and build some components which can be used. And then you can use certain version history to understand what you did and how it can be tracked back. And you can also collaborate in Figma with a lot of people. Same like Miro how we saw yesterday. You can also collaborate with your team. Okay, so now I can show like few examples of how we can able to start building your high fidelity screens. Okay, but please experiment with this. It would take a lot of time for me I took one detailed session also in our earlier batch which is like totally two hour session. I did one screen from the basics to high. Maybe if you are. If you're interested you can ask me. Okay, but you. But make sure you have completed all your basics. Don't only focus on building this screens. Focus on building your entire research work done properly. Then once you start building the screens then I will also give you the access to watch that video. Okay, just a second. I'm just sharing the screen. Okay, sorry guys. Okay, fine. So if you open your figma. Okay, it is. It is always suggested that if you open your Figma in your. What you call in your laptop in an application, it would be better. But many people use it in the what you call browser itself. That is okay, no problem. Sometimes the plugins and other things won't run properly. It will crash. Try to use it. Okay, so if you typically take Figma, this is one option where you can able to build your high fidelity interactive wireframes. Or maybe you can able to build your closer solution and then you can share with your developer easily because a developer will be able to read your screens better, will be able to look at your color code and your coding of that particular option what you've Created as a screens in a more faster way. Previously there is no big tool to do this kind of a development handover. You will have to do it manually. Okay. And there are many softwares to transition from what you call a prototyping tool into a development tool. Okay. The development people's headache was very high, but now it is significantly reduced because of the simplicity what Adobe XT and Figma and other people have brought into the industry particularly I would highly suggest if you wanted to learn interactive prototype in a way Figma, many industries don't use it, okay? It's not a very strong protected firmware. Industries don't really trust it. I'm saying the big design studios try to use Adobe XD. Adobe XD's interface is also very similar. You can learn a lot of things, but Adobe XD is predominantly used and particularly we use Adobe XD because it's a protected firmware. Your data will be protected. Industry will always think about that first perspective, okay? If you're doing for practice, yeah, you can use Figma Sketch and all these things. You can use this Miro Envision that itself. You can basically create some basic wireframes and other things. But if you want to do work in an industry, you can't purchase Adobe XD because it's very expensive. Try to watch some tutorials at least and just get some flow because your industry is definitely going to use Adobe XD only. Most of the industries, they don't use this Figma. You need to be very careful about it, okay? And any software comes, guys, you can learn it, don't worry about that. It takes only like let's say a few hours to few days to just get understand start from this option. What is this file option available? What are this edit? What is this view? What is this object? What are this text? And just go to the tutorial videos. In fact, I would say if you're completely numb, there are many tutorials available in the YouTube and I would say that there are tutorials available in this software itself. That would be more to the point. I think There is some 11 minute video for Figma and Adobe XT where you can go and quickly watch and you can learn the keys and shortcuts where you can able to start doing the screen. Okay, so fine, so now let's talk about like let's say building some basic frames. Okay, you can press a shortcut called F. If you press F automatically you will be able to see one screen. If you wanted to do some kind of a basic, what you Call size of the screen, you can able choose from like let's say iPhone screen. Or if you wanted to use any other particular iPhone 13 or 12, you can able to choose that. Okay. But I'm just showing you you can able to build your own frame just by doing some kind of a. Like let's say you can scale it up with this. Like if you want, whatever size you want, you can able to screen. You can also lock these dimensions and it's a very pretty simple width and height. You can change it. Like let's say if your customer is saying, hey, we wanted only this guy, we want to only develop this one, you can able to lock this and you can retain this. Okay. So this is the basic option in the figma. And once you're building some screens you should also understand like there are many shapes first of all, which is available like let's say when you press R you can draw some rectangles. It's a basic option. When you press. Okay, you can able to use this kind of O. If you put shift, it will always look like a proper circle way. Okay. If you put L, you can able to draw some kind of a lines. Again if you put shift, it will be automatically what you call 90 degree orthogonal aligned. And if you use T, it will able to give you text. Like let's say you can type something. Okay. And you can increase the type size here. Like let's say something like this. So these are like basic options. Very, very basic options you can able to do. And once you press this option and shift and when you start what you call doing this, you'll be seeing four sidedly, it will equally resize your components. Okay. If I don't hold what you call option and shift, what happens? You can use only one side. If you push only the option option when you take only shift and when you do it, it will go in only one side. So play with this option. These are like basics in the keyboard. I'm just telling for Mac, but you can try for the Windows also. Okay. Mostly the shift alt and if you use your mouse drag, you will be able to find out which works better. Okay. Because when you're doing a little faster work, this kind of a what you call option will be much useful for you. Okay? Yes. So now let's go to assets. Okay. I will show you also one option, guys. Like let's say if you're building some screens, it is also recommended to go and study this kind of a design system. Okay. IBM design system. How many of you are Using this IBM Carbon design system. How many of you have heard about this type out in the chat? 1. How many of you heard about this? Yes, yes. Sigma and XD are very similar. If you learn one tool, other tool is very easy. In fact, I would say I find more comfortable in XD Figma because we don't use in our organization. It's like only for teaching students. I just learned here and there. But Figma is Adobe XD is really good because the plugins are more robust there. Okay. You can able to use crazy plugins. You will not have any problem. Okay. Okay, let's come back to this. So IBM design system is something like. Let's say they have kept it as an open source. In fact a lot of open source is there. Polaris design system is there. And you can use Google Material design system. I would say use this three design system. It is superb. The reason being they have kept for designers, developers and how we can able to use to migrate. Also they have kept a lot of materials for the designers. You can see Figma kit is there. Like you can just directly import your kit and you can start using there. Okay, you can say sketch kits are there. So a lot of your job is pretty much simplified because it is all website mobile, well optimized the typeface, if you choose from this kind of a design system, it's all completely optimized for your web and as well as your mobile apps. Okay. Because you need to understand typeface and graphics and elements. If it is not optimized properly for the web and mobile, you will have a different response in different screens. It will look very ugly. Have you seen many mobile applications? When you open it in the website it will look good. But when you open it on mobile, you will get confused whether the brand is same or not. Have you downloaded something else? It's a very poor design system implemented. Okay. If you want to keep it very consistent across use this kind of a proven systems. And you can read this many articles why Carbon design system has come and why they have created it as an open source. You can find many things here. Like let's say if you wanted to build colors, if you wanted to build icons, if you wanted to build some kind of a spacing motion. See these are all like super materials guys. If you ideally go through this website and learn, you will be having so much of clarity why people have used this kind of a system. Okay. And you can see like let's say you can go and find out like let's say why people have this Kind of an option why people have this kind of a spacing. And if you go for like let's say color, you can find lot of the proven colors and methods available here. Look at this. Blue is at the core of IBM Digitally inspired, vibrant and luminous blue serves as the central axis of our palette as it branches out into secondary colors infusing the reds, greens, purples and magentas to create a harmonious and unified feeling in UIs. Neutral grays provide a backdrop of light and dark lanes, while blue serves as the primary action color guiding users on their journey. Crafted for accessibility, our palette makes determining effective color combinations easy. Secondary colors are used sparingly for emphasis, impact and functional alerts, while the interplay between each color and every element contributes to an accessible, user friendly experience. Inspired by our vibrant and digital world, our palette is diverse, expressive and blue at its core. Okay, sorry guys, I did not switch on the sound. That's okay, no problem. But the point here is can't able to open. Can you share the link? But here, if you go to the Google, it is there here. Okay. Anyway, I'm just pasting it. Okay, See, go to the design system. Guys, I have talked about six design systems. YouTube Live. Okay, you can watch it. It's not YouTube Live. It's there in my playlist. You can watch it. See, the reason why I gave you the small example is look at how they have experimented with these colors and how they've built it so you don't have to do experimentation here. It will take a lot of time. Guys, if you start doing this experimentation. Watch this video again. See, they're saying this is actually a well, predominantly proven template and palette. If they create some kind of a brand language with the primary color of blue and secondary color or accent color as yellow and green, your screens will look super clear in terms of interaction. You don't have to do multiple what you call iteration and testing over there because this has been proven. Think about it. I'm just taking one example, but you can do literally for all the things like let's say you can go and understand why the color anatomy is like this. You can read about this slowly and you can understand why this has worked really better. Same like this. When you go to this 2x grid system. See, it's fundamental to everything we design. 2x grid system is a geometric foundation of all visual elements of IBM from typography to columns and boxes and icons. So they're saying this 2x grid makes your visual identity and visually appealing feel looks more consistent. So they have. They are saying that this is more prevalent in the industry and that's why we kept it as an open source. In this design system you guys can use it. See 2x Grid Fundamentals, Grid behavior, grid influencer. You can just. I'll just click about this. Look, read this so you will understand why these concepts are there. See, these are like. There are hundreds of concepts like this. Guys, I'm not saying you go and learn hundred but I am saying what is the requirement for your design? Understand that and then take some design elements. See, I would say many design studios are using this. People who reinvent design system, people like Google, IBM, they do it after a lot of years of experimentation. Okay, but don't do it at a premature stage. You won't understand and you will get confused. Okay, maybe my Internet is not that good I guess. Okay, look at this grid system 2x8 into 8 something. They said that this construction works really better and it can be replicated for all the elements. See, it's all 2-2x grids. Does it look harmonious? Yes, it does. It does look harmonious. If you resize it to your own sizes, it will look very shabby. Okay, so I'm just taking a few examples. I would recommend you to go and experiment. Everything guys, guidelines, components. See components and all is really good. You can able to use all these buttons, guys directly. Don't use your brain first. Use the system first. Try to understand because whatever industry you're going to work, it's already there. If you're working for a big design studio, try to go and understand and read your design system of the company before building the screen. Because it's just going to be a drag and drop for you. But there is a lot amount of thinking process which goes beyond why this particular typeface has been centered like this. Why this padding is given with this size. What makes like, let's say if you go and just understand this one, why the padding size is given like this, why it's left aligned. Is it a culture of Islamic or Arabic where it will be right aligned mostly and why it is being kept with this typeface. Why the blue and white works good because of the complementary reason why it is sharp corner and why it is not round one and why it is actually hovering a little bit like. Let's say there is a state change right when you move your mouse. Everything has a reason which is properly built to it. If you put this thought process while building each and every button in your screens, you will take one Year to complete a project. That is why this kind of a thing should be freezed. First define the design systems and then you go and replicate it fast. See how I'm able to do it? Just showing you an example in the. In the screen. Okay, like let's say if you go to this figma. Like let's say I'll delete all these things, guys. Okay, I'm just deleting this. Just create one basic frame. Use this kind of assets which is already available for you. Okay, like let's say you can go to this Google Material system. Maybe you can go to this figma design system. Okay, maybe I'm just creating some kind of a labels just drag and drop. See, it's available, right? You can just use this kind of a system which is already there. Like let's say if you wanted to use some kind of a navigation like this, you can just drag and drop Project dish. I want to give a star rating for my ui. Okay, let me keep like this. Okay, so you can keep like this. So something like this will be there. The most interesting part is you guys can able to go and change all of this information here. See that is the beauty of design system. All these options will be accessible for you if you create a new system. It's not possible. You can able to go and change all of these options here. You can make one in. In different colors and then you can go and change and you can able to create as a component if you want to replicate it. Okay, if you want to create a component, you can just right click and you can create a component. Creating components. It's very simple, guys. Like let's say if you wanted to use one element across all of your screens. Okay, you can first create one basic component and then you can just use that same again and again. The benefit of using this is if you're building 100 screens, suddenly your boss comes and says hey, the button needs to go right hand side because the client just now confirmed all the text should come in the left and the button should go right. Imagine if you go and put it in 200 screens, your life will be in a big problem. That is why if you create component and if you use like let's say if I'm creating this component, I'll show for some other element. Okay, maybe this looks little complex. Maybe we'll use it for a very smaller things. Okay, just. Just use whatever is available guys. First for. For yourself. Okay, I'm just going into this material design system. Maybe you can use this kind of like let's say maybe the switch. Okay, I'll just trying to use this switch. Maybe I'll just try to use another button. Like let's say this avatars. Probably we can use this kind of navitas. Okay. Just, just drag and drop. See these are like well optimized, well proven designs for your design system. Okay. For you can just simply use this. Like let's say if you want to use some kind of a representation purpose. I'm just taking an example. Okay. And then you can go back, you can do whatever you want. See Jagdish, I'm not happy with this buttons. I would, I would, I would recommend. I mean I would suggest you can build your own in that case then you can find out. Okay. If nothing is there, probably we can use our own systems. But prayer, I would suggest go and check it out because many times it is already available. You don't have to break your heads much. Okay. You can just drag and drop. See? Agree. Okay. You can just hold shift and it will come like this. Okay. Okay. You can just keep it here. Okay. So like let's say if you wanted to build a button like let's say if you wanted to build a small option here. Okay. And let's, let's, let's go and change this radius a little bit. And if you, if you hold alt, like let's say only one side will go. If you remove this and it will be automatically removed. Okay. Like when you pull this button, all four sides will come. If you hold alt, one side will return. Okay. So you can learn all the small, small things. No problem. I'm just creating a small option for you, okay. Where you can able to use any color. Let's say you can use. Okay, use this kind of a small color. You can use the text here like let's say summit or I don't know, apply. Okay, you can use this and change this typeface. Where is typeface? Okay. In fact there are a lot of design system typeface also which is simple design system. It's already there. If you wanted to build your own, you can also create your own library style. And you can create it, you can replicate it again and again. Okay. It's a very simple option. If you create, if you press this plus you can able to create your style name. Like let's say if you're doing any project, project X, you put that project name description and then you can create your style. You can repeatedly use that same element. It's a, it's a, it's A small style, what you're creating. Okay. It's not design system. It's a small style to automate your work. Okay. Many times you can use this, what you call options which is available like let's say, hey Jagdish, I want a little larger one here. I'll go for this one. Okay. See something like this. So maybe it is. I will go for this title. Okay. Yeah, this would be better apply. Maybe I'll keep this little smaller like this. Okay. Yes. So now what you're doing is you're just trying to create an apply and then you wanted to. You wanted to like let's say bring a small icon into it. Okay. You can also use many plugins to bring the icon or you can drag and drop from the Google also. Both options are fine. I'll just show you how we can able to use some kind of plugins to bring certain icons. If you want to build one basic screen, you can go to like let's say manage plugins. If you're very comfortable, tell one icon plugin guys if you guys are comfortable with this. Like let's say I like this. Noun Project. Noun Project is a really good icon set. I would highly, highly suggest you that. Okay. But many times Noun Project also does some nasty things. It will not run properly. The plugin will crash. We'll try to use what is available. We'll try to use this icon scout. Okay. And you can use this icon scout. So when you try to what you call run this plugin, Iconify feather icon. Yeah, you can use this like let's say apply. If you wanted to apply it in like let's say Facebook. Okay. Just drag and drop here. Okay. Put the shift and then you reduce the size without shift. If you put it, it will resize like nasty. Okay. It will look very shabby. Okay, fine. You guys can able to create it. So now like let's say, oh, Jagdish, I want to create some kind of what you call a small rectangle around it. Okay. To show a certain call to action. I'll also try to match this radius. Maybe I'll try to create a. This is how the Facebook looks like, right? I don't know. Okay, fine. So you can just switch off this. You can also change the colors if you want. Like let's say I want to create this blue. Let's go with blue. Okay. Maybe you can try to put this here if it's more aligned to your interest. Okay, whatever. You can choose these colors and you can bring it. Okay. You can Delete this black. Or you can also many things are like vectors. Okay, you can also use to change the colors. Like let's say, I would suggest if you're downloading any icons, try to use it in SVG format. Because the more if you're able to change the colors and resize it for your components, vector format would be better. Because vector is like scalable. You can increase the scale, you can change the colors, you can change the graphics. When you download as a png, it becomes hell a lot of problem. Okay, you can't change the colors. You will have to use just like that. Okay, and then now you can able to go and change the color of this button. Let's say, hey Jagdish, I want to keep white here. No, I want to create blue here because Facebook looks little blue, right? Then I'll change this to white. Probably I'll change this to white. See, it's a vector. I'm able to change it right? See, now I'm able to just play without with this button. And now it's happening. Okay, so now let me go and select all right, click. So you can create something like a component. So what happens when you create like a component? Like let's say when you duplicate this, you can use this control D for duplicating this. Okay, like let's say duplicate this and if you wanted to do any one change here. Like let's say what's happening? Okay, we'll go and check the layers. What happened? Okay, Is this created as a component? No, it has not created as a component. I'll tell you, if it is created as a component, it will show this four dots. Like let's say when you create like this and then when you create component. Look at this. In the layer section there will be a four dots to be created. That means this guy is a main guy. If you're changing something in this guy, all of your small guys will go and change so that you can able to scale your work little faster. Let me do it again. Like let's say this guy is a main guy. Okay, if you wanted to change like let's say a component here. Okay, no, it won't be changing anything here because you are changing the child. Look at this child will look like this. Okay, if you want to change this, see automatically this also responsively change, right? Because you're touching this main component like this, you can create small, small component and then you can save it as a library. Like let's say if you want to save this like a Library. Okay, you can, where is that option? You can, you can also create like a library and you can save it. See, many times you will have an option to save it like a library and you can use it again and reuse it again. Okay, I don't know how to really use this. Lot of options have changed after the time. Okay, you can literally save it like a library. Guys, if the, the meaning library is what? There is a collection of color palettes, there is a collection of what you call buttons. There is a collection of interactive icons. You can reuse it again and again as and when it is required so you don't have to recreate it again. Okay, let's say okay Jagdish, then what are the difference between these components and libraries? See, components is actually fixed if you want to change something. Like let's say if I'm changing something here, it's going to happen in my screens as well. See, it's happening here as well. Let's say if you want to build something Jagdish, I don't want to change, but I wanted to create something else like this, then I will change. Then what you do is you have to replicate it here. Okay, you have to remove this and then you have to resize it to whatever change you want and then you create a component. See now this is library one, this is library two. Like this you can build as much as libraries you want. You can also use this like let's say for each and every text you can able to create one new style. You can able to create one small, small styles for you so that internally also you can play with this. Why I'm telling you this options is this will be very useful when you're building high fidelity screens. It's not just dragging drop icons. You're just putting some kind of a basic things and everything. It is very important to understand these basic elements also. Okay, See that is why this kind of experimentation I would not recommend you at the start of your career. I would highly recommend you guys to use the elements which is already available. See, try to use these buttons and elements because these are all like well proved for design systems already. Like let's say, okay, you wanted to bring avatar here. I would highly recommend you to use the options which is available for you. Okay, like let's say it build option like this, let's say Jagdish, I wanted to use this kind of a button. I would suggest you to use this. The very reason why I'm telling you this is design systems. You have Lot of options to change. Like let's say if you want to show it as an icon, if you want to show it like a what you call focused state. If you want to show it like a outline, you can do anything. Guys, you do your experimentation later. But try to use the systems first. If you are a beginner, if you are like one year experience guy, try to experiment with this kind of proven libraries which is already there. If you open your eyes very carefully and try to see all the options from the left hand side to right hand side, you will find good amount of option to do the tweaking and all. Particularly when you are using design systems elements. It will all be available in the left hand side if you want to change any kind of an icon. Like let's say if I'm using this kind of buttons. Say if you want to use this screw. Let's say if you want to use this like let's say let's use this check boxes. Okay, maybe Jagdish, I needed this kind of a dialog box. Yeah, maybe you can try to take it out. Okay, look at this and like let's say maybe I'll have some small radio button here. Okay. So look how fast I'm trying to build. Provided my options are very clear. Provided my customer has given me a proper insight. Like let's say what to do. I'll keep a tab here. Maybe my screens can look like this. Okay. And resize it a little bit. Okay, I'll try to keep it here. I'm not worried about any color, style, size, everything because it's all design system proven. Okay. I'm just trying to replicate it. I'll size everything because it's all design system proven. Okay. I'm just trying to replicate it. What happened? Okay. Yeah. Hello. Yeah. Yeah, Sharath, go ahead. Yeah, yeah. So if you can you can right click and if it it will. What happened? Okay. Yeah. Hello. Yeah, take you to the main design system what they have prepared. So yeah correct each and everything. That's what I'm trying to say. First I let me put this drag and drop icons and every option is editable. See even you can edit it here. Like let's say if you want to change it here, you can also do it here while you're importing. Or as I suggested if you click this here lot of options will come right hand side. Okay. Editing the particular design. Is there any chance to go to their main design tokens that they have created a big sheet no code creating all these design components. Yeah, it Is a good question, but I'm not sure. I would suggest you can go to that primary file like let's say you took from the IBM site, right? Like let's say if you're downloading any Figma kit I would suggest you to read it here. It will be mostly available here. I don't know whether all the details will be there inside the software. Then it becomes little complex right? See I will suggest you to read this like let's say if you're reading about this 2x grid before going and downloading the Figma kit try to read it here including the dimensions, size. They will put it here very very properly. That is why it is very suggested to do it here once. If you understand this is going to be very useful for me design system then you just download that Figma kit. Okay, I don't know whether GitHub has it. GitHub has a very good open source materials you can also download from here. But it's mostly for development tools. I don't know whether design tools are there but Carbon and IBM and this particular Google Material system are super designerly system. Okay, like let's say if you're using this components it's very much useful when you use this kind of a. Buttons. Not buttons I would say ah, breadcrumbs. See yeah get this this is an excellent question. Like let's say all of these options are available inside for you. Like let's say if you wanted to use this default state, advanced state each of the options if you click it here it will be given some details why it has been given like this See some GitHub sites is also there. Sorry GitHub site is also there. You can just go to there and then you can download from there as well. This is a. This is some details will be available. Mostly your developers will needed this details. See you will not need this. Sharath, your developer might need this details. Hey, on first place why did you bring this option? You will have to go and justify this guy. Okay and then you can go and see. Okay, I want to create some icons here. No, I don't want. I want to show some divider here. No, you can tweak all this design system slowly. But I would say first today as an assignment I would give you try to take any common one design system for your solution and try to drag and drop and play with it. Don't go for any high end option because it will confuse you too much. Once if you're very comfortable in doing this kind of a small Small design system automatically you can create your own buttons layout as create small component. And then you can go for responsive design auto layout. These are like little advanced option. You can able to do it as a second phase. Okay. But try understanding why the development life cycle times are reduced because of this design system and reusable components. The moment when you understand this, first of all, let's build something which is already there. Because a lot of people are having solution. I can see they are not able to build the screens. Right? It's because you have not understood this design system. Try to use the open source as much as possible. Like let's say I think Shashank also asked this question. I'm not able to build fast. You get Shashank, you can use this because these are like well proven. The moment when you do it, see if some recruiter or somebody is asking, hey, why did you use this? You can also tell, hey, this is a like let's say what is this material design? This is a Google material design system. I try to use this particular option. This is actually a primary fab screen. And I try to use the enabled option. And I created this size of icon because this is well proven. And then I tried to tweak it, then I changed it. And you can tell why and why you have changed to this color. You can also use a lot of colors to change it. No problem. You can use black also. You can use pink also. You have to justify. You can say, see, I can understand design system is very important. I understood why it has been proven across all the globe. Like let's say if you take Google Material design system and Google Font and all, people will tell you how much people are using this across the world. So it is very prevalent in the design and development community. That's why I'm using this so that my development time gets reduced. You can also tell your recruiter like this, people may ask, hey, why are you using design systems which is already there? You can say the development time comes down. If you're doing any kind of a generative new design project, then it's good to build a new design system. A design system takes separate project. It's an effort three to six months it will take to design a development of a design system. But you can say to reduce the development life cycle, I've used many reusable components which is already proven. And then I just tweaked it for our brand system. The radius and sharp corners and the icon size. And some companies will follow outline icon. Some companies will Follow solid icons. So you have to just justify based on that. Okay, and if you wanted to change the typeface, if you want to change any option, you can just go and try to change this typeface to whatever extent you want. Or maybe you can try to add your own new style and you can do it. Or it is even more suggested that if you want to build the same system for practice purpose, I would say you keep this and you try to build it. Let's say how to build it? Like let's say I'll also try to go and do it like this. Okay, See for practicing purpose. Okay, like this, I want to use this color. There is an option called filler. Just go to this automatically. Come see like this, you want to bring this typeface. Okay, what is this typeface? Like let's say basic dialog title. Okay, what is this size which is available? So they are saying which size? 24 and 32. That's the size what they have. Okay, you can have to try to use the same size here. I've used my own typhus, right? Why it's not showing me. Okay, here you can type 24. What happened here? Basic dialog. Okay, you can. You can change your typeface here. Okay, let's say if you want 48, whatever you just try to replicate there. If they given 24, you try to 24 try to create as as similar as possible. This is like for your practice purpose. Okay. So don't experiment on your own. At least have some reference. You can take a screenshot from the online, you can try it out. Okay, that becomes a little practice for you to start using that. Then you can practice little layers. You can understand why this is all being built as a layer. Like let's say if you're using layers, you can able to drag and drop this. You can able to move here and there. It's same like Photoshop and PPT and other things. Guys, layer management is very simple. And you can use this typeface, you can use this stroke fillet. See, we'll go very detailed into separate session. But predominantly I wanted to tell if you wanted to build a high fidelity wireframes and prototypes, you have to just use the design system predominantly and start tweaking around it. Then you can go for prototyping and create some kind of a basic, what you call animations. We'll see some other day. Advanced interaction and other things. But for you guys, I would suggest try to use certain basic things again and again and bring your solutions to the life first. Don't Think much. Because if you're thinking much in order to bring your solution first, it will take a lot of time for you. Okay. Like let's say Ramraj or somebody has shared one solution, right? Where is that solution? Okay. Ram Raj has brought one. Okay. You have given a story about Ramraj. Fine. You try to build one user flow and a diagram for this. Okay. How the storage, shopping applications or maybe whatever you're building can be used. Okay. If you want to building a website, you can create a frame like website size, like let's say 1080 pixels or whatever. And then you can use the small, small elements. And then you can try building a small website screenshot by copying that. Try practicing that. Try using design systems only. Don't do any other options today, okay. Because if you start building with the system which is available then you'll be getting more comfortable. And you're what you call this feeling of you getting stuck will not be there once. If you're experimenting with then you can create your own buttons, sizes, interactions. You can play with certain advanced options. You interact, you can create. I mean if time permits I would also show you some animations. You can use this moving, move out effects. You can use this bouncy effect. You can create all this fancy stuff later. But for now try to understand why we are doing this in an organizational perspective that becomes more interesting for you. Okay? Fine. Guys, can you try to build some four to five screens for your project and submit to me before end of the day. Right? Build new. Don't show me your earlier projects. Okay. I understand this may be very new for many people. But just try to start slow. Okay? Then we can go little advanced also on some other day. Fine. Good. Shashank. Good. Ram Raj Sharath Giridhar. Okay. And also I would say after the session later today go and watch this seven part video which we talked for design system. It's an excellent video which we have did three to four months before. Okay. But you guys, I would suggest apart from this, please go to this materials website and bookmark this pages and read it. It. I'm telling you guys, this is going to be the ultimate syllabus for you guys. Okay? But if you're fresher looking for a job, it's okay. Stop with minimum knowledge. If you're a designer, please go and read it very detailed. Because your organization will not be aware of this. You bring that perspective. Okay? Thank you so much guys. Take care. All the best. And seven o' clock, this call will end. Any doubts is there you can reach out to me after that. Okay. See you tomorrow. And Saturday. Inner circle call is very important. Thank you. Thank you. I'll just give you attendance. Sorry. Shashank, good that you remembered. Sorry. This call will end, guys. Just mark your attendance in the feed section, okay? Yeah, I've just given you. Oh, my God. What happened? Oh.