Table Of ContentBuilding
Design Systems
Unify User Experiences through a
Shared Design Language
―
Sarrah Vesselov and Taurie Davis
Building Design
Systems
Unify User Experiences
through a Shared Design
Language
Sarrah Vesselov
Taurie Davis
Building Design Systems: Unify User Experiences through a Shared Design
Language
Sarrah Vesselov Taurie Davis
Dade City, FL, USA Portland, OR, USA
ISBN-13 (pbk): 978-1-4842-4513-2 ISBN-13 (electronic): 978-1-4842-4514-9
https://doi.org/10.1007/978-1-4842-4514-9
Copyright © 2019 by Sarrah Vesselov and Taurie Davis
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or
part of the material is concerned, specifically the rights of translation, reprinting, reuse of
illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way,
and transmission or information storage and retrieval, electronic adaptation, computer software,
or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image, we use the names, logos,
and images only in an editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or not
they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal
responsibility for any errors or omissions that may be made. The publisher makes no warranty,
express or implied, with respect to the material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Coordinating Editor: Nancy Chen
Cover designed by Taurie Davis
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505,
e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a
California LLC and the sole member (owner) is Springer Science+Business Media Finance Inc
(SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail rights@apress.com, or visit www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Print
and eBook Bulk Sales web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the authors in this book is available
to readers on GitHub via the book’s product page, located at www.apress.com/9781484245132.
For more detailed information, please visit www.apress.com/source-code.
Printed on acid-free paper
Table of Contents
About the Authors ��������������������������������������������������������������������������������ix
About the Technical Reviewer �������������������������������������������������������������xi
Acknowledgments �����������������������������������������������������������������������������xiii
Introduction ����������������������������������������������������������������������������������������xv
Chapter 1: The Rise of Design Systems ������������������������������������������������1
A History of Systems in Design �����������������������������������������������������������������������������2
The Intersection of Art, Technology, and Industry �������������������������������������������������5
The Rise of the Web �����������������������������������������������������������������������������������������5
Technological Advancements ��������������������������������������������������������������������������7
The Influence of Technology on Business ��������������������������������������������������������9
The Move to Agile ������������������������������������������������������������������������������������������10
Tying It All Together ���������������������������������������������������������������������������������������������11
Chapter 2: Introducing Design Systems ���������������������������������������������13
Style Guides, Component Libraries, and Design Systems �����������������������������������15
The Right Time to Implement a Design System ��������������������������������������������������17
Age of the Organization ���������������������������������������������������������������������������������17
Team Size ������������������������������������������������������������������������������������������������������18
Volume and Type of Work ������������������������������������������������������������������������������18
iii
TTaabbllee ooff CCoonnTTeennTTss
Approaching the Start of Your Design System ����������������������������������������������������19
Understanding Why Design Systems Fail ������������������������������������������������������������20
Lack of Initial Buy-In ��������������������������������������������������������������������������������������20
Trying to Do Too Much, Too Soon �������������������������������������������������������������������21
Perfectionism ������������������������������������������������������������������������������������������������21
Maintenance ��������������������������������������������������������������������������������������������������22
Design System Envy ��������������������������������������������������������������������������������������22
Tying It All Together ���������������������������������������������������������������������������������������������23
Chapter 3: Selling the System ������������������������������������������������������������25
Defining Why Design Systems Are Beneficial �����������������������������������������������������25
Three Dimensions of Value ����������������������������������������������������������������������������26
Communication Strategies ����������������������������������������������������������������������������������44
Diplomacy ������������������������������������������������������������������������������������������������������44
Education �������������������������������������������������������������������������������������������������������45
Salesmanship: Preparing for the “No” �����������������������������������������������������������46
Good Public Relations! �����������������������������������������������������������������������������������47
Selling Your System Worksheet ��������������������������������������������������������������������������47
Tying It All Together ���������������������������������������������������������������������������������������������49
Chapter 4: Design As a Language �������������������������������������������������������51
Lexicon: The Elements of Your System����������������������������������������������������������������53
Building Up Elements ������������������������������������������������������������������������������������53
Breaking Down Interfaces �����������������������������������������������������������������������������55
How a System Helps You Scale Design ���������������������������������������������������������55
Grammar: The Guidelines of Your System �����������������������������������������������������������56
Different Types of Guidelines �������������������������������������������������������������������������57
Contextual Rules ��������������������������������������������������������������������������������������������58
iv
TTaabbllee ooff CCoonnTTeennTTss
Design Principles ������������������������������������������������������������������������������������������������59
Defining Design Principles ����������������������������������������������������������������������������59
A Practical Guide to Creating Your Own ���������������������������������������������������������60
A Shared Language ���������������������������������������������������������������������������������������������62
Tying It All Together ���������������������������������������������������������������������������������������������62
Chapter 5: Implementing Your System �����������������������������������������������63
Assessing Your Organization �������������������������������������������������������������������������������63
Type of Organization ��������������������������������������������������������������������������������������64
Stakeholder Buy-In ����������������������������������������������������������������������������������������65
Team Size ������������������������������������������������������������������������������������������������������65
Gathering a Support System �������������������������������������������������������������������������������66
Assessing Your Product ���������������������������������������������������������������������������������������67
Utilize an Interface Inventory �������������������������������������������������������������������������67
Creating a Predictable Architecture ��������������������������������������������������������������������68
Categorizing to Improve Discoverability ��������������������������������������������������������69
Card Sorting ���������������������������������������������������������������������������������������������������70
Layout �����������������������������������������������������������������������������������������������������������������71
Spacing ����������������������������������������������������������������������������������������������������������71
Grid ����������������������������������������������������������������������������������������������������������������73
Styles ������������������������������������������������������������������������������������������������������������������74
Creating a Typographic System ���������������������������������������������������������������������75
An Accessible Color System ��������������������������������������������������������������������������76
Uniform Iconography �������������������������������������������������������������������������������������78
Components ��������������������������������������������������������������������������������������������������������79
Creating a Component Library �����������������������������������������������������������������������79
Tooling �����������������������������������������������������������������������������������������������������������79
Building Components ������������������������������������������������������������������������������������80
v
TTaabbllee ooff CCoonnTTeennTTss
Regions ���������������������������������������������������������������������������������������������������������������81
Content ����������������������������������������������������������������������������������������������������������������82
Usability ��������������������������������������������������������������������������������������������������������������82
Accessibility ��������������������������������������������������������������������������������������������������83
Internationalization ����������������������������������������������������������������������������������������84
Technical Implementation �����������������������������������������������������������������������������������84
A Single Source of Truth ��������������������������������������������������������������������������������84
Incremental Implementation �������������������������������������������������������������������������85
Documentation ����������������������������������������������������������������������������������������������������86
Establish a System That Self-Documents ������������������������������������������������������87
Searchability ��������������������������������������������������������������������������������������������������88
Tying It All Together ���������������������������������������������������������������������������������������������88
Case Studies ��������������������������������������������������������������������������������������������������89
Chapter 6: Measure and Maintain ������������������������������������������������������93
Measuring Effectiveness �������������������������������������������������������������������������������������93
Gathering Data Through Goal-Setting ������������������������������������������������������������94
Gathering Data Through Surveys �������������������������������������������������������������������96
Maintaining Your System in the Face of Growth ������������������������������������������102
Iterating on Components and Guidelines ����������������������������������������������������������106
Making Room for Revisions �������������������������������������������������������������������������106
Utilizing Research ����������������������������������������������������������������������������������������107
Communicating Changes �����������������������������������������������������������������������������108
Tying It All Together �������������������������������������������������������������������������������������������108
Chapter 7: A GitLab Case Study ��������������������������������������������������������111
Background �������������������������������������������������������������������������������������������������������111
Problem �������������������������������������������������������������������������������������������������������������112
Our Roles�����������������������������������������������������������������������������������������������������������112
vi
TTaabbllee ooff CCoonnTTeennTTss
Sarrah ����������������������������������������������������������������������������������������������������������113
Taurie �����������������������������������������������������������������������������������������������������������114
Challenges ��������������������������������������������������������������������������������������������������������115
Misconceptions and Buy-In �������������������������������������������������������������������������115
Resourcing���������������������������������������������������������������������������������������������������117
Tooling ���������������������������������������������������������������������������������������������������������120
Structure and Setup ������������������������������������������������������������������������������������121
Component Redundancy: Buttons, Badges, Labels, Tags, Oh My! ���������������123
Communicating Value ����������������������������������������������������������������������������������125
Lessons Learned �����������������������������������������������������������������������������������������������127
Next Steps ���������������������������������������������������������������������������������������������������������128
Marketing ����������������������������������������������������������������������������������������������������128
Less Reliance on Design Tools ��������������������������������������������������������������������130
Tying It All Together �������������������������������������������������������������������������������������������130
Chapter 8: Design Systems As a Resource ���������������������������������������133
The Role of Open Source �����������������������������������������������������������������������������������133
Researching Other Systems ������������������������������������������������������������������������������134
Commonalities ���������������������������������������������������������������������������������������������135
Differences ��������������������������������������������������������������������������������������������������136
Tying It All Together �������������������������������������������������������������������������������������������139
Index �������������������������������������������������������������������������������������������������141
vii
About the Authors
Sarrah Vesselov is a designer and developer
with more than 10 years’ experience in
web design and development. As the UX
manager at GitLab, she helped set the overall
direction of UX from a design and application
experience perspective. Before landing at
GitLab, she was lead UX designer and UI
developer at Nitro Solutions and UI/UX
manager at Mad Mobile, building beautiful
experiences for clients including Aeropostale,
Payless, Sysco, Talbots, and AutoNation. She
served as Director of the Tampa chapter of Women Who Code for several
years and is passionate about teaching and mentoring the next generation
of tech.
Taurie Davis is a UX and product designer
who specializes in applying user-centered
design methods to create cohesive, intuitive,
and compelling experiences. In her role
as Staff UX designer at GitLab, she actively
contributed to their design system as a primary
maintainer. Her experience includes working
with startups and mentoring designers around
the world. She is passionate about the open
source community and growing open design
practices.
ix
About the Technical Reviewer
Bermon Painter has spent the past 20 years
focusing on product strategy, design, and web
development across a handful of industries.
In his current role at EY Digital, Bermon leads
innovation initiatives that help organizations
create holistic experiences, digital products,
and services, with an eye toward delivering
value to customers. Bermon is also responsible
for building and staffing the EY wavespace™
in Charlotte, a physical innovation space equipped with accelerator
programs, co-creation activities, and facilitated design thinking sessions
that help teams get in the mindset of approaching challenging problems
differently, reinforcing the value of diverse thinking, and creating solutions
through rapid prototyping.
As the innovation and strategy lead at EY digital, Bermon applies
his expertise in experience strategy, design thinking, agile and lean
methodologies, and interface design and development. He frequently
speaks at conferences and facilitates workshops around the world. In his
local community, Bermon organizes and hosts numerous free community
events, hosts a quarterly mini- conference called FusionConf, and leads the
Charlotte IxDA chapter.
Before joining EY, Bermon led various cross-discipline teams
that crafted holistic product strategies all the way to end-to-end
implementation of digital products and services. His claim to fame is
having designed the Sass logo. In his free time, he enjoys drinking a tasty
frosted mug of root beer while maniacally twisting his mustache.
xi