Building Design Systems: Unify User Experiences Through A Shared Design Language Sarrah Vesselov Download PDF
Building Design Systems: Unify User Experiences Through A Shared Design Language Sarrah Vesselov Download PDF
com
https://textbookfull.com/product/building-design-
systems-unify-user-experiences-through-a-shared-
design-language-sarrah-vesselov/
https://textbookfull.com/product/fundamentals-of-user-centered-design-
brian-still/
textbookfull.com
https://textbookfull.com/product/level-design-processes-and-
experiences-1st-edition-totten/
textbookfull.com
https://textbookfull.com/product/curriculum-planning-with-design-
language-building-elegant-courses-and-units-1st-edition-ken-badley/
textbookfull.com
https://textbookfull.com/product/yearbook-on-space-
policy-2017-security-in-outer-space-rising-stakes-for-civilian-space-
programmes-edward-burger/
textbookfull.com
https://textbookfull.com/product/alaska-kingdom-1st-edition-aaron-
crash/
textbookfull.com
https://textbookfull.com/product/toxins-and-other-harmful-compounds-
in-foods-1st-edition-sikorski/
textbookfull.com
https://textbookfull.com/product/an-earthly-paradise-trade-politics-
and-culture-in-early-modern-bengal-first-edition-raziuddin-aquil/
textbookfull.com
Educating Science Teachers for Sustainability 1st Edition
Susan K. Stratton
https://textbookfull.com/product/educating-science-teachers-for-
sustainability-1st-edition-susan-k-stratton/
textbookfull.com
Building
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
iii
Table of Contents
iv
Table of Contents
Design Principles������������������������������������������������������������������������������������������������59
Defining Design Principles����������������������������������������������������������������������������59
A Practical Guide to Creating Your Own���������������������������������������������������������60
A Shared Language���������������������������������������������������������������������������������������������62
Tying It All Together���������������������������������������������������������������������������������������������62
v
Table of Contents
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
vi
Table of Contents
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
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.
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
Visit https://textbookfull.com
now to explore a rich
collection of eBooks, textbook
and enjoy exciting offers!
Acknowledgments
Sarrah and Taurie would like to thank the designers we worked alongside
and from whom we learned so much about building design systems: Pedro
Moreira da Silva, Dimitrie Hoekstra, Chris Peressini, Matej Latin, Hazel
Yang, Jeethu Karthik, and Annabel Dunstone (who pulled double duty
between design and front-end).
Thank you to Simon Knox, Winnie Hellmann, and Clement Ho. Your
excitement kept our momentum going, and the engineering support was
invaluable.
Thank you to Bermon Painter. Your insight made this book that much
stronger.
We would like to acknowledge the many industry professionals out
there writing and speaking about their work on design systems. When
we were first starting our own design systems, your perspective was
indispensable and inspired us to share our personal stories and insights
here in this book.
Sarrah: Special thanks to my husband, Daniel Urdzik. Without you
there to feed me and make me take breaks, I may have died while writing
this book. Thank you to my sons, Ni and Maxim Vesselov, for vacating the
premises until this book was complete. You can come back now.
Taurie: Special thanks to Lucas Charles for being my constant
sounding board, reading and editing chapters countless times, making me
endless meals, and giving your full support throughout this entire process.
Thank you to Marla Davis for always listening. And last, thanks to Sarrah
for sharing this journey with me.
xiii
Introduction
When you first begin building a product, the work is fast-paced and
exciting. Most of your time is spent heads down, meeting deadlines.
The problems you are solving become more evident as you gain a better
understanding of the user base. As your comprehension grows, ideas
and solutions are formed. Each member of the team has a part to play in
crafting the user experience of that product.
The Designer: You have a system for housing design files, but they aren’t
easily accessible to product managers and developers. Collaborating with
those outside of the design department is time-consuming. Screenshots
and exported artboards are shared back and forth, and there are constant
updates and tweaks required. With no overarching guidelines for your
work, you find yourself defending the same choices and solutions over and
over again. Looking for the right design file becomes a sport, and it can be
hard to remember who worked on what. To make matters worse, you don’t
feel like you have any real input into the product road map. By the time you
become involved, the product manager is focused on a solution rather than
the problem being solved.
The Front-end Engineer: Much of your time is spent on developing
the same code solutions within different contexts. You try to provide
feedback to the design team, but it often feels as though you not only
work in different departments, you work on different planets. You don’t
have access to design files and don’t have much insight into the why or
how behind the decisions the design team is making. You are noticing
inconsistencies in the text, color, and spacing across screens, and the code
is a mess.
xv
Introduction
The Product Manager: There is a lot of pressure from users and other
stakeholders to deliver. The road map is long, and the resources are small.
It feels as though there aren’t enough designers and developers available
to handle all the work that needs to be done. There are lots of minor
problems you think you can solve on your own, but you don’t want to step
on anyone’s toes. It would be great if the design department could give
more input on the road map and vision for the product, but you know they
are stretched thin.
Somehow, amid all of this chaos, you need to provide users with a top-
notch user experience.
If this sounds familiar, don’t worry; you are not alone. As products,
teams, and organizations scale, it becomes more difficult to maintain
speed and efficiency without a concerted effort. In this book, we will show
you how, and when, a design system can be used to solve the problems
faced by teams building one product or many.
Design systems offer a way for organizations to build products at scale.
Don’t let the name fool you; design systems are not just for designers. They
benefit the entire organization and offer a foundation for collaboration
and innovation. Design systems are a collection of shared principles and
practices that help to inform the work of designers, product managers,
and engineers, as well as sales and marketing. They offer a single source
of truth and are the guiding light for the design and development of a
product’s user experience.
Why design systems and why now? Design systems are not new.
They are the descendant of the traditional graphic standards manual.
These printed manuals were a practical way to relay design guidelines for
corporation and organizations before the advent of the Internet. Often
hefty, these manuals provided the governing principles and practical
guidelines for applying a visual language across all areas of a company.
Design systems are the natural evolution of the graphic standards
manual for today’s organizations. They are the result of the need to
coordinate and align the different disciplines necessary to bring digital
xvi
Introduction
xvii
Introduction
Next, you will learn how to think about design systems as a shared
language. You will learn how to create the building blocks and guidelines
for your language. This can be done by breaking interfaces down into their
simplest forms, as well as by building elements to create larger interfaces.
We will show you how to create design principles that you can use to craft
your unique design language. These principles will address both user
needs and organizational goals.
Implementing your design system can be one of the most difficult
hurdles to overcome. We will show you how to assess your organization
before attempting to build your system. You’ll learn why the type of
organization you work for can affect your approach. You’ll be given the
tools to assess the current state of your product, to help determine the
structure that best suits your organization’s needs. Case studies help put
the unique challenges you are facing into sharper focus.
Iterating on your system will be critical to its future success. Your design
system cannot be created and then set aside. You will have to understand
how to maintain and scale it as your product and organization changes.
Measuring and tracking results will be vital for your stakeholders. We will
show you how to maintain momentum through established process, goal
setting, and evangelizing your system across your organization.
Finally, we provide you with a detailed case study on the development
of GitLab’s design system. This case study digs deeply into our roles
in building the system, the challenges we faced, and the successes we
experienced. An additional chapter audits some of the most popular
design systems out there today, giving you insight into the many different
methods for structuring your system. Having real-world experiences
and resources to draw from will make building your system more
straightforward.
Starting your own design system is exciting and daunting. We hope
that this book will help make the challenges of building a design system a
little less intimidating and a lot more exciting. Let’s get started!
xviii
CHAPTER 1
2
Chapter 1 The Rise of Design Systems
3
Chapter 1 The Rise of Design Systems
4
Chapter 1 The Rise of Design Systems
You may be thinking, How does this relate to design systems? What
am I missing? These two crucial periods in art history centered on the
idea of a unified design language, with guidelines for patterns and
elements that should be followed. They were a fundamental influence
on the evolution of modern graphic design, desktop publishing, and,
eventually, web design.
5
Visit https://textbookfull.com
now to explore a rich
collection of eBooks, textbook
and enjoy exciting offers!
Chapter 1 The Rise of Design Systems
Figure 1-3. The Yahoo! home page from 1996 shows an example of
an early website lacking CSS styling
This all began to change in the mid-1990s, as more and more people
had access to personal computers and the Internet. Ultimately, this meant
that the Web grew in popularity as the place for electronic publishing.
Web authors grew increasingly frustrated by the stylistic limitations of
HTML. Browsers, recognizing the opportunity this presented, began
exploring ways to give authors more control over their pages.
The first proposal for CSS was presented in 1994 and spurred a
lot of discussion. Surprisingly, much of the conversation revolved
around who should control how a page would be viewed. On the one
side, many felt that authors should determine the final presentation,
ensuring that it matched their intention and vision. On the other side,
some believed that users should have the ability to decide how they
would like to view a page (think in terms of things such as preferred
font size). These debates spurred the creation of the World Wide Web
Consortium (W3C), to help work out standards and best practices
for the Web, and, ultimately, HTML and CSS. This was an essential
development in the trajectory of the Internet. Without the W3C to unify
and make recommendations, each browser could potentially support a
different HTML specification.
6
Chapter 1 The Rise of Design Systems
T echnological Advancements
Fast forward a couple of years, and lots of debate, to 1996, when CSS
was officially introduced. Microsoft’s Internet Explorer was the first
browser to support the new technology, with Netscape following close
behind.2 The competition was both good and bad. Good, because
browsers were now competing with one another to support Web
standards. Bad, because it caused significant pain points for anyone
building for the Web. Even as browsers began to support standards,
that support was not the same. Each browser implemented CSS in its
unique way, causing many inconsistencies. The only thing you could
count on was the fact that your webpage would not look the same from
browser to browser.
T able-Based Design
As the Web grew, so did the need for better user experience. Graphic
designers began to play with this new medium, applying the fundamentals
of layout and grid techniques used in print. Even with the adoption and
spread of CSS, designing on the Web in these early days was painful and
limited. Web layouts were being developed using tables, and there was a
lack of control when customizing layouts using HTML and CSS. If you are
unfamiliar with tables in HTML, it is the same concept as creating a table
inside a Word document. Now, imagine trying to implement a complicated
design interface using only images inserted inside table data cells. Some
obvious problems arise. Table cells in the same row cannot be different
heights, and table cells in the same column cannot be different widths.
Web designers had to get very creative, using complicated workarounds of
sliced Photoshop images, tables inside of tables, and hidden text, among a
variety of other hacks.
2
ert Bos, “A Brief History of CSS Until 2016,” https://www.w3.org/Style/CSS20/
B
history.html, December 17, 2016.
7
Chapter 1 The Rise of Design Systems
3
RY stands for “Don’t Repeat Yourself” and is a term used in software
D
engineering. The aim is to reduce repetition and avoid redundancy.
8
Chapter 1 The Rise of Design Systems
9
Chapter 1 The Rise of Design Systems
between 1990 and 1997.4 Computers were no longer a luxury; they were
a necessity. Organizations immediately recognized the potential of this
new information technology market. Many companies were founded
during what is known as the dot-com boom. This increase in demand for
technology caused a flurry of excitement and a sense of urgency to build
bigger, better websites and software products as quickly as possible.
4
.S. Department of Labor, Bureau of Labor Statistics, “Issues in Labor Statistics,”
U
https://www.bls.gov/opub/btn/archive/computer-ownership-up-sharply-
in-the-1990s.pdf, March 1999.
5
Kent Beck et al., “Manifesto for Agile Software Development,” https://
agilemanifesto.org/, 2001.
10
Random documents with unrelated
content Scribd suggests to you:
"Never mind, my lad; you have done your best, and no
man can do more. If you have failed, it is an honourable
failure, and you must try again next year, you will still be
eligible as to age."
But Tom shook his head. "If I have failed, sir, I must go
to work, and do something to help mother; I cannot stay at
school another year. I am afraid Elsie is going to be ill now,"
he added.
"Is Elsie ill? Is that why she has not been to see me the
last two days?" asked Mary, eagerly and anxiously.
But Mrs. Murray would not hear of it. She would call and
ask Mrs. Winn how she was in the evening; and if it was
fine, she should perhaps go round and see her the next day,
but that was all she would concede.
"Stay and have some tea with us," said Mr. Murray. "You
look as though you would be ill yourself, if you did not have
something soon. Did you have comfortable lodgings, my
lad?"
But Tom said quickly, "It's true enough, Betsy. They set
me to do some pruning and grafting, and I did it the way
you showed me, while some of the fellows made a dreadful
muddle of it. I did that part of the exam. well, I know, for
the examiner told me so; that, you see, I may scramble
through, thanks to your lesson."
So, between eating and talking, Tom did not get home
until nearly eight o'clock. The children had gone to bed, but
he was surprised to see his mother sitting up, with scarcely
a spark of fire in the grate.
CHAPTER XVII.
TOM'S SCHOLARSHIP.
The immediate result was all that Tom could desire. She
came running downstairs before he could get up to them,
and threw herself into his arms, shouting, "Oh, Tom! Tom! I
am so glad, I am so glad."
"Tom has told us, and it was such a sudden joy to Elsie,
that it was more than she could bear," said the widow.
Elsie was more quiet now, but lay back in the chair
looking very white and exhausted, though she managed to
smile when Mary went and took her hand. "I am so glad,"
she feebly whispered.
"Very well, I will go and see Elsie at once; but you must
go home, for you are looking tired. Go home and lie down
for the rest of the day, or the back will be bad again, and I
know that would be a disappointment to everybody. I will
call and let you know how your friend is, if you are an
obedient girl," said the doctor, smiling.
"I will go home at once," said Mary, and the doctor went
on to the cottage.
"Oh yes, certainly," said Mrs. Winn; and the next minute
the doctor was at Elsie's bedside.
The widow felt choked. All that the doctor said was true
enough she knew, but she did not like to hear it put into
such plain language.
"Very ill!" repeated the doctor. "Why, you can see for
yourself that she cannot live long if there is not a change in
her condition very soon. Think now, Mrs. Winn, whether you
have no friend or relative to whom you can apply. I tell you
the girl's life depends upon it. She has borne her share of
the struggle as long as she can, and borne it bravely. But
her power of endurance is exhausted, for she is but a child
after all; and so, if you do not wish to see her die of
starvation, you should at once seek help from friends or
relatives. Surely you or your husband must have somebody
who would be willing to do something for you."
"Well, that is over and done with now, and you are left a
widow with these children dependent upon you. Surely, if
your sister knew how you were placed, she would deem it
her duty to do what she could to help you."
But Mrs. Winn could only shake her head. "I must look
for it," she murmured.
"Of course not; that was quite right. And while your
husband lived, and could work for you, you did not need
their help. But now, for your children's sake, it is your duty
to overcome this angry feeling, and the pride that makes
you wish to hide your poverty from those whose duty it is to
help you. That is how you should look at it, Mrs. Winn. You
have a brave little daughter, who did not shrink from doing
her duty, when she knew what it was; though it must have
been a hard pinch to give up that scholarship, and all it
meant to her. Now she has done this, you should do your
duty for her, and ask this wealthy sister to do hers. For if
she has the means, she ought to help you, because you are
her sister, and need it; and both ought to forgive and forget
the past, with its pride and bitterness, and all that grew out
of that, and the wilfulness too."
Mrs. Winn did not know herself how strong this pride
and resentment was in her, until after the doctor had gone;
and she went upstairs and unlocked her desk, to find a
letter that had her sister's address. Then, as it seemed to
her, the love and reverence she felt for her husband's
memory, rose up to forbid her writing to one who never
understood his worth, or spoke a kind word of him. And she
almost resolved to tear up the letter, and put it out of her
power, or Dr. Perceval's either, to let her sister know the
straits to which she was reduced.
But just then Elsie called her from the next room, and
she ran in to see what she wanted. "Oh, mother, I should
like a cup of coffee and a piece of nice brown buttered
toast," said the girl.
"Coffee and buttered toast, Elsie," said her mother.
Poor Elsie had eaten very little for the last week. She
had refused everything they had offered her, and now this
cry for coffee and brown buttered toast wrung her mother's
heart.
"You shall have it, dear; you shall have it," she said. "I
will get some for you very soon."
But the next day passed, and the next, and there was
no postman called at the cottage. In vain Mrs. Winn
watched and waited by the window for him, and then at the
gate. The postman went past without stopping; and when
she asked if he had no letter for her, he said with a shake of
the head, as though she was a child, "None to-day."
"I am very glad to hear it, very glad," said the doctor;
"for now the lad will be no expense to his mother, and be in
the way of learning a good business."
"Yes, and just the very one he likes best of all," said
Mary. "It is a better scholarship than Elsie's, and Tom won't
have to give it up as Elsie did."
"Very well, let that be the limit of your walks for the
present, and rest a bit there and have a chat with your
friend before you come back; that is the best advice I can
give you. I have told Elsie she must stay in bed a few days;
but you can help her as she helped you, and by-and-bye we
shall see what we shall see," added the doctor, for he had
no doubt that help would speedily be sent to the widow
from her wealthy sister. And he did not hear for some days
that no answer came to the widow's letter.
CHAPTER XVIII.
CONCLUSION.
"Well, I fancy it's about the lessons. You see, old fellow,
they haven't been up to the mark lately. You haven't been
exactly the pattern boy with the lessons this half; and it
won't do, you know, for Staples to lose his pattern boy," he
added, with a laugh.
He really felt thankful that Dr. Staples did not ask him
what he was thinking of that his papers were so badly done.
If he had asked this question, the lad would doubtless have
looked very self-conscious, and the doctor would have
thought that there was some mischief afoot among the
boys, which Herbert had been warned not to tell. Certainly,
the matter that occupied his mind could not be disclosed to
the doctor.
He could not tell anyone about it, and his mother had
forbidden him to write to her about it; and yet the thought
pressed upon him continually, that this unknown aunt was
in sore need of the money that had been left by his father
for her benefit. If he could only have imparted his fears and
anxieties to his mother, she would certainly have pushed
her enquiries a step further, and discovered whether this
Mrs. Winn he had heard about was indeed his aunt, and
made sure that she was well provided for. Now it seemed
that he must put away all thought of these unknown
relatives, and leave them to their fate; for he was
neglecting his nearest duty—his school duty; and so, as he
walked away from the study to the large schoolroom, he
determined to put away resolutely all thought of this Mrs.
Winn, until he should return home at Christmas; and having
made this resolution, he kept to it, and bent his whole
energies to make up for the time he had wasted.
"I say old fellow, you don't look very bright this
morning."
"Oh, papa, hasn't Mrs. Winn heard from her sister yet?"
The party round the table stared with open eyes and
mouths at Herbert, until their mother, out of pity for their
guest, sent all of them from the room but Edward—he still
stood by Herbert's chair, until he recovered himself
sufficiently to be able to speak.
They could both see that their guest was very anxious
to ascertain whether the doctor's patient was his relative.
And they both came to the same conclusion, that it would
be best, to satisfy this curiosity with as little delay as
possible.
For Mrs. Winn had told her that she had had no
communication with her sister since she had been married.
Mrs. Perceval told Herbert all she knew about the family
who had come to Fairfield as strangers a few months
before; and what a brave struggle Mrs. Winn had made to
maintain her family, until her eldest was taken ill, and then
she seemed to be quite crushed with the hopelessness of all
the efforts she was likely to be able to make here.
"I don't think she has had any communication with her
friends for years; and it was only at my husband's
persuasion, and for the sake of her children, that she
consented to write and let this sister know of her great
distress."
THE END
*** END OF THE PROJECT GUTENBERG EBOOK ELSIE'S
SCHOLARSHIP ***
Updated editions will replace the previous one—the old editions will
be renamed.
1.D. The copyright laws of the place where you are located also
govern what you can do with this work. Copyright laws in most
countries are in a constant state of change. If you are outside the
United States, check the laws of your country in addition to the
terms of this agreement before downloading, copying, displaying,
performing, distributing or creating derivative works based on this
work or any other Project Gutenberg™ work. The Foundation makes
no representations concerning the copyright status of any work in
any country other than the United States.