\n2. Why create a design system?<\/a>
\n3. When do you need to create a design system?<\/a>
\n4. A glossary of design system terms<\/a><\/p>\n
<\/a>1. What is a design system?<\/span><\/h2>\nLet\u2019s start by saying what a design system is not. It\u2019s not a sketch library, nor a style guide, nor a bunch of examples. It’s a whole lot more than that!\u00a0<\/span><\/p>\nA design system is a collection of reusable, functional components and patterns with an accompanying set of guidelines that product teams use to create a consistent experience across a range of products. A design system can act as a single source of \u2018truth\u2019 for an entire organisation. Design systems usually include guiding principles, branding elements, voice and tone guidelines, code standards, and a UI library.<\/span><\/p>\nThe definition of <\/span>design system<\/span><\/i> can be summed up as follows: a series of elements you can reuse in multiple combinations to make it easier to create consistent design at scale. Think of it as a LEGO set. The components\u2014the coloured bricks, the tiles, the assorted accessories with their interlocking pegs\u2014can be used to build a universe of unique and extraordinary objects whose consistency is unmistakable.<\/span><\/p>\n![\"organise](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/01\/design-system-and-lego-480x324.png\")
Source: The Atomic Workflow<\/a><\/p><\/div>\nUnfortunately, however, most of us snap our LEGO together in a fairly haphazard way and rarely end up with anything more inspiring than a box with a door, a window (or two), and a roof with a simple chimney on top.\u00a0<\/span><\/p>\nOn the other hand, if you take the time to organise the pieces, start to create rules, conditions, combinations, and conventions, you can work in a much more \u2018deliberate and efficient manner\u2019<\/span>. And that’s what a design system is all about.\u00a0<\/span><\/p>\n<\/a>2. Why create a design system?<\/span><\/h2>\nThere are many reasons for creating a design system: to increase productivity and collaboration, for example, to improve quality, consistency, and accessibility, to make it easier to work with partners, to name but a few.\u00a0<\/span><\/p>\nAt TestingTime, we had four main reasons for developing our design system:<\/span><\/p>\n\n- Scalability<\/span><\/li>\n
- Consistency<\/span><\/li>\n
- Workflow improvement<\/span><\/li>\n
- Efficiency<\/span><\/li>\n<\/ul>\n
<\/a>2.1 Scalability<\/span><\/h3>\nAs a company, we need to keep growing and deliver a better product to an ever-increasing number of customers. If we only have one person who understands the rationale behind the use of certain design features and conventions, we put ourselves in a very vulnerable position. The person could quite easily quit the company at any time, leaving the rest of us to start again from scratch. That\u2019s why a design system is so essential. When onboarding, it enables newcomers to gain the information they need and serves as a trusty reference point for older members of the team. <\/span><\/p>\n<\/a>2.2 Consistency<\/span><\/h3>\nConsistency is a significant issue when dealing with a huge product range. If your users see that your brand does not have a clear identity, it may seem that the design, and therefore the user experience, is not important to your company or that you don\u2019t have enough resources. In the worst case, they may get confused and think that there are different brands. With a design system, you can deliver cohesive, consistent user experiences that enable end-users to learn and master the product much faster.<\/span><\/p>\n<\/a>2.3 Workflow improvement<\/span><\/h3>\nNot having to start every component from scratch speeds up the design process immensely. A well-thought-out design system empowers the team to focus on people and the user experience instead of losing themselves in aimless pixel pushing. <\/span><\/p>\n<\/a>2.4 Efficiency<\/span><\/h3>\nA design system allows you to prepare more iterations much faster. Rather than reinvent the wheel every time, we can reuse pre-existing components. We can even work on things we couldn\u2019t do if not for the agility a design system permits. This could be illustrations, animations, learning new applications or techniques, or any other skill that takes your product to the next level. Moreover, when we\u2019re saving time, we\u2019re saving money too.<\/span><\/p>\n<\/a>3. When do you need to create a design system?<\/span><\/h2>\nThere is no \u2018right time\u2019, but if you leave it too late, inconsistencies and bad practices will get compounded. Signs that it\u2019s time to introduce a design system might include discovering redundancies in your code due to different designs with similar elements or when the workforce has expanded leading to indiscriminate design changes made by multiple users, which cause confusion. If you notice symptoms like these, it\u2019s probably a good time to get together and define your company\u2019s design system.\u00a0<\/span><\/p>\nFun fact: Google was using 42 different shades of blue before introducing their Material Design.<\/span><\/p>\n![\"design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/01\/design-system-help-480x298.png\")
Source: Bolder Future<\/a><\/p><\/div>\nWe often work frenetically (and not always productively) without stopping to consider more efficient ways of working and that perhaps it’s worthwhile pausing for a moment to improve our work process.<\/span><\/p>\n<\/a>4. A glossary of design system terms<\/span><\/h2>\nThe world of design systems can be a bit tricky if you don’t know some of the terminology. Here is a glossary of the main terms so that you don’t get lost in the rest of our design system articles.<\/span><\/p>\nComponent<\/b>
\n<\/b>A reusable snippet of code or design. Sometimes used interchangeably with a pattern, but we think of them as different things.<\/span><\/p>\nComponent library<\/b>
\n<\/b>One of the main ingredients of any design system (also referred to as a pattern library), the library is a collection of components or patterns you can browse to find code references for ways to implement the components into your codebase or design.<\/span><\/p>\nGuidelines<\/b>
\n<\/b>The other major ingredient of design systems (along with the component library), guidelines are suggestions or rules on the best ways to use any given design system. Good guidelines tell you what and what not to do. A great example is <\/span>this advice<\/span><\/a> from the <\/span>anti-patterns<\/span> section of Shopify\u2019s <\/span>Polaris<\/span><\/a> design system.<\/span><\/p>\nPattern<\/b>
\n<\/b>A reusable flow, like signing in or finding out. Sometimes used interchangeably with components.<\/span><\/p>\nToken<\/b>
\n<\/b>Tokens are the most basic style elements of a design system\u2014specified brand colors, for example. These are managed through a centralised file, such as a JSON file, which acts as a single source of truth for the design system\u2019s styles.<\/span><\/p>\nUI kit<\/b>
\n<\/b>Usually refers to a file or document of user-interface elements such as buttons, form fields, checkboxes, and radio buttons. These are used by design teams to create screen mockups and prototypes. Examples of UI kits are Sketch libraries and <\/span>Figma design systems<\/span><\/a>.<\/span><\/p>\n
A design system is a collection of reusable, functional components and patterns with an accompanying set of guidelines that product teams use to create a consistent experience across a range of products. A design system can act as a single source of \u2018truth\u2019 for an entire organisation. Design systems usually include guiding principles, branding elements, voice and tone guidelines, code standards, and a UI library.<\/span><\/p>\n The definition of <\/span>design system<\/span><\/i> can be summed up as follows: a series of elements you can reuse in multiple combinations to make it easier to create consistent design at scale. Think of it as a LEGO set. The components\u2014the coloured bricks, the tiles, the assorted accessories with their interlocking pegs\u2014can be used to build a universe of unique and extraordinary objects whose consistency is unmistakable.<\/span><\/p>\n Source: The Atomic Workflow<\/a><\/p><\/div>\n Unfortunately, however, most of us snap our LEGO together in a fairly haphazard way and rarely end up with anything more inspiring than a box with a door, a window (or two), and a roof with a simple chimney on top.\u00a0<\/span><\/p>\n On the other hand, if you take the time to organise the pieces, start to create rules, conditions, combinations, and conventions, you can work in a much more \u2018deliberate and efficient manner\u2019<\/span>. And that’s what a design system is all about.\u00a0<\/span><\/p>\n There are many reasons for creating a design system: to increase productivity and collaboration, for example, to improve quality, consistency, and accessibility, to make it easier to work with partners, to name but a few.\u00a0<\/span><\/p>\n At TestingTime, we had four main reasons for developing our design system:<\/span><\/p>\n As a company, we need to keep growing and deliver a better product to an ever-increasing number of customers. If we only have one person who understands the rationale behind the use of certain design features and conventions, we put ourselves in a very vulnerable position. The person could quite easily quit the company at any time, leaving the rest of us to start again from scratch. That\u2019s why a design system is so essential. When onboarding, it enables newcomers to gain the information they need and serves as a trusty reference point for older members of the team. <\/span><\/p>\n Consistency is a significant issue when dealing with a huge product range. If your users see that your brand does not have a clear identity, it may seem that the design, and therefore the user experience, is not important to your company or that you don\u2019t have enough resources. In the worst case, they may get confused and think that there are different brands. With a design system, you can deliver cohesive, consistent user experiences that enable end-users to learn and master the product much faster.<\/span><\/p>\n Not having to start every component from scratch speeds up the design process immensely. A well-thought-out design system empowers the team to focus on people and the user experience instead of losing themselves in aimless pixel pushing. <\/span><\/p>\n A design system allows you to prepare more iterations much faster. Rather than reinvent the wheel every time, we can reuse pre-existing components. We can even work on things we couldn\u2019t do if not for the agility a design system permits. This could be illustrations, animations, learning new applications or techniques, or any other skill that takes your product to the next level. Moreover, when we\u2019re saving time, we\u2019re saving money too.<\/span><\/p>\n There is no \u2018right time\u2019, but if you leave it too late, inconsistencies and bad practices will get compounded. Signs that it\u2019s time to introduce a design system might include discovering redundancies in your code due to different designs with similar elements or when the workforce has expanded leading to indiscriminate design changes made by multiple users, which cause confusion. If you notice symptoms like these, it\u2019s probably a good time to get together and define your company\u2019s design system.\u00a0<\/span><\/p>\n Fun fact: Google was using 42 different shades of blue before introducing their Material Design.<\/span><\/p>\n Source: Bolder Future<\/a><\/p><\/div>\n We often work frenetically (and not always productively) without stopping to consider more efficient ways of working and that perhaps it’s worthwhile pausing for a moment to improve our work process.<\/span><\/p>\n The world of design systems can be a bit tricky if you don’t know some of the terminology. Here is a glossary of the main terms so that you don’t get lost in the rest of our design system articles.<\/span><\/p>\n Component<\/b> Component library<\/b> Guidelines<\/b> Pattern<\/b> Token<\/b> UI kit<\/b><\/a>2. Why create a design system?<\/span><\/h2>\n
\n
<\/a>2.1 Scalability<\/span><\/h3>\n
<\/a>2.2 Consistency<\/span><\/h3>\n
<\/a>2.3 Workflow improvement<\/span><\/h3>\n
<\/a>2.4 Efficiency<\/span><\/h3>\n
<\/a>3. When do you need to create a design system?<\/span><\/h2>\n
<\/a>4. A glossary of design system terms<\/span><\/h2>\n
\n<\/b>A reusable snippet of code or design. Sometimes used interchangeably with a pattern, but we think of them as different things.<\/span><\/p>\n
\n<\/b>One of the main ingredients of any design system (also referred to as a pattern library), the library is a collection of components or patterns you can browse to find code references for ways to implement the components into your codebase or design.<\/span><\/p>\n
\n<\/b>The other major ingredient of design systems (along with the component library), guidelines are suggestions or rules on the best ways to use any given design system. Good guidelines tell you what and what not to do. A great example is <\/span>this advice<\/span><\/a> from the <\/span>anti-patterns<\/span> section of Shopify\u2019s <\/span>Polaris<\/span><\/a> design system.<\/span><\/p>\n
\n<\/b>A reusable flow, like signing in or finding out. Sometimes used interchangeably with components.<\/span><\/p>\n
\n<\/b>Tokens are the most basic style elements of a design system\u2014specified brand colors, for example. These are managed through a centralised file, such as a JSON file, which acts as a single source of truth for the design system\u2019s styles.<\/span><\/p>\n
\n<\/b>Usually refers to a file or document of user-interface elements such as buttons, form fields, checkboxes, and radio buttons. These are used by design teams to create screen mockups and prototypes. Examples of UI kits are Sketch libraries and <\/span>Figma design systems<\/span><\/a>.<\/span><\/p>\n