Ep 293| Design systems for a Designers- how to start small and scale big?

Foreign. Have you seen Amazon website? Have you seen Amazon prime website? Have you seen Amazon Music? Have you seen Amazon podcast? It all looks very similar with respect to the ui, with respect to the call to action, with respect to all the search bar, login screen, checkout page, everything. How it is done, it is done only because of design system. If your company has a lot of website and lot of products and lot of different, different, let's say mobile applications or anything, if you don't have the design system, everything will look very, very different. That is the reason why understanding design system is very, very vital for a designer. Either your company follows the design system or not. This podcast is going to help you knowing the importance of the design system and how we can able to build from the sample and start and how we can use certain free resources available in order to master that. Okay, so take a lot of notes. Let' to start with that first. Let me tell you. Design system is actually a small elements which has been combined together to build a consistent pattern across your design elements. Okay? So a lot of people get confused between the system design and design system. Okay, so system design is very complex network and it connecting a different, different areas. And like let's say there is an interconnection education. There is an interconnection between policy, there is an interconnection between government, there is interconnection between like let's say students, okay, Student education, policy, government, all these things are a very different system. But when you combine this, this becomes system design. That is very different. Okay, but what we are going to see in this particular thing is called design system. That means having the system internally among your designs. Like let's say this is for your design teams specifically. So why these design systems are being built, it is to maintain a consistency and how you can able to scale your products across your different different verticals. Maybe you have a different different vertical or horizontal or it is applicable for any industry is what you're having, guys. Okay, so the main important thing for using this design element is a single source of truth which makes it consistent across all of your products. And when you're building efficient system, it helps you in rapid scalability. Remember this word Scalability. Consistency. And without any kind of a compromise in your quality across your products. Okay, so mainly it collaborates with the designers, developers and your stakeholders in order to make them work seamlessly across standardized components. Because if you're creating a different kind of a button or a UI element, or any kind of a color schemes or typeface, it should Be used by all of the people across different different field. Right? If ideally you are not using it, what happens then? People will make a different screen, different website, different products, different colors and it will not look like same. Have you seen Google's website? Have you seen Google's products? Google has close to 50 plus products. All of their products look seamlessly same because they have built it with a proper design system. Yeah, there is a free material called Google Design System. Don't worry, I'll be pasting this link in the podcast as well as a resources you can able to open and download it. Because ideally speaking when you are a beginner it's good to start with the free resources available in the Google Material Design System and IBM Carbon Design System, Atlas and Design System. These are all like well proven design systems available. Okay, so the definition to put forth a design system is a collection of reusable components guided with a clear standards that can be used and combined to build your products. Very, very simple guys. Okay, so you can take this example of this Amazon whatever I told you that would be a very typical way to do. Okay, so don't get confused between design tokens, UI elements, style guides and brand guidelines. These are all a sub element of the whole design system. Let me repeat it. These are all the sub elements of a big design system. Design system is something very bigger. You need to understand this. I hope you would have got a clarity in what I said now. Okay, like let's say design tokens could be a basic unit of design. Like let's say color spacing, typeface and other things. Comp UI components could be buttons or input field or models or standardized across different different products. But ultimately if you're creating a clear structure, step, guideline or a document that becomes a design system. Okay, so the last part is very important. Whatever I told you. Mainly designers focus on user centric design. They solve problems and other things. Right? Instead of them working on a different different UI elements every single time and wasting their time. Design system is being built to help them build that consistency and majorly it helps them to collaborate with many other designers. Because your team is working in different parts of the world, right? How we can able to seamlessly collaborate communicating the same thing. Because what happens when your communication goes little different? The error happens. So mainly design system is helping you to avoid errors and improve your productivity. Like anything. Let me tell you guys, your time is saved. Crazy companies who are implementing this design system have improved their time to 30 to 40% reduction in design and development time. It's a source by InVision and Very, very surprising. 79% of the large scale tech companies have implemented some form of a design system which is controlled by UX Design Collective. Very, very important, right? See, 80% of the industry is already using it. If your company is not using it, then you are in the wrong place. Ideally you will have to switch the company or you will have to ask the company that can we build a design system? Okay, both are possible. Next, consistent use of the design system increases your user satisfaction by up to 25%. Smashing magazine has told that. So this is the statistics available. Guys, let me tell you, lot of people make a big mistake. They over complicate certain components and they put lot of design system. No, if you are building a design, the ultimate purpose is to bring the simplicity and clarity. Second, a lot of people follow design system. They're seeing but they don't do a proper documentation. That's a big mistake. And when you're updating a Product from version 1 to version 2, design system and documentation is the most most important thing. If you don't have it, you will not be able to update your products from version one to version two. This is a big, big, big issue. Guys. I'll tell you some simple hacks, guys. Okay, simple steps, how we can able to start small. But if you needed a very live demo of it where I also opened the figma and I've tried design system and then I try to use the reusable design system. You can go to my YouTube channel link is given below. You can able to go and watch the one hour session. Okay. It's been given as a two part video, you can able to watch that. But ideally when you're listening in this podcast, I would say start small. Try to understand basic style guides first. What are the color schemes? What are the typeface? Okay. And use the standard components which is available in the Google Material design system and IBM. Try to create a library of this reusable UI components like buttons, basic cards or navigation bars or anything. Once you do it, then you can able to document that clearly. Include this in your documentation and use these guidelines for each of the component to ensure the consistency is happening. Then collaborate with your other designers, developers and make sure it can be done in coding and developed as a proper website. Okay. And make sure it is always flexible. See, this is how you start. Make sure it is flexible and do it okay. So start small, standardize your components, use the reusable components and document it properly for your projects. And then try to Collaborate with other designers and developers and make it flexible. Let's say if you want to do some kind of a change in the button, let's say if you want to use a call to action button with a different radius, the moment when you click that one element automatically your components get populated inside your figma and all the thing changes inside it. See, that's how you create a small change and it replicates inside your entire system where you are in 2,000 places. You would have used this call to action button. You don't have to go and change manually places. That is the power of using the design systems inside your design teams. Okay, so we're coming to the end of the podcast. I'll give you four different resources, guys. The first is Atlassian Design System. The second is Google Material Design System. Third is IBM Carbon Design System. Fourth is Polaris Design System. So these are Airbnb Design System. The fifth one is Airbnb Design System. So you can use this kind of things to start using it, guys. Okay, and there are like Figma libraries available inside the Figma tool itself. You can ideally use that. Okay, you can use a tool called Zero Height. This is for documenting design system for creating live style guides and all. But ideally I would say whatever your company is doing, follow that guys. That would be a ideal choice to do. Even though I may suggest you something. You can able to try your companies first and then try the other one. Okay. For front end development, documentation development, you can use something called Storybook. Tom is a very good tool. It's a AI driven documentation tool for maintaining design system and guides. But ideally these are like very expensive. Follow your company's guidelines. Adobe XD Design System. It's a built in tool for creating and maintaining design system across your company. Okay, so now I'll give you a small activity, guys. Take one project of yours. Choose any three design elements which you want to change. Like let's say buttons, typeface or something like a paragraph text. Go to Google Material Design. I would say that's the best one. And try to take three elements which you are very comfortable with that and try to put that into a library of your Figma screen and try to build a consistency across your screen. Like let's say if you're. If your project has 20 screens, try to populate into 20 screens and try to play around with that. Try using a small three elements guys, like let's say typeface, colors or text and try to play around and get comfortable and then document the changes the moment when you're doing this small activity guys, you'll be able to be comfortable to use the design system easily. Then you can also try with a little bigger system. Then you can go to this website and try to use some animations interactions instead of buttons. You can also try with some graphics. There are a lot of concepts and material system which means built into this IBM design system and Google Media design where you can study and even experiment some of the complex system over the time. Once if you're able to master it, then you can create your own design system. In the future, don't think prematurely to create a design system at a very early stage. You will get super confused. You will not understand the real intention of creating this. Okay, I hope this podcast would have given you a clarity on why design system is important and how to create it and how we can start small and how we can scale big later. Okay, thank you so much guys. Take care. All the best and all the materials and resources available inside the podcast description. And if you wanted to come to my live webinar coming 11 o', clock, you can able to click that free gift and come for the live upcoming webinar because we will be happily helping you to guide you. Okay, so take care guys. All the best. And if you find this podcast useful, give me a best at. See you. Sam.