Design system resources
And what you can expect to learn from each one
Over the last couple of years I’ve been devouring online content on design systems. In this article, I will share the videos and articles I found most useful in my learning journey.
The content linked here has influenced the way I think about design systems, and the way I work with my colleagues at Zendesk on maintaining Garden, our own design system.
The list below is by no means exhaustive, but these are the videos and articles that I found most helpful and informative and I hope you do too. I decided to include a little explanation of key content for each resource so you can make an informed decision if it is for you. Enjoy.
VIDEOS
Design Systems, when and how much?
I really liked the articulation of the rules, constraints and principles approach to design systems. Well articulated, and provided a nice clear example.
Evolving the design language at Big Blue
As design systems mature and move from hype to being an integral part of product design culture, measuring the success of design systems is going to become an increasingly important topic. At 12min 20sec they dive into the topic of measurement. IBM used both qualitative and quantitative research methods to understand how well their design system was working across their large, highly distributed design team.
Design systems at Zendesk
Design systems are perfectly positioned to drive wide adoption of accessible design. At 17min 35sec, my colleague Austin Green starts talking about the engineering side of our design system. This is my favourite part of the talk as Austin goes into how we’re building accessibility right into every single component in our design system. What I love about his explanation is that it makes it perfectly accessible (get it?) for non-engineers as well.
Sustainable design systems
With all the hype and excitement around design systems, it’s tempting to dive in and start designing and developing your own design system. This talk covers some very important principles to stick to if you want to make sure your design system is built in a way that will ensure its longevity.
BOOKS
Design Systems Handbook
Bespoke design is slow, inconsistent, and increasingly difficult to maintain over time.
Design systems enable teams to build better products faster by making design reusable — reusability makes scale possible. This is the heart and primary value of design systems.
Read this if…
…you’re looking for a place to start. This publication is an absolute goldmine, covering just about all aspects of design systems and providing a solid base to start deeper exploration of areas you’re interested in.
My favourite was the section on dispelling myths around design systems, such as design systems being too limiting and leading to a loss of creativity
Based on my experience and current needs, the section on building teams and different contribution models was really useful too.
Laying the foundations
What’s unique about this book is its focus on the importance of brand in design systems and creating documentation. It’s a comprehensive, practical guide that’s simple to follow and easy on the eye.
Read this if…
…you’re looking for a fresh perspective, free of tool or company bias. I particularly like that this book focuses on brand within design systems. It’s written by Andrew Couldwell who has had experience working on design systems for the likes of Adobe and WeWork. Similarly to the Design System Handbook above, this book is great foundational reading for anyone looking to start working on their design system.
ARTICLES
Why design systems fail
You have to make your design system the path of least resistance, lowering cognitive overhead of development, not adding to it. This is vital.
Read this if…
…you want to go beyond why design systems are awesome, and understand some of the common pitfalls. The articles goes into the key organisational characteristics that need to be in place in order for design systems to succeed.
Your sketch library is not a design system
This may sound obvious, but it’s important to understand that you can’t build working software out of screenshots and Sketch files.
Read this if…
…you want to understand a bit more about why although having your design system in tools like Sketch is a great start, it’s not the end goal (or even close to it).
People over pixels
That’s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.
Read this if…
…you want to read a practical step-by-step account of how a distributed team collaboratively redesigned components affecting 40+ products across two continents.
I love how they broke their seemingly massive problem down by redesigning a few key screens as a team which got them buy-in from different groups of designers. It’s really interesting that they diverged and tested multiple, wildly different, solutions before committing to the preferred direction.
The most exciting design systems are boring
When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.
Read this if…
…you’re looking for an articulation of why a design system is not just a collection of UI elements. I’m a firm believer in the importance of guidelines, and instructions of what to do (and what not to do) with the design system components.
A point that really resonated with me is that a design system shouldn’t be seen as an opportunity to re-brand and throw everything out in the favour of shiny new components and frameworks. Instead, a design system implementation should be about understanding what are the most mundane, high frequency and high value interactions, and optimising those within the constraints of the existing systems.
AirBnB: Building a visual language
Software design has few physical constraints compared to many other design disciplines. This allows for a variety of solutions to any given challenge, but also opens it to disjointed user experiences. As product owners and designers, we have to create and follow our own constraints.
Read this if…
… you’re after a really solid explanation of why build design systems, their benefits and how to do it. The article goes through a list of reasons design systems are required and are a good idea. It is probably the best such list that I’ve read to date. AirBnB are one of the leaders in this space, so it’s an article well worth reading. It’s also packed with great quotes on design systems and their benefits.
The most interesting part of the article is the discussion on the definition of larger components, rather than atom level components.
Designing design systems for complex products
Designing Design System for Complex Products
Benefits of design system and how to build it
uxdesign.cc
I used to put lots of “red lines” with detailed descriptions on my design, to provide as many details as possible to the developers. But it was not an efficient way to hand off, and sometimes developers did not follow all the details I put on my design.
Read this if…
… you want an explanation of the difference between a styleguide and a design system. The article is fairly simple, and better suited to those just starting to learn about design systems and their benefits.
Animation in design systems
Part of the reason we treat animation like a second-class citizen is that we don’t really consider its power. When users are scanning a website (or any environment or photo), they are attempting to build a spatial map of their surroundings. During this process, nothing quite commands attention like something in motion.
Read this if…
… you’re after practical tips on justifying, prioritising and including UI animation in your design system.
Atomic Design
Read this if…
…just read it! It’s probably going to be referred to as one of the seminal pieces of writing on the topic of design systems.
Atomic design: how to design systems of components
Read this if…
…you want to see how one designer put Atomic Design into practice
What are your favourite design system resources?
I hope you found at least one interesting video or article in this list. If you know of other great resources, please share them here by responding or reach out to me on Twitter.
Check out design.zendesk.com for more thought leadership, design process, and other creative musings.
Follow us: Team Instagram | Team Dribbble | My Instagram | My Twitter
