100% found this document useful (3 votes)
412 views62 pages

Building Design Systems: Unify User Experiences Through A Shared Design Language Sarrah Vesselov Download PDF

Building

Uploaded by

lijayagulsim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (3 votes)
412 views62 pages

Building Design Systems: Unify User Experiences Through A Shared Design Language Sarrah Vesselov Download PDF

Building

Uploaded by

lijayagulsim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

Download the full version of the textbook now at textbookfull.

com

Building Design Systems: Unify User


Experiences through a Shared Design Language
Sarrah Vesselov

https://textbookfull.com/product/building-design-
systems-unify-user-experiences-through-a-shared-
design-language-sarrah-vesselov/

Explore and download more textbook at https://textbookfull.com


Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.

Fundamentals of User-centered Design Brian Still

https://textbookfull.com/product/fundamentals-of-user-centered-design-
brian-still/

textbookfull.com

Level design : processes and experiences 1st Edition


Totten

https://textbookfull.com/product/level-design-processes-and-
experiences-1st-edition-totten/

textbookfull.com

Curriculum Planning with Design Language Building Elegant


Courses and Units 1st Edition Ken Badley

https://textbookfull.com/product/curriculum-planning-with-design-
language-building-elegant-courses-and-units-1st-edition-ken-badley/

textbookfull.com

Pro linux system administration Learn to build systems for


your business using free and open source software
Lieverdink
https://textbookfull.com/product/pro-linux-system-administration-
learn-to-build-systems-for-your-business-using-free-and-open-source-
software-lieverdink-2/
textbookfull.com
Yearbook on Space Policy 2017 Security in Outer Space
Rising Stakes for Civilian Space Programmes Edward Burger

https://textbookfull.com/product/yearbook-on-space-
policy-2017-security-in-outer-space-rising-stakes-for-civilian-space-
programmes-edward-burger/
textbookfull.com

Physics with Photons Using the ATLAS Run 2 Data


Calibration and Identi■cation Measurement of the Higgs
Boson Mass and Search for Supersymmetry in Di Photon Final
State Stefano Manzoni
https://textbookfull.com/product/physics-with-photons-using-the-atlas-
run-2-data-calibration-and-identi%ef%ac%81cation-measurement-of-the-
higgs-boson-mass-and-search-for-supersymmetry-in-di-photon-final-
state-stefano-manzoni/
textbookfull.com

Alaska Kingdom 1st Edition Aaron Crash

https://textbookfull.com/product/alaska-kingdom-1st-edition-aaron-
crash/

textbookfull.com

Toxins and other harmful compounds in foods 1st Edition


Sikorski

https://textbookfull.com/product/toxins-and-other-harmful-compounds-
in-foods-1st-edition-sikorski/

textbookfull.com

An Earthly Paradise Trade Politics and Culture in Early


Modern Bengal First Edition Raziuddin Aquil

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

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 [email protected], 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 [email protected], 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
Table of Contents

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
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

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
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

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
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

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
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

products to life. These systems do more than merely convey design


guidelines such as typeface, logo, or color standards. They unite designers,
developers, and product managers along a set of core principles while
enabling their work through reusable components.
Throughout our careers, we have been involved in developing many
different systems for design. We have watched the evolution from a simple
collection of patterns and styles to today’s robust systems containing
principles, design, and code. Within this book, we’ve combined our
mistakes and successes, in order to share what we have learned every step
of the way.

What We’ll Cover


We begin by looking at the history of systems in design to gain perspective
on how this has affected the design systems of today. You’ll learn about
the intersection of art, technology, and industry during the early days
of the Web and examine the technological advancements that led to the
prevalence of CSS and JavaScript in the digital landscape. You’ll come to
understand why design systems have risen in popularity and how they
align with and are influenced by, development best practices.
Next, we will focus on the six interlocking areas that make up a design
system; layout, styles, components, regions, content, and usability. You’ll
learn how these parts work together to create a robust system. We will
help you to understand whether it is the right time to implement a design
system and, if it is, how to avoid common failures.
Getting support from key stakeholders will be essential. You’ll learn
about the three target audiences for your system and how to gain their
support. You will have to understand how your peers, your overall
organization, and the users of your product benefit from a design system,
in order to form the necessary allies for your effort. We will also show you
how to use qualitative and quantitative data to measure the benefits.

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

The Rise of Design


Systems
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.
If you’re reading this book, chances are you don’t have to be
convinced of the value a design system can bring to your organization.
You already know it can make your life and work easier. You believe
that consistent design will improve the user experience. You are sure
that having established guidelines and usability patterns will enhance
communication between team members and simplify the interface for
end users.
What you may not be sure of is how to start implementing
your design system with the full support of colleagues and upper
management. We wrote this book to provide you with the tools necessary
to successfully communicate the value a design system can bring
to your organization. You will also learn how to establish your own
design language, define usability patterns, and create a comprehensive
component library.

© Sarrah Vesselov and Taurie Davis 2019 1


S. Vesselov and T. Davis, Building Design Systems,
https://doi.org/10.1007/978-1-4842-4514-9_1
Chapter 1 The Rise of Design Systems

Articles, books, and talks discussing the importance of design


systems are rising in popularity (yes, we sense the irony). It may be
tempting to write them off as just another design fad that will burn out
when the next big thing comes along. However, design systems are not
new. Humans have been organizing and categorizing the world around
them since the beginning of time. Organization gives us a sense of
control and order. Order creates feelings of security and predictability.
For some, this predictability feels limiting, something counterintuitive
to the vision of creativity and expression. When applied to the world of
technology and application design, however, this predictability is freeing,
as it removes the need to continuously reinvent the same solutions. By
automating and documenting routine tasks, designers have more time
for thinking and exploration.
All design systems start the same: as an attempt at making order out
of chaos. Categorizing and organizing elements makes them easy to find
and replicate. It is a necessary utility, born from the tech industry’s need to
move fast and innovate even faster. However, design systems are so much
more than this. They define the language we use to create new elements
and experiences.

A History of Systems in Design


Looking back to the Bauhaus and Swiss design movements, you can
begin to see what could be viewed as the foundation for today’s design
systems. The Bauhaus movement (1919–33) revolved around the idea that
“form follows function.” Rather than focusing on decorative elements, the
primary facet was functional simplicity. The notion that all the parts on a
page must have a function led to a focus on proportions, grids, and color
theory. An example demonstrating principles from the Bauhaus design
movement is shown in Figure 1-1.

2
Chapter 1 The Rise of Design Systems

Figure 1-1. Bauhaus-inspired design by Amna Zulfqar

3
Chapter 1 The Rise of Design Systems

The Swiss Style, also known as the International Typographic Style,


(1950s–60s) took grids a step further and shifted the focus to asymmetry and
clean sans-serif typefaces.1 Figure 1-2 shows an example of the Swiss Style.

Figure 1-2. Swiss Style–inspired design by Amna Zulfqar


1
 une Madsen, “A History of Design Systems,” http://printingcode.
R
runemadsen.com/lecture-intro/.

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.

 Intersection of Art, Technology,


The
and Industry
Design systems are more than the latest fad; they are a natural evolution in
the intersection between art, technology, and industry. Critical factors in
this evolution have been:

• The rise of personal computers and the Web.

• Technological advancements in Web development


(CSS, JavaScript).

• The influence of technology on business.

• The shift from waterfall to Agile methodologies.

The Rise of the Web


The early days of the Internet were dark for design. Websites were little
more than glorified Word documents. In these earlier times, the Web
was built using only HTML. CSS did not yet exist, and it was left up to
individual browsers to determine how a webpage would be displayed. An
early webpage design lacking CSS styling is shown in Figure 1-3.

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

In reaction to table-based layouts, Flash emerged as the gateway


program for many graphic designers on the Web. The difficulties posed
by the limitations of table-based design presented an opportunity for
programs such as Flash to make web applications easier to design. The
Flash interface allowed designers to use graphical user interface (GUI)
tools to develop rich interactive experiences. It had a profound influence
on the Web, raising the bar for design and prompting the development of
HTML5, which, in the end, led to Flash’s eventual demise.

The Rise of CSS and JavaScript


By 2002, the notion of “table-less design” was beginning to gain
momentum. Rather than relying on tables for positioning the elements
of a page, CSS had advanced enough to do the job more efficiently. This
opened designers up to experimenting with a variety of creative and
increasingly complex layouts.
Up until this time, many websites were built page by page. Elements
such as the header, footer, and menu were copied and pasted across
every page. Change something on one page, and you would have to go to
every other page to make the same change. As the complexity and scale of
websites increased, performance, scalability, and maintainability became
real concerns.
We haven’t talked much about JavaScript up to this point. While it
has been around for 19 years, its acceptance as one of the pillars of Web
development was slow in coming. It gained momentum in the mid-2000s
and began to be more heavily relied on for both client-side and server-side
development. JavaScript was used to enhance interactivity, performance,
and make sites DRY(er).3 These enhancements opened the floodgates for
more complicated and interactive design on the Web.

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

JavaScript also helped to change the way we approach building


websites. JavaScript allowed developers to build components rather
than entire pages, as demonstrated in Figure 1-4. Components are like
Lego bricks that can be moved around to reimagine almost any interface.
Reimagining pages and even whole sites became faster and easier. The
pace of development picked up quickly, allowing companies to innovate
and deliver faster than ever before.

Figure 1-4. Page-based design vs. component-based design

This component-based approach is now being adopted by designers


on the Web. Design deliverables have changed from whole-page layouts to
pieces of the whole. Doing this has its risks. It is easy to get caught up in the
details and fail to see the bigger picture. This is where a design system can
make all the difference. Defining paradigms makes it easier to keep things
consistent and manageable. Well-defined paradigms make everything
faster, from design to implementation.

The Influence of Technology on Business


