Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
A design system is a set of rules that guide the design of a web site or app. Design systems help create predictable experiences for users, and help designers work more efficiently and build interfaces consistent with an organization’s visual brand without wasting time exploring design problems that have been solved already.
Further Reading
Vocabulary
Bespoke solutions: individual approaches to individual problems
Interface inventory: a document comparing screenshots of visual design attributes and interface elements across various websites and apps belonging to a brand
Design system: a document providing a set of design principles and clear standards for visual styles and interface elements
Design debt: inefficiencies caused by inconsistent and non-reusable styles and conventions.
[MUSIC]
0:00
Hi, my name is Anwar.
0:09
I'm a designer, a developer and
a teacher at Treehouse.
0:11
In this course you'll learn
the fundamentals of design systems,
0:15
what they are and how to understand them.
0:18
A design system is a set of rules that
guide the design of a website or app.
0:21
Design systems help create
predictable experiences for users and
0:27
help designers work more efficiently.
0:31
And build the interfaces consistent
with an organization's visual brand
0:34
without wasting time exploring design
problems that have been solved already.
0:38
Imagine sitting in an art classroom.
0:44
At each table is a bucket of clay.
0:46
The teacher asks each student to
take some clay and build a house.
0:49
No further instructions,
just grab some clay and get building.
0:54
That's a lot of freedom, right?
0:58
But freedom, total freedom can get messy.
1:00
One house might have almost
nothing in common with the next.
1:04
Now imagine the same scenario.
1:08
But replace the clay
with a bucket of Legos.
1:10
Legos have parameters,
they tend to be rectangular and
1:14
to interlock in a certain way.
1:18
Students can still follow
their own unique vision.
1:20
But thanks to the restrictions
inherent to building with Lego bricks,
1:23
you'll notice a lot more similarities and
1:28
probably more structural soundness in
the Lego houses than the clay ones.
1:31
In UX design terms,
clay houses are bespoke solutions,
1:36
that is individual approaches
to individual problems.
1:40
Let's look at a real world design example.
1:46
In 2015, a design team of
federal employees called 18 F,
1:50
examined nearly 30,000 websites belonging
to the United States government.
1:54
The designers began their examination
with an interface inventory.
2:02
They took screenshots of visual
attributes and interface elements
2:08
across the various websites and
created a document comparing them.
2:13
This interface inventory document
revealed a totally bespoke process.
2:18
Each site is created from scratch,
without consideration of the appearance or
2:23
behavior of existing government sites.
2:29
In total, the 18 F team documented
32 different shades of blue and
2:33
64 different types of buttons.
2:38
There was little to no consistency in the
design of these sites. Talk about messy.
2:41
In addition, imagine the duplicated
effort as each designer for
2:48
each site had to arrive at
their own visual language,
2:53
their own solution for
the same interface elements.
2:57
In essence, they were reinventing
the wheel for each site.
3:01
Now imagine that these designers had
guiding principles that helped them work
3:06
more quickly and
create consistent user experiences.
3:11
In other words, swap the messiness of
clay for the consistency of Legos.
3:15
To do this, the team from 18 F
came up with a design system.
3:22
A design system is a document providing
a set of design principles and
3:28
clear standards for visual styles and
interface elements.
3:33
Many design systems also provide
code snippets to help developers
3:39
create interactive components,
as well as voice and
3:44
tone documentation to guide copywriters.
3:48
Design system components should be
reusable, repeatable and stackable.
3:51
When I say stackable, I mean design system
components can be assembled together
3:58
to build any number of applications,
like working with Lego bricks.
4:04
Here's the United States Web Design System
site.
4:11
I see categories of design guidelines,
4:14
as well as a showcase gallery of
sites built to these specifications.
4:17
The design tokens tab contains rules for
applying color, type, spacing, and more.
4:23
These rules establish a common
visual design language for
4:30
all government websites and apps.
4:34
Imagine I'm designing a site for
4:37
the federal government and wanted to
include a blue color in my design.
4:39
Instead of picking just any blue,
I'd reference this document under
4:43
theme color tokens to identify
a blue that fits the design system.
4:48
What if I needed to add
a button to my design?
4:54
Not long ago,
4:57
designers for the federal government
used 64 different styles of buttons.
4:58
But now, the design system
provides greater consistency
5:03
with a limited set of options
listed here under components.
5:08
This limited selection is a good
thing as it creates a more uniform
5:12
experience across federal
government sites for the user.
5:17
Defining clear standards
remove subjectivity and
5:22
ambiguity from the design process.
5:26
And steers designers towards
a product that only looks better, but
5:28
one that is more user-friendly and
even more accessible.
5:33
Design systems also increase
designer efficiency.
5:38
Since many basic design decisions
are already made for you, you can reuse
5:42
visual styles, UI components,
even code that's already created.
5:47
Working from a design system minimizes
what designers term design debt.
5:54
Design debt refers to inefficiencies
caused by inconsistent and
5:59
non reusable styles and conventions.
6:05
Inconsistency slows down
the design process and
6:09
negatively impacts the users
of your site or app.
6:13
Your goal in guiding your user through
an interface is as many mindless taps or
6:17
clicks as possible.
6:23
No hesitation, no contemplation.
6:25
A consistent experience conforms
to user expectations and
6:29
leads to a more confident user.
6:34
An inconsistent interface on the other
hand, one where interactive cues
6:38
go missing, show up in unpredictable
places, or are designed or
6:43
labeled in a way that obscures meaning,
creates obstacles in the way of usability.
6:48
In your role as a UX designer,
you'll likely be tasked with applying
6:55
the standards described in a design
system in order to build apps and products
7:00
that can be pieced together efficiently
like Legos with a minimum of design debt.
7:05
And a maximum of visual consistency.
7:11
We'll learn more about the individual
parts of the design system
7:15
in our upcoming lessons.
7:18
And if you'd like to learn more
about design system 18 F created for
7:20
the US government, check out
the links in the teacher's notes.
7:24
You need to sign up for Treehouse in order to download course files.
Sign up