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.