{"id":11052,"date":"2024-10-31T15:14:03","date_gmt":"2024-10-31T15:14:03","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=11052"},"modified":"2024-10-31T15:14:03","modified_gmt":"2024-10-31T15:14:03","slug":"what-is-a-design-system","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-a-design-system\/","title":{"rendered":"What is a design system and why is it useful?"},"content":{"rendered":"

When you are building a website, an app or other digital product, you have a lot to think about. How big are the buttons? What colour are the headings? What shape are the icons? These things make up the core of how your product will look and function. So with a product that\u2019s hundreds of pages long, how do you make sure that you retain consistency? That\u2019s where a design system comes in.\u00a0\u00a0<\/span><\/p>\n

A design system is the standards and principles that determine a brand\u2019s design. When design systems are done well, they can have a noticeable effect on how the brand\u2019s digital products are created and implemented.<\/span><\/p>\n\n

Let\u2019s get started!<\/span><\/p>\n

What is a design system?<\/strong><\/h2>\n

A design system is a collection of reusable components that have clear standards for use. These components can be used together to build any number of components in a company\u2019s digital presence.\u00a0<\/span><\/p>\n

A design system is comprehensive but also ever-growing and evolving. It has pages about everything from content to language to design to patterns. It\u2019s like a toolbox containing everything you need to build your products. Design systems are typically housed online so that everyone in the company can access the most up-to-date version of it at any given time.<\/span><\/p>\n

What\u2019s the difference between a design system and a style guide?\u00a0<\/strong><\/h3>\n

The terms ‘design system’ and ‘style guide’ are often used interchangeably, and while there is some overlap, they each serve different purposes in the design process.<\/span><\/p>\n

One of the parts of a design system is a style guide but a design system is much more than that. It provides a comprehensive overview of the design principles, patterns, and code snippets that should be used throughout a company\u2019s digital products. As a result, a design system maintains consistent design and reduces the design and production of multiple versions of the same elements.<\/span><\/p>\n

A style guide, on the other hand, is a document that focuses on a product\u2019s visual references, design principles, and implementation guidelines. It includes brand attributes, voice and tone guidelines, audience information, word usage rules, and other details about a brand\u2019s style.\u00a0<\/span><\/p>\n

A company\u2019s style guide can focus on one of three style needs. First, a content style guide focuses on tone of voice, grammar, spelling, and formatting rules. For example, Help Scout\u2019s voice and tone page explains how they should write and sound on their various channels: <\/span><\/p>\n

\"\"
Help Scout Voice & Tone<\/span><\/a><\/p>\n

Second, a brand style guide includes colour palettes, typography, logos and icons, and imagery. For example, Groove\u2019s style guide has this to say about images and graphics:<\/span><\/p>\n

\"Screenshot<\/p>\n

Groove\u2019s Style Guide<\/span><\/a><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

Third, a visual style guide includes the elements of your product\u2019s user interface and guidelines for how to use them. It may include responsive layout systems, color palettes, typefaces, and common UI elements. For example, Google\u2019s Material Design style guide includes ideas about where various parts of the layout should be consistently placed.\u00a0<\/span><\/p>\n

\"Screenshot<\/p>\n

Google\u2019s Material Guide style guide<\/span><\/a><\/p>\n

A style guide is a part of a design system, but a style guide alone is only one part of keeping designs consistent across multiple projects. Meanwhile, the design system is the total package.<\/span><\/p>\n

Who uses design systems?<\/strong><\/h2>\n

While just about everyone who designs for a company can use a design system, there are some who will refer to it more than others. <\/span>Product designers<\/span><\/a>, UX designers, UI designers, and visual designers will use the design system the most. On the coding side, it will also be extensively used by developers and engineers.\u00a0<\/span><\/p>\n

These are the people who create and manage the design system as well. If the design system is new or just shaping up, the company will likely put dedicated UX and UI designers, visual designers, and developers on the project. Big companies that have mature design systems can have a whole department made up of everyone needed, from product designers to project managers to visual designers, to capture anything new needed for the design system.\u00a0<\/span><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN PRODUCT DESIGN (UX & UI)]<\/p>\n Enrol now in our Product Design Programme<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

What is the purpose of a design system?\u00a0<\/strong><\/h2>\n

As the digital landscape gets increasingly complex, with websites, apps, social media, and other types of content, more and more companies are seeing the value of design systems to make the design process easier. The purpose of a design system is to provide an organized set of components and principles that can be used across projects, instead of having to create these components from scratch each time. That not only saves time, but it ensures that the look and feel of a company\u2019s products or services is consistent.\u00a0<\/span><\/p>\n

The benefits of having a design system<\/strong><\/h3>\n

