1 00:00:00,730 --> 00:00:06,170 I've opened up Adobe XD and I'm ready to create a new mobile artboard. 2 00:00:07,380 --> 00:00:11,580 I plan to combine the accordion design from my first sketch 3 00:00:11,580 --> 00:00:14,260 with the prominent icons from my third sketch. 4 00:00:15,290 --> 00:00:19,710 Although this is a wireframe, I'm going to use real body copy 5 00:00:19,710 --> 00:00:24,430 as I want to be able to test the effectiveness of my text layout on users. 6 00:00:26,370 --> 00:00:32,120 I also have the components file from the United States Web Design System 7 00:00:32,120 --> 00:00:38,880 open in Adobe XD, and the design system documentation open in a browser tab. 8 00:00:40,020 --> 00:00:42,870 You'll notice as we design that I'm copying and 9 00:00:42,870 --> 00:00:47,190 pasting as many components as possible, and that's the idea. 10 00:00:48,230 --> 00:00:53,780 I want a design that follows the rules laid out by the design system and 11 00:00:53,780 --> 00:00:57,290 feels harmonious with other federal government sites. 12 00:00:58,880 --> 00:01:03,620 First up is the banner that announces this is a federal government website. 13 00:01:04,780 --> 00:01:07,965 I'll copy this component from the banner artboard. 14 00:01:09,670 --> 00:01:13,269 And as I paste it in, I'm going to make some edits. 15 00:01:15,361 --> 00:01:21,436 Looking at the mobile view of vote.gov, I see that it was acceptable to break 16 00:01:21,436 --> 00:01:27,244 the banner text onto multiple lines to make room for a language selector. 17 00:01:48,097 --> 00:01:51,691 Since this site is for the United States federal government, 18 00:01:51,691 --> 00:01:54,325 I'm going to default to English. 19 00:01:54,325 --> 00:01:56,838 But I'll also provide a dropdown for 20 00:01:56,838 --> 00:02:00,416 changing the language using a provided component. 21 00:02:27,095 --> 00:02:28,795 Check out the Teacher's Notes for 22 00:02:28,795 --> 00:02:32,035 resources on designing a language selector. 23 00:02:34,075 --> 00:02:36,795 Next up is a header that contains a logo. 24 00:02:37,850 --> 00:02:43,080 Since this is a wireframe, I'm not concentrating on the style of the logo. 25 00:02:43,080 --> 00:02:46,979 I'll just borrow the banner style from the components file. 26 00:03:14,224 --> 00:03:16,834 As I make decisions about spacing, 27 00:03:16,834 --> 00:03:21,880 I want to keep my layout pretty open so none of the text looks crowded. 28 00:03:23,600 --> 00:03:28,277 I'll calculate spacing in multiples of the number 8, 29 00:03:28,277 --> 00:03:34,854 as indicated on the spacing units page of the United States Web Design System. 30 00:03:37,560 --> 00:03:41,251 In terms of what should capture the user's attention first, 31 00:03:41,251 --> 00:03:45,638 I'm taking a couple of cues from vote.org. 32 00:03:53,742 --> 00:03:57,556 I want to make sure the date of election day is prominent. 33 00:04:09,164 --> 00:04:14,160 And I'd like to present a handy visual guide to voting rights. 34 00:04:36,953 --> 00:04:42,415 This would be great as a downloadable PDF that users could store on their phones or 35 00:04:42,415 --> 00:04:45,000 print and bring to the polling place. 36 00:04:46,030 --> 00:04:50,134 So I'll borrow the big button component from the design system. 37 00:05:02,171 --> 00:05:06,799 I'm including a download icon from Font Awesome to reinforce 38 00:05:06,799 --> 00:05:08,935 the purpose of this button. 39 00:05:15,095 --> 00:05:23,430 I'll choose Copy Unicode Glyph and 40 00:05:23,430 --> 00:05:30,420 paste into a text box, making sure I set my font to Font Awesome. 41 00:06:10,081 --> 00:06:13,198 I'm not going to design the PDF itself right now, but 42 00:06:13,198 --> 00:06:17,155 that could be a great project if you'd like to challenge yourself. 43 00:06:18,670 --> 00:06:24,070 At the time of this recording, COVID-19 is changing lives everywhere, 44 00:06:24,070 --> 00:06:26,710 including impacting the way people vote. 45 00:06:27,900 --> 00:06:30,474 Since this announcement is critical, 46 00:06:30,474 --> 00:06:34,066 I'll use the alert component from the design system. 47 00:06:53,286 --> 00:06:57,200 The select your state dropdown is found 48 00:06:57,200 --> 00:06:59,327 in the components file on 49 00:06:59,327 --> 00:07:02,874 an artboard titled combo box. 50 00:07:44,102 --> 00:07:46,330 We're off to a good start. 51 00:07:46,330 --> 00:07:51,240 In the next video, we'll use the accordion component from the United States Web 52 00:07:51,240 --> 00:07:56,600 Design System to present a list of questions and answers on voting rights.