The Internet grew fast, and the number of people buying computers for
personal use rose. According to a report from the U.S. Department of
Labor, computer ownership in the United States rose from 15% to 35%

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.

The Move to Agile


The traditional waterfall method of software development was built on
heavy process and long lead times. It could take years to get from idea to
distribution. Once locked into a concept, organizations using the waterfall
process were unable to easily change course if they found that something
simply wouldn’t work. This was because a waterfall process approached
product development in a sequential fashion. Requirements would
be handed down to designers, and designs would be handed down to
developers, leaving little room for collaboration among teams. Without this
collaboration in place, it was extremely difficult to shift directions when
problems arose later in the process.
In 2001, frustrated with the lack of progress, thought leaders gathered
to find a more efficient way to develop technology products.5 This was
the birth of Agile, a fast-delivery approach to building software. It allowed
organizations to deliver their products quickly, with full knowledge that
they may not have gotten it right the first time. They could then gather user
feedback and make improvements in rapid succession. Agile focuses on
the people building and using the software and not the process or tools it
takes to make that software.

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.

"Very likely. I have only just come in, and my news


seemed to upset her so much, that she sat down and
fainted when we got into the kitchen."

"Oh, poor Elsie; she will be disappointed if you have


failed, Tom," said Mary. "Mother, do let me go and see her,"
she added.

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?"

"Oh yes; I went to stay with a school-fellow, and he


took good care of me. Everybody has been very kind."

And then they caught sight of Betsy Gunn standing at


the gate, waiting to hear how he had fared.
"Come in a minute, Miss Gunn," said the schoolmaster,
politely.

"I'm afraid it's no go Betsy," said Tom. "But if I should


be lucky enough to scrape through at the tail end of the
rest, I shall have to thank you for that place."

Betsy's brow darkened. "Do you mean to say Betsy


would push you down to the last place?" she said.

"No, no; but if he gets a place at all, it will be you he


will have to thank for it," said the schoolmaster, laughing.

Betsy looked from one to the other to see if they were


making fun of her, as most of the village lads did.

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."

Betsy nodded and went away. She had heard enough to


satisfy her; the great gardeners at the college couldn't beat
her dad's way of grafting, and she was content.

"I only hope this part of the examination will prove a


help to you," said Mr. Murray. "It was wise of you, Tom, to
accept her help, and learn all she could teach you, for I
know nothing about pruning and grafting beyond what the
books teach. But now sit down and have some tea; we
cannot let you go until we have heard all about the papers
that were set you."

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.

This part of the family economy, he had not been aware


of until now, but he remembered to have seen it before,
and he could only say,—

"Oh, mother, has it come to this, that you must sit


without a fire?"

"Never mind, dear, let us get to bed now; I am tired,


and so are you." And she kissed and bade him good-night
as she drew him upstairs.

CHAPTER XVII.
TOM'S SCHOLARSHIP.

"MOTHER, mother, I have got it! I have won the


scholarship after all."

Tom burst in with the news about a week after the


examination, and announced it to the empty room first, for
his mother was upstairs with Elsie. She was still very poorly,
but managed to come down and do what she could to help
about the house, but by the afternoon was so tired that she
had to go and lie down again. And Mrs. Winn had just gone
up to tell her it was nearly tea time, and Tom would be
home soon, when Tom announced himself and his success
in true schoolboy fashion, without thinking of the effect it
might have upon his sister.

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."

And for a minute, he clasped her in his arms, and kissed


her, in the fullness of his joy and relief. But instead of being
content with this, Elsie clung to him more tightly, laughing
and crying by turns, until Mrs. Winn came down and led her
to a chair, when she became even worse, until Tom grew
quite alarmed, for she was soon in hysterics of laughter and
tears.

"Mother, whatever is the matter with her? She seemed


all right when she came downstairs," said Tom, in a tone of
alarm.

"Yes, yes; she was so glad, of course, at the good news,


for we have had so little lately, but the suddenness of this
has been too much for her. I am afraid she is very weak, or
she would have borne it better," his mother added.

"But why should she be so weak?" asked Tom. "Of


course, I know she has not been very well lately, and the
disappointment, when I said I was afraid I had failed, upset
her; but I thought the good news that has just come would
make her well again."

"Yes, dear, it will, I daresay, when she can quite


understand it, but the suddenness of it has upset her for
the time."

"What is the matter?" asked another voice, at this point,


and looking round, they saw Mary had come in by the back
gate, which Tom had left open. "What is the matter with
Elsie?" she asked, in some alarm. "I have just heard from
mother that Tom has won the scholarship, and came to tell
Elsie."

"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.

"Mrs. Winn, she must be very ill to be so faint as this,


just because of hearing good news suddenly," said Mary, for
Elsie had closed her eyes, and looked almost lifeless, as she
lay back in the chair.

"Yes, she is very poorly, I know," replied Mrs. Winn, and


she did not look much better than Elsie herself as she
spoke, for what would become of them if Elsie was really
going to be ill? She put the thought away from her as too
terrible for contemplation. "It is only a bad cold hanging
about her, I hope," she added, as Mary stood and looked at
the helpless girl. She tried to rouse her, but it was of no
use.

Elsie only shivered as if cold to her bones, and at last


Tom and Mrs. Winn carried her upstairs again, and her
mother resorted to the same remedies that had been used
when she had the first shock.

Meanwhile Mary said, "Tom, I want you to go with me to


look-out for Dr. Perceval. He will be in the village, I expect,
this afternoon, and my father would like to see him on
business, and I want to see him too; but I should not be
able to walk so fast as you can."
"No, indeed, that is not to be expected," said Tom. "It is
wonderful that you can walk as well as you can."

"Ah, I should not, if it had not been for Elsie," answered


Mary. "There, don't stop to talk about it now, Tom, but run
on to the corner and stop Dr. Perceval, if you see him
coming, or tell him to come and meet me here."

Tom was only just in time to catch the doctor as he


drove past in his gig, and he went at once to meet Mary.
She was still near the cottage, and when she saw him she
said, "You are wanted here, doctor. Elsie is very ill; will you
come and see her?"

"But Tom Winn said you wanted me."

"Yes, I want you to see Elsie, for I don't believe they


know how bad she really is; and then my father would like
to see you, I know, afterwards."

"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.

He found the back gate open, and went round to the


kitchen entrance, and a survey of the room gave him a clue
as to what was the matter upstairs. The tea things were
set, and about a quarter of a loaf was on the table; Bobby
and baby were standing close to it, and both were picking
crumbs from it, and eating them with the greatest relish.
There was a tiny scrap of fire in the grate, but the range
was screwed up to its narrowest capacity, telling of such
rigid economy that could not be far from actual starvation.

He knocked on the stairs, and called "Mrs. Winn," to let


her know that he was there; for he was not sure from
Mary's manner whether he had been sent for by the widow
or not, and he did not want to give her a shock by walking
up unannounced.

"I hear your daughter is very poorly. May I come up and


see her?" he said, when he heard her footsteps on the
stairs.

"Oh yes, certainly," said Mrs. Winn; and the next minute
the doctor was at Elsie's bedside.

Standing in the cold little bedroom, looking down at the


thin white face, the doctor was at his wit's end to know
what to advise the poor mother to do. But at last he said,
as cheerfully as he could, "I will send her some medicine as
soon as I get back, and she had better stay in bed for a day
or two until she gets stronger."

Then he beckoned Mrs. Winn to follow him downstairs,


and he led the way to the parlour; for Tom and the children
were in the kitchen, the little ones quarrelling as to who
should stand in front of the handful of fire.

"Now, Mrs. Winn, what is to be done?" said the doctor,


facing round and closing the door when the widow came in.
She looked at him as if she did not understand what he
meant. "You know it is not medicine that your little
daughter needs, but food, and plenty of it. Now, you have
made a brave struggle to get work here, I know, but
Fairfield is not the best place in the world for a stranger, and
I am afraid you have had a hard time of it; but now the
question is, what are you going to do? Have you no friends
who would be willing to help you a little, if it was only for a
year or two, until Tom was able to earn some money? I hear
he has won a scholarship."

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.

"You do not think Elsie is very ill?" she managed to ask


at last.

"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."

"I have a sister," gasped Mrs. Winn, "but I have not


seen or heard from her for years. Her husband is a very
proud man, and I offended both of them when I married."

"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."

"Perhaps she would. I have never thought of asking her,


for I never thought I should come to such a pass as this,"
and poor Mrs. Winn burst into tears, and sobbed
hysterically.
"There, there, you must forgive me if I seemed to speak
harshly. You must bear up, you know, or else we shall have
the little maid fretting, and that would never do."

Mr. Perceval spoke as kindly and tenderly as possible;


but Mrs. Winn was feeling weak and spent, and could not
stay her tears now she once began to cry.

"Can you tell me your sister's name, and where, she


lives, and I will send for her to come to you?"

But Mrs. Winn could only shake her head. "I must look
for it," she murmured.

"Well, mind you have it ready for me by the time I come


to-morrow. Now, put away all false pride in the matter, and
try to think that your sister would be glad to help you, if she
only knew that you were in such straits. For if we will not let
our friends know that we are in need of their assistance,
how are they to do their duty? Try to think of it this way,
Mrs. Winn,—that by keeping your trouble to yourself, as you
are doing, you are denying to your sister a right she
possesses to be your helper; that is, of course, if she is
likely to be in a position to help you."

"Oh, yes; her husband was a wealthy man. That was


how the trouble began between us. She made what the
world called a good match. Her husband had plenty of
money when she married, while I—well—everybody said, I
married beneath me, because my dear husband was only a
clerk."

"Ah, well, there might have been faults on both sides,


Mrs. Winn. Your friends might think you were wilfully
rushing into poverty."
"That's what they said," interrupted the widow; "and
that is why I have kept out of their way. I did not want
them to know that we got a little poorer every year."

