Foundation

Question 1

What is a Design System?

Answer 1

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

*Functional toolkit or resource for designers and developers to work more quickly.

It also creates a shared language and visual consistency across different pages and channels.

Question 2

How does a design system allow design and development work to be created quickly and at scale?

Answer 2

Design and Development work can be created and replicated quickly and at scale.
* We can replicate designs quickly by using premade UI components and elements. This allows teams to use the same elements over and over again, reducing the need to reinvent the wheel and risking inconsistency.

Question 3

How does a design system alleviate strain on design resources to focus on larger, more complex problems?

Answer 3

Since the design system has simpler UI elements already created and ready to be reused, designers can focus less on tweaking visual appearance and more on more-complex problems, like information prioritization, workflow optimization, and journey management). While this payoff might seem small when you create only a small number of screens, it becomes substantial when you need to coordinate efforts across dozens of teams and thousands of screens.

Question 4

How does a design system create a unified language within and between cross-functional teams?

Answer 4

Especially when design responsibilities shift or when teams become geographically dispersed, a unified language reduces wasted design or development time around miscommunications. For example, the functionality or appearance of a dropdown menu would not be debated, since that term is reserved for a specifically defined element within the design system.

Question 5

How does a design system create visual consistency across products, channels, and (potentially siloed) departments?

Answer 5

Particularly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that are fragmented or unrelated to the brand.

Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem.

As an added bonus, any major visual rebrands or redesigns can be managed at scale through the design system.

Question 6

How does a design system serve as an educational tool and reference for junior-level designers and content contributors?

Answer 6

Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.

Question 7

What are some reasons why a design system would not get the green light?

Answer 7

1. Creating and maintaining a design system is a time-intensive activity that requires a dedicated team.
2. It takes time to teach others how to use it - it needs instructions for use - otherwise there is a risk that it may be applied inconsistently or incorrectly across screens or across teams.
3. There may be a perception that projects are static, one-off creations, which generally don’t require reusable components. Whether true or not, this perception may signal a lack of unified strategy across projects and a missed opportunity to increase efficiency.

Question 8

What are the two important parts of a design system?

Answer 8

1. The design repository
2. The people who manage it

Question 9

What does a Design-System Repository contain?

Answer 9

It often contains a style guide, a component library, and a pattern library.

Question 10

What is a Style Guide?

Answer 10

It contains specific implementation guidelines, visual references, and design principles for creating interfaces or other design deliverables.

The most common style guides tend to focus on branding (colors, typography, trademarks, logos, and print media), but style guides also offer guidance on content (such as tone of voice and language recommendations) and visual-and interaction-design standards (also known as front-end style guides). These guidelines are sometimes incorporated into the component library as well, to provide relevant guidance in context.

Question 11

What is a Component Library?

Answer 11

(aka Design libraries) are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements and serve as a one-stop shop for designers and developers alike to learn about the implement specific UI elements. Creating these libraries takes significant time and resources. In addition to visual examples of components, they include:

Component name, description, attributes, state, code snippets, and front-end & backend frameworks

Question 12

What is a Component Name in a component library?

Answer 12

A specific and unique UI component name, to avoid miscommunication between designers and developers

Question 13

What is in a description of a component library?

Answer 13

A clear explanation for what this element is and how it is typically used, occasionally accompanied by do’s and don’t for context and clarification.

Question 14

What are Attributes in a component library?

Answer 14

Variables or adjustments that can be made to customize or adapt the component for specific needs (i.e, color, size, shape, copy)

Question 15

What is the State in a component library?

Answer 15

Recommended defaults and the subsequent changes in appearance

Question 16

What are Code Snippets in a component library?

Answer 16

The actual code excerpt for the element (some design systems go as far as sharing multiple examples and offering a “sandbox” environment to try out different component customizations)

Question 17

What are front-end & backend frameworks in a component library?

Answer 17

To implement the library (if applicable), to avoid painful and unnecessary debugging

Question 18

What is a Pattern Library?

Answer 18

Sometimes, the terms ‘component library’ and ‘pattern library’ are used synonymously; however, there is a distinction between these two types of libraries. Component libraries specify individual UI elements, while pattern libraries feature collections of UI-element groupings or layouts. Pattern libraries are often thought of as less robust compared to component libraries, but they can be as thorough or as high-level as needed. They typically feature content structures, layouts, and/or templates. Much like the components, the patterns are meant to be reused and adapted.

Question 19

The size of a design system can vary, given that design systems themselves can take on different sizes and levels of customization, but what is the minimum the team should include?

Answer 19

1 interaction designer, 1 visual designer, and 1 developer.

Ideally, the team should also include a part-time researcher, part-time architect, and content writer, if these roles are explicitly determined in your organization.

Each is meant to help write interaction-design guidelines, create visual examples, and provide code snippets and implementation specifications for each element.

Question 20

What are generally the three approaches to using a design system?

Answer 20

1. Adopting an existing design system
2. Adapting an existing design system
3. Creating your own proprietary or custom design system.

Question 21

Depending on budget and needs, companies can select one of three approaches to design systems: what are they?

Answer 21

1. Adopt an existing design system in its entirety (lost cost, less customization, and low brand differentiation)
2. Adapt an existing system to the company’s needs
3. Create an entirely new one ( high cost, more customization, high brand differentiation)

Question 22

What can happen if a design system is poorly implemented and what can happen if it’s implemented well?

Answer 22

It can become unwieldy collections of components and code.

When implemented well, it can educate team members, streamline work, and enable designers to tackle complex UX problems.

Question 23

Give some practical examples of why systems are important?

Answer 23

1. Systems help us focus on small details, as well as the big picture at the same time
2. Systems help us onboard new people in our work and increases our productivity, as well as effectiveness,
3. Systems cultivate harmony among a team, so the final product becomes a cohesive solution that has the same design language across all of its parts.
4. Systems help us bring structure to the projects that we’re working on.
5. Sytems greatly facilitate the scalability of a product, so it can be easily converted from a desktop to a mobile solution.

Question 24

Why are systems important to clients?

Answer 24

Design systems help them have a stable ground and a starting point to build a new part of their digital presence or any new product.

Systems help everybody on a team, from the c-suite to junior developers, they all have a clear understanding of where things are going and how certain things should be built.

Systems help in onboarding new members of the team, or whole external teams relatively quickly and effortlessly.