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

Well done!

You have completed Practice Using A Design System!

Sign up for Treehouse Back to Library

Starting the Mobile Wireframe

7:57 with Anwar Montasir

I’ve opened up Adobe XD, and I’m ready to create a new mobile artboard. My plan is to combine the accordion design from my first sketch with the prominent icons from my third sketch. And while this is a wireframe, I’m going to use real body copy, as I want to be able to test the effectiveness of my text layout on users.

    Related Discussions

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

    Sign up

    I've opened up Adobe XD and I'm ready to create a new mobile artboard. 0:00
    I plan to combine the accordion design from my first sketch 0:07
    with the prominent icons from my third sketch. 0:11
    Although this is a wireframe, I'm going to use real body copy 0:15
    as I want to be able to test the effectiveness of my text layout on users. 0:19
    I also have the components file from the United States Web Design System 0:26
    open in Adobe XD, and the design system documentation open in a browser tab. 0:32
    You'll notice as we design that I'm copying and 0:40
    pasting as many components as possible, and that's the idea. 0:42
    I want a design that follows the rules laid out by the design system and 0:48
    feels harmonious with other federal government sites. 0:53
    First up is the banner that announces this is a federal government website. 0:58
    I'll copy this component from the banner artboard. 1:04
    And as I paste it in, I'm going to make some edits. 1:09
    Looking at the mobile view of vote.gov, I see that it was acceptable to break 1:15
    the banner text onto multiple lines to make room for a language selector. 1:21
    Since this site is for the United States federal government, 1:48
    I'm going to default to English. 1:51
    But I'll also provide a dropdown for 1:54
    changing the language using a provided component. 1:56
    Check out the Teacher's Notes for 2:27
    resources on designing a language selector. 2:28
    Next up is a header that contains a logo. 2:34
    Since this is a wireframe, I'm not concentrating on the style of the logo. 2:37
    I'll just borrow the banner style from the components file. 2:43
    As I make decisions about spacing, 3:14
    I want to keep my layout pretty open so none of the text looks crowded. 3:16
    I'll calculate spacing in multiples of the number 8, 3:23
    as indicated on the spacing units page of the United States Web Design System. 3:28
    In terms of what should capture the user's attention first, 3:37
    I'm taking a couple of cues from vote.org. 3:41
    I want to make sure the date of election day is prominent. 3:53
    And I'd like to present a handy visual guide to voting rights. 4:09
    This would be great as a downloadable PDF that users could store on their phones or 4:36
    print and bring to the polling place. 4:42
    So I'll borrow the big button component from the design system. 4:46
    I'm including a download icon from Font Awesome to reinforce 5:02
    the purpose of this button. 5:06
    I'll choose Copy Unicode Glyph and 5:15
    paste into a text box, making sure I set my font to Font Awesome. 5:23
    I'm not going to design the PDF itself right now, but 6:10
    that could be a great project if you'd like to challenge yourself. 6:13
    At the time of this recording, COVID-19 is changing lives everywhere, 6:18
    including impacting the way people vote. 6:24
    Since this announcement is critical, 6:27
    I'll use the alert component from the design system. 6:30
    The select your state dropdown is found 6:53
    in the components file on 6:57
    an artboard titled combo box. 6:59
    We're off to a good start. 7:44
    In the next video, we'll use the accordion component from the United States Web 7:46
    Design System to present a list of questions and answers on voting rights. 7:51

    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