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
For this practice session, we’ll be using Adobe XD to wireframe a homepage for votingrights.gov, an imaginary website for the United States federal government that informs citizens about their right to vote. We’ll start with a problem, a set of research, and some design explorations in the form of rough sketches. We’ll then use the United States Web Design System to ensure the look and behavior of our design are consistent with other federal government sites.
[MUSIC]
0:00
Hi, my name is Anwar.
0:09
I'm a designer, a developer and
teacher at Treehouse.
0:11
Welcome to Practice Using a Design System.
0:14
For this practice session,
0:18
we'll be using Adobe XD to wireframe
a homepage for votingrights.gov,
0:20
an imaginary website for
the United States federal government
0:26
that informs citizens about
their right to vote.
0:31
We'll start with a problem,
a set of research, and
0:34
some design explorations in
the form of rough sketches.
0:37
We'll then use the United States Web
Design System to ensure the look and
0:42
behavior of our design are consistent
with other federal government sites.
0:47
Understanding how, when, and where to
vote can be an intimidating process,
0:53
especially as the rules
vary from state to state.
0:59
I'm looking at a page called Voting On
Election Day from a site called usa.gov,
1:03
and I might like to know whether I'm
required to bring an ID on election day.
1:11
I've clicked a link called Find Out
if You Need to Bring an ID to Vote,
1:18
and I'm taken to an external
site called ncsl.org or
1:24
the National Conference
of State Legislatures.
1:29
And wow, check out the length of
this article and the tiny type.
1:33
Not exactly user friendly, is it?
1:40
Here's a voting rights resource provided
by the American Civil Liberties Union.
1:44
This is much better,
but I'm concerned about
1:50
the wall of words found
under the headings
1:55
I am a voter with a disability and
I speak English less than very well.
1:59
Users who don't speak English fluently or
have cognitive disabilities
2:06
would benefit from a simpler
presentation of this information.
2:11
Finally, here's one more voting
rights site called vote.org.
2:17
The presentation of information on the
election protection page is pretty good.
2:23
Lots of bulleted lists and
short paragraphs.
2:29
But the link to get to this
voting rights page would
2:33
be awfully hard to tap on a mobile device.
2:38
And some of the rights covered by
the American Civil Liberties Union,
2:42
such as rules for
voters with a disability and
2:47
voters who need help understanding
English, are absent here.
2:50
All right, so we've established a goal for
2:56
our project: simplifying the presentation
of the user's voting rights.
2:58
We'll need to ground our
project in research,
3:03
which we'll examine in the next video.
3:06
But what else should we consider
when planning a web project for
3:09
the United States government?
3:14
The United States Web Design
System declares its goal as
3:16
making it easier to build accessible,
3:21
mobile-friendly websites for
the American public.
3:24
Before we begin planning any project
that uses this design system,
3:29
we need to make sure we familiarize
ourselves with the design principles,
3:34
components.
3:42
design tokens,
3:47
and utilities found here.
3:52
We can also check out the showcase
of sites using this design system.
3:58
The first example is a small
site called vote.gov,
4:04
letting users know where and
how they can register to vote.
4:10
The site contains a banner assuring us
this is an official government website.
4:16
The other five sites found in
this gallery should all look and
4:23
behave pretty similar to the first one.
4:28
This is what a design system achieves.
4:33
Finally, under the tab How to Use USWDS,
4:38
I see a link where designers can download
resources for Sketch or Adobe XD.
4:43
I'll download the Adobe XD version
4:51
And I see a file full of colors and
design components.
5:00
I've also been given a Fonts folder.
5:06
I should install these fonts
if I don't have them already.
5:10
Go ahead and
5:15
spend a little time getting to know
the United States Web Design System.
5:15
We'll check out our
research in the next video.
5:20
You need to sign up for Treehouse in order to download course files.
Sign up