The word "Design System" has been around for quite some time now. The design systems were initially used and build as manuals of standards used for signs and brand books, which later came to web word with CSS frameworks, like the famous Twitter Bootstrap functioning and serving as a set of UI elements. Over time, the Design System has become more mainstream with the Atomic Design methodology, adopted patterns, and guidelines.
Over the years, we have seen the world's top companies create their unique design systems. They have changed the way we design digital products by utilizing a set of standards to create a scalable, consistent innovation pace. Airbnb, IBM’s Carbon, Apple, Material design by Google, Polaris by Shopify, UBER — each of these companies build amazing user experiences through their design system that reflects a coherent and recognizable company voice.
What is a Design System?
While most of us know what a design system means, some of us find it difficult to implement, for some people it's a library of components and some confuse it with style guides and pattern libraries. Well, it's simple, as simple as a consistently updated app that feels the same every time we use it. What makes that work? — a single source of truth build together by design and development teams.
Often, the library of UI components is considered the core of the design system, but there is more to building a source that is scalable, flexible, stable yet completely maintainable.
A Design System is a continuously evolving comprehensive guide that saves time and creates seamless processes to operate within teams. Creating a design system needs rules, constraints, and principles which get subdivided into smaller parts under foundations, components, content, and the remaining technical and design stack.
Designer Daniel Eden speaks of the design systems as an interaction between tools and people. He describes the design tools to be as richly interactive as Lego and advocates that a design system is about people: how they interact, how they understand one another, and how they work together to achieve a common goal. It’s made by people, used by people, and experienced by people. It’s challenged and shaped and broken by people. This is by far one of the most humane definitions of the design system which speaks of its process as a co-creation rather than a source.
Developers have their understanding of the design system, Designers contribute differently, design writers may write a different definition and all companies big, small, or agency models have a different set of values, rules, and governance processes for creating the design system but the aim remains the same which is to reduce the technical and design debt. The design system is not set in stone — they are a constant work in progress, open to iteration to improve, adapt, and scale, building a unified codebase and design under the similar building blocks — Rules, Constraints, and Principles.
Rules, Constraints, and Principles
The design system comprises of rules, constraints, and principles. These building blocks are created with consideration of how they will scale across the entire product and create a consistent user experience. Let's look deeper into the same.
1.Rules
How do you build an environment to set up the design tools? How do the creators and contributors ensure that everyone is working from the most recent version of the design system?
Rules are laid for everyone to understand and interpret what's inside of a design system. They are subdivided into values and purpose as resources that help everyone in the team and new users in creating designs from existing elements. They are a governance system that lays the foundation for the design system's workflow.
A system is a framework. It’s a rule book. It’s what tells you how those patterns work together.
— Brad Frost
The value part of this rule book governs the processes of the design system. They unify the team around governing constraints and principles. They are a source of truth and a system of record for design and code. The purpose defines how individuals can contribute back to the design system with new elements. They establish a shared language and communication across the team, which, in turn, creates better communication, reasoning, confidence, and optimism.
2.Constraints
The journey to creating and maintaining an effective design system can be challenging. There are numerous little decisions — How many fonts should be defined? How should we structure the use of colors? Where do we stop? Constraints in a design system helps to simplify every decision with some limitations and more possibilities.
The constraints define general guidelines for the use of colors, sound, layouts, multimedia, typography, data visualization, form design, mobile behavior, etc. They leverage their unique differentiation and elements of brand character throughout the design system to make every digital touchpoint a unified experience.
When designers design and build interfaces from a common point of constraints, limitations, and possibilities the users always know what they will experience when they regularly encounter the product. From the UX perspective, designing interfaces with scalable, common, and consistent constraints creates familiarity for users. From a technical perspective, constraints mean more efficiency, scalability, and less re-work for developers.
3.Principles
The principles of a design system provide the answers to the questions that may seem unseen initially. Design and development teams often operate with their own elementary set of standards. These standards help to assess the quality that is required to maintain a consistent digital experience. But, as we create a unified design system it becomes important to unify all sets of standards as common principles.
How do you define the necessary principles? How do you know what's indispensable and what's erratic? How do you know these are the principles that can guide your vision and purpose?
The principles of a design system act as reusable standards for everyone. These principles should replace instinctive standards with a shared understanding of how are they going to shape the experience for the users. They should be drafted to help navigate the complexity of designing software from the ground up!
The Carbon Design System by IBM defines its principles as the intent behind an outcome. They believe that great experiences deliver meaningful outcomes to your user. They reach both head and heart. To design for great user experiences, you must understand how they are put together and why they can touch people at a deeper level.
While writing down the principles of a design system teams should focus —
- The principles that guide decision-making as individuals to reach agreement faster as a team.
- They should act as the parallel pillars to create harmony and cohesion throughout the product.
- As the product evolves the design systems are modified over time, the principles of a design system should align the teams and help them keep the velocity they need to make the modifications.
- The principles that guide the design system should provide a clearly defined process for how user experience problems are approached and solved.
- They should help build with speed and remove unnecessary frictions.
- They should clear expectations within each step, assisting in solving problems and allowing focus on the tasks at hand without worrying about what to do next.
- They should be written in a consistent tone and voice as should be the whole design system.
The principles of a design system through a series of clearly defined processes, guidelines, and standards, each with different objectives act as interdependent levels of attainment that, when used together, improve the odds of arriving at solutions.
Conclusion
The process that supports the creation of a design system — the Governance system helps to create an understanding of the roles and responsibilities of each team member involved in bringing the right people in at the right times, making everyone’s involvement beneficial to the quality of the output.
It's important that the governance system decides to invest time in setting the rules, constraints, and principles from the start. while most companies have more people representing their voice than you’d expect, from a product point of view all three building blocks should be written in a similar tone and voice. By having a source of truth and creating it together with strong building blocks you can offer users an amazingly awesome and consistent experience.
Here is how it works, it's like playing with LEGO — One single brick can be added to many constructions. The brick remains the same but each time the builder uses it differently to construct a new design, letting go of the restrain. Identically, the building blocks of a design system can be implemented to all levels of designing and creating the product to unleash their full potential, configured in many ways, creating a different style, a new design each time.