Design systems and Why its important for Designers and How to build

When it comes to scalability and design, when it comes to making more of the same concept and the design and the illustration and the sizes, what you mentioned in your website and your apps design system needs to be understood inevitably, particularly if you're working for a big organization or if your design studio is having lot of different countries branches and your customers are very wide. It is very, very important to understand this design system. Okay, so this podcast is going to make you understand what is design system and why it is important how you can able to build your own. And I'm going to be suggesting some of the world class materials where you can learn and take lot of elements from that to make your own design system. Okay, so take a lot of notes and if you have online in front of you like let's say Google or something, it would be much better for you to take action and see quickly how it's going to work in real time. Okay? With that we'll start this podcast. Welcome guys to this podcast designed for change. Thank you for staying tuning in with me and to really quote upon there is an overwhelming response from more than 11 countries. Okay, so our channel is really reaching far beyond and thousands of impressions is happening in every seven days. And also people are giving a lot of engagement rating. So that means that people are listening to this podcast, are staying till the end or at least hearing it 75% to 80% of the time. Thank you so much for this and please give me me a feedback as well as a rating if you find the information, what you're sharing is valuable. So this adds a lot of enthusiasm also for the creator and also as a, as a, as a design mentor, I can also able to address lot of feedbacks if you say like hey Jagdish, can you talk about this? Can you just give me some clarity about this? Can you make this very simple? So the beauty of this podcast is going to give you all the complex information in less than 10 to 15 minutes so that you get a correct information around it and you wanted to take action. Okay, this is not just a podcast where you just listen and go. It's also about making you take action on how we can able to improve your carrier 2x or 3x with the tangible output. Okay, so today what we're going to understand is design systems. So as I told you very clearly, design systems is very important when you're working for a larger organization or even a best design studios and a standard design studios or in house design studios, they are building design system. There are four reasons why they build it, the very first reason why they build it is consistent. See, design system needs to look very consistent across many devices, right? Like let's say if you're creating a user experience for your website, for your mobile app, for your brand stores, so all the things should have the same element. So how do you make it ensure that consistency is by building systems? Okay, let's understand the second element, why it needs to be consistent. See, when you're able to efficiently build your system, like let's say if you're streamlining your design and development process and then you're allowing your team to work effectively and you don't have to really duplicate that effort. That is why efficiency comes in picture. Okay, so the reason why we are building this is let's say if 10 people are working in the same design, they don't have to really create their own designs again and again. They can able to scale up that and they can able to find more patterns and they can able to duplicate it much easier. Okay. Similarly, if you're building a browser, if you're building a poster, if you're building a social media post, if you're building a different application for even a watch or a tablet, which is other unconventional devices, it would be much easier and seamless for it. And also think about the user who is going to use it. So let's say if your brand is xyz, okay, so he has to feel that XYZ when he's using a tablet application also, right? So it needs to be that efficient in terms of your team effort in terms of how the people is going to view that at the end. Okay, this is the second reason and the third important reason is scalability. So why we are doing all this consistent and efficient element is to really scale upon like let's say if you're building a system which is having thousands and millions of users, how do you able to replicate that software? How do you able to replicate the designs in a more extensive way? Okay, so your same orange shade or the color, whatever you're going to put here as a gradient, it should look consistently across all your devices also. So you need to build that system and you need to provide that kind of a scalability how your developer is able to understand and how he's able to replicate across all the system. See, design system facilitates scalability by providing a very foundational adaptation to growth and evolution of a brand. Particularly if you're building a brand at a starting stage, this is very important to do a lot of organization at the Starting phase. Do not do that. They find it very difficult to do it after a point of time where it has reached far beyond. So this is a very important element to take care. And the fourth is collaboration. This is the most most important guys, because when you're able to collaborate with cross functional teams, when you're able to collaborate the different developers and product managers for putting your design across, like let's say if your design studio is there in another country like Canada or UK or Germany. So what happens is you will have to take a lot of efforts to communic your design language. Right? So when you build a design system, the job is very, very easy. That is why this is mostly followed by big design studios where they have the systems in place, they can able to collaborate it. Okay, so having understood this four important element, why design system is important, now we'll have to understand the creation part of it. Okay, the first thing about the creation is how to build components. See, there are four different elements in making a components for a design system. You can create style guides. This pretty much defines the visual identity of a brand. Like the schemes, the color palettes, the type pH, the kind of visual illustrations, videos or set of brand guidelines, Whatever you have created, you need to set that style guide. If you are not able to understand what is style guide, go and ask your organization what is the style guide, what they follow. Definitely each and every industry will have their own style guide. By seeing that, you can understand what is mean by consistency in colors and what is mean by consistency in typeface and illustrations and images and why it is particularly set for a particular bra that needs to remain as a guide. Like let's say if you're making a very big poster, okay. So whenever you're breaking that logo or whenever you're breaking that illustration, whenever you're enlarging the colors, you tend to do it very differently, right? So style guide helps you scale it up in a more consistent way. Let's say if your typeface heading and the subheading needs to be 2x smaller. Okay? So whenever you're building thousand, what do you call it? Like let's say 1000 mm big poster or maybe a 10 meter big poster. The same kind of consistency you will be able to see. Because you cannot take a visual judgment when it comes to big posters or small posters or even making a website design, right? So there needs to be a consistency, there needs to be a style guide and a measurement alignment for you then and only people who are viewing from a very distance also can view okay, this is a Pepsi brand. Okay, this is a Coca Cola logo. It should not look disproportionate. It should not look very what you call theta meta here and there, right? So that is why style guides are damn important. The second thing is pattern library. When you are able to use certain buttons or forms or cards which is having a consistent elements which is already fixed, you can able to use that pattern library across all your websites brand elements. And you know what guys? Many website, many brand have already built the pattern library. Using the pattern library, you can able to download very easily and use it across your design elements, whatever you're using. The third important element is interaction guidelines. See how the users should interact with your product. Whether it's an animation, whether it's a transaction, when it's a transition, it's a smooth animation and a flow. Whether it's a small micro interaction. So that interaction guideline needs to be there. Like let's say if people are making payment using your Razorpay app in your particular application. Like let's say if they swipe for the payment, it should be the swipe payment for all the devices. Like let's say if they're using in mobile, if they're using in tablet, if they're using in website pages, right? So it should be very consistent then and only that insurance will happen. What will happen is lot of times people when they make payment. Even I've experienced in my personal experience, like when I'm making a payment using the mobile app, I feel sometimes is it really the correct website where I'm making the payment? Because when it comes to money transaction, people take one or two times an attention, right? And think about it, okay? Is it really a website or is it a fake website? Because the interface looks very different because that particular brand has not maintained that consistency, they have made a poor interface so that the consistency is largely missing. What happens is I will close that application in my mobile. I'll use the web application because web application looks comfortable for me. Many times in many payment transaction, I'll rather go and do that and then be making sure, yes, my payment has gone into the right page, right product, right system. So that my services are coming in place, right? So this is very, very important guys. See how the user experience really changes when you really misalign with your interaction guidelines. That is why it's very important to set that guidelines. And finally the important part is document whatever we talked about so far, the best design principles practices definitely needs to be documented with the proper library named and Section named properly. If you're not able to maintain, you cannot maintain a design system at all. Let me give you a case study, guys. Airbnb, have you seen their design language? Have you seen how their unified experience is working across all the platforms? You will find their application website. Everything is unison. You can right now open Google and check out. It takes hardly a minute. You can pause this podcast and check it out. You will much better understand what is mean by design system and why it is very important. Like let's say if people are working in Airbnb in India, if people are working in Airbnb in usa, both will be able to design the same element, same application, same website. It will smoothly flow across your entirety of your brand, right? So that is the power of having system. Because people in different, different countries, in different different regions, they have their own styles developed, right? Oh, let me design Airbnb in a orange way. Let me design Airbnb in a low way. Let me design Airbnb in a white color. So that shouldn't be the case. Okay, so the next important element of the case study, what I would say is material design by Google. So you can take this comprehensive design system, guys, by Google that has been adopted by numerous apps and websites. It shows how you can able to scale. I'm going to be suggesting some two important materials where you can wonderfully find proven templates and design systems which you can directly drag and drop and copy paste and use it, guys. Okay, so wait till the end of this podcast. I'll be telling you this. So the other important element of using the design system is collaboration. I told you, team collaboration. So how the shared languages and set of design tools and elements can be comp. Can be communicated to developers, how they can able to communicate to different testing people or different programmers developers. And how your cross functional team can able to refine that. Like let's say if your merchandise store owner is saying this kind of posters is not able to hang in our wall. So you have to align that accordingly. You have to change your brand guidelines and elements and style guides to make it happen in real time. So this is why cross functional collaboration is very important. And whenever you're making version two, whenever you're making version three, whenever you're having some updates, this design systems, if you document it properly, definitely you will be able to make a version 3 or a version 4 very easily. Establishing this version control ensures everyone is working in a proper direction and everybody is having no discrepancies or crosses. This is the power and importance of using design system. Okay, so let me tell you two important materials guys. You can able to check out that you can check out IBM's carbon design system. This is a beautiful system where you can find all the different, different product offerings and you can able to find. So if you go to that particular website and I'll be pasting you that link also in this podcast, okay, do not worry. So you can find something called external usage, okay? So there will be IBM internal design users that you don't have to touch because that will be there for their own purposes. And you can find external usage where you can directly download some Figma libraries and templates and design systems and color palettes and typeface so that you can use it directly to them. You can even use certain effects like corrosal. You can. You can use some animations and micro interactions where it is very, very usable, okay? And also you can use Shopify Polaris so you can visit this particular website. It's a very good case study where you can find everything is beautifully aligned to a design system and then whatever the growing needs is there, this particular website is able to align to that. That is where the scalability becomes much easier. Let's say if your customer is keep on updating. If you are having an e commerce website every day, the product and offering changes, right? So if your system, your design system is not built properly using a scalable system or a style guides, it will be much difficult to comprehend for further needs, right? If it's a dynamic website. So these are all some of the best understandings of it. And you can go to Atlassian Design System Journey. You can find that design system was very, very beautiful. It's well maintained that can improve the development speed and consistency across multiple products and offerings. You can find Salesforce Lighting Design System. You can make a note of it, guys, okay, you can able to Google searches, you will be able to get it. Salesforce Lighting Design System is widely recogn. Actually why it is widely recognized is for its role in enhancing the UX and maintaining that consistency in all of their products and offerings. Okay? So this is why it is very important and let me now tell you the resources and materials, guys, okay, you can read a book called Design Systems by Allah Kolmatova. Okay, you can read about it. You can read another book called Atomic Design by Brad Frost. And majorly you can use some of the online resources called Material Design Guidelines. Okay? This is one of the best beautiful available website, guys, okay, I'm going to be pasting that link in the website you can check out immediately and you can find badges, you can find buttons, you can find cards, you can find carousel, all these check boxes and each and every element has been beautifully templated here. The beauty about this particular resources, you can able to copy paste it directly in your Figma files and you can able to download it and you can able to use it as your own thing. Only thing is you'll have to credit it properly with the resources and materials. Whatever is there, if something is payable, you have to pay it. Okay, See a lot of materials in this particular material design website directly. Design kit for Figma is also available. You can click that, you can download that. The point is you can drag and drop it to your Figma screens. You don't have to worry about anything even you can go to the Figma website and find some resources and design systems where there are a lot of good brands like Google and this other brands where you can find find their design systems already built in. You can able to copy paste it and use it for your own consistent design and your own building of your own particular products or offerings so that you can even modify that and have your own library. So this is the power of using different, different resources. There is another resource which I'll suggest you call IBM Carbon Design System. Beautiful website guys. You can go to that and you can find different, different Figma files which is design kits is available, development kits is available and you can find some of the color styles, some of the typeface, some of the cool plugins which they have mentioned and you can take something for external use. Okay, you don't have to take anything for your internal use. You can sign into your Figma files and you can add all your Carbon design systems, design elements and widgets and files. You can directly use that particular thing. So there will be a lot of Hoover styles, there'll be a lot of color styles, there will be a lot of text styles, icons. So you have to now understand guys, why it is important why people are building this system, okay? Because when you build a system it definitely helps you when you're scaling up your business or your product or your service, right? So you need to think like an entrepreneur. You need to think like how you're working for a business organization. You should not think about doing a freelancing object if you're, if you're doing freelancing. Also you should help your client with understanding like hey client, see right now you don't have a system, why don't you build it? I'll build a style guide for you, I'll build a pattern for you, I'll build a design element for you, I'll build a kit for you so that you can able to give it for other people. When you are building your brand in an extensive way, the client will be more happy to pay you in premium if you're able to suggest this kind of an element. And you need to justify and show him also why building design system is very important. Because when it comes to scalability, people will feel much difficult and the inconsistency will come. What will happen is your brand value will drop down immediately. That is why this kind of a system is very, very important. Okay, so by incorporating this examples in the case studies, whatever I told you, you can really make a lo a lot of difference in your systems. Okay, so imagine guys, whenever you are building a project, please have in your mind you need to build a system around it. Maintaining the consistency, efficiency, scalability and collaboration. And how you can build style guides, how you can build a library, how we can make an interaction guidelines and how you can perfectly document it in your case study and show if you're able to do it. Definitely your project is untouchable, guys. People will love to see your product and people will love to work with you because you are very systematic. Remember one thing guys, systems work. People fail. It's always my mentor says, because when you build a system and why systems are powerful is it can able to manage lots and lots of people also. But when you are individually working, you can't even manage your teammate because he'll be in a different alignment and you will be in a different alignment. Right? So be careful about it and implement all these things, guys. Okay? So thank you so much for listening to this podcast. If you find this useful, you can give me a best star rating. And if you need any kind of an information like this, you can hit that. What do you think about this podcast? I'll be recording more content and if you need my mentorship support, you can write to the team and I'll be happy to mentor you. Okay? So thank you so much guys. Take care. All the best. Bye bye. Take care.