Skip to main content
main-content
Top

About this book

Learn how to build a design system framed within the context of your specific business needs. This book guides you through the process of defining a design language that can be understood across teams, while also establishing communication strategies for how to sell your system to key stakeholders and other contributors.

With a defined set of components and guidelines, designers can focus their efforts on solving user needs rather than recreating elements and reinventing solutions. You'll learn how to use an interface inventory to surface inconsistencies and inefficient solutions, as well as how to establish a component library by documenting existing patterns and creating new ones. You'll also see how the creation of self-documenting styles and components will streamline your UX process.

Building Design Systems provides critical insights into how to set up a design system within your organization, measure the effectiveness of that system, and maintain it over time. You will develop the skills needed to approach your design process systematically, ensuring that your design system achieves the purpose of your organization, your product, and your team.

What You'll Learn

Develop communication strategies necessary to gain buy-in from key stakeholders and other teams

Establish principles based on your specific needs

Design, build, implement, and maintain a design system from the ground up

Measure the effectiveness of your system over time

Who This Book Is For

All teams, large and small, seeking to unify their design language through a cohesive design system and create buy-in for design thinking within their organization; UX, visual, and interaction designers, as well as product managers and front-end developers will benefit from a systematic approach to design.

Table of Contents

Frontmatter

Chapter 1. The Rise of Design Systems

Abstract
With the rise of design-led organizations, the role of the designer has shifted from that of mere stylist to that of a business’s number-one problem solver. Yet, to build products that people love, designers must do more than solely solve problems. They must structure the way they work, establishing the guiding rules and principles that support and drive both their design process and the product for which they are designing.
Sarrah Vesselov, Taurie Davis

Chapter 2. Introducing Design Systems

Abstract
Understanding the goal of a design system is the first step toward implementing a solution that helps teams successfully scale product. With a clearly defined system, designers and engineers can focus their efforts on solving user needs, rather than re-creating elements and reinventing solutions.
Sarrah Vesselov, Taurie Davis

Chapter 3. Selling the System

Abstract
Often, it can be difficult to articulate to others something that you know intuitively. As designers, it is our job not only to create better user experiences but also to explain why they are better, in the simplest terms possible. More often than not, we are not the decision makers within an organization. To see our ideas come to pass, we have to advocate for them to the decision makers. We can’t just be convinced of the value of our ideas; we have to show that value to others.
Sarrah Vesselov, Taurie Davis

Chapter 4. Design As a Language

Abstract
Communication is essential in our everyday lives. It allows us to distribute knowledge, learn complex ideas, and facilitate the development of relationships. Successful communication is achieved when people share the same language. By thinking about design systems as a shared language, your organization will establish a better and more consistent means of communication. The basis of language is composed of two attributes:
Sarrah Vesselov, Taurie Davis

Chapter 5. Implementing Your System

Abstract
Now that we’ve established the “why” of a design system and learned how to think about design as a language, the next step is to begin implementation. In this section, we will start by assessing your organization, building a support system, and understanding the state of your product. You will learn how to build a predictable architecture that supports the multiple areas that make up your system. Once there is a clear foundation, you can begin designing, building, and implementing components while ensuring to clearly document decisions along the way. We’ve provided three case studies to help ground the discussion and provide real-world scenarios for how to implement a system based on individual needs.
Sarrah Vesselov, Taurie Davis

Chapter 6. Measure and Maintain

Abstract
Design systems require continuous effort. Even as you are writing design guidelines and working with engineering to implement your components, there will be revisions and improvements to be made along the way. Focus on the following key areas as you continue to grow your design system: measuring the effectiveness, understanding how to scale with your organization and product, and learning how to iterate over time.
Sarrah Vesselov, Taurie Davis

Chapter 7. A GitLab Case Study

Abstract
Throughout this book, we have combined our collective experiences to share what we’ve learned while working on design systems throughout our careers. The following case study is a look into our roles, challenges, and successes while working together on the GitLab Design System. Our goal with this chapter is to provide you with concrete experiences from which you can draw parallels while working on your system.
Sarrah Vesselov, Taurie Davis

Chapter 8. Design Systems As a Resource

Abstract
Starting your own design system can be overwhelming. While we’ve provided you with everything you need to start working, it can be helpful to look at existing systems for inspiration. Public-facing and open source design systems provide a window into how different organizations categorize and structure their systems. In this chapter, we will cover the common similarities and differences you can expect to encounter among popular design systems when researching for your own.
Sarrah Vesselov, Taurie Davis

Backmatter

Additional information

Premium Partner

    image credits