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
The style for an expanded accordion panel is found in our Components file. I’m only going to create one expanded panel for my demo. With Dispatcher Dulcea in mind, I’ll choose What If I Need Help Understanding English, as that’s information I’d like to present as simply as possible.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The style for an expanded accordion
panel is found in our components file.
0:01
I'm only going to create one
expanded panel for my demo.
0:07
With Dispatcher Dulcea in mind,
0:12
I'll choose "what if I need
help understanding English?"
0:14
As that's information I'd like to
present as simply as possible.
0:18
I'll start by expanding the mobile frame
0:24
and by moving the bottom accordion
panel out of the way to make room for
0:33
my new information.
0:38
I'll change the plus symbol
to a minus to indicate
0:49
that the accordion panel is expanded and
can be collapsed.
0:52
To create a smaller sized heading,
I need to check the font
1:28
size documentation of
the United States Web Design System.
1:33
The components document only
shows a 22 pixel heading,
1:38
but it looks like I could
go up to 32 pixels for
1:43
a larger heading or
down to 17 for a smaller one.
1:47
Since I've been designing already
with the 22 pixel heading,
1:51
I'll try 17 pixels for creating a subhead.
1:56
Now, for my body copy, I'm noticing that
2:18
the ACLU voting rights page
contains duplicate information
2:21
in that your right to bring an interpreter
is explained in two different ways.
2:26
The second paragraph uses plain language.
2:33
So I'll copy that one and
paste it under a heading that reads,
2:36
Bringing An Interpreter.
2:41
For the next two sections,
Bilingual Election Assistance and
2:46
Language Hotlines,
my goal is to simplify the language and
2:51
make key information easier to find.
2:56
I'll use a bulleted list to present
the language assistance requirements.
2:59
This first phrase, "check whether
your county is required",
3:45
was hyperlinked on the original site.
3:50
I want to change this to my blue color.
3:55
And I'm realizing I never really sampled
the blue color I'm using.
3:58
I probably should have by now.
4:03
I can get it from this Download PDF
button that I took from
4:06
the design system,
press plus in my colors palette.
4:11
And now I can highlight the desired text,
change the color,
4:18
make it underlined, so
it's obviously a hyperlink.
4:24
I'd like to create a table to make finding
the appropriate language hotline easier.
4:31
Unfortunately, Adobe XD doesn't
include a tool for drawing tables.
4:51
So I'll have to fake it by spacing
the text out horizontally.
4:57
This last longer list of languages
won't fit very neatly in my table.
5:30
But I think with some creativity,
I can figure that out.
5:36
There's a hyperlink here for
Asian Americans Advancing Justice
5:41
that provides help for
all the languages detailed here.
5:48
I will try changing the label here
5:54
to read Asian and Pacific Islanders
6:00
and include an asterisk explaining that
6:25
these are the languages grouped
under that designation.
6:28
Fortunately, this table will be
easy for developers
6:46
to create when it comes time for
the designer-developer handoff.
6:49
I will make the text Asian and
Pacific Islanders a hyperlink
6:55
in case users want more information from
7:08
the Asian Americans
Advancing Justice website.
7:10
I'll adjust the vertical spacing a bit.
7:15
And that looks like a completed design.
7:35
I hope you've enjoyed this
exercise in using a design system.
7:39
As you can see, implementing
the rules of a design system
7:43
involves really getting to
know the documentation.
7:47
But once you do, creating a product
that matches the brand identity,
7:51
and uses existing components
becomes a straightforward process.
7:56
And the development team will be on
the same page as you when it comes time
8:01
to build your designs.
8:05
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up