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
In this video, I'll introduce you to a site called Design Systems Repo and walk you through several examples of design systems.
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
If you've used a smartphone,
0:00
you've probably noticed how
consistently the apps behave.
0:02
Whether posting photos to Instagram,
checking the weather, or even toggling
0:06
between apps, iPhone users get pretty
used to their apps behaving "Appley".
0:12
Same goes for Android users, tasks
from checking email, to sending texts,
0:18
to adding calendar reminders
all have that Android feel.
0:23
And when an app behaves
differently than the user expects,
0:28
say you tapped the send email icon and
a calendar date picker appears,
0:33
the experience feels pretty jarring.
0:38
It's no accident your experience
on each mobile platform feels so
0:41
consistent. We have robust design
system documentation to thank.
0:45
Both Apple and
Google have created design systems for
0:52
each of their mobile operating systems.
0:56
Google's is called Material Design, and
0:59
Apple calls theirs
the Human Interface Guidelines.
1:02
Each defines the visual language for
the apps,
1:07
interfaces, and
interactions on Android and IOS devices.
1:11
Understanding and applying these design
systems is critical for mobile designers.
1:16
I've included resources for
both systems in the Teacher's Notes.
1:21
But design systems aren't limited
to Google, Apple, or smartphones.
1:27
In this video, I'll introduce you to
a site called Design Systems Repo,
1:35
and walk you through several
examples of design systems.
1:40
Here are a few names you
might be familiar with, Audi,
1:46
IBM, Salesforce.
1:55
Let's look at Polaris,
2:08
the design system belonging to an e
commerce platform called Shopify.
2:10
If you're checking out this design system,
note that it might have changed since I
2:16
recorded this video, but the basic
features should still be the same.
2:20
A good design system presents
the company's brand values up front.
2:26
The Shopify experience values
page lays out the six core
2:31
values to keep in mind when designing for
a Shopify store.
2:36
Because UX design
reinforces the emotions and
2:42
feelings users associate with a brand,
2:47
many of these terms sound emotional,
CONSIDERATE,
2:51
EMPOWERING, CRAFTED, EFFICIENT,
TRUSTWORTHY, FAMILIAR.
2:57
If I were designing a Shopify product,
I bookmark this page and
3:04
reread these values until
I knew them inside out.
3:09
The other sections of the site
present guidance on writing,
3:14
designing, and implementing code.
3:18
The CONTENT section describes writing for
Shopify products.
3:21
The sidebar lists category
names like Voice and tone,
3:26
Grammar and mechanics,
Actionable language.
3:31
Each category guides those who
are writing content for a Shopify site.
3:35
For example,
the Actionable language page includes
3:40
language conventions to keep users
moving forward toward their end goal.
3:44
The DESIGN section describes the building
blocks of Shopify's visual language.
3:52
Some categories like Colors,
Typography, and
3:57
Spacing will appear in
almost any design system.
4:02
Others like Sounds are unique
to this experience.
4:08
The COMPONENTS section combines
the building blocks from
4:13
the DESIGN section to create more
complex interactive elements.
4:17
If I were creating a form for example,
I would find interface items for
4:23
different operating systems, as well
as rules for styling form elements,
4:29
instructions for writing body
copy to accompany form inputs,
4:35
and snippets of code to guide developers
in building an accessible form.
4:40
So that's a brief glance at one
particularly well organized design system.
4:46
And while no two design
systems are exactly alike,
4:51
in the next video I'll define the most
important parts of design systems,
4:55
the sets of rules that inform
a designer's decision making process.
5:00
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