Design system resources

And what you can expect to learn from each one

Vedran Arnautovic
May 9, 2018 · 7 min read

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

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

Zendesk Creative Collection

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Thanks to Nick Taranto-Grimes

Vedran Arnautovic

Written by

Designing in Australia, assembled in Bosnia. Lead Product Designer at Zendesk. www.vedran.io

Zendesk Creative Collection

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade