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