"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.

"Yes, I am so tired of tea. You see we have to make it


over and over again with the same tea leaves, that there is
no taste in it."

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."

And she went downstairs and wrote a few lines to her


sister, telling her that her husband was dead, and her
children almost starving; and then Tom was sent with it to
the post. She never dreamed but that she would receive a
reply and some money in the course of a day or two, unless
her sister came to her, which she might do.

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."

The doctor went from Mrs. Winn's to the schoolmaster's


cottage to see Mary, and hear all about Tom's scholarship,
for he had only heard the bare fact from Tom himself as he
stopped the gig.

"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."

"No, indeed, I hope not," said the doctor. "Now let us


hear a little about yourself, Miss Mary," he added.

"She is getting on wonderfully well," said the


schoolmaster; while Mrs. Murray said, in a quieter tone,
"She certainly seems better in health than she has been for
a long time."

"I can walk as far as Mrs. Winn's without feeling a bit


tired," said Mary.

"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.

"MILNER, Dr. Staples wishes to see you in his study."


This was the message brought to Herbert one morning
in the late autumn, just before they went into school.

"What is it, do you know?" said Herbert, stepping aside


from the group of boys, who were all talking at once over
some matter of great interest to them. "What is the row, do
you know?" The messenger happened to be his particular
chum.

"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.

But it was a good-natured laugh, and as he spoke, he


drew his friend further away from the boys and their
debate. "I should go at once," he added; "get it over as
soon as you can, like a dose of medicine."

"Yes, I think I will. I have let things drift again, I am


afraid," added Herbert, "so I shall get a wigging, and no
mistake, this time!"

But either the doctor was not in a humour to give him


"a wigging" just now, or Herbert's admission that he knew
he had not given his full attention to his exercises lately,
disarmed the master's anger. For instead of threatening all
sorts of punishments if the lessons were not prepared
better for the future, he talked, in a very fatherly fashion, of
doing the duty that lay nearest to hand; and that in
neglecting to prepare the lessons and exercises set by his
teacher, he was not only defrauding himself of useful
knowledge he had been sent there to gain, but would
disappoint his mother, and set a bad example to some of his
school-fellows. So, for all these reasons Dr. Staples said he
hoped he should not have to complain; and Herbert
promised that he would, in future, give more care and
thought to the tasks set him to do.

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.

But the effort cost him something, and his friend


noticed that before the end of the week, Herbert was
looking tired and fagged.
This friend was a weekly boarder, who went home on
Saturday afternoons and returned soon after breakfast on
Mondays.

When he came the Monday following, he brought a note


from his father for Dr. Staples, and then went at once in
search of Herbert.

"I say old fellow, you don't look very bright this
morning."

"Perhaps not; I have got a headache," answered


Herbert, with a yawn.

"Well, my father will have to give you something for it,


if it lasts all the week; for the mater says I am to take you
home with me next Saturday. The gig will be here for us at
two o'clock."

"But—but, Perceval, I don't know your people," said


Herbert.

"What does that matter? We know each other; and I


want you to see my tame rat, and old Growler, our watch-
dog. Oh! There's heaps of things I want to show you; and
as my father is a doctor, he may be able to give you
something for the headache you have so often."

"Thank you; it is kind of you to think of me when you


are away."

A day or two later, Dr. Staples told Herbert he had


received an invitation from Dr. Perceval for Herbert to go
home with his son on the Saturday, and stay until the
Monday. "I am very glad to hear, Milner, that there has been
a decided improvement in the way your lessons have been
prepared since I spoke to you. If there had not been, I
should have felt it my duty to decline this invitation for you.
But as it is, I will see that you have the same opportunity of
preparing Saturday lessons that Perceval has; and I have no
doubt the change will do you good."

Herbert thanked Dr. Staples; but he was not sure that


he cared very much to go home with his friend. He did not
know Dr. or Mrs. Perceval; and there were some sisters, he
knew; and Herbert was shy of sisters, even if they were
ever so nice.

But he did not say this to his friend. Perceval seemed


delighted at the thought of taking him home; and so, for his
sake, he tried to feel pleased too, little dreaming what a
great surprise awaited him in this stranger's home.

The gig came at two o'clock, with John the coachman to


drive; and Edward Perceval asked all sorts of questions
about his father and mother, and all the family of sisters,
and the four-footed pets that were kept in the stable and
outhouse, under John's care during the week.

Dr. Perceval was out visiting some of his patients when


the boys arrived; but the afternoon passed quickly enough
in visiting all the animals that the Percevals kept about the
stable and barns. It was, in fact, a small farmyard, for every
animal was a pet of somebody's, and by no means a
common sort of cow, or goat, or dog, or horse, the children
having invested them each and all with an individuality that
made it a peculiar treasure, and quite a privilege, to be the
owner of such a superior beast.

They teased and chaffed each other about their


