Design systems are a double edged sword
It cuts both ways
Introduction
Design Systems have taken the frontend development world by storm. These frameworks of organized practices, tools, and standards help developers and designers communicate more efficiently and maintain consistency across products. But, as many companies are finding out, maintaining a balance between scalability, creativity, and consistency presents a unique challenge.
Understanding Design Systems
A design system is far more comprehensive than merely a set of components or a simple style guide. Think of it as a living organism or a well-orchestrated symphony, where designers and developers play in harmony. This collaborative environment is a testament to how modern web development has transformed, putting emphasis on cohesion, consistency, and communication.
A design system is a blueprint — a collection of guidelines, best practices, principles, and a carefully curated library of design solutions aimed at addressing frequently encountered design challenges. Brad Frost, the author of Atomic Design, has eloquently remarked
“Design systems provide a convenient, centralized place to browse an ever-evolving collection of design patterns.”
This encapsulates the evolving nature of design systems and their central role in shaping the user experience.
The ultimate aim? To usher in efficiency and consistency in the design-to-development process, guaranteeing uniformity across various platforms and interfaces, whether it’s a web application viewed on a desktop, a mobile app, or even a wearable device.
One of the most prominent roles of design systems is their contribution to brand consistency. Visual consistency is like the language of your brand — it tells your audience who you are without uttering a word. By diligently adhering to the predefined components, patterns, and styles in the design system, designers ensure a unified brand voice, irrespective of the number of hands that work on the product.
To cite an example, think of how instantly recognizable Spotify’s user interface is across devices, from mobile apps to desktop versions. This immediate familiarity is primarily due to a robust design system ensuring consistent typography, color schemes, and component behaviors.
But, design systems aren’t just about rigidity and rules. They’re about fostering a collaborative spirit. While designers lay down visual guidelines and craft aesthetics, developers bring those visions to life, converting guidelines into functional coded components.
“A design system isn’t a project. It’s a product serving products.” — Nathan Curtis
This emphasizes the dynamic relationship between design and development within this ecosystem. It’s this collective effort that ensures a product is not only aesthetically pleasing but also functionally robust.
The Scale-Consistency Dilemma in Design Systems
In the lifecycle of product development, growth is inevitable. New user demands surface, market trends evolve, and the product itself undergoes numerous iterations to stay relevant. Concurrently, the underlying design system is pressed to accommodate these changes. But with growth comes a two-fold challenge: scaling the system while ensuring unwavering consistency.
At the heart of this is the concern that every added component, every nuance introduced to the design system, adds another layer of complexity.
“The larger our design systems get, the harder they become to maintain.” — Sarah Federman
And she’s spot on. As a design system expands, locating specific components can be akin to finding a needle in a haystack, making the process unwieldy for both designers and developers.
But it’s not just about the increasing bulk. The core objective of a design system is to offer a cohesive design language. Yet, as it scales, it’s easy for inconsistencies to creep in. Without a vigilant review process, these inconsistencies can multiply, causing fragmented user experiences and undermining the very essence of a design system.
Taking a real-world example, consider Apple’s iOS. Over the past decade, Apple introduced numerous features, aesthetic modifications, and functional tweaks. However, the essence of iOS, the simplicity and intuitiveness that users love, had to remain intact.
“We try to develop products in a complex world.” — Jony Ive, the former Chief Design Officer of Apple
Indeed, maintaining uniformity in such a complex and expansive design ecosystem as iOS is no small feat. Apple’s success in doing so highlights the meticulous attention required to balance scale with consistency.
Design Systems at Spotify:
Spotify has evolved its approach to design systems over the years, introducing Encore in November, a “system of systems” that seeks to unify various design efforts under one brand. Before Encore, the journey of design systems at Spotify involved different stages, from having no formal design system to the introduction of GLUE (Global Language Unified Experience), a centralized design system.
However, as Spotify grew, encompassing 45 different platforms and over 2000 engineers, the GLUE system became a bottleneck due to the company’s value of “aligned autonomy”, promoting independent decision-making by squads. The rapid expansion led to a phase where 22 different design systems were in existence, causing confusion.
To resolve this, Spotify introduced Encore, a framework that consolidates existing design systems. At its core is the Encore Foundation, which focuses on foundational elements like color, typography, and motion. Layered on top are systems like Encore Web and Encore Mobile, followed by specific local design systems for distinct products or audiences.
The significance of this shift lies in how Spotify recognized the need for a design system that respects its culture of autonomy and vast product landscape. Rather than a single monolithic design, Spotify has embraced a flexible, collaborative, and interconnected system of systems that can adapt to the company’s dynamic needs.
The Impact of Design Systems on Creativity
The relationship between design systems and creativity is akin to the classic debate on rules and innovation. Critics argue that design systems, with their structured components and guidelines, act as barriers to the free flow of creative juices.
“The more constraints one imposes, the more one frees one’s self,” said Igor Stravinsky, a renowned composer.
This quote captures the essence of the debate: do constraints stifle or stimulate creativity?
At a glance, design systems seem restrictive. They’re built on defined patterns, set typography, specific color palettes, and more. A designer working within such parameters might feel like a painter told to use only three colors on a canvas. How much can one truly express within such confines?
Yet, history and practice show that limitations can be powerful catalysts for innovation. The sonnet, a 14-line poem with strict rhyme schemes and meter, has produced some of the most beloved poems in the English language. It’s the boundaries that push poets to think deeply and innovate within the given structure.
In the realm of design, Apple’s iOS is a prime example. Despite having a rigorous design system that developers and designers must adhere to, we’ve seen countless innovative apps and features emerge on the platform. These innovations work seamlessly within the iOS ecosystem, highlighting that a robust design system doesn’t necessarily curb creativity but may channel it in directions that ensure both innovation and consistency.
However, it’s also undeniable that there are instances when a design system can feel too rigid. A designer might conceive a groundbreaking user experience feature, only to find it doesn’t quite gel with the existing design components. In such cases, there’s a crucial decision to make.
“People ignore design that ignores people.” — Frank Chimero
If a novel design genuinely enhances user experience, perhaps it’s the design system that needs tweaking, not the innovative idea.
But then, how flexible should a design system be? Adobe’s shift from its traditional software to the cloud-based Creative Cloud faced initial resistance. But this move allowed for a more integrated system where individual apps (each with their design ethos) could interact more seamlessly, leading to a more holistic creative experience for users. This showcases that sometimes, adjusting the system is beneficial for broader innovation.
The Role of Design Systems in Simplifying Developers’ Jobs
In today’s fast-paced digital world, the demand for high-quality, consistent, and efficient products is ever-increasing. Enter design systems: a developer’s strategic ally.
Why Design Systems Matter to Developers
A well-structured design system provides developers with a blueprint, streamlining their workflow. Instead of conjuring components from thin air, they leverage a toolkit that ensures uniformity and quality.
Brad Frost, author of “Atomic Design”, captures this sentiment eloquently:
“Just as consistent branding can make companies like Starbucks and Apple instantly recognizable, a strong design system can make your digital product recognizable too.”
However, it’s not all smooth sailing. A sprawling and neglected design system becomes a maze rather than a map. Developers may grapple with locating the correct component or stumble upon obsolete guidelines. And this, instead of expediting, delays the development cycle.
Moreover, while design systems aim to simplify developers’ tasks, they often touch upon the perennial debate: efficiency versus innovation. Does the comfort of a design system stifle the flame of creativity?
“A design system is like a well-organized toolbox. It’s not about restricting creativity, but giving creators the right tools to craft innovatively within a defined space.” — Jina Anne
Case Studies
1. Google’s Material Design:
Google’s design system, Material Design, embodies scalability married to consistency. Adopted across a myriad of Google products, from Gmail to Google Drive, it ensures users experience a unified interface. Yet, individual products retain their unique identity. The brilliance of Material Design lies in its ability to simplify developers’ tasks while staying flexible. As Google mentions in its guidelines:
“Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.”
2. Airbnb’s Design Language System (DLS):
A few years ago, Airbnb grappled with glaring inconsistency issues. The solution? The Design Language System. Implementing DLS transformed Airbnb’s design and development trajectory, offering a unified product feel. However, it wasn’t devoid of challenges. Some teams felt the rigidity of DLS curtailed their creative juices. Karri Saarinen, the Design Lead at Airbnb, commented on this balancing act:
“While systems make certain decisions easier and more consistent, they also can become obstacles when exceptions are needed. Striking the right balance is crucial.”
Lessons and Forward-Thinking
These case studies illuminate a critical insight: a design system is a tool, not a doctrine. While it offers a structured path, detours (read innovations) are not just possible, but often necessary. The onus is on teams to discern when to walk the trodden path and when to carve a new one.
Conclusion
Design Systems, while instrumental, come with their set of challenges. Balancing scale with consistency and ensuring creativity within constraints is a task easier said than done. However, with clear communication, regular updates, and a user-centric approach, they can be a game-changer in frontend development. As we step into the future, it’s essential to remember that design systems are tools — not chains. They’re there to guide, not bind.
Written by: Inchara, kubo media team.
Hey!
If you enjoyed reading this article and want more engaging content like this, don’t forget to follow our publication!
ANNOUNCEMENT 🔥
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the waitlist :)
