Trends peak and go under. One of many designer’s superpowers is to spot the difference between a design trend and a revolution. Design systems have passed the trend phase and have entered to revolutionise the way designers, developers and other stakeholders are working. There is a buzz around design systems as a whole, and some misconceptions on what it is, what it does and why it exists. Let’s clear that up.
Terminology
Call me traditional, but I think that different understanding of the same terminology is the beginning of the miscommunication cycle. Let’s get those out of the way since we will hear them when talking about design systems.
Design: a plan or drawing produced to show the look and function or workings of something.
System: A system is a group of interacting or interrelated entities that form a unified whole.
Components: a part or element of a larger whole.
Component library: a storage place where the coded user interface components are stored and documented.
Standards: a level of quality.
Principles: a proposition that serves as the foundation for a system.
A Mini-History Lesson
Feel free to skip this if you aren’t a history nerd. The point is, that, design systems are not a new concept and have matured over the decades. Design systems as we know them today are a new concept. However, like most new ideas, they are hardly “original” and have stemmed from similar ideas before them. Here I will cover a brief history of it.
1977- Pattern Language, a design system for architects
15 Principles of Wholeness “A Pattern Language” by Christopher Alexander
A Pattern Language: Towns, Buildings, Construction is a 1977 book on architecture, urban design, authored by architects Murray Silverstein, Sara Ishikawa and Christopher Alexander. The book is considered by many as the start of design systems which the authors refer to as “pattern language”. A closer look at the book would reveal that most of their inspirations and examples come from medieval towns. Thus, the idea of a pattern language isn’t new, it just wasn’t accessible. Pattern language has revolutionised the thinking about those systems, in a way making it accessible to ordinary people, not only professionals to improve their houses, towns or schools by using those design tools. This book has lead to the next point→ Pattern Libraries
1986/1994- Pattern libraries
Book Cover – User Centred System Design(1986) by Norman and Draper
Although the idea of using “pattern language” in design was mentioned in” user-centred System Design”(1986) by Norman and Draper, it did not gain traction until the rise of web-pages during the late 1990s and early 2000s. Designers and especially developers found themselves needing to reuse components in different pages etc. Thus after the book “Design Patterns: Elements of Reusable Object-Oriented Software” came out in 1994, the idea has gained popularity. The Pattern Languages of Programming Conference (1994-present) became an annual event.
2016- Atomic Design
Atomic Design by Brad Frost
With the rise of different screen resolutions and devices, designers tasks grew immensely, and quite frankly, became unmanageable. Resulting in inconsistent UI’s across the board. The struggle was real. Atomic Design by Brad Frost, had solved problems and provided a system of thinking about these UI components in a scientific approach of Atoms, Molecules, Organisms, Templates and Pages. Many of the UI consistency issues were tackled. Some design principles were still lacking.
2014/2016- Google Material Design
Part of Google Material Design
2016 the birth of design systems as we know them today. Without a doubt, Google has pioneered the first complete and open-source design system. It has been used by countless companies either as is or as a template to build their design systems.
If you are interested in a deeper dive inside the history of Design systems, I highly recommend this blog post named “A HISTORY OF DESIGN SYSTEMS”
What is a design system?
A possible configuration by UXPin
Simply, a bunch of reusable components, guided by simple to understand standards and principles and can be assembled like lego pieces to create any number of applications. For designers, this could be done using design software such as Sketch, XD, Figma and many others. As for developers, this means using coded components libraries in for example react. For other stakeholders, this could mean referring back to standards and principles that can guide decision making.
A component library is not necessarily a design system.
Although a component library is one of the core elements in the design system, it won’t solve all the problems. Simply put, the component library answers the “What”, as for the rest of the design system answers the “Why”. In other words, how are those UI components used and why? Without understanding this critical step, we will still have inconsistent experiences despite having similar-looking user-interfaces. There are efforts being made, to unify the entire design system inside a single component libraries, but the process is still in its infancy stages.
What is included inside a design system?
Design systems are not a template to follow, nor does it come with a set configuration. It has to be customised to an organisation’s need. The size of the system could also have an impact on the things included. I.e. a fortune 500 company’s does not compare with a start-up’s design system.
Things that could be included but not limited to
- Design Tokens
- Components
- Patterns
- Tone of Voice
- Brand image
- Visual language / Look & feel
- Design principles
- Graphic guideline
- Styleguide
- Code libraries
- Separate documentations
- Team and contributors
Who uses it?
Countless top organisations have started to utilise design systems to scale the design, lower the cost and improve usability. It’s quite rare to find an industry leader currently, that doesn’t have a design system in place.
Spotify as an example has documented its transition to using a design system and the effect it had on their organisation.
“Design systems help teams stay aligned so their output stays intentional.” –Stanley Wood, Design Director at Spotify. Read about their transformation here “Design Does Not Scale”.
Before the design system implementation
After the design system implementation
Another organisation that has written extensively about its design system as a key factor to their success and survival is Airbnb. More about Airbnb Design here.
Design systems as a way of working
Regardless of how detailed and meticulous the documentation is, verbal communication between all stakeholders remains a key point to create a successful design system. In other words, design systems are more than lego pieces with rules, they are a way of working and communicating. They help to awaken and revive the design thinking mentality in both designers and non-designers. The idea is not to follow rules robotically, but provide a a framework that would speed up the innovation progress. Many intangible yet critical issues to be address in a design system, that might not be apparent on face value.
What can a design system help with in real life?
Some of those benefits overlap but might be more interesting for certain groups than others. So divided it into three groups.
Although designs systems require time to be setup, and get going, creating complex UI’s between designers and developers becomes potentially faster, ideation takes less time since we know what we have to play with. In essence, designers can draw wireframes on a whiteboard and developers can develop that from the components existing without the need for a pixel perfect design in the middle. Still, some designers prefer to craft pixel-perfect designs using pre-designed components. Airbnb has designed an AI that translates paper wireframes to coded layouts using their design system. Read more about that here.
2. For stakeholders: Design Debt Reduction
Design vs tech debt in small teams usually creates a prioritisation nightmare. Product owners, designers and developers will be pleased to know that once the design system is in place, there will be fewer discrepancies and inconsistencies to fix in future sprints. Developers will be using ready components and thus create fewer bugs. This will automatically reduce the design debt.
3. For users: Boost Coherency and Predictability
Users, usually won’t and shouldn’t care about the top two benefits, when it comes down to usability though, users expect modern software to behave predictably. A design system will create a consistent experience across all UI’s and components. Design standards will help in the way everything behaves. Design principles will guide the team to take new decisions faster.
Facing reality
Design systems, like any other solution, doesn’t come with-out challenges. Some of those might be that designers feel that the design system puts some constrains on creativity. Others, think that it might hinder exploration, re-alignment and reflection. Other worries might involve the inflexibility of systems overtime. Thankfully, being aware of these pitfalls can greatly reduce the risk of these issues realising. Even if some of those challenges happen, there are solutions to overstep these hurdles. What is a challenge, is the constant amount of work and resources required to design and develop an effective system to transform your organisation.
A good design system is an ever-evolving one!
How to create a successful one? Create a living, breathing system that’s flexible, maintainable, stable, scalable, and is designed for the long-term. Of course, that is no easy task, if you are interested however, we will be happy to guide you through it.
Anmar Matrood
UX Designer