particular pets, in a way that perfectly amazed Herbert,
although he could see it was all good-natured banter.
When the doctor came home and joined them in that
most delightful of meals—high tea—they, one and all,
turned to him and asked after this patient and that, as
though these were another set of pets in which they were
equally interested.

At last the doctor managed to say, "Poor Elsie Winn is


very ill."

"Oh, papa, hasn't Mrs. Winn heard from her sister yet?"

And then, before anyone could speak, everybody's


attention was drawn to their guest, and Edward came round
to his side, and unfastened his necktie, as though he
thought he was going to faint.

"'Elsie Winn,' did you say?" he managed to gasp.

"Yes; do you know an Elsie Winn? By the way, I believe


Mrs. Winn said her sister's name was Milner," said Mrs.
Perceval.

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.

"I am not sure at all whether this Elsie Winn is my


cousin," he said; "but my mother had a sister of that name,
whom she has not seen for many years. I do not know her
at all; but through a letter that came into our hands by
accident, just before I came to school this term, we thought
this sister might be alive; and my mother wrote to the
lawyer, Mr. Capon, to make enquiries about her."
"If it is the same, she has written to your mother quite
recently, but has received no answer; and to-day I found
her almost in despair, for two of her children are ill now,
chiefly from want of food."

"Oh, dear! And there is money in the bank that my


father left, in case she should ever need it," exclaimed
Herbert, almost wringing his hands at the thought of this
unknown aunt being in such need. "The Elsie Winn I want to
find won a scholarship, a year or so ago, and then gave it
up because her father died."

"Why, that is our Elsie!" exclaimed Edward and his


mother, in the same breath.

"And you know her? She lives close by here?" exclaimed


Herbert, excitedly.

"Well, not exactly close by; she lives in the village of


Fairfield, and that is nearly a mile and a half from here."

"But I can go and see her, and make sure that it is my


aunt," said Herbert, rising from his seat, as though he
would set off on his errand at once.

"Finish your tea, my lad, and then we will decide what is


best to be done," said Dr. Perceval, glancing at his wife as
he spoke.

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.

So the doctor said, after a pause, "I should like to send


a bottle of medicine to the little boy—the sooner he has it
the better."

"And I want to speak to Mrs. Winn," said his wife.

"Then we can all go together," put in Edward. "How shall


we go? Are you good for a three mile walk there and back,
Milner?" said his friend.

"Six miles, if you like!" said Herbert, who was anxious


to start at once, to solve the uncertainty as to whether this
lady was his unknown aunt.

"If you walk, Ted, you will have to carry mother's


medicine basket," said his father.

"Mother's medicine basket" was a joke in the family; for


the doctor often asked for beef-tea and jelly to be made for
his poorer patients, and this was generally taken by Mrs.
Perceval in a basket that was more convenient than
elegant; so that Edward might be excused for a shrug of the
shoulders, at the suggestion of carrying mother's basket to
Fairfield and back.

But Herbert was too anxious to see this unknown Mrs.


Winn, and so he said, promptly enough, "I will carry the
basket, if you will allow me, for I hope you will let me go
and see this lady."

"Would you know her, do you think?" asked Mrs.


Perceval.

For Mrs. Winn had told her that she had had no
communication with her sister since she had been married.

Herbert shook his head dubiously. "I have never seen


her," he said; "but if she is like my mother, I should know
her at once."
"Very well; you and Edward shall take charge of Mrs.
Perceval, and walk to Fairfield after tea; and I hope it may
prove that this lady is your relative, for she stands in great
need of a friend just now," said Dr. Perceval.

So mother's basket was packed with dainties, likely to


tempt the appetite of an invalid, and the boys were ready to
quarrel as to who should carry it, in spite of its weight and
want of elegance; but they were willing to take it in turns
before they had walked very far.

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.

"If she should prove to be your aunt, I am sure it will be


quite a providence for the poor thing. For the letter she sent
to her sister was returned a day or two ago, marked 'not
known.'"

"Perhaps she did not know that we had moved away


from London a long time ago," said Herbert.

"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."

"What shall you say, mother, when we get to the


cottage? Shall you leave us outside, and go and tell Mrs.
Winn a stranger had come to see her?" said practical
Edward, for they were close to the village now.
Mrs. Perceval paused for a minute, to think what would
be best; and she decided to take both lads with her. Edward
was well-known, and she would introduce Herbert as his
friend, and see whether there was any recognition on either
side. And it must be confessed that the lady was a little
disappointed, and so was Herbert, for he could see no trace
of his mother in the worn, faded looking woman, who
ushered them into the sitting room.

There he and Edward were left to themselves; and,


before Mrs. Perceval came back, the question that had been
like a nightmare to him for the last few weeks had been
answered.

On the mantelpiece was a small miniature of a lady, and


he recognised this as the companion to one his mother
wore as a brooch, set with very fine pearls. This was in a
cheap frame; and when the two ladies came into the room,
he had it in his hand. "Pardon me," he said, looking at Mrs.
Winn, "but was not this in a brooch once?"

"Yes, it is the portrait of my mother," said Mrs. Winn,


