Starting the Mobile Wireframe

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