Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Design Systems!
You have completed Introduction to Design Systems!
Preview
While no two design systems look quite the same, there are three categories of content consistent to most design systems.
Further reading
Vocabulary
- Designer-developer handoff: the point in the product development process where developers create a functional version of the finished design
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
It's easy to find well documented
design systems on the web.
0:00
Many companies like to share
their design systems publicly.
0:05
And companies like Apple and
Google have detailed guidelines for
0:09
developing for their mobile operating
systems that you can reference and
0:14
use when developing mobile apps.
0:19
Some systems are only
partially open to the public.
0:21
I'm looking at the guidelines for
Atlassian design, and
0:25
while I can learn the rules
dictating illustration usage, or
0:29
iconography usage, only Atlassian
0:35
employees can access the Illustration or
Icon libraries themselves.
0:41
However, many design systems aren't
public, they are intended only for
0:48
employees designing for
their company's websites and apps.
0:53
For example,
we have an internal design system
0:58
here at Treehouse to guide our
designers as they work on this site.
1:01
But whether completely public,
partially so, or
1:06
not at all, design system docs
have some things in common.
1:10
Each one is meant to be easily
accessible by the design team,
1:15
straight forward to follow and implement,
and frequently referenced.
1:19
Designs systems are used during the design
phase when presenting designs for
1:25
discussions and when providing feedback,
and critiquing designs.
1:30
Design system documentation can
also guide the development process.
1:35
Frequently, the docs include
notes that help developers
1:40
implement the work of designers.
1:44
When done well a design system should
simplify the designer-developer handoff.
1:46
After all, you're not designing
in a vacuum or just for yourself.
1:53
At some point during the product
development process,
1:58
developers need to build
what you've designed.
2:01
The design system documentation
is like a dictionary to
2:04
ensure both teams are speaking
the same language.
2:09
It's also worth mentioning that the design
systems I'll be showing you in this course
2:13
have probably evolved since these videos
were recorded, and they're meant to.
2:18
Design systems are organic documents,
evolving every time the system
2:23
parameters lack clarity or need updating,
growing to meet new challenges.
2:29
And while no two design
systems look quite the same,
2:36
there are three categories of content
consistent to most designs systems.
2:40
The first category is
visual design language.
2:45
Design system documentation
should specify clear rules for
2:50
applying elements of style.
2:54
These design system building
blocks include color, typography,
2:57
spacing, image, and motion.
3:04
The second category of design system
content is the user interface library
3:09
in which the pieces of
the visual design language
3:15
are assembled together to
create interactive elements.
3:18
In design systems,
3:23
these assembled elements are often
referred to as components.
3:25
Design systems establish rules for
consistent implementation and
3:30
usage of components.
3:35
Finally, design systems provide
guidelines for voice and tone.
3:38
Imagine your product as a living person,
3:44
what terms would you use to
describe its personality?
3:48
Friendly and playful, confident and
loud, formal and serious?
3:51
A design system should guide
copywriters toward keeping
3:56
brand voice consistent and
tone appropriate.
4:01
In upcoming videos,
4:05
we'll examine each of these categories
of design system content in depth.
4:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up