staring at Herbert.

"And it is my grandmother!" said the boy, joyfully. "And


so you must be my lost aunt Elsie, whom my mother has
been trying to find!" As he spoke, Herbert went to meet her
with outstretched hands, and kissed her, as though she had
been his own mother, in his gladness at having found these
unknown relatives at last.

Mrs. Winn was simply overpowered, and could not


resist, although she had been prepared by Mrs. Perceval to
find in this stranger her sister's son. Still, that any son of
Herbert Milner could welcome her so gladly, in spite of her
poverty, was something for which she was altogether
unprepared. And when, a little later, she heard that the man
she so greatly disliked had left her a sum of money in the
bank, in case she should ever need it, she felt that she
must have misjudged her sister's husband as well as her
sister, and that he could not have been the hard, unfeeling
man she had always thought him.

"I must see my cousin Elsie," Herbert said, when he and


Mrs. Winn had exchanged various confidences. "You see, I
might never have found you, if it had not been for Elsie
giving up her scholarship, and that seemed such a plucky
thing to do, that when mother told me about having a sister
of that name, we made up our minds to try and find her,
and sent to our lawyer about it; but I think lawyers are
muffs very often. Old Capon has proved he is over this; for
you see I have found you, aunt, and I don't mean to lose
you again."

Herbert seemed likely to lose his head in his delight;


and he had to be warned more than once that Elsie was ill
and very weak, and that if he went upstairs to see her he
must not talk much. Mrs. Perceval undertook to introduce
him to the invalid, who had been told something of the
wonderful news.

"This is the new cousin whom Edward brought home


from school to-day," said the lady, leading the boy into the
little bedroom, where Elsie sat propped up in bed to receive
this stranger. The two relatives so strangely brought
together, looked at each other for a moment in silence, and
then Herbert bowed his head, and lifted Elsie's hand and
kissed it, saying, "I am very glad to see you, Cousin Elsie,
and I hope you will soon be quite well."

"Thank you," said Elsie, with the air of a little queen


receiving the homage of a sworn knight; and Mrs. Perceval
was amused to see the quiet way in which the two met,
when they had been so afraid of excitement. Herbert held
her hand tenderly in his, looking into her white face with
such pity, that Mrs. Perceval, standing near, saw the tears
rise to his eyes, and thought it best to hurry him away.

Downstairs he was introduced to his cousin Tom, and


was a great deal more free with him. "So you are taking
care of your mother and sister," he said; "and you want
something to take care of in your pocket, too, I think," and
the contents of his own pocket was quickly transferred to
that of Tom.

And then he asked if he might come and see them all


again the next day. "You see, I am at school with Perceval,
and I have to go back with him early on Monday morning,
so I don't know when I may see you again."

"You shall come home again with Edward next


Saturday," said Mrs. Perceval.

But Herbert still pressed to be allowed to come the next


day; and it was arranged that he should come early in the
afternoon, and stay to tea, and Edward was to come for him
in the evening.

When he got back, he asked Dr. Perceval how soon a


letter could be despatched to his mother, for, of course, he
wanted to tell her all about his strange meeting with his
aunt and cousin.

It was rather an incoherent letter, and whether Mrs.


Milner would have understood it is doubtful, if Mr. Perceval
had not supplemented it by one from himself, giving that
lady an account of the dire poverty into which her sister had
been plunged through no fault of her own.
It is possible that if Herbert's letter had gone
unsupported by that of Dr. Perceval, Mrs. Milner might have
scolded him for poking and prying into things that did not
concern him, as she had done before. But she had heard
from some friends of this clever and kindly doctor, and knew
that he was not only clever, but wealthy too; and, therefore,
his letter brought a prompt and satisfactory reply at once.

She was satisfied, from her son's description of the


miniature, although it had been removed from its original
setting, that the Mrs. Winn described in his letter was her
sister; and she enclosed a ten pound note for immediate
needs, and also a letter for her sister, in which she promised
to come and see her as soon as she could travel; for she
was suffering from a bad cold just then, and would not be
able to undertake the journey to Fairfield for a day or two.

This was just as well, perhaps, for it gave the long-


estranged sisters time to correspond with each other, and
so get over a little of the first strangeness of their meeting.
By the end of the week, however, Herbert heard that his
mother was to reach Fairfield on Saturday morning, and he
would drive over to Dr. Perceval's with Edward, as had been
arranged, and that he should meet his mother and aunt at
Fairfield in the afternoon. When he got there he found that
a considerable improvement had been effected all round.
Elsie was able to come down to the sitting room, where a
good fire was burning, and Herbert found his mother petting
and making much of her niece.

A general glow of happiness and satisfaction seemed to


pervade the cottage now, so that the lad could scarcely
believe it was the same place he had entered only a week
before, for then the chill desolation of the sitting room
seemed to strike upon him most cruelly. The furniture was
the same, the people the same; but yet how changed! For
now hope pointed with rosy fingers to the future, whereas
before, despair stared the widow in the face, and she saw
nothing but the workhouse beyond the present starvation.

