Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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