Design Systems and their sustainability power

Hello, hello and welcome everyone to this episode of the Green the Web Podcast. It's a podcast about ecologically and socially sustainable design. I'm your host, Sandy Dähnert, a UX UI designer myself.

And in today's episode I want to talk about design systems and their social and ecological potential for our digital products. We can easily confuse users with the amount of button colors we're using, the different teaser formats, varying page layouts plus endless variations of component and elements equals endless code, CSS and JavaScript. It reduces the lifespan of design files of code of whole digital products and we probably all have had some experience with a digital product cannot be maintained anymore because it's just too complex and has too much development dept and we all have been there of okay, we have to start from scratch because everything got too complicated. So design systems reduce design and development dept support reusing and recycling elements, promote collaboration, especially between designers and developers and we all know how important that is and it helps to create a scalable and flexible library and that's what we need. And with design systems, usually if done well, you need to create less variations in your designs. Developers need to code less variations. Components and patterns can be reused. Updating needs to be done only in one place, whether it's in your design file or on the coded digital product code and CSS is simplified and minimized. There's so many cool goodies in there that actually reduces the energy consumption and carbon emissions of our whole digital product that you could never, ever analyze and measure with the carbon emission tools that are out there for websites. But we still need to have an eye on that, especially if it's huge applications, huge online shops, huge websites. It doesn't automatically come with accessibility, ethical design or other social topics, but it can for sure support it Once implemented. And with design systems, you don't have to figure out any more of which color combinations you can use Color contrast, text sizes, video subtitles, animation flows. All of those things are already in the library, in the design system library to take and just use in whatever new page or feature or component you're designing. So design systems have various definitions and maybe a very common one is a design system defines visual standards and guidelines, but it goes far beyond that, both in terms of content and practicality. For example, design systems include style guides, digital components and more complex templates while linking design to code and code to design. So it's definitely for both areas, the design area as well as the development area and the design system brings branding colors, tonality, typography, animations, data visualizations and many, many other things under one hat. And in this way contradictions in the design can be avoided. To do this it must be available in some way or form in one single source of truth, and that can be in an online platform, a written guideline in the intranet somewhere in some way or form, but accessible for everyone, for all designers, for all business owners and product owners, for all developers. Everyone can have a look at the design system and get from that what they need. And a design system can start with a very simple setup with very simple basic elements for listing the fonts you're using the colors, icons, illustrations, buttons, headers, footers, design tokens and common language and design and development different components that you're using throughout your digital products. It can start very simple and grow bigger and bigger with time and it can include a full style guide, a full description of accessibility, a full description of ethical design that you're using in your designs and digital product. It can introduce ecological aspects and other social aspects as well. All of that can be in there. It's a written guideline. In the end, it's a system that you're using throughout your design as well as development. And there is a couple of design systems that I linked down below That's for example, Adobe's Design system, the Workbench design system for the Gusto platform, Non-health Health Design System, the Deutsche Bahn Design system, Audie, as well as the UK government design system just for you to have a look at different ones and how they are, they are very intense and big design systems, but so you get an idea of how can a design system be published? What's included, how they do it differently. So there is not just a one stop solution. There is different forms and possibilities in design systems and of course everything or most what we see is more design driven. But some of them also have included coding examples and coding templates and stuff like that. So it includes everything that you feel like is beneficial for your design and development processes and in your UX and UI design. What I would always question myself is what do you want to achieve with the variation you are currently doing? Whether that's a button variation, a new color variation, a new component, what support and visual appearance are you achieving with that? What is the purpose of the variation to not just create something new that might be the fifth or 10th teaser variation just because you can Or you always wanted to have this different teaser layout, but really what does it support? What visual appearance? What's the purpose of it? Are there any variations that are frustrating or even misleading? That is awesome to see. In design systems we suddenly see where there are frustration points, where there's harmful components, harmful communication, stuff like that. Can you kick any variations? Think quality above quantity. Can you combine component variations into one? For example, use the same shadows colors button states, newsletter teasers header styles. Once you realize that you have 20 different primary button states, then you know well you need a design system because every designer in your team or even just yourself thought, Well, this one works best on this page. But then you suddenly realize you have four different shades of blue and ten different shades of red and other different shades of something for your primary buttons. And everyone is frustrated in the design team as well as as users. Combine component variations and then check for accessibility in color and typography and sizes and animations and hierarchy and audio and video and language. Also check for ethical, diverse and mentally healthy communication. Call to actions, imagery icons. That's the beauty in a design system. If you do it once and if you do it once really well, then it's all adjustable and it's all there for everyone else in the whole design team, in the whole company, in the development team, everyone is on board and if there is any changes coming up, you can do them in one design file and in one coding file. So what are the steps for A design system is very much depending on what you're working with, what's the digital product and what's the universe. This digital product sits in the ecosystem around it. If you're having just like one small website, you can easily start with just having some space in your design files for colors and typography and icons and illustrations and buttons and components of any kind and just start with collecting the things you're using over and over again in your website or online shop or application design and just bringing it up to one certain space in your design file. That's the first step that you can do, especially if you're having a smaller page. And once you do that, you quickly realize how many colors you're using, how many different text sizes you're using, how many different button states you're using, what is missing maybe as well. And that often we are trying to reinvent the wheel with every single page we're designing of a website and it's absolutely not needed and not necessary. And once we have those components ready, we can actually set them as reusable components in our design software. It's so much easier to change things when the client or your teammates in a company or a business owners, product owners say, Hey, let's switch up this color or let's change this one component, have a different text on it. But this component is placed on five different pages. So in your design file, usually you just go into every single page and change the text of this component. That's just way too much effort and energy for yourself and it makes your design work a lot longer and nerve wracking. So just have them as reusable components and then easily things can be changed. The same goes for bigger companies. Of course that is a longer process. Usually if you have different kinds of digital products. So it might be a corporation where there's a website, there's an online shop, there's a mobile application, there's an intranet and there's like different digital products included in a brand universe. Then of course collecting all of the variations, collecting all of the components can be very can be a very long process. Let's say it's simple and I've done that before and I've participated in stuff like this before. And yes, you need to have patience, especially if you have different kinds of components such as websites and mobile applications. Then it's different technologies. And also in iOS or Android mobile applications you have different limitations and requirements as well as looks in those components and realizing how different they can be and what different design styles have been used can be very complicated and a very long process to actually combine into the same style and variations, especially if there's different design teams involved, different departments and different people who are in love with their single design and want to have their. Opinion hurt. But it's all very, very possible. It just might take a little bit longer. And yes, a design system process can take up to a year with really bringing it into the design teams as well as the development. It's very much depending on the technologies that are used and it might be step by step really trying to first bring in a design system for the colors, a design system for typography to have the same text sizes and fonts in every single digital product, to have the same colors and color tokens and language you're using in all of the digital products. That is a first step and then you can go deeper and deeper into it because of course it's then also a lot easier to maintain. It's more scalable, it's flexible and also for the users it's a great tool for branding and seeing that everything actually belongs together and it doesn't seem like different brands are behind the mobile application, the online shop and a website, but it's all actually one. So that's what we need design systems for. And as I said, design systems reduce all kinds of code as well as CSS as well as JavaScript as well as maintaining and updating needs to be done in only one single place. And of course ecological and social sustainability should not be an afterthought in design systems. So yes, a design system in itself reduces energy and carbon emissions in the design and development work as well as in maintaining the whole thing as well as in code and design and code dept, but also bringing in guidelines for ecological sustainability in how to work with images, how to work with illustrations, with videos, with storage, with fonts, with all of those things are absolutely included in there as well as social, ethical, accessible standards that need to be introduced in the very beginning of design systems. It's easy to do when a design system gets set up and it does not have to be an afterthought. I know many, many people only think about it at the very end, but when we think about all of those things in the very beginning of creating a design system, of choosing the right colors, of choosing the right contrast, of choosing the right fonts, the right text sizes, the right component structures, hierarchies, animations and all of those things, especially also in language and communication and culture actions. If we all introduce it into the design system, then we have a pretty good set up for everything else we're doing later on when daily life gets more stressful, when we don't have time to see what color contrast is now the best to choose, but we have it all set up ready to go. It makes our lives so much easier as designers, as developers, as working collaboratively together. It just has so, so, so, so many advantages that I can highly recommend doing everyone, even if it's just your own personal website that you are having, but you have some space for your colors, for your fonts, checking accessibility, checking the ethical parts of it, checking the ecological parts of it, and then setting all of this up so you're ready to go for the future and to grow, to scale, to be flexible in your design system and not always wondering what color, what font, what imagery, what guidelines you should use or not use. All right. That was it. What I wanted to mention for design systems, it's a very small short introduction, but it was important for me to mention, as I said, there's all kinds of links down below in the description for you to check out. There's even two Figma design system plugins that I linked. One is the prop star Figma plugin. One is the Eight Shapes Figma plugin. There is a couple of other design system plugins as well, but those are ones that I tried and find very intriguing. So check out what you can do with those and how to implement it into your design process and figure out whether you can easily just create a design system. If you're in a bigger company, who do you need to create a design system? How can you actually start with doing that? And then always remember to bring in ecological and social sustainability into your design system as well and not as an afterthought. But in the very beginning of it all ready. Cool.

So let me know what you thought of this episode on Instagram, on LinkedIn, via email, whatever you choose. And also let me know if you know of any design systems that have more sustainability in them already. I've seen a lot of design systems with accessibility accounted in there. But yeah, if you know any design systems who have even more in their of ecological sustainability as well as ethical and mentally healthy communication and stuff like that, then let me know. I'm really curious if there's any out there already and then subscribe to the podcast. Share this episode with friends and colleagues. Rate this podcast. Give it a review on Apple Podcasts. It's a chance to tell me what you love about the show and it helps others to discover it too. And then follow on Instagram at Green the Web on LinkedIn at Green, the Web. Check out the free resources and the Green UX design course on my website. And other than that, just enjoy this spring at least in Northern hemisphere where I am, I am very much enjoying spring and the coming up of summer and then I'd love to get in touch with you, connect with you in whatever communication platform you like the most. And I'm curious about what you got out of this episode for yourself and then see you in the next one.