Help had come just in time to save her from utter


collapse—had come, through each and all of the friends
about her doing the duty that belonged especially to them—
the duty that lay nearest to their hand!

If Mrs. Milner felt somewhat rebuked for her worldly-


wise method of protecting herself, she made ample and
practical amends for it, now that she had met her sister
once more. They always had been dear friends, as well as
sisters, in their early days, and so they became again.

Mrs. Winn moved away from Fairfield the following


spring; for nothing would satisfy Herbert but that Elsie
should go to a high school, and finish her education in the
way she might have done, if she had not resigned the
scholarship she had won.

Tom went to college when his mother left Fairfield,


confident now that she would be cared for, and with his
mind free to give all his attention to study, and to share
with his friend Jack the few holidays allowed during term
time.

In the future, there was no lack of means for Mrs. Winn,


any more than there was for her sister. But it was agreed by
all that this might have been very different, if it had not
been for Elsie's scholarship, and the way she disposed of it.

THE END
*** END OF THE PROJECT GUTENBERG EBOOK ELSIE'S
SCHOLARSHIP ***

Updated editions will replace the previous one—the old editions will
be renamed.

Creating the works from print editions not protected by U.S.


copyright law means that no one owns a United States copyright in
these works, so the Foundation (and you!) can copy and distribute it
in the United States without permission and without paying
copyright royalties. Special rules, set forth in the General Terms of
Use part of this license, apply to copying and distributing Project
Gutenberg™ electronic works to protect the PROJECT GUTENBERG™
concept and trademark. Project Gutenberg is a registered trademark,
and may not be used if you charge for an eBook, except by following
the terms of the trademark license, including paying royalties for use
of the Project Gutenberg trademark. If you do not charge anything
for copies of this eBook, complying with the trademark license is
very easy. You may use this eBook for nearly any purpose such as
creation of derivative works, reports, performances and research.
Project Gutenberg eBooks may be modified and printed and given
away—you may do practically ANYTHING in the United States with
eBooks not protected by U.S. copyright law. Redistribution is subject
to the trademark license, especially commercial redistribution.

START: FULL LICENSE


THE FULL PROJECT GUTENBERG LICENSE
PLEASE READ THIS BEFORE YOU DISTRIBUTE OR USE THIS WORK

To protect the Project Gutenberg™ mission of promoting the free


distribution of electronic works, by using or distributing this work (or
any other work associated in any way with the phrase “Project
Gutenberg”), you agree to comply with all the terms of the Full
Project Gutenberg™ License available with this file or online at
www.gutenberg.org/license.

Section 1. General Terms of Use and


Redistributing Project Gutenberg™
electronic works
1.A. By reading or using any part of this Project Gutenberg™
electronic work, you indicate that you have read, understand, agree
to and accept all the terms of this license and intellectual property
(trademark/copyright) agreement. If you do not agree to abide by all
the terms of this agreement, you must cease using and return or
destroy all copies of Project Gutenberg™ electronic works in your
possession. If you paid a fee for obtaining a copy of or access to a
Project Gutenberg™ electronic work and you do not agree to be
bound by the terms of this agreement, you may obtain a refund
from the person or entity to whom you paid the fee as set forth in
paragraph 1.E.8.

1.B. “Project Gutenberg” is a registered trademark. It may only be


used on or associated in any way with an electronic work by people
who agree to be bound by the terms of this agreement. There are a
few things that you can do with most Project Gutenberg™ electronic
works even without complying with the full terms of this agreement.
See paragraph 1.C below. There are a lot of things you can do with
Project Gutenberg™ electronic works if you follow the terms of this
agreement and help preserve free future access to Project
Gutenberg™ electronic works. See paragraph 1.E below.
1.C. The Project Gutenberg Literary Archive Foundation (“the
Foundation” or PGLAF), owns a compilation copyright in the
collection of Project Gutenberg™ electronic works. Nearly all the
individual works in the collection are in the public domain in the
United States. If an individual work is unprotected by copyright law
in the United States and you are located in the United States, we do
not claim a right to prevent you from copying, distributing,
performing, displaying or creating derivative works based on the
work as long as all references to Project Gutenberg are removed. Of
course, we hope that you will support the Project Gutenberg™
mission of promoting free access to electronic works by freely
sharing Project Gutenberg™ works in compliance with the terms of
this agreement for keeping the Project Gutenberg™ name associated
with the work. You can easily comply with the terms of this
agreement by keeping this work in the same format with its attached
full Project Gutenberg™ License when you share it without charge
with others.

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.

1.E. Unless you have removed all references to Project Gutenberg:

1.E.1. The following sentence, with active links to, or other


immediate access to, the full Project Gutenberg™ License must
appear prominently whenever any copy of a Project Gutenberg™
work (any work on which the phrase “Project Gutenberg” appears,
or with which the phrase “Project Gutenberg” is associated) is
accessed, displayed, performed, viewed, copied or distributed:

You might also like