 So, good afternoon everyone. Thank you for coming. So, I'm Abhishek. I'll be talking about design systems basically today. So, let me start with my introduction. I'm basically into product design, UX, front end. I was a Google Summer of Code student with Fedora this summer. I worked on the community app and I go by the fast, the little wonder. So let me tell you about the basic plan of today's. We will start with what is design system and why we should have a design system. Then I'll start how the designers can start designing the design system and finally what the developers can how can developers should code the design system and use it. Okay, so we should start with what is the design system? So, the problem basically started in 1960s when the computers became cheap but the development process it was basically error-ridden and difficult to maintain. So, someone suggested why don't you use reusable components? So, you don't have to write the code again and again. So, we are facing a similar problem in design these days. So, what you see is whenever you have to create something you create it for individual problems. You create tailor-made solutions for individual problems. Like, you have to release something, you create a page for it. You have to release something else, you create a different page for it. So, design is still being used for individual problems. So, here we have a screenshot from the Get Fedora page for the Fedora apps, for the Fedora magazine. Everything looks different since they're already a part of a same ecosystem but still they look so different. So, this is the problem I'm trying to address. So, the solution I propose is design systems. So, but design systems ensure is that you can use reusable design components which can which ultimately means you can scale the design very easily. Just have a very formal definition of their design systems. So, it is a collection of reusable components guided by clear standards that can be assembled together to build any number of applications. So, but very important here is the reusable components and the clear standards. If you have like if you want a very real simple example of design system, look at Google Material Design. So, it is used in the web app in the mobile app everywhere. The design is very consistent and you know from the friend that this is the Google product. So, let me just go into the two main points, the components and the standards. Components basically means the UI components, the buttons, the forms, how the things will look and the standards. Standards is basically where do you to use these components, why to use this component, how to use this component. There are guidelines when where and how to use basically a documentation on using the components. So, I'll go into depth into the standards. In standards you need to define the naming convention. So, when you are writing the code but naming convention are using kebab case or camel case and what is the name of the variables in the CSS and the things like that and then we come to the file structure. So, in the file structure basically, so where do you put the images? Do you put in the static? So, everything should be consistent throughout the theme. Then there are things like colors, spacing, motion whites, I'll come back to them later. Then the main point I'm babbling about what is design system. The main point is why do you need a design system? So, as the team scale you see that people start working on the discrete part of the app. So, somebody designs his own solution and on the one designs his own solution. So, things starts getting fragmented. So, you can see that there is no consistency left. So, if you use the design system everything will be consistent and the experience will be same. So, the users will find it intuitive and predictive to use the interface. Plus, you can if you have a reusable library available, you can just prototype very fastly because you can just like put together Legos and you can use them to prototype very fastly. So, the main problem in design is you are trying to solve problems. So, you can focus on solving the problems instead of creating the buttons and the layouts again and again. So, you can prototype faster. This is a very important point that you get built-in accessibility with design systems. So, what I'm dealing with built-in accessibility is that in design system you have individual components. So, when you design the component you take care of accessibility. So, if you are designing a button you will make sure that the contrast is right. It can be read by the color blind people as well as the normal people. So, if you have the accessibility in all the individual components what you ultimately create will have higher accessibility. So, this is a very good benefit of a design system and there are some myths associated with when people start using design systems. One of them is loss of creativity. People will think that we have a system. We have to follow it as a designer ways my creativity. How can I experiment in most things? So, as a designer your main task is to solve problems. You don't need to design one thing again and again for every same project. So, if you have a reusable library available at your disposal you can simply just drag and drop those things and focus on solving the real problems. So, there's no loss of creativity. Actually, it saves your time. And another myth is people think that okay, I created a design system. Okay, this is done. Now, we are sorted. Now, let's move back to the list. But this is not the case. Design system needs to be evolved with time. Because once you ship the design system you will see that some of your assumptions might not be right. So, you need to see how the things are performing it right accordingly. So, many of the organizations like IBM, Google, they have a dedicated design system team. So, let's start with how as a designer you can start laying the foundation of a design system. So, who needs to be involved in designing a design system? Basically, first designers because they need to lay out the visual language and the UI components. They need to be the frontend devs who will write the code for those components. And they'll be content strategists who will write the UX copy for this. So, the button should say, should the button okay to continue or please click okay to continue. This will reflect the tone of your product. They should be product managers who will foresee all the operations if the design systems go aligned with what actually the consumers want. So, before designing the design system you should interview the customers who actually use. Design system will be used by the developers as well as the designers. So, you should interview them, ask them how do they do the things currently and create on the basis of it so that it fits into the workflow very seamlessly. If you create without their help and then you give it to them use it, they won't use and all their effort would go into waste. So, if in case you plan to open source the design system you must talk with open source community what challenges they face. Like if there are specific use cases they need to be handled you must talk to them and include them in design system. So, for this thing your design system must be very generalized so which can be extended by anyone. So, once you have interviewed the customer you have some data to make decisions you can start creating two things. An inventory of the visual attributes and the UI elements. So, I'll come to the visual attributes. So, first of all create a conduct an audit. So, this is the screenshot from the apps.fedoraproject.org website. So, there's a site called CSS stats. You can get the stats of a website page. So, here you can see almost 30 unique colors are used on a single page of a website. So, you can start squashing the similar colors and reduce the palette. Similarly, there are like lots of onsites is being used, points, pixels, EM's. So, you can have a consistent type scale whether to use EM and increase it accordingly. So, there's consistency all throughout the products. And similarly, there's a font family. Right now you see we are using like a nine font families. So, this can be easily reduced to like one or two. So, once you have done the audit and you have reduced the things, these are some of the things you need in your visual inventory. First of all there are things like colors. So, colors will be a brand color primary. Then they will use a background, some light colors for borders. There is success, error and warning colors. And one more thing while doing the color check, you must ensure that the contrast is right because you don't need to, you need the accessibility in your components. So, there's a tool called Colorable. You can check the accessibility in real time of the background as well as text. And then comes the typography. You must ensure that the fonts and the weights, font and font, their weight, you have to use bold italic. You have to ensure that everything aligns fine. So, last summer I was working with a biological firm. So, when I was creating the design system, they wanted to, they had lots of chemical formulas. So, while choosing the font family, I need to ensure that the all the chemical formulas can be represented well. So, I choose a font that represented all the numbers and the chemical formulas very accurately. So, you need to ensure that whatever font you choose, it fits the requirement. Then there is leading, then the type scale. Type scale is how your type scales with this, which is h1, h1, h2. And there's leading, which is the space between your sentences. And then comes the spacing and sizing. So, what is the space between two components? Google recommends, in the material design, it recommends a multiple of four. So, in the icon size you see, it is either 16, 32, 64. So, it is up to you. Most prominently uses four point and eight points. So, the spacing will be either 8, 16, 24, because it scales really well with the 1x, 1.5x and 2x displays. Then comes the images. So, if you are using images on the website, what file format will you use? Will you use PNG or JPEG? You have to decide on that. If you are using iconography, you need to decide whether you will use fill icons or will you use colored icons, what kind of illustrations you will use. So, you have to lay down all the clear standards. Then comes the motion sound part. I have not really explored this thing, but in the motion you need to define the interactions. So, throughout the website or the app, you need to ensure that all the transitions are same. So, if you are using transition with a transition time of 0.25 second, make sure that it is same everywhere, because if one transition takes one second and one other one take one minute, so it's not really a great experience. So, once you have laid down all the visual attributes, then comes the UI components. So, what people really recommend is using atomic design system. Atomic design system is once you create elements, combine the elements to create components, create combined components to create regions and final layouts. So, I'll give you an example. Elements, you can take like a button or icon or maybe a so suppose you have a button and a label. So, you combine them to create a search box. Search box is a component and you add couple of other things in the search box to create a region like a sidebar or a top navigation bar. And layout is the complete layout of the page. So, where the sidebar goes, it is does it go in the left, this is going to the right. So, you need to decide on that. While designing the individual components, this is a screenshot from a US website design system, you need to ensure that you are taking care of all the use case like they have default over active focus, disable how the all things look, you need to decide it predominantly. So, once you have, since the designers have done all the work, you have the components ready, you have the visual attributes ready, now it's time for coding. So, what the developers need is they need to ensure that the code is consistent all throughout. So, you need something like a code style guides. So, where does the curly base go? Does it go in the first line or the second line? So, you can use something like linting. So, it can automatically check for things. Then, this is a really important point that the design system and your main code, this should be exclusive of each other. So, you don't create components and things away from the irrespective of the situation it is being used. So, it is a generalized thing. So, you have a wrapper for design system and a wrapper for the main code. Design system is very generalized, it can be used anywhere. And there is one single source of truth. Like you have a getrapper where you put all the design system files and even can fetch it and use it in real time. There are no conflicts and when you update it, it gets updated the same way. So, these are some principles that your components need to follow. They should be modular. What I mean by modular is two components should not depend on each other. Composable, like two components can be combined to create one single component and generate it means that it can be extended to create a variety of things. Accessibility is another point. Like 15% of the world white people suffer from some kind of impairment. Maybe the something with the hands or the color blindness and stuff. So, you must ensure that whatever components you create are accessible. Accessibility will eventually mean a better experience for everyone. Your sites would get ranked higher in SEO plus you will no longer have no lawsuits. Another thing, the design system code should be very robust. The point is that it will allow people to use the design system very efficiently without the fear of having things broken. So, for a robust design system what you need is you need to test it very well. You can write JavaScript. You can do unit testing to check the individual JavaScript functions. You can do visual regression testing to really test if you changed one component, haven't you changed another component style? So, it will basically take the screenshot of both and compare before and after. There's a library called backstop.js for it and there's automated accessibility checking. So, you can once you have created all the components, you can just test the accessibility. There's a tool from PayPal called double A double T for that thing. So, once you have like created all the code but the challenges people really face is maintaining the documentation. So, you change the design of one thing you have to change in the documentation like this thing goes here and here. So, what the solution is you like maintain the design system as well as the documentation in the same repo. So, whenever you change the code you change the documentation as well. And handling changes. So, if in case you shipped something and it was broken and you can directly fall back so use versioning. So, the final key takeaways were what is the design system? Design system is made up of components and standards. Components are the UI components and standards basically are the what rules to use, what are the colors being used, what is the coding standard in the rules and for designers understand how the team will use it, what is the use case before starting then create a visual ventures decide on the colors, spacing and stuff then start creating the components. For developers it's really important that they lay down the style guides and the rules what is the coding syntax and stuff and develop them as self complaint components not dependable on each other everything is exclusive and take care of accessibility. So, all the slides are available at this URL or you can scan the QR. Any questions? So, are you asking why can we not use a simple library like Bootstrap? No, no, no, it has to be consistent all throughout all the products. So, you can change like the main color so if you see a Gmail app or the Google Play Store app both have have the same navigation but the images and the color are changed. So, you can change the basic things according to the brand of the product but the basic layout and all this stuff should remain same. So, that is the whole point that the person who is using is he will get the experience that okay this is the product of Red Hat because this thing works like this. Does that clear the doubt? Okay, Any more doubts? Okay, so your question is that is there a common library for the mobile development as well as the web development. So, as far as I know in the and if you are developing the Android application in the native way using the Java and stuff you have to write the different kind of code but in the web you have to write CSS. So, I don't think that is possible but if you are using something like React native and stuff you can use a common CSS library. So, if you are using React native or something like view native you can use that. If you are using web technologies to develop the mobile app but if you are writing the native code in Swift or Java I don't think that's possible. So, what people generally do is they write a simple library different library for web as well as different library for Android. But if you are using like many of the companies have shifted to React native and stuff like Airbnb and they have a common CSS library you just NPM it and it's ready to go. Yeah. No, no, no, this is okay. The question is is this something I'm creating or is it just general application? So, when I started working in Fedora in like April, so I saw that everything was very different. So, this is something is my proposal that I can work on and kind of like a general introduction to everyone. So, why should we use it and what exactly is it? So, do I know about the Fedora partner library? Yes, I got in touch with someone from the design team, I guess. So, she told me like the pattern library isn't really active these days or something. So, like the project started midway but it hasn't been completed or deployed it something like that. Okay. So, what are the differences between the pattern library and design system? Can I use the work of the pattern library and the design system? So, I don't really know what is the status of the pattern library project. But if you are talking about a design system and a pattern library pattern library but I believe is specific to a platform. So, it will be a either web or mobile. So, but design system lay out the dense how and where to use these components how things will look. Pattern library is basically the UI conference generally. You don't consider other things like the motion and all that stuff. You can consider pattern libraries as a subset of this thing of the design system. Can you use some of that within the... Yeah. Okay. So, the slides are available here if anyone's interested. I guess that's all no doubts are there. Okay. Thank you.