Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Using A Design System

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Project

5:23 with Anwar Montasir

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.

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up