{"id":20190,"date":"2021-03-02T06:41:10","date_gmt":"2021-03-02T06:41:10","guid":{"rendered":"https:\/\/codeandpepper.com\/?p=20190"},"modified":"2023-12-21T10:23:08","modified_gmt":"2023-12-21T10:23:08","slug":"what-is-a-design-system-in-ux-and-why-it-is-important-to-have-one","status":"publish","type":"post","link":"https:\/\/codeandpepper.com\/what-is-a-design-system-in-ux-and-why-it-is-important-to-have-one\/","title":{"rendered":"What Is a Design System in UX and Why It Is Important to Have One?"},"content":{"rendered":"\n

We all know LEGO bricks and pieces; many of us grew up having them and then passing the torch to our kids. With LEGO, we can dream and build anything: a car, a house, a castle, even a space station. From the smallest and most humble design to the most ambitious project\u2014everything can be constructed with the right amount of supplies and patience. It\u2019s possible because these pieces can be used many times over in different combinations. And this is the exact nature of the design system in user experience (UX)<\/strong>.<\/p>\n\n\n\n\n\n\n\n

\"Design<\/figure><\/div>\n\n\n\n

What is a design system in UX and UI?<\/h2>\n\n\n\n

Let\u2019s start with a potential surprise. The term \u2018design system<\/strong>\u2019 isn\u2019t new: it was coined before the 2000s. What changed was the way we use it while creating web and mobile applications. The design system term is strictly tied with those and user experience<\/b>, user interface (UI), creating interactions between an app and the human beign, and customer experience.<\/p>\n\n\n\n

Design systems have their own elements:<\/strong> fonts, colour pallete, colour schemes, buttons, labels, inputs, etc.<\/strong> They occur in different sizes, variations, and models. Together, they are a part of a larger system, called a design language<\/b>, which is an overall visual design of any digital product. As we have proven earlier, it\u2019s easy to think about it as a giant pool of LEGO bricks. Even if you have only a limited number of them, you can still pull a giant number of combinations:<\/p>\n\n\n\n

\nhttps:\/\/www.youtube.com\/watch?v=3ItV57Mnnh8\n<\/div><\/figure>\n\n\n\n

That\u2019s how we have reached the scale problem.<\/p>\n\n\n\n

An elephant in the room<\/h2>\n\n\n\n

If you have a small application with limited functionalities, it\u2019s easy to maintain and make changes. The problem occurs in a big environment. What works for an ant, won\u2019t work for an elephant. Design system help with large-scale projects<\/b>. Especially, when everything should be internally consistent. An application should look and feel similar to the website. The website should mirror the company’s interactive presentation, etc. The entire portfolio should be consistent across the board, bringing the user to the conclusion that everything was designed with a specific theme and message in mind.<\/p>\n\n\n\n

The bigger the system, the more challenges it presents. Not even technical, these will come later. Even earlier, when you have to design an application, questions will pop up. What\u2019s the reason this button is blue, not red? Does this font have to be so big? Why on Earth do we use this outdated sound format? The UX design system provides an answer and creates order. In fact, the design system is often related to as a single source of truth for the entire design, development, and marketing teams<\/b>. It groups elements (LEGO pieces) and allows the company to create, build, and further develop a digital product.<\/p>\n\n\n\n

Boxes for LEGO pieces<\/h2>\n\n\n\n

If we put plastic pieces on the ground, it\u2019s easy to forget about them. It\u2019s a recipe for falling down or building an incomplete structure. That\u2019s why graphic design system requirements are grouped in categories<\/strong>.<\/p>\n\n\n\n

There are two main groups<\/b> and we can call them:<\/p>\n\n\n\n

Hard:<\/b> components, patterns, labels, typography, layout, writing style and copy, company guidelines, brand book, etc.<\/p>\n\n\n\n

Soft:<\/b> brand identity and values, company culture, customer-facing reflection of them all.<\/p>\n\n\n\n

When we have that, it\u2019s easier to develop basically anything. More precise \u2013 to even start developing. One can argue that values and culture are nothing next to fonts and color palettes, but this \u201cone\u201d would be wrong. Without soft values and a shared mindset, a product design is only a way to develop a product. We can build something that works and looks great, customers can be happy, but only to a point.<\/p>\n\n\n\n

What if something goes wrong? What if trends shift and customers want something different? What if these trends will force the team to even fundamentally change the application? That will cause even major changes \u2013 from new fonts to new and removed functionalities. If the initial market research was faulty, the entire app can undergo a serious redesign.<\/p>\n\n\n\n

To help mitigate the discrepancies between versions of the app, it\u2019s good to have a mature company culture. It also speeds-up the design, because everyone is focused on the customer and his needs. The app alone can be different (yet largely the same) but the core-values will prevail. And that\u2019s the real competitive advantage.<\/p>\n\n\n\n

Why are design systems important?<\/h2>\n\n\n\n

In a company where everyone speaks a different language, nothing gets done. Or is made with a horrendous cost to the process efficiency, not to mention money. To reduce these costs and build the Babel tower (also known as Really Big Application) you need the UX design system. When you finally have it, it can also be called a design language.<\/b><\/p>\n\n\n\n

To speak it is to control the chaos. Especially in an agile environment, where changes occur all the time, and often product pitched early in the process doesn\u2019t look the same at the end. Tracking all these changes requires consistency<\/b> which design system in UX and UI provides. Thanks to that, all changes, future iterations, and next products are predictable<\/b>. It\u2019s important not only for the design system but also for the user. And again, especially in software Fintech development<\/a>  \u2013 the industry\u2019s tremendous success in recent years is and will be based on creating a satisfying customer experience<\/a>.<\/p>\n\n\n\n

Good design system examples<\/h2>\n\n\n\n
  1.  Google\u2019s Material Design<\/strong><\/a><\/li><\/ol>\n\n\n\n

    One of the most important standards out there. Material Design uses grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. This design language is implemented throughout the entire company\u2019s portfolio. It\u2019s used by Google Sheets, Docs, YouTube, Chrome, Classroom, Maps, Slides, Translate, and more. Introduced in 2014, redesigned in 2018, with more usage of white space, rounded corners, colorful icons, and bottom navigation bars.<\/p>\n\n\n\n

    \"Google\u2019s<\/figure>\n\n\n\n

    2. Atlassian<\/a><\/strong><\/p>\n\n\n\n

    Atlassian is a company that delivers software for teams (like Jira, Confluence, and Trello). It has to be simple, intuitive, and allow a quick introduction to both: project scope and team member\u2019s responsibilities. Guess what? Two of these statements are on the official company page dedicated to an explanation of Atlassian\u2019s design system<\/a>. You can learn more there, but first, let\u2019s take a look at simplicity in action:<\/p>\n\n\n\n

    \"Atlassian\u2019s<\/figure>\n\n\n\n

    If it\u2019s still not enough, you can learn more by watching an Atlassian Slideshare presentation<\/a>.<\/p>\n\n\n\n

    3.    Shopify<\/strong><\/a><\/p>\n\n\n\n

    Shopify is a company that delivers ecommerce solutions. Shopify\u2019s design system<\/a> is called Polaris. It\u2019s made to be highly scalable and easy to use. It\u2019s focused on merchants\u2019 experience, giving them a sensation of working with something that\u2026 well, works. What else do you need from a system that is made for selling things? And yet, other companies are struggling to create something that simple and impactful.<\/p>\n\n\n\n

    4. Flex Funding<\/a><\/strong><\/p>\n\n\n\n

    Based on Google\u2019s Material Design, the Flex Funding puts an emphasis on a intuitive solutions. It\u2019s easy to implement responsive mobile approach to app. The UI is also easy and intuitive in everyday use. The usage of predefined blocks also means less advanced code on our part. There is also out-of-the-box access to themes, which let us prepare dark theme very quickly.<\/p>\n\n\n\n

    \"Flex<\/figure>\n\n\n\n

    5.    Apple<\/strong><\/a><\/p>\n\n\n\n

    Oh boy. We could talk for hours about this one and at times, it would still be not enough. Apple\u2019s human interface design guidelines<\/a> are simple and powerful. Designed for millions, they provide an ocean-deep amount of knowledge and inspiration. Especially now, in the age of the Big Sur operating system<\/a> that creates a bridge between desktop and mobile applications.<\/p>\n\n\n\n

    \"Apple<\/figure>\n\n\n\n

    This whole new approach to design and product functionality gives us few valuable lessons:<\/p>\n\n\n\n