A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. Design systems are made of many components, patterns, styles, and guidelines, which can help operationalize and optimize your design efforts. However, they are designed, managed, and implemented by people. The main factors to consider when creating a design system are the scale and replicability of your projects, as well as the resources and time available. When poorly implemented and maintained, design systems can become unwieldy collections of components and code; but, when implemented well, they can educate team members, streamline work, and enable designers to tackle complex UX problems.
Elements of a Design System
There are two important parts to a design system:
- The design repository
- The people who manage it
Design-System Repository: Design repositories can take many forms, but they often contain a style guide, a component library, and a pattern library. Style guides contain 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 (colours, 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). Component libraries (also known as 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 and implement specific UI elements. 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.
Design-System Team: A design system is only as effective as the team that manages it. Whether created or adapted, design systems require continuous maintenance and oversight to ensure they don’t become outdated, obsolete, or overcrowded with redundant entries or submissions. The size of this team can vary, given that design systems themselves can take on different sizes and levels of customization, but, at a minimum, the team should include 1 interaction designer, 1 visual designer, and 1 developer, each meant to help write interaction-design guidelines, create visual examples, and provide code snippets and implementation specifications for each element, respectively. 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.
Why Use A Design System?
Design (and development) work can be created and replicated quickly and at scale.
The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.
It alleviates strain on design resources to focus on larger, more complex problems.
Since simpler UI elements are created already and reusable, design resources can focus less on tweaking visual appearance and more on more-complex problems (like information prioritization, workflow optimization, and journey management).
It creates a unified language within and between cross-functional teams.
Especially when design responsibilities shift or when teams become geographically dispersed, a unified language reduces wasted design or development time around miscommunications.
It creates visual consistency across products, channels, and (potentially siloed) departments.
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 seem 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.
It can serve as an educational tool and reference for junior-level designers and content contributors.
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.
