Expanding the Accordion Panel8:08 with Anwar Montasir
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.
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 up