There are myriad benefits to having a design system but these are the most important ones.<\/span><\/p>\n

    \n
  1. Faster Development<\/strong>.\u00a0<\/span>With a design system, design teams no longer have to start from square one each time they need to develop a new feature. They have guidelines on where to put buttons, which colours to use, and what icons should look like. This saves them a lot of time and gets them to develop products quickly.<\/span><\/li>\n
  2. Improved Collaboration<\/strong>.\u00a0<\/span>Design systems provide a shared design language that improves collaboration within teams and makes the functionality of each project better. Plus, everyone has the latest version of various features so they can produce an optimized product.<\/span><\/li>\n
  3. Better Efficiency<\/strong>.\u00a0<\/span>When all the components designers and developers need are stored in a central place, it\u2019s easier for them to find and use what they need for the product to work. This helps designers and developers focus on problems that are higher on the list rather than getting caught up in the details.<\/span><\/li>\n
  4. Maintain Consistency.<\/strong>\u00a0<\/span>With different teams working on various products, including webpages, apps, social media posts, and campaigns, having a design system can tell you how to make the experience consistent across all these channels. That way different components don\u2019t look out of place from product to product.<\/span><\/li>\n
  5. Enhances Scalability<\/strong>.\u00a0<\/span>Design systems ensure that not just designers and coders can make design decisions at scale but so can everyone else, including freelancers, marketers, and advertising agencies. This allows companies to distribute the workload without giving up on quality.\u00a0<\/span><\/li>\n<\/ol>\n

    What does a design system include?<\/strong><\/h2>\n

    While design systems often start with standard use cases and guidelines, like what buttons should look like, where logos should go, and what color palette is approved, as they mature they get more complex. They may eventually include principles for every product, from emails to Instagram videos to digital ads. Design systems typically include:\u00a0<\/span><\/p>\n

    A brand style guide<\/strong><\/h3>\n

    A style guide focuses on branding, such as the colours, logos, and fonts that the brand uses. But it also will often offer standards for content, interaction design, and visual design.\u00a0<\/span><\/h3>\n

    A component library<\/strong><\/h3>\n

    A component library is a complete set of reusable UI elements. They show designers and developers how to implement these elements by including visual examples along with the name, description, attributes, and code snippets of the element.<\/span><\/p>\n

    A pattern library<\/strong><\/h3>\n

    A pattern library takes the UI elements in the component library and combines them into layouts, structures, and templates. These are reusable and scalable, just like the elements in the component library.<\/span><\/p>\n

    Design system examples\u00a0<\/strong><\/h2>\n

    Here are several mature design systems that can serve as inspiration as you start your own.<\/span><\/p>\n

    Shopify\u2019s Polaris Design System<\/a><\/strong><\/h3>\n

    \"Screenshot<\/p>\n

    A page from <\/span>Shopify\u2019s Polaris Design System<\/span><\/a> on the foundation of the system.<\/span><\/p>\n

    Shopify\u2019s Polaris Design System is meant to be a one stop shop for all the stores that use their system. It includes the building blocks, including design elements and content, that easily convey to Shopify\u2019s merchants how to use them to make great user experiences for customers.\u00a0<\/span><\/p>\n

    BBC Global Experience Language<\/a><\/strong><\/h3>\n

    \"Screenshot<\/p>\n

    A page from <\/span>BBC\u2019s Global Experience Language<\/span><\/a> on design patterns<\/span><\/p>\n

    The BBC\u2019s Global Experience Language is a design system that includes everything from foundations to design patterns to how-tos, all to ensure everyone across the company\u2019s vast network will be on the same page when designing any of their brand experiences. The system also includes articles and playbooks to make sure there won\u2019t be any design problem that won\u2019t have support.\u00a0<\/span><\/p>\n

    Audi Design System<\/a><\/strong><\/h3>\n

    \"Screenshot<\/p>\n

    A page on buttons from the <\/span>Audi Design System<\/span><\/a><\/p>\n

    Audi offers a complete design system that includes everything from a \u201cGetting Started\u201d guide to global and regional components for everything you could need to design a product for them. It\u2019s meant to be the single place for anything anyone could need to create a great user experience.<\/span><\/p>\n

    What is the process of building a design system?<\/strong><\/h2>\n

    Building a design system is an intensive process that must include at least one UX designer, one <\/span>UI designer<\/span><\/a>, and one developer. It requires that these individuals<\/span><\/p>\n

    \u00a0look at a company\u2019s web or app designs that are currently being used and ask thoughtful questions about whether these designs are appropriate or not, and then revise and overhaul the components as needed.<\/span><\/p>\n

    These are some steps to get started building a design system:<\/span><\/p>\n

    Take inventory<\/strong><\/p>\n

    Look at your existing digital designs, and categorize everything into design patterns, styles, and components. Keep track of what\u2019s working well and what\u2019s not working so well so you can get an idea of how much of an undertaking building a design system will be.<\/span><\/p>\n

    Create a design language<\/strong><\/p>\n

    The design language is made up of the main components of your digital products: <\/span>colour<\/span><\/a>, typography, sizing, and imagery. You should create each of these while considering the role each of these components play in your designs. Often Figma will be used to create and store these components so others can access and use them too.<\/span><\/p>\n

    Build a design system<\/strong><\/p>\n

    Now that you know the components you are working with, you need to put them into a design system. You\u2019ll take the basics of the design language and use that framework to make reusable patterns and templates. You\u2019ll also use those building blocks to create documents that will explain all anyone would want to know about using the system, including best practices and code snippets.<\/span><\/p>\n

    Keep the design system up-to-date<\/strong><\/p>\n

    It\u2019s a big undertaking to get a design system up and running, but even with all that work, you can\u2019t rest on your laurels. Creating a design system is never done, and someone will constantly be updating it to make sure it has the latest and greatest components. This includes updating the component library in Figma and making sure each team\u2019s projects have the most recent design system thinking in them.\u00a0<\/span><\/p>\n

    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN PRODUCT DESIGN (UX & UI)]<\/p>\n Enrol now in our Product Design Programme<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    Key takeaways<\/strong><\/h2>\n