title
How to Design a SICK Dashboard UI in Figma
description
https://bit.ly/3fURuDf 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to fulfill a long-awaited request from many of you, and that's how to design a dashboard from scratch in Figma. If you're interested in seeing how to really make it responsive and interactive, check out designcourse.com, as it will be available in the curriculum within a week of uploading this video!
Project file:
https://coursetro.s3.amazonaws.com/stuff/Dashboard+Project.fig
(Download this, save to a folder, drag it on top of the main home dashboard within the Figma app to open it)
0:00 - Introduction
1:16 - Getting Started
2:58 - Light vs Dark Considerations
5:04 - Navigations
16:00 - Card Designs
31:37 - Chart Design
34:20 - Final Thoughts
Let's get started!
#dashboard #ui #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'How to Design a SICK Dashboard UI in Figma', 'heatmap': [{'end': 777.942, 'start': 751.132, 'weight': 0.872}, {'end': 1777.071, 'start': 1707.779, 'weight': 0.731}, {'end': 1968.063, 'start': 1942.94, 'weight': 0.783}], 'summary': 'Learn to design a dashboard in figma, including tablet version, coloring, alignment, and responsiveness, with a 22% discount for designcourse.com. explore background color options, light and dark mode, logo creation, and font requirements. gain insights into ui design fundamentals, icon-based navigation, interface customization, and dashboard design best practices. create dashboard elements aiming for a 75% response rate, and achieve design consistency in cards. additionally, explore creating realistic charts in ui design using a plugin, with the instructor offering discounts and 16 hours of content.', 'chapters': [{'end': 169.674, 'segs': [{'end': 65.137, 'src': 'embed', 'start': 0.349, 'weight': 0, 'content': [{'end': 2.25, 'text': 'What is up everybody? Gary Simon here.', 'start': 0.349, 'duration': 1.901}, {'end': 9.835, 'text': "So for a long time, I've had the request of doing a dashboard design, how to create and design a dashboard from scratch.", 'start': 2.27, 'duration': 7.565}, {'end': 11.456, 'text': "And we're going to use Figma for that.", 'start': 9.875, 'duration': 1.581}, {'end': 14.497, 'text': "And I'm going to show you how to do like a tablet version.", 'start': 12.156, 'duration': 2.341}, {'end': 22.343, 'text': "And I'm going to give you all sorts of again tips in terms of coloring and just alignment and basic fundamentals as well.", 'start': 15.078, 'duration': 7.265}, {'end': 27.567, 'text': "now, if you're really interested in taking it a step further, i want you to definitely check out designcourse.com,", 'start': 22.343, 'duration': 5.224}, {'end': 32.451, 'text': "because i'm going to include in that here within the next week.", 'start': 27.567, 'duration': 4.884}, {'end': 41.118, 'text': "uh, in the bonus section of designcourse.com curriculum right under here I'm going to show you how to take the design we create today, the dashboard,", 'start': 32.451, 'duration': 8.667}, {'end': 44.24, 'text': 'and make it responsive and truly interactive.', 'start': 41.118, 'duration': 3.122}, {'end': 46.282, 'text': 'So here at designcourse.com,', 'start': 44.36, 'duration': 1.922}, {'end': 56.47, 'text': 'I teach people UI UX design in this course and you get over 16 hours of content and also interactive modules and also a dozen challenge projects.', 'start': 46.282, 'duration': 10.188}, {'end': 62.055, 'text': 'And you can even add on mentorship with me if you want to learn from me and help me guide you.', 'start': 56.61, 'duration': 5.445}, {'end': 63.896, 'text': 'So definitely check out designcourse.com.', 'start': 62.115, 'duration': 1.781}, {'end': 65.137, 'text': 'Use the coupon code UI20..', 'start': 63.996, 'duration': 1.141}], 'summary': 'Gary simon demonstrates creating a dashboard from scratch using figma, with plans to make it responsive and interactive at designcourse.com.', 'duration': 64.788, 'max_score': 0.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE349.jpg'}], 'start': 0.349, 'title': 'Creating dashboard in figma', 'summary': 'Covers creating and designing a dashboard from scratch using figma, including tips on tablet version, coloring, alignment, and making it responsive and interactive, with a bonus offer and a 22% discount for designcourse.com.', 'chapters': [{'end': 169.674, 'start': 0.349, 'title': 'Designing dashboard in figma', 'summary': 'Covers creating and designing a dashboard from scratch using figma, including tips on tablet version, coloring, alignment, and making it responsive and interactive, with a bonus offer and a 22% discount for designcourse.com.', 'duration': 169.325, 'highlights': ['Creating and designing a dashboard from scratch using Figma The chapter focuses on creating and designing a dashboard from scratch using Figma, providing insights on tablet version, coloring, alignment, and basic fundamentals.', 'Offering a bonus section for making the design responsive and interactive at designcourse.com The chapter mentions a bonus section at designcourse.com to make the design responsive and interactive, providing an opportunity for further learning and skill development.', 'Promoting designcourse.com with a 22% discount using the coupon code UI2022 The chapter promotes designcourse.com, offering a 22% discount using the coupon code UI2022, with over 16 hours of content, interactive modules, challenge projects, and mentorship options.']}], 'duration': 169.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE349.jpg', 'highlights': ['Promoting designcourse.com with a 22% discount using the coupon code UI2022', 'Offering a bonus section for making the design responsive and interactive at designcourse.com', 'Creating and designing a dashboard from scratch using Figma']}, {'end': 451.668, 'segs': [{'end': 199.52, 'src': 'embed', 'start': 170.055, 'weight': 4, 'content': [{'end': 173.857, 'text': 'Now one thing I do want to do before we place that action, kind of skipping ahead a little bit.', 'start': 170.055, 'duration': 3.802}, {'end': 175.359, 'text': 'no big deal is.', 'start': 173.857, 'duration': 1.502}, {'end': 176.88, 'text': "let's just establish a background color.", 'start': 175.359, 'duration': 1.521}, {'end': 179.702, 'text': 'Now, typically, when it comes to these dashboard designs,', 'start': 177.28, 'duration': 2.422}, {'end': 186.488, 'text': "You will notice that there's a background color and then there's usually a panel that sits on top of it.", 'start': 180.783, 'duration': 5.705}, {'end': 192.113, 'text': "Now, you don't necessarily have to go with that route, but you typically see that.", 'start': 186.548, 'duration': 5.565}, {'end': 195.196, 'text': 'I wanted to do that type of idea.', 'start': 192.133, 'duration': 3.063}, {'end': 199.52, 'text': "What I mean by that, by the way, you don't have to follow along, is you'll see this situation.", 'start': 195.356, 'duration': 4.164}], 'summary': 'Discussion about establishing a background color and panel for dashboard designs.', 'duration': 29.465, 'max_score': 170.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE170055.jpg'}, {'end': 235.025, 'src': 'embed', 'start': 206.465, 'weight': 3, 'content': [{'end': 211.368, 'text': "You have to ask yourself, do you want to go light or you want to go dark? We're going to go light.", 'start': 206.465, 'duration': 4.903}, {'end': 216.471, 'text': "That means we could use white if we wanted to, but that's typically not what you see.", 'start': 211.748, 'duration': 4.723}, {'end': 222.475, 'text': 'Over here, what we see is maybe just slightly off white.', 'start': 217.372, 'duration': 5.103}, {'end': 225.617, 'text': "Notice how it's a little bit gray now, light gray.", 'start': 222.995, 'duration': 2.622}, {'end': 229.7, 'text': 'or you can actually introduce color as well.', 'start': 227.618, 'duration': 2.082}, {'end': 235.025, 'text': "so we're actually going to do that and i'm going to use something right around here.", 'start': 229.7, 'duration': 5.325}], 'summary': 'Choosing a light color scheme with a hint of gray and potential introduction of color.', 'duration': 28.56, 'max_score': 206.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE206465.jpg'}, {'end': 283.644, 'src': 'embed', 'start': 258.741, 'weight': 1, 'content': [{'end': 265.806, 'text': "So notice how it's a very low contrast separation between this panel and the background.", 'start': 258.741, 'duration': 7.065}, {'end': 270.549, 'text': 'Now, if we were dealing with a dark mode design, it would look something more like this.', 'start': 266.126, 'duration': 4.423}, {'end': 277.255, 'text': "So we take our background, we'll make it dark, maybe almost like a dark like a slate blue color.", 'start': 270.629, 'duration': 6.626}, {'end': 283.644, 'text': "Then we'll hit I for the eyedropper tool, make it the same color and then increase it slightly.", 'start': 277.275, 'duration': 6.369}], 'summary': 'Low contrast separation in light mode; dark mode with slate blue background.', 'duration': 24.903, 'max_score': 258.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE258741.jpg'}, {'end': 339.04, 'src': 'embed', 'start': 308.75, 'weight': 2, 'content': [{'end': 311.412, 'text': "So I'll click that and that, there we go.", 'start': 308.75, 'duration': 2.662}, {'end': 312.492, 'text': "Now it's perfectly centered.", 'start': 311.532, 'duration': 0.96}, {'end': 317.195, 'text': "Now let's get that logo back up and we're gonna put it roughly right around here.", 'start': 312.933, 'duration': 4.262}, {'end': 319.675, 'text': 'now for the width of this.', 'start': 318.015, 'duration': 1.66}, {'end': 323.696, 'text': "i do want to make sure i'm using something, but yeah, this is actually exactly what i wanted.", 'start': 319.675, 'duration': 4.021}, {'end': 327.898, 'text': 'okay, like around 863 for the width up here.', 'start': 323.696, 'duration': 4.202}, {'end': 331.579, 'text': "so now we have a logo that's left aligned, very typical pattern.", 'start': 327.898, 'duration': 3.681}, {'end': 335.219, 'text': 'uh, that you see in most websites and everything, nothing, you know, no big deal here.', 'start': 331.579, 'duration': 3.64}, {'end': 339.04, 'text': "um, we're also going to have two different navigations.", 'start': 335.219, 'duration': 3.821}], 'summary': 'Align logo to 863 width, left-aligned, with two navigations.', 'duration': 30.29, 'max_score': 308.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE308750.jpg'}, {'end': 378.03, 'src': 'embed', 'start': 350.627, 'weight': 0, 'content': [{'end': 353.31, 'text': 'It all depends on the needs of your project, essentially.', 'start': 350.627, 'duration': 2.683}, {'end': 362.639, 'text': "So what I'm going to do is we're going to put in kind of like a secondary nav up here, and then we'll work on the sidebar nav over here.", 'start': 353.931, 'duration': 8.708}, {'end': 372.667, 'text': 'So this font for this little logo I made is called A-I-L-E-R-O-N, Aileron or something like that.', 'start': 363.22, 'duration': 9.447}, {'end': 378.03, 'text': "I don't know how to pronounce it, but you can download that font and then open it up here on Figma desktop.", 'start': 372.967, 'duration': 5.063}], 'summary': 'Design project involves adding secondary nav and sidebar, using font aileron.', 'duration': 27.403, 'max_score': 350.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE350627.jpg'}], 'start': 170.055, 'title': 'Dashboard design options', 'summary': 'Covers background color options including light gray, off-white, or introducing color, and designing a dashboard interface with light and dark mode, a logo created in figma, and specific font and size requirements for secondary navigation.', 'chapters': [{'end': 229.7, 'start': 170.055, 'title': 'Dashboard background color options', 'summary': 'Discusses establishing a background color for dashboard designs, presenting options of light gray, off-white, or introducing color.', 'duration': 59.645, 'highlights': ["You will notice that there's a background color and then there's usually a panel that sits on top of it.", "You have to ask yourself, do you want to go light or you want to go dark? We're going to go light.", "Notice how it's a little bit gray now, light gray, or you can actually introduce color as well."]}, {'end': 451.668, 'start': 229.7, 'title': 'Designing dashboard interface', 'summary': 'Demonstrates designing a dashboard interface with light and dark mode, using figma to create a logo, and implementing secondary navigation with specific font and size requirements.', 'duration': 221.968, 'highlights': ['The chapter demonstrates designing a dashboard interface with light and dark mode, emphasizing the importance of contrast and color schemes for user interface design.', 'The speaker uses Figma to create a logo, employing specific width measurements and alignment for a typical left-aligned logo in website design.', 'The chapter illustrates the implementation of secondary navigation with specific font (Aileron) and size (14) requirements, along with spacing considerations for menu items.']}], 'duration': 281.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE170055.jpg', 'highlights': ['The chapter illustrates the implementation of secondary navigation with specific font (Aileron) and size (14) requirements, along with spacing considerations for menu items.', 'The chapter demonstrates designing a dashboard interface with light and dark mode, emphasizing the importance of contrast and color schemes for user interface design.', 'The speaker uses Figma to create a logo, employing specific width measurements and alignment for a typical left-aligned logo in website design.', "You have to ask yourself, do you want to go light or you want to go dark? We're going to go light.", "You will notice that there's a background color and then there's usually a panel that sits on top of it.", "Notice how it's a little bit gray now, light gray, or you can actually introduce color as well."]}, {'end': 779.483, 'segs': [{'end': 531.128, 'src': 'embed', 'start': 478.424, 'weight': 0, 'content': [{'end': 480.266, 'text': 'Same thing over here.', 'start': 478.424, 'duration': 1.842}, {'end': 482.167, 'text': 'Equal amount of white space.', 'start': 481.206, 'duration': 0.961}, {'end': 490.831, 'text': "If I hit shift R, we can drag out a ruler here or a guide, you can see everything's centered along the same line as well.", 'start': 482.507, 'duration': 8.324}, {'end': 492.252, 'text': 'So these things matter.', 'start': 490.891, 'duration': 1.361}, {'end': 501.116, 'text': 'These are UI design fundamentals and UI design principles that I really discuss a lot, especially throughout that course at designcourse.com.', 'start': 492.612, 'duration': 8.504}, {'end': 502.877, 'text': 'It helps to develop that eye.', 'start': 501.556, 'duration': 1.321}, {'end': 507.839, 'text': "Now, continuing on, let's do a sidebar navigation over here.", 'start': 503.397, 'duration': 4.442}, {'end': 516.102, 'text': "Now, typically because we're working on something that's like a small desktop or a large tablet,", 'start': 507.999, 'duration': 8.103}, {'end': 525.106, 'text': 'you may want to collapse your sidebar dashboard navigation from having an icon with a label to just an icon.', 'start': 516.102, 'duration': 9.004}, {'end': 527.667, 'text': "And we're going to make that assumption that's what we're doing here.", 'start': 525.366, 'duration': 2.301}, {'end': 531.128, 'text': "And it's just going to be a icon-based navigation.", 'start': 527.687, 'duration': 3.441}], 'summary': 'Ui design fundamentals and principles discussed at designcourse.com, including sidebar navigation for small desktop or large tablet.', 'duration': 52.704, 'max_score': 478.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE478424.jpg'}, {'end': 577.299, 'src': 'embed', 'start': 553.47, 'weight': 1, 'content': [{'end': 560.652, 'text': 'To help even reinforce a little bit more contrast, we can actually add a soft drop shadow.', 'start': 553.47, 'duration': 7.182}, {'end': 562.812, 'text': "We can add multiple of them, and I'll show you what I mean.", 'start': 560.692, 'duration': 2.12}, {'end': 563.933, 'text': "So we'll take this background.", 'start': 562.852, 'duration': 1.081}, {'end': 565.593, 'text': "We're going to add an effect right over here.", 'start': 564.453, 'duration': 1.14}, {'end': 566.734, 'text': "We're going to click that plus icon.", 'start': 565.613, 'duration': 1.121}, {'end': 577.299, 'text': "All right, so plus, and it's a drop shadow, as you could see by default, and then we click over here.", 'start': 571.195, 'duration': 6.104}], 'summary': 'Adding a soft drop shadow can reinforce contrast, multiple shadows can be added.', 'duration': 23.829, 'max_score': 553.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE553470.jpg'}, {'end': 782.546, 'src': 'heatmap', 'start': 751.132, 'weight': 3, 'content': [{'end': 754.233, 'text': 'All right, so now we need some icons.', 'start': 751.132, 'duration': 3.101}, {'end': 763.397, 'text': 'So if you go to the Figma community, if you just click here and then you go to community and then you search or you click on icons,', 'start': 754.373, 'duration': 9.024}, {'end': 765.618, 'text': "rather Bazel's one of the first one.", 'start': 763.397, 'duration': 2.221}, {'end': 773.521, 'text': 'So when you click that, just click duplicate and then you will have access to the, if you click on full preview under pages,', 'start': 766.158, 'duration': 7.363}, {'end': 777.942, 'text': 'to all these really well-designed icons that are outlined and filled.', 'start': 773.521, 'duration': 4.421}, {'end': 779.483, 'text': "So it's really solid.", 'start': 778.602, 'duration': 0.881}, {'end': 782.546, 'text': 'And so grab just any few of these.', 'start': 780.003, 'duration': 2.543}], 'summary': 'Access well-designed icons from figma community for use in the project.', 'duration': 31.414, 'max_score': 751.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE751132.jpg'}], 'start': 451.668, 'title': 'Ui and icon-based navigation design', 'summary': 'Covers ui design fundamentals such as white space, spacing, and center alignment, along with insights on creating icon-based sidebar navigation, including contrast, color adjustments, and icon selection.', 'chapters': [{'end': 502.877, 'start': 451.668, 'title': 'Ui design fundamentals', 'summary': 'Discusses the importance of white space, equal spacing, and center alignment in ui design, emphasizing their impact on user interface design principles and the development of an eye for design.', 'duration': 51.209, 'highlights': ['The importance of white space, equal spacing, and center alignment in UI design is emphasized, impacting user interface design principles and the development of an eye for design.', 'Details about the specific location of white space and equal spacing are highlighted, emphasizing their significance in UI design.', 'The speaker mentions the significance of these UI design fundamentals for developing an eye for design, particularly throughout the course at designcourse.com.']}, {'end': 779.483, 'start': 503.397, 'title': 'Sidebar icon-based navigation design', 'summary': 'Discusses designing an icon-based sidebar navigation, adding contrast with drop shadows, and emphasizing design elements with color adjustments and icon selection.', 'duration': 276.086, 'highlights': ['The chapter discusses designing an icon-based sidebar navigation. The chapter focuses on collapsing the sidebar dashboard navigation to just an icon for small desktop or large tablet views.', 'Adding contrast with drop shadows is demonstrated. The tutorial demonstrates adding multiple soft drop shadows with specific X, Y, and blur settings to create contrast with the background.', 'Emphasizing design elements with color adjustments and icon selection is explained. The tutorial explains adjusting color saturation and hue for design elements, as well as selecting icons from the Figma community for the icon-based navigation.']}], 'duration': 327.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE451668.jpg', 'highlights': ['The chapter discusses designing an icon-based sidebar navigation, focusing on collapsing the sidebar dashboard navigation to just an icon for small desktop or large tablet views.', 'Adding contrast with drop shadows is demonstrated, emphasizing the creation of multiple soft drop shadows with specific X, Y, and blur settings to create contrast with the background.', 'The importance of white space, equal spacing, and center alignment in UI design is emphasized, impacting user interface design principles and the development of an eye for design.', 'Emphasizing design elements with color adjustments and icon selection is explained, including adjusting color saturation and hue for design elements, as well as selecting icons from the Figma community for the icon-based navigation.', 'Details about the specific location of white space and equal spacing are highlighted, emphasizing their significance in UI design.', 'The speaker mentions the significance of these UI design fundamentals for developing an eye for design, particularly throughout the course at designcourse.com.']}, {'end': 1235.121, 'segs': [{'end': 829.181, 'src': 'embed', 'start': 803.087, 'weight': 1, 'content': [{'end': 809.452, 'text': "So if that's the case, if we bring it back in, we can change where it says selection colors.", 'start': 803.087, 'duration': 6.365}, {'end': 810.872, 'text': "It's gonna say black right here.", 'start': 809.532, 'duration': 1.34}, {'end': 816.616, 'text': 'All you have to do is just change that black to whatever you want and it will adjust the icons for you.', 'start': 811.273, 'duration': 5.343}, {'end': 819.959, 'text': "All right, so now I'm gonna drag this just right here.", 'start': 817.177, 'duration': 2.782}, {'end': 824.46, 'text': "And I've made sure that there's equal white space in between each one of those.", 'start': 820.599, 'duration': 3.861}, {'end': 829.181, 'text': "And again, you do that through the help of the smart guides when you're moving things around.", 'start': 824.48, 'duration': 4.701}], 'summary': 'Changing selection colors to black and adjusting icons. ensuring equal white space using smart guides.', 'duration': 26.094, 'max_score': 803.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE803087.jpg'}, {'end': 910.48, 'src': 'embed', 'start': 882.241, 'weight': 2, 'content': [{'end': 884.842, 'text': 'So definitely check that out at designcourse.com.', 'start': 882.241, 'duration': 2.601}, {'end': 888.183, 'text': 'And all right, so, so far so good.', 'start': 885.882, 'duration': 2.301}, {'end': 891.504, 'text': "Now let's go ahead and add some actual content.", 'start': 888.543, 'duration': 2.961}, {'end': 898.97, 'text': "Now, before we do that, the context here is we just lack enough space when we're at this particular viewport here.", 'start': 891.784, 'duration': 7.186}, {'end': 910.48, 'text': 'The intention would be to, once you get to a certain width, like in a browser or on a device, we would actually open this up into a more full view.', 'start': 900.031, 'duration': 10.449}], 'summary': 'Website designcourse.com lacks space at certain viewport, plans to open into a more full view.', 'duration': 28.239, 'max_score': 882.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE882241.jpg'}, {'end': 970.548, 'src': 'embed', 'start': 935.958, 'weight': 4, 'content': [{'end': 937.939, 'text': 'And of course, that means we need to change this as well.', 'start': 935.958, 'duration': 1.981}, {'end': 943.544, 'text': 'Perhaps a better approach would be to make this black and then just take down the opacity.', 'start': 938.78, 'duration': 4.764}, {'end': 945.806, 'text': 'All right, right around 25%.', 'start': 943.905, 'duration': 1.901}, {'end': 949.45, 'text': 'Perfect All right, I like that color a little bit better than the one I chose before.', 'start': 945.806, 'duration': 3.644}, {'end': 953.894, 'text': "Okay, so now we're going to work on the actual content section.", 'start': 950.511, 'duration': 3.383}, {'end': 958.198, 'text': 'So the content section of a dashboard typically consists of cards.', 'start': 954.915, 'duration': 3.283}, {'end': 960.96, 'text': "That's the pattern that's commonly used.", 'start': 958.238, 'duration': 2.722}, {'end': 963.402, 'text': "Now we've chosen a white background for this.", 'start': 961.4, 'duration': 2.002}, {'end': 970.548, 'text': "So our cards, it's nice to be able to see the cards and we have a few different options and a few different ways of doing that.", 'start': 963.482, 'duration': 7.066}], 'summary': 'Adjusting opacity to 25% for better color visibility and discussing dashboard content layout.', 'duration': 34.59, 'max_score': 935.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE935958.jpg'}, {'end': 1220.287, 'src': 'embed', 'start': 1191.649, 'weight': 0, 'content': [{'end': 1196.694, 'text': "This is gonna be the actual value, like how many new messages there've been maybe within the last 24 hours or something like that.", 'start': 1191.649, 'duration': 5.045}, {'end': 1201.999, 'text': "We're gonna make this bold and yes, we are going to make this large and in charge.", 'start': 1197.215, 'duration': 4.784}, {'end': 1206.258, 'text': "So we're gonna go from 14 maybe to like 40.", 'start': 1202.079, 'duration': 4.179}, {'end': 1207.019, 'text': 'Look at that.', 'start': 1206.258, 'duration': 0.761}, {'end': 1214.183, 'text': 'So, in terms of visual hierarchy, which is placing priority, and like what is it that you want a person to see first?', 'start': 1207.099, 'duration': 7.084}, {'end': 1220.287, 'text': 'The thing that a person would see first their eyes would be immediately drawn to is probably gonna be this little 85 right here,', 'start': 1214.283, 'duration': 6.004}], 'summary': 'Increasing new messages from 14 to 40 for visual hierarchy.', 'duration': 28.638, 'max_score': 1191.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1191649.jpg'}], 'start': 780.003, 'title': 'Interface customization & dashboard design', 'summary': "Covers customizing interface elements, changing selection colors, creating hover states, and expanding the interface at a specific viewport width. it also highlights dashboard design best practices, emphasizing elements' measurements and visual hierarchy.", 'chapters': [{'end': 935.517, 'start': 780.003, 'title': 'Design interface customization', 'summary': 'Discusses the process of customizing interface elements, including changing selection colors and creating hover states, and the intention to open the interface into a more full view at a certain viewport width.', 'duration': 155.514, 'highlights': ['The process of customizing interface elements, such as changing selection colors and creating hover states, is demonstrated.', 'The intention is to open the interface into a more full view at a certain viewport width.', 'The color code 6000AC is used to slightly darken a circle for the hover state.', 'The color code 602BF8 is mentioned for adjusting a different color.', 'The chapter emphasizes the use of smart guides for maintaining equal white space between elements.']}, {'end': 1235.121, 'start': 935.958, 'title': 'Dashboard design best practices', 'summary': 'Discusses best practices for dashboard design, including color, card layout, and typography, emphasizing the importance of visual hierarchy and providing specific measurements for elements and text sizes.', 'duration': 299.163, 'highlights': ["The chapter emphasizes the importance of visual hierarchy in dashboard design, with a specific example of prioritizing the 'big 85' value, sized at 40, to draw immediate attention.", "It provides specific measurements for elements, such as a 200-pixel wide rectangle with 14 border radius, and text sizes, including 40 for the 'new messages' value, to create a clear typographic visual hierarchy.", 'It discusses the use of color and opacity to ensure cards are visible within the dashboard, providing guidance on achieving a low-contrast, 3D effect with drop shadows.', 'The chapter also highlights the importance of maintaining consistency in design elements, such as using rounded corners consistently and adjusting drop shadow styles for different elements.', "It emphasizes the use of icons to provide context and visual interest, specifically mentioning the use of a chat app icon to enhance the 'new messages' card."]}], 'duration': 455.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE780003.jpg', 'highlights': ['The chapter emphasizes the importance of visual hierarchy in dashboard design, with specific measurements for elements and text sizes.', 'The process of customizing interface elements, such as changing selection colors and creating hover states, is demonstrated.', 'The chapter emphasizes the use of smart guides for maintaining equal white space between elements.', 'The intention is to open the interface into a more full view at a certain viewport width.', 'It discusses the use of color and opacity to ensure cards are visible within the dashboard, providing guidance on achieving a low-contrast, 3D effect with drop shadows.']}, {'end': 1797.599, 'segs': [{'end': 1266.787, 'src': 'embed', 'start': 1235.201, 'weight': 0, 'content': [{'end': 1238.605, 'text': "So we're just going to stick it, make sure it's aligned pretty good right there.", 'start': 1235.201, 'duration': 3.404}, {'end': 1250.815, 'text': 'All right, and now with dashboards, typically you see things like progress, percentage bars, you could see radial percentage bars and stuff like that.', 'start': 1239.844, 'duration': 10.971}, {'end': 1254.559, 'text': "So let's work one in here and create our own.", 'start': 1252.037, 'duration': 2.522}, {'end': 1260.565, 'text': "So let's pull this down just a bit and I'm going to, this one's just gonna be a progress bar.", 'start': 1255.16, 'duration': 5.405}, {'end': 1266.787, 'text': "So we're gonna take our rectangle tool drag out from here to there.", 'start': 1261.166, 'duration': 5.621}], 'summary': 'Creating a progress bar for dashboards using rectangle tool', 'duration': 31.586, 'max_score': 1235.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1235201.jpg'}, {'end': 1351.088, 'src': 'embed', 'start': 1326.083, 'weight': 1, 'content': [{'end': 1332.516, 'text': "there we go all right so This time, let's try 25, perfect.", 'start': 1326.083, 'duration': 6.433}, {'end': 1338.959, 'text': "So as you can see, and by the way, the number of columns, we could just make that one, it doesn't even matter.", 'start': 1333.076, 'duration': 5.883}, {'end': 1342.4, 'text': "Now we could see that there's a clear equal.", 'start': 1339.419, 'duration': 2.981}, {'end': 1348.945, 'text': "this is completely equal white space, and that's how you achieve that perfection by making these adjustments.", 'start': 1342.4, 'duration': 6.545}, {'end': 1351.088, 'text': 'There, perfect.', 'start': 1350.047, 'duration': 1.041}], 'summary': 'Achieved perfection by adjusting to 25 columns with equal white space.', 'duration': 25.005, 'max_score': 1326.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1326083.jpg'}, {'end': 1402.281, 'src': 'embed', 'start': 1374.763, 'weight': 2, 'content': [{'end': 1381.408, 'text': "So we'll come down maybe somewhere around here, pretty desaturated and relatively low contrast, but not too low.", 'start': 1374.763, 'duration': 6.645}, {'end': 1384.11, 'text': "Then we're going to make it pill-shaped.", 'start': 1382.028, 'duration': 2.082}, {'end': 1390.414, 'text': 'So just take that border radius and really just crank it up to the right so we have perfect pill shapes over here.', 'start': 1384.13, 'duration': 6.284}, {'end': 1395.937, 'text': 'then we will duplicate that with control D.', 'start': 1391.234, 'duration': 4.703}, {'end': 1402.281, 'text': "Oh, and sometimes when that happens, if you're selected on one of the fills or something like that, it'll duplicate that instead of this element.", 'start': 1395.937, 'duration': 6.344}], 'summary': 'Design elements are adjusted to create pill-shaped objects and duplicated using control d.', 'duration': 27.518, 'max_score': 1374.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1374763.jpg'}, {'end': 1464.769, 'src': 'embed', 'start': 1419.007, 'weight': 3, 'content': [{'end': 1422.091, 'text': "And then we're going to give it a label.", 'start': 1419.007, 'duration': 3.084}, {'end': 1425.216, 'text': "We're gonna put the label underneath here and I'll tell you why in a second.", 'start': 1422.372, 'duration': 2.844}, {'end': 1429.985, 'text': "We'll say response rate All right.", 'start': 1425.577, 'duration': 4.408}, {'end': 1432.766, 'text': "And we're going to make this one bold.", 'start': 1430.565, 'duration': 2.201}, {'end': 1435.367, 'text': "We're going to change it to 12 and also bold though.", 'start': 1433.106, 'duration': 2.261}, {'end': 1436.407, 'text': 'There we go.', 'start': 1435.927, 'duration': 0.48}, {'end': 1444.109, 'text': "And then we're going to create a little blip that shows the value like percentage wise.", 'start': 1437.907, 'duration': 6.202}, {'end': 1447.69, 'text': 'So this might be 75% of this available space.', 'start': 1444.149, 'duration': 3.541}, {'end': 1452.832, 'text': 'So what we can do is duplicate this, this card background.', 'start': 1448.431, 'duration': 4.401}, {'end': 1459.805, 'text': "oh yeah, so we've duplicated it, but right now it's a frame, so i'm just going to hit ungroup.", 'start': 1454.241, 'duration': 5.564}, {'end': 1462.187, 'text': 'that takes it, that makes it not be a frame anymore.', 'start': 1459.805, 'duration': 2.382}, {'end': 1464.769, 'text': "and then i'm going to scale it down.", 'start': 1462.187, 'duration': 2.582}], 'summary': 'Creating a label for response rate, formatting it to 12 bold, and duplicating a card background for scaling down.', 'duration': 45.762, 'max_score': 1419.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1419007.jpg'}, {'end': 1618.122, 'src': 'embed', 'start': 1582.881, 'weight': 6, 'content': [{'end': 1588.905, 'text': "Now with that, let's go ahead and just use our purple color and then just really make it light.", 'start': 1582.881, 'duration': 6.024}, {'end': 1595.947, 'text': 'Now I do also want it to be behind that little percentage area.', 'start': 1589.125, 'duration': 6.822}, {'end': 1598.769, 'text': 'So I think it has too much pink to it.', 'start': 1596.448, 'duration': 2.321}, {'end': 1603.212, 'text': 'So we can just take out a lot of the color, something like that.', 'start': 1598.849, 'duration': 4.363}, {'end': 1611.598, 'text': 'Move this up right around there.', 'start': 1603.232, 'duration': 8.366}, {'end': 1612.899, 'text': 'All right.', 'start': 1612.598, 'duration': 0.301}, {'end': 1618.122, 'text': 'So that is it for the very first one, our first card rather.', 'start': 1612.999, 'duration': 5.123}], 'summary': 'Demonstration of adjusting color and position for the first card.', 'duration': 35.241, 'max_score': 1582.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1582881.jpg'}, {'end': 1777.071, 'src': 'heatmap', 'start': 1707.779, 'weight': 0.731, 'content': [{'end': 1715.76, 'text': "Now for this one, we're going to have to use a mask, and let's first change the color here to that.", 'start': 1707.779, 'duration': 7.981}, {'end': 1721.882, 'text': "So this would be obviously 100% filled radial progress bar, but we don't want that.", 'start': 1716.721, 'duration': 5.161}, {'end': 1723.662, 'text': 'We want to change it to something different.', 'start': 1722.002, 'duration': 1.66}, {'end': 1731.843, 'text': "So to do that, we'll take the pen tool, we'll come up here around the top, hold shift, come down around here, hold shift,", 'start': 1723.762, 'duration': 8.081}, {'end': 1733.604, 'text': "and we'll just come around like this.", 'start': 1731.843, 'duration': 1.761}, {'end': 1738.206, 'text': 'connect it, get rid of the stroke, just add a fill.', 'start': 1735.424, 'duration': 2.782}, {'end': 1742.068, 'text': "The color of the fill doesn't matter.", 'start': 1740.747, 'duration': 1.321}, {'end': 1746.49, 'text': 'We just want this now, this vector that we created, hit escape.', 'start': 1742.788, 'duration': 3.702}, {'end': 1748.971, 'text': 'We want it to go underneath.', 'start': 1747.631, 'duration': 1.34}, {'end': 1751.493, 'text': "Let's see where this element is.", 'start': 1750.152, 'duration': 1.341}, {'end': 1752.293, 'text': 'Okay, right there.', 'start': 1751.513, 'duration': 0.78}, {'end': 1753.474, 'text': 'So we have this vector.', 'start': 1752.473, 'duration': 1.001}, {'end': 1756.556, 'text': 'We have to put it underneath there.', 'start': 1753.534, 'duration': 3.022}, {'end': 1762.599, 'text': 'So now we selected both of these elements and we could choose this, which is the mask.', 'start': 1756.656, 'duration': 5.943}, {'end': 1765.742, 'text': 'Very cool stuff.', 'start': 1764.58, 'duration': 1.162}, {'end': 1771.253, 'text': 'All right, so now what we can do is, and by the way, hmm.', 'start': 1766.644, 'duration': 4.609}, {'end': 1777.071, 'text': "i'm going to want to notice the thickness of this versus this.", 'start': 1772.369, 'duration': 4.702}], 'summary': 'Using a mask and vector, change a 100% radial progress bar to a different design in adobe illustrator.', 'duration': 69.292, 'max_score': 1707.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1707779.jpg'}], 'start': 1235.201, 'title': 'Creating dashboard elements', 'summary': 'Covers creating a progress bar, aligning elements, adjusting white space, selecting colors, and adding labels and values, aiming for a 75% response rate. it also explains the process of creating a card design, including scaling, adding shapes, and creating radial progress bars, with a total of 3 cards being designed.', 'chapters': [{'end': 1447.69, 'start': 1235.201, 'title': 'Creating a progress bar in dashboards', 'summary': 'Covers creating a progress bar in a dashboard, including aligning elements, adjusting white space, selecting colors, and adding labels and values, aiming for a 75% response rate.', 'duration': 212.489, 'highlights': ['Creating a progress bar The tutorial focuses on creating a progress bar in a dashboard, demonstrating the process step by step.', 'Adjusting white space and alignment The importance of aligning elements and adjusting white space to achieve a visually balanced layout is emphasized, enhancing the design quality.', 'Selecting colors and shapes The process of selecting colors and shapes for the progress bar is detailed, ensuring a desaturated, low-contrast, pill-shaped design for optimal visual appeal.', "Adding labels and values The addition of a label ('response rate') and a blip representing a 75% value enhances the dashboard's information presentation, improving user understanding."]}, {'end': 1797.599, 'start': 1448.431, 'title': 'Card design tutorial', 'summary': 'Explains the process of creating a card design, including scaling, adding shapes, and creating radial progress bars, with a total of 3 cards being designed.', 'duration': 349.168, 'highlights': ['The process of creating a card design, including scaling and adding shapes, is explained.', 'The tutorial demonstrates the creation of radial progress bars for the cards.', 'A total of 3 cards are designed throughout the tutorial.']}], 'duration': 562.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1235201.jpg', 'highlights': ['Creating a progress bar in a dashboard, demonstrating the process step by step.', 'The importance of aligning elements and adjusting white space to achieve a visually balanced layout is emphasized.', 'The process of selecting colors and shapes for the progress bar is detailed, ensuring a desaturated, low-contrast, pill-shaped design for optimal visual appeal.', "The addition of a label ('response rate') and a blip representing a 75% value enhances the dashboard's information presentation, improving user understanding.", 'The process of creating a card design, including scaling and adding shapes, is explained.', 'The tutorial demonstrates the creation of radial progress bars for the cards.', 'A total of 3 cards are designed throughout the tutorial.']}, {'end': 2115.605, 'segs': [{'end': 1925.75, 'src': 'embed', 'start': 1828.953, 'weight': 1, 'content': [{'end': 1831.674, 'text': "We'll make this one light or regular.", 'start': 1828.953, 'duration': 2.721}, {'end': 1835.536, 'text': "We'll take these two, duplicate.", 'start': 1834.115, 'duration': 1.421}, {'end': 1839.438, 'text': 'Put another stat here, like 72.', 'start': 1837.737, 'duration': 1.701}, {'end': 1845.4, 'text': "We'll right-align it to this section and then put maybe this week.", 'start': 1839.438, 'duration': 5.962}, {'end': 1850.763, 'text': "And then finally, we can put, we'll duplicate this here.", 'start': 1847.401, 'duration': 3.362}, {'end': 1852.624, 'text': "We'll just say goal.", 'start': 1851.844, 'duration': 0.78}, {'end': 1860.782, 'text': "And then we'll grab this, these two elements, duplicate them.", 'start': 1856.138, 'duration': 4.644}, {'end': 1865.886, 'text': "Oh no, I didn't get the other element.", 'start': 1864.465, 'duration': 1.421}, {'end': 1866.386, 'text': "Let's see here.", 'start': 1865.906, 'duration': 0.48}, {'end': 1870.91, 'text': 'All right.', 'start': 1870.63, 'duration': 0.28}, {'end': 1872.031, 'text': 'So now we can copy those.', 'start': 1870.93, 'duration': 1.101}, {'end': 1876.555, 'text': "Now we could paste these and we'll put it maybe like right around here.", 'start': 1873.652, 'duration': 2.903}, {'end': 1880.058, 'text': "We'll change this up to maybe like 62.", 'start': 1878.717, 'duration': 1.341}, {'end': 1880.318, 'text': 'All right.', 'start': 1880.058, 'duration': 0.26}, {'end': 1889.552, 'text': 'We could probably take these two and bring them down a bit.', 'start': 1886.721, 'duration': 2.831}, {'end': 1894.891, 'text': 'There you go.', 'start': 1894.431, 'duration': 0.46}, {'end': 1900.294, 'text': 'So, as you can see, we can create a nice, consistent aesthetic across multiple cards,', 'start': 1895.672, 'duration': 4.622}, {'end': 1903.436, 'text': "even though they're kind of styled differently based on the needs of the project.", 'start': 1900.294, 'duration': 3.142}, {'end': 1908.118, 'text': "I'm not going to bother with customizing this one just because this isn't a real project,", 'start': 1903.476, 'duration': 4.642}, {'end': 1911.76, 'text': "and hopefully you're starting to understand how these layouts and such work.", 'start': 1908.118, 'duration': 3.642}, {'end': 1913.001, 'text': "So we'll leave that there.", 'start': 1912.16, 'duration': 0.841}, {'end': 1924.469, 'text': 'And then, finally, I want to show you a real cool trick to use and integrate a live chart not a live chart, but a realistic looking chart,', 'start': 1913.081, 'duration': 11.388}, {'end': 1925.75, 'text': 'like a line chart or whatever.', 'start': 1924.469, 'duration': 1.281}], 'summary': 'Demonstration of creating consistent aesthetic across cards for project needs.', 'duration': 96.797, 'max_score': 1828.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1828953.jpg'}, {'end': 1968.063, 'src': 'heatmap', 'start': 1942.94, 'weight': 0.783, 'content': [{'end': 1952.042, 'text': "you're gonna have to go to browse plugins in community, and that plugin is right here called chart, right there, okay?", 'start': 1942.94, 'duration': 9.102}, {'end': 1953.543, 'text': 'So I already have it.', 'start': 1952.222, 'duration': 1.321}, {'end': 1957.764, 'text': "I'm gonna go to chart and create chart.", 'start': 1953.543, 'duration': 4.221}, {'end': 1964.541, 'text': "So what's cool is it gives you this UI from which you can choose a random chart.", 'start': 1959.537, 'duration': 5.004}, {'end': 1968.063, 'text': 'You can put the number of lines, number of points, blah, blah, blah, blah.', 'start': 1964.601, 'duration': 3.462}], 'summary': "Plugin named 'chart' allows creating various types of charts with customizable features.", 'duration': 25.123, 'max_score': 1942.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1942940.jpg'}, {'end': 2100.884, 'src': 'embed', 'start': 2070.342, 'weight': 0, 'content': [{'end': 2075.967, 'text': 'with components and interactivity and responsiveness, definitely check out designcourse.com.', 'start': 2070.342, 'duration': 5.625}, {'end': 2081.991, 'text': 'Join up and you can use the coupon code UI2022 to get 22% off.', 'start': 2076.766, 'duration': 5.225}, {'end': 2088.395, 'text': "And also if you're in a different part of the world where the US dollar is worth a lot more than your own currency,", 'start': 2082.231, 'duration': 6.164}, {'end': 2091.737, 'text': 'then you can also get parity pricing, which can get you as much as 40% off.', 'start': 2088.395, 'duration': 3.342}, {'end': 2093.118, 'text': 'So definitely check that out.', 'start': 2091.818, 'duration': 1.3}, {'end': 2100.884, 'text': 'But when you join up, you will go ahead and you will be able to see how to do this properly in the context of a full real project.', 'start': 2093.559, 'duration': 7.325}], 'summary': 'Visit designcourse.com, use coupon ui2022 for 22% off. parity pricing for certain regions, up to 40% off.', 'duration': 30.542, 'max_score': 2070.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE2070342.jpg'}], 'start': 1797.659, 'title': 'Design consistency and aesthetics, realistic charts in ui design', 'summary': 'Covers achieving design consistency in cards through text adjustments, resulting in improved aesthetics. it also discusses creating realistic charts in ui design using a plugin, with the instructor offering discounts and providing 16 hours of content.', 'chapters': [{'end': 1903.436, 'start': 1797.659, 'title': 'Design consistency and aesthetics', 'summary': 'Discusses achieving consistent design and aesthetics across multiple cards by adjusting text sizes, alignment, and styling to achieve a cohesive look, resulting in improved visual aesthetics and consistency.', 'duration': 105.777, 'highlights': ['The process involves adjusting text sizes, alignment, and styling to achieve a consistent aesthetic across multiple cards.', 'The speaker suggests using different font weights and sizes, such as 60% and 20%, to achieve the desired design goals.', "Mention of right-aligning certain text elements and adding specific labels, such as 'this week' and 'goal,' contribute to the consistent aesthetic.", 'The speaker emphasizes the ability to create a cohesive look across cards despite their differing styles based on project needs.']}, {'end': 2115.605, 'start': 1903.476, 'title': 'Creating realistic charts in ui design', 'summary': 'Discusses creating a realistic-looking chart in ui design using a plugin, with the instructor promoting their website and offering discounts, providing 16 hours of content and emphasizing their experience.', 'duration': 212.129, 'highlights': ['The instructor promotes designcourse.com, offering a 22% discount with the code UI2022 and up to 40% off through parity pricing, and emphasizes accessing 16 hours of content and their experience.', "The instructor demonstrates creating a realistic-looking chart in UI design using a plugin, providing a step-by-step guide on using the tool to customize the chart's appearance and features.", 'The instructor invites viewers to join designcourse.com to access tutorials, emphasizing gaining 16 hours of content and learning UI/UX design in an interactive manner.']}], 'duration': 317.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/yOQ-5EcrgLE/pics/yOQ-5EcrgLE1797659.jpg', 'highlights': ['The instructor offers a 22% discount with the code UI2022 and up to 40% off through parity pricing, emphasizing accessing 16 hours of content and their experience.', 'The process involves adjusting text sizes, alignment, and styling to achieve a consistent aesthetic across multiple cards.', "The instructor demonstrates creating a realistic-looking chart in UI design using a plugin, providing a step-by-step guide on using the tool to customize the chart's appearance and features.", "Mention of right-aligning certain text elements and adding specific labels, such as 'this week' and 'goal,' contribute to the consistent aesthetic."]}], 'highlights': ['Promoting designcourse.com with a 22% discount using the coupon code UI2022', 'Offering a bonus section for making the design responsive and interactive at designcourse.com', 'Creating and designing a dashboard from scratch using Figma', 'The chapter illustrates the implementation of secondary navigation with specific font (Aileron) and size (14) requirements, along with spacing considerations for menu items', 'The chapter demonstrates designing a dashboard interface with light and dark mode, emphasizing the importance of contrast and color schemes for user interface design', 'The speaker uses Figma to create a logo, employing specific width measurements and alignment for a typical left-aligned logo in website design', 'The chapter discusses designing an icon-based sidebar navigation, focusing on collapsing the sidebar dashboard navigation to just an icon for small desktop or large tablet views', 'Adding contrast with drop shadows is demonstrated, emphasizing the creation of multiple soft drop shadows with specific X, Y, and blur settings to create contrast with the background', 'The importance of white space, equal spacing, and center alignment in UI design is emphasized, impacting user interface design principles and the development of an eye for design', 'The chapter emphasizes the importance of visual hierarchy in dashboard design, with specific measurements for elements and text sizes', 'The process of customizing interface elements, such as changing selection colors and creating hover states, is demonstrated', 'Creating a progress bar in a dashboard, demonstrating the process step by step', 'The importance of aligning elements and adjusting white space to achieve a visually balanced layout is emphasized', 'The process of selecting colors and shapes for the progress bar is detailed, ensuring a desaturated, low-contrast, pill-shaped design for optimal visual appeal', "The addition of a label ('response rate') and a blip representing a 75% value enhances the dashboard's information presentation, improving user understanding", 'The process of creating a card design, including scaling and adding shapes, is explained', 'The tutorial demonstrates the creation of radial progress bars for the cards', 'The instructor offers a 22% discount with the code UI2022 and up to 40% off through parity pricing, emphasizing accessing 16 hours of content and their experience', 'The process involves adjusting text sizes, alignment, and styling to achieve a consistent aesthetic across multiple cards', "The instructor demonstrates creating a realistic-looking chart in UI design using a plugin, providing a step-by-step guide on using the tool to customize the chart's appearance and features", "Mention of right-aligning certain text elements and adding specific labels, such as 'this week' and 'goal,' contribute to the consistent aesthetic"]}