Design Systems Handbook — Part 1
Every (digital) product designer, today, has some sort of responsibility to understand the methods to create (and ways of utilizing) a design system. This realization has fuelled my love for design systems and even propelled me to create one with a decentralized team of designers at a boot camp I once partook in, see here.
In this article, and in subsequent ones to come, I’d be doing a summary of the Design System Handbook, chapter by chapter. Why am I doing this? Well, let’s just say I’m a summary buff and would love to always come back here to read what I summarised from a book I really enjoy. And truly, I feel you can learn a thing, or more, from this.
Let’s Begin
During the 1960s, there was a rapid advancement in computer technology, which outpaced software development. This created something the world came to know as the “software crisis” — a gap between faster hardware and slower, error-prone software. To mitigate this issue, Component-based development was proposed by Douglas McIlroy in I968, at the NATO conference, as a way to speed up programming by making written codes reusable; massively improving efficiency and scalability.
Just like component-based development, a design system brings product teams together with a shared visual language. It helps to lessen design burdens, speed up the design process, and foster collaboration among teams working together to create vibrant products.
Ever audited your UI and noticed several shades of blue or variations of a single icon? Multiply this across your entire app, and you’ll see the design becoming inconsistent, incomplete, and really hard to maintain. To make changes to designs in this state, and match development’s speed, companies can:
- Get more people
- Design faster, or
- Make diverse solutions for many people
Despite increased manpower and quicker efforts, it’s really crucial to emphasize that custom design just doesn’t scale effectively. It is sluggish, lacks uniformity, and becomes progressively more challenging to sustain as time goes on. This is where design systems shine.
Design systems empower teams to create superior products with remarkable speed through the power of design reusability — this reusability is the cornerstone of scalability. A design system houses a swathe of reusable components, built by well-defined standards, effortlessly combined to construct a diverse range of applications.
Leveraging Systemic Thinking for Design Scaling
Several enterprises are dedicating resources to design (systems) as they’re beginning to realize that the customer (or user) experience of their products offers a competitive advantage, draws and retains customers, and curtails support expenses.
For any firm that wishes to prioritize (or is prioritizing) design, these are a few things to ensure:
- The design team is expanding
- Design is integrated across various teams within the company, potentially across multiple locations
- Design plays a pivotal role in all products across every platform
There are two key methods to leverage systemic thinking for your design (system) to scale, these are Standards and Components.
Standards — these cover both design and development. They include things like how we name stuff, make things accessible, and organize all files in our design system. Following these standards helps teams work together and avoid mistakes.
Components — they are like LEGO blocks of code in your design system, designed for reuse. They form the basic elements of your app’s interface, and they come in various levels of complexity. The more reusable your components are, the less you need to maintain them, and the easier scaling it becomes.
Designing components that can be created in development helps in reducing technical complications. Standards, on the other hand, guide how these components are used, their style, and what they do.
The key values of a Design System are:
- It helps scale the design
- Managing design (or technical) debt is easier
- It makes the design consistent
- Fosters faster prototyping
- Improves usability
- Makes iteration faster
In conclusion, design systems aren’t just fleeting trends or untested theories. To truly match the swift pace of technological advancement, component-based design and development (adhering to requisite standards) stand as tried-and-true solutions.
See you in the second chapter! 😉
