Day 43- Design Systems for Designers- 100 Days 100 Skill Booster Sessions

Foreign guys, good morning. Welcome to the skill booster session, day 43. So we are going to learn a very interesting topic today which is called Design systems. Okay? So being a designer, it is very vital to increase your productivity and efficiency faster, right? So this design system will definitely help you out to understand how we can able to scale your work faster. Okay, so listen very carefully because if you understand. See there is something called system design. It is very different. Okay, so Design Systems is actually something else in your actual productivity. Like let's say if you are particularly a UI UX designer, if you are particularly a product designer, this will typically help you a lot in order to build your own systems inside your projects, inside your company or inside your design studios and all. Okay, so this is a practical way how people were able to increase their productivity and they were able to deliver multiple projects in a very short span of time. That's the whole objective of doing this. Design Systems, let me share my screen and then I'll explain you quickly. Okay, so you will have to, you will have to also understand one thing. That Design systems cannot be what you call. It can't be memorized. It can't be learned like a definition. Okay? Design system can be practiced over the time. Design systems can only be practiced and gotten clarity over the time when you do it along. Okay, so that's the main objective of doing this. Let me share the link. Just a second. Manikantan, can you share link also in the group? That would be a great choice. Thank you. Somebody else can do. Okay, fine, fine. Just a second. I'm just. Okay, yes, yes, yes. So please place the zoom link in the group. Money, that would be okay, no problem. I'll do it. Wait just a second. Let me do it, Let me do it. Give me a second. Okay, thank you. Man, you pasted it. Okay. Okay, yes, I pasted in that group as well. Thank you so much guys. Fine, we'll start. So let me share my screen. Okay, so first I just told you about what is the design systems. Okay, there is something called system design that is very different. What we did in the hackathon, what we did in the learning about the complex network system that is very different. Okay? What we are learning about Design Systems is something very different. It is like building a small kind of ability, building a small kind of a consistency or a layout or a palette or a library in order to scale up your work being a designer. That is why Design systems is very, very important for increasing your productivity per se. Okay, so let me share my screen. Okay, so we are in the day 43. The skill, what we are going to learn is design system. So why design system is used? It is for improving your consistency and scalability. So why Jagdish? This is very important. Let us see that in detail. First of all, this is a skill used for consistency and scalability. Okay? Please make a note of it. Because a lot of people, little bit, they get confused. Why is this design system being used? And sometimes people don't even care. Oh, what is design system? Do I have to really know this? Like people will be completely clueless. No. It is very, very vital. If you are becoming a professional designer, you need to understand. Without design systems you cannot even design one button. Maybe you can do a classroom project. But if you are working in a corporate or if you're working in a big design studios, very, very professional method to approach a design is by creating a design system. Even when you're creating a document, even when you're building an application or a website or anything, that doesn't matter. Consistency and scalability is very, very important. Okay? See, people like IBM, Google, they have really formed this. But let me tell you why it is very important. It can be used for any industry. Guys. It doesn't matter. Okay? So let us understand why the skill is very important. I told you. To maintain a consistency, a design system act as a single source of truth. That means let's say if you are working in a company A. Okay. Let's say that company A has a different branch. 1, 2, 3, 4, 5. If all of the designers are working at a different different location. Like let's say Chennai, Bangalore, Bombay. You are working in a different but your organization is same. Okay, let's say if all of you are building a website but for a different, different client. Okay. Let's say you are building a website for the company to upload this particular client's project. Okay? And the number two company who's working in Bangalore, they also wanted to upload the client work. But they wanted to use the same website. Okay? All of you are working on the same website only. But you're uploading a different, different work. Let's say if five people are working in that, what will happen? Five different websites will come out, right? Or maybe five different styles of website will come out. But that should not ideally happen. All the files should look like a same website. All the files should look exactly like the same website at the end to end. This is actually called creating design systems. If you have design system in place, everybody will work very seamlessly. Are you guys getting it. Everybody will create only same amount of button, same amount of text, same amount of shades, language, colors, typeface, spacing. That is the power of having system in place. Because you cannot go and tell. Hey, sure you are in Delhi. Okay fine. Surrender. Surrender. When you are doing this button, try to always create six as a radius. Okay? All call to action button should be six as a radius. And always put blue color as a color for call to action. That's our common Brad color. What surrender will do? Whether Surendra listens or not, he will keep on doing his thing, right? Maybe he'll keep 7 as a radius. Maybe he didn't like 6. He. He thinks 10 is good. Let me keep 10. Rounded radius is really good here. He'll keep 10 blue. Blue is not my color here I like orange. I'll put orange. Then AR will say on the other end, no, I don't like blue or orange. I like only white. See I. I mean I'll not put call to action button. I'll put just like that. Without a button I'll put y poor option. So everybody will have a different different choices and preference when they have to build a design. But it is the same company, right? Everything has to look same, right? So for that everybody has to follow a same discipline. For that reason people have invented something called design system. The guys who have actually invented this is actually IBM. IBM has first started. I don't know who invented but the widespread information of design system started with IBM. Okay. Then Google material design, then Atlassian design. Then a lot of people have started propagating this information Polaris design system. So these people have started building it slowly and then what happens? This becomes a universal language for each and every people out there in the market. That is why this is very, very important to ensure the cohesiveness of the product. And majorly it enables your rapid development. If I have five teams working at a five different location on the same project, I just have to create one small design system. Everybody can seamlessly follow without sacrificing the quality. Are you guys understanding this is the power of being a design system? Type out you if you understand what is design system. Now I explained you the basic concept. Type out you in the chat box. Excellent guys. Excellent. Excellent. Excellent. Good, Good, good, good, good, good. Fine. So now you understood it. Okay. It helps developers, designers, stakeholders with more efficiently with standardized components. Okay, so let's see that a design system is a collection of reusable components guided by a clear standard that can be combined to build products. Okay. This Is the explanation of this particular design system. Okay, I'll read it one more time. Design system is a collection of reusable components. That means a system is already built. You are not going to do anything. You are just following that instruction to combine and build a great product. Very simple for that, what you have to do being a designer. Being a designer, you will have to first align to the company's requirement. You're working in a corporate, if you're working in some some NGOs or if you're working in a design studio. You will have to first be very clear on what is your company's, what is your company's design system. Why it is very vital for you. Why it is very vital for you. Why all of your call to action buttons are gray in color, blue in color. You have to be first aware. You have to first get sensitized. Then what happens? Automatically you will be aligned to your design system. Okay? See, unless until you are working as a freelancer, even if you're working as a freelancer for certain brand design system will be given to you guys. You will have to follow that. There is no choice, which you can't escape it. Okay? You will have to, you will have to follow the systems in order to make it very consistent. Okay? So style guides, UI components, brand guidelines, design tokens. See, these words may look very similar, but all of the things are very different. Design system is a holistic perspective. UI components, style guides, brand guidelines, all this will come underneath it. Okay? Please understand it very carefully. I'll repeat this point again. Design system is a very widespread word. Okay? UI components, style guide, brand guidelines, it will all come in a very small sub component underneath it. Okay? Don't get confused between brand guidelines and design system. Okay? Brand guidelines is something very different. Design system works in a different way. I'll anyway show you live demo also so that you can able to understand it. Okay, so Google's material design and IBM's carbon design system streamline development and maintain consistency. I already told you, right? So this is a very good universally spread like these people are more, more prominent in terms of creating a design system and they have really mastered these things. Okay, so core components of a design system, something called design tokens. Okay? Design tokens is a very, very small unit of a design system, guys. Okay? The basic units of design such as colors, like let's say the color consistency, the spacing, let's say if you have 5 element as a spacing or maybe if you have 10 kerning as a spacing. So that is called consist. Mean you have that across all of your elements, all of your website, all of your mobile. Let's say if you're building around 500 screens of the mobile app, imagine if you are creating each and every screen with a different spacing. Will that look common? Do you think that will look common? It will not look common and people will get super confused. Okay? A typeface, you'll have to use the same typeface in order to understand. It has to be read and understood by all of the people at any point of the screen. Even in the 500 screens people are operating, they should still know that they're operating in this app only. Have you seen in mobile apps, certain mobile apps will only convey a certain meaning. It will not convey a different meaning. That is a successful implementation of a design system. If a homepage looks very different, if the login page looks very different, if the page inside the application looks very different, you itself will be confused. Am I operating the correct app or not? You get that confusion, right? That means design system is not followed properly. That is the major, major thing. Okay? Ui, components, buttons, input fields, models standardized across the product. Okay? Documentation. This is more and more important, guys. You will have to create a clear guidelines on how the components should be used and customized. Okay? See, in the brand guidelines, people will tell you how we can able to use certain colors. All these things, right? But in design system, the guidelines will be clearly given how components should be used and customized. Even you can change that. But to what degree it can be changed, it will be clearly propagated to you. It is not like randomly you are going to do it. That is not correct. Okay? That's not going to happen. You will be guided with a proper instruction steps and a standard operating procedure. Because this is a protocol, this is a standard. It's not like brand guidelines, which you will simply follow. You cannot change anything. Simple. That is a difference. Guides means you will just follow. It's already there. But design systems can be customized and worked upon many other things. Because what happens if you are scaling up this product? Like let's say if you are mass changing this entire product or mobile app or anything, what you will do at that time, you will have to really revisit that, right? Then all of your freelancers or the other designers who are working across the world or maybe across the India, everybody has to use the same consistent language, right? You cannot go and take a training session for them or meet in a call and tell them no. If you communicate to a design system, they will all understand? And they will implement it very seamlessly. This is the power of having the design system. Let me show you in real time. Example, guys, wait, listen. Okay, Amazon. Okay, I've opened Amazon website. Can you see some colors? Can you see some, what you call some kind of a search bar, some kind of a call to action buttons? Like let's say if I'm going and ordering this headset. Okay, look at this call to action button. Everything. Okay, this is an Amazon website example I'm giving you. Okay, let me open another Amazon music. Look, can you see some kind of a consistency here? The logo is being spaced exactly at the right place, at the right size. Okay, like let's say the call to action button, which is the search bar and everything. Can you see some kind of a typeface is very consistent. Can you see some kind of shapes which is very consistent. Let's say if I have to go for like let's say podcast or library or music. Okay, okay, maybe the podcast is not there. Just a second, I'm just taking this forward. Look at this. We. I'll show you another example. Just wait. Okay, let's say I'm going for my profile. Okay, so can you see a similarity now between the product, what they had as an Amazon and. And this one? Let me compare Apple to Apple. Okay, can you see the Amazon symbol directly happening here? It's already been put here, so people are using this. Amazon also will know it has been developed by Amazon even though the name and everything is same. But people would expect that kind of a consistency. Can you see this profile option? Like let's say if you go to Amazon also you'll see something like this. Just a second. Wait, I don't know. It is. It is actually available here, but right now they have not. They have not. They have actually changed a little bit. It's a login and security. Ideally the option has changed before. What, what used to be there is a profile option. Okay, right now they have changed. But what they've kept consistent between these elements is in fact you can see this typeface is very similar. The very first example, what I would say the typeface is very similar. Okay, and also you can see the rounded option inside the call to action button on the search bar. It is very similar. You can see here, like let's say if I have to go for this option, I have to go and purchase this one. Like let's say an example I'm giving you. You can see this radius is same. Okay, you can see this Amazon particular shopping website has this orange color, okay? The prime has this kind of a blue color. They have choose a design system for Amazon website which is for the shopping cart and other things. They have choose something for the prime applications. Okay? Do Amazon have anything else? Just wait. Let us see. Let us see. Prime. Okay, look at this. Huh? You can see here the joint prime. Like let's say, what do I show you? They have this option called Prime Video and join Prime. Can you see here this checkout page and this checkout page is very similar. Here is that which accounts See now I'll try to show you. Just wait. Can you see here this page and this page is very similar, okay? Only thing is this is Amazon.in and this is prime video. So people will get really safer when everything is put in a common way. Let's say if they're using Amazon prime or Amazon Music or Amazon Shopping website or let's say Amazon has lot of products and services, it doesn't matter. All they have to do is create the same kind of a call to action button. Same kind of a typeface, same kind of a checkout page, same kind of a login page. In order to make that even if people are building this website at a different different location at different, different place in the world, everybody will create the same consistent spacing, same call to action, same buttons. The reason being it has followed a proper design system. That is the whole objective of this. If they have not followed a proper design system, it will look very different. The checkout page will look very different. Here some picture will come here, text will be there. Here some button will be there. So people, people get really, really confused when the design systems are very, very different. That is why it is vital for organizations to create that kind of a brand guidelines and do it. Okay? I hope you must have got the clarity. So why is it important? I already told you. To improve the efficiency. What happens is if you're not following a system, you will be taking a lot of time for the product development. Say instead of one week, you will take one month to develop that product. And still you will be doing it. You will be repeating everything from the scratch instead of following the system properly. Okay? So teams can work together more seamlessly following the same guidelines. Because everybody is given the same instruction, right? It majorly reduces the error. That is the major important factor. I would highlight you in order to create a consistency, okay? It creates that kind of a consistency and reduces the error. So how much time it can be saved. Companies use design system report 30 to 40% reduction in design and development time and people who are using this. 79% of the large scale tech companies have implemented some form of a design system source and they have adopted it. Okay? Consistent use of the design system boost user experience by 25 percentage. It is a report by Smashing magazine. So see, the reason why I'm telling you the statistics is every industry is following it. If you wanted to go into an industry, you have to learn this about what is a design system, okay? And what are the common mistakes to avoid. In fact, if you take this over complicating the components, sometimes I can, I mean I can see people have used multiple components in their project itself, not knowing that because you guys don't know what is design system, right? If you're following a design system, there will be a consistency in your ui applications, in your, in your format, in your, in your application, in your website or anything what you're building. If people are not having design system, then we can easily sense that this has been built completely with any kind of a guide or any kind of a layout or a consistency. It's there, okay? So people will immediately sense that in your work, okay? And you can see lack of documentation. Without a proper documentation, system loses its effectiveness and ignoring the updates. See, very, very important thing I'll tell you whenever update comes like let's say version 1.0, let's say if your software is getting updated for the version 2.0, this is where the real problem comes. What you will do if you're building a big product, if you're making some kind of a change, you will have to go and communicate to each and every people in your industry or the designer who is working on your product. Like let's say IBM has 100 plus products. Amazon also has 20 plus products. Google also has like 50 plus products. Okay? All of the Google if you open, you will still understand it's a Google because the color, the consistency, the call to action, every button is literally the same, right? Based on that product they will have the internal colors, but the basic design system will not change. So what happens when you are designing something like a version 2? It is a hell of a lot of difficulty for implementing and communicating the change, right? That is where design systems are predominantly used. Once you have this design system in place, the communication for your designers becomes very easy. In one day people can able to adopt your change and they can able to make it okay. So think about working in a big organization and thinking about a big scale. You'll understand why these design systems are very Very, very, very important. Okay, I'll tell you what you can do. First of all, begin with basic style guides. Use some basic colors, options, typeface and try to use with the small, small elements, okay? And try to create a library of reusable components like button cards, navigation bars. Very, very simple, okay? And then document it. This is very important. A lot of people don't do it in your case studies in your project itself. Whereas I've seen you guys are putting some random buttons. But why don't you create a small documentation for this? Why your call to action buttons are all blue in color or why it is all available with this kind of a typeface? Why the radius is like this? What is the reason behind it? Can you create some consistency? If you are practicing with the small elements, only you can able to document it and move forward with the bigger elements, okay? So this ensures design components translate smoothly to code. Because you have to think that a developer is going to develop this product, okay? If you're not develop, if you're not creating a consistency, then the developer will also get confused. What we have to do, keep it flexible. It adapts a system for new projects and scalability. Okay, so now see some demo, right? Just a second, I'll show you an example what you can do. Just a second, guys. Okay, listen, I'm sharing my screen, okay? I'm just opening something like a Google design system, okay? This is one of the very good design system which many people use it. Guys, this is a very good what you call system, okay? Because Google has developed it and IBM also has this. Okay, I'll just show you. See, there are a lot of free source and materials available inside it for you to go and read it. Okay, first of all, let us go and understand this one. Okay? Look at this. So actually this was designed for creating a design systems in common. Okay? First you can go and read this website and understand why this is developed. Okay? First go and understand basic elements, what is mean by material, why it is very important for a designer and a developer, okay? I mean this is a free guide, but you will have to read it first of all to understand it, okay? And each of the things will be backed up with the proper definitions and explanations and all. It's an open source code, you can able to take it and many case studies are also been put here. And also you can download certain materials also ready made available. See, let's say, I'm taking one example of buttons. If you wanted to see any kind of a buttons like let's say what is the consistency I can able to bring for the buttons and call to action. You can see here they have already created some kind of a design system which is well proven for mobile apps for websites because when you're building a mobile app or website it should be responsive for each of the screen, right? See your brand's Amazon website should not look very different in the tab of the browser in laptop and if you're opening in the mobile app it should not be very different. It should have the same kind of a what you call a brand language a consistency and responsiveness towards that in order to make it happen. Already these people have invented a lot more design system and kept it inside. If you open something like this like let's say I'm opening a figma you can see here if you create a new file there is something called assets which is already there. Lot of people will actually try to put their design kit inside.