title
The UI/UX Crash Course for 2023 - Learn UI/UX Design

description
https://bit.ly/3IhZwSx 👈 Learn UI/UX Today. Use "UI2023" for 23% Off! -- Today, I'm releasing my annual UI/UX crash course. You're going to learn about UI/UX design by creating a landing page for a fictional business called 'Fauxica'. We're going to use Figma (https://figma.com) so be sure to create an account. Watch the HTML/CSS process of this design: https://youtu.be/Kl3nOXQjVnQ You're going to a lot about UI/UX design, along with many of the features and workflows of Figma. From UI design fundamentals such as colors, typography, white space, contrast, color, visual hierarchy & more.. To Figma components, component variants, auto-layout, the grid, prototyping & more.. Resource file (just a logo!): https://coursetro.s3.amazonaws.com/stuff/fauxica.svg (right click / save as) 0:00 - Intro 1:11 - Figma UI Overview 4:00 - Getting Started 5:55 - Creating a Grid 7:10 - Placing a Logo 10:42 - Navigation & Components 19:13 - Component Variants 31:16 - Heading 36:30 - Subheadline 41:20 - Call to Action Buttons 53:20 - News section 55:15 - Stark Contrast Plugin 1:02:39 - Using the Figma Community 1:05:21 - Gallery Section 1:16:24 - Final Result Let's get started! #uiux #webdesign #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': 'The UI/UX Crash Course for 2023 - Learn UI/UX Design', 'heatmap': [{'end': 983.799, 'start': 934.559, 'weight': 1}, {'end': 1601.952, 'start': 1259.486, 'weight': 0.891}, {'end': 1777.441, 'start': 1632.737, 'weight': 0.871}, {'end': 2710.765, 'start': 2662.423, 'weight': 0.769}, {'end': 2856.264, 'start': 2803.669, 'weight': 0.978}, {'end': 3134.256, 'start': 3080.031, 'weight': 0.764}, {'end': 4066.062, 'start': 4014.954, 'weight': 0.71}], 'summary': 'Learn ui/ux design through a crash course covering adobe figma, html, css, ui layout, creating components, web design prototyping tips, best practices, contrast, and figma design tips, with a focus on visual hierarchy, accessibility, and micro interactions.', 'chapters': [{'end': 62.903, 'segs': [{'end': 62.903, 'src': 'embed', 'start': 22.045, 'weight': 0, 'content': [{'end': 28.568, 'text': "We'll be using Adobe Figma for this, as Figma has been the most popular UI UX design software for years now.", 'start': 22.045, 'duration': 6.523}, {'end': 33.01, 'text': 'Needless to say, you will learn a lot about the features and workflow of Figma.', 'start': 29.108, 'duration': 3.902}, {'end': 37.032, 'text': "Now you wanna know something that's really cool about this particular project?", 'start': 33.45, 'duration': 3.582}, {'end': 44.215, 'text': 'Well, I also show you how to use HTML and CSS to realize this project in the browser.', 'start': 37.492, 'duration': 6.723}, {'end': 47.236, 'text': "We won't be doing that in this video today.", 'start': 44.955, 'duration': 2.281}, {'end': 53.139, 'text': "That's for another crash course video on front end development that will be linked here once it's ready.", 'start': 47.496, 'duration': 5.643}, {'end': 57.381, 'text': 'And finally, the purpose of this crash course is to help you get your feet wet.', 'start': 53.679, 'duration': 3.702}, {'end': 62.903, 'text': "If by the end of watching this video, you think to yourself, you know what? I'd really like to learn more.", 'start': 58.001, 'duration': 4.902}], 'summary': 'Learn adobe figma, ui ux design, html/css, for beginners.', 'duration': 40.858, 'max_score': 22.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR822045.jpg'}], 'start': 0.189, 'title': 'Ui/ux design', 'summary': 'Explores a crash course on building a simple web page for a fictional business using adobe figma, emphasizing its popularity and the inclusion of html and css, with a promise to delve into front end development in a subsequent video.', 'chapters': [{'end': 62.903, 'start': 0.189, 'title': 'Ui/ux design crash course', 'summary': 'Explores a crash course on building a simple web page for a fictional business using adobe figma, emphasizing its popularity and the inclusion of html and css, with a promise to delve into front end development in a subsequent video.', 'duration': 62.714, 'highlights': ['The crash course focuses on building a simple web page for a fictional business using Adobe Figma, emphasizing the popularity of Figma as the most popular UI UX design software.', 'The course also includes instruction on using HTML and CSS to realize the project in the browser, with a promise to cover front end development in a future video.', 'The purpose of the crash course is to familiarize viewers with the basics and encourage further learning in the field of UI/UX design.']}], 'duration': 62.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8189.jpg', 'highlights': ['The crash course focuses on building a simple web page for a fictional business using Adobe Figma, emphasizing the popularity of Figma as the most popular UI UX design software.', 'The course also includes instruction on using HTML and CSS to realize the project in the browser, with a promise to cover front end development in a future video.', 'The purpose of the crash course is to familiarize viewers with the basics and encourage further learning in the field of UI/UX design.']}, {'end': 933.558, 'segs': [{'end': 91.134, 'src': 'embed', 'start': 63.403, 'weight': 0, 'content': [{'end': 69.266, 'text': "Then it'd be the perfect time to join my interactive UI UX course at designcourse.com.", 'start': 63.403, 'duration': 5.863}, {'end': 70.466, 'text': "All right, that's enough talking.", 'start': 69.426, 'duration': 1.04}, {'end': 71.467, 'text': "Let's get started.", 'start': 70.747, 'duration': 0.72}, {'end': 77.889, 'text': "All right, so here I am in Figma, and after you create an account and you log in, you'll see a UI similar to this.", 'start': 71.807, 'duration': 6.082}, {'end': 79.31, 'text': 'I have a ton of projects.', 'start': 78.009, 'duration': 1.301}, {'end': 87.473, 'text': "These are from students that I revise their design submissions, but you might have something that's completely empty,", 'start': 79.33, 'duration': 8.143}, {'end': 91.134, 'text': "in which case you'll probably see buttons to create a new design file.", 'start': 87.473, 'duration': 3.661}], 'summary': 'Interactive ui ux course available at designcourse.com. figma tutorial walkthrough.', 'duration': 27.731, 'max_score': 63.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR863403.jpg'}, {'end': 242.949, 'src': 'embed', 'start': 212.559, 'weight': 1, 'content': [{'end': 220.022, 'text': "Then you're gonna notice over here, we have all of these, in the property inspector, we have all these different frame preset sizes.", 'start': 212.559, 'duration': 7.463}, {'end': 221.743, 'text': 'So if you wanna start with phone, go ahead.', 'start': 220.082, 'duration': 1.661}, {'end': 226.105, 'text': "I personally, when I'm starting with the UI, I always start designing with desktop first.", 'start': 221.943, 'duration': 4.162}, {'end': 230.747, 'text': "It's the full, it's the whole, what do you wanna call it? The whole shebang.", 'start': 226.145, 'duration': 4.602}, {'end': 242.949, 'text': "And it's just easier to work from realizing the full experience of the layout and then working your way down to tablet and mobile than doing the reverse.", 'start': 232.185, 'duration': 10.764}], 'summary': 'Design starting with desktop provides full layout experience before scaling down to tablet and mobile.', 'duration': 30.39, 'max_score': 212.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8212559.jpg'}, {'end': 365.043, 'src': 'embed', 'start': 337.413, 'weight': 2, 'content': [{'end': 344.236, 'text': 'so this is something that shows up for most of the items that you will select that show up here in the property inspector.', 'start': 337.413, 'duration': 6.823}, {'end': 347.577, 'text': 'so if you want to change your website background, it wants to be a different color.', 'start': 344.236, 'duration': 3.341}, {'end': 350.438, 'text': 'this is where you would change it right here Us.', 'start': 347.577, 'duration': 2.861}, {'end': 353.019, 'text': 'we want to keep it white for this example.', 'start': 350.438, 'duration': 2.581}, {'end': 353.799, 'text': 'All right.', 'start': 353.559, 'duration': 0.24}, {'end': 356.74, 'text': 'Another thing that we want to do is add a layout grid.', 'start': 353.899, 'duration': 2.841}, {'end': 357.301, 'text': 'All right.', 'start': 357.001, 'duration': 0.3}, {'end': 365.043, 'text': 'So we just click on this or click the plus and you can see we have this red sort of squares all over the place.', 'start': 357.321, 'duration': 7.722}], 'summary': 'Property inspector allows changing website background color and adding layout grid.', 'duration': 27.63, 'max_score': 337.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8337413.jpg'}, {'end': 468.792, 'src': 'embed', 'start': 437.059, 'weight': 3, 'content': [{'end': 441.161, 'text': "So when it comes to UI design, there's many different patterns that have been established.", 'start': 437.059, 'duration': 4.102}, {'end': 444.381, 'text': "And especially when you're a beginner, you should stick with.", 'start': 441.901, 'duration': 2.48}, {'end': 451.523, 'text': "And I'm going to stick with the most common pattern for having a desktop header or nav bar or navigation.", 'start': 445.142, 'duration': 6.381}, {'end': 457.205, 'text': "And that is to have your logo on the left, upper left corner, and then to the right, you'll have a navigation.", 'start': 452.083, 'duration': 5.122}, {'end': 459.326, 'text': "So let's do that.", 'start': 458.045, 'duration': 1.281}, {'end': 468.792, 'text': "I'm going to have a resource file where you can download it here in the YouTube description.", 'start': 460.047, 'duration': 8.745}], 'summary': 'Stick to the common ui pattern for desktop navigation with logo on upper left and navigation on right.', 'duration': 31.733, 'max_score': 437.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8437059.jpg'}, {'end': 868.021, 'src': 'embed', 'start': 842.654, 'weight': 4, 'content': [{'end': 852.198, 'text': 'Because when it comes to navigation design and UI UX design, you should always have an active status for one of the nav items.', 'start': 842.654, 'duration': 9.544}, {'end': 859.559, 'text': "so in this case we're designing a home page, so we're going to make it obvious for the user that we're currently on the home page.", 'start': 852.198, 'duration': 7.361}, {'end': 860.599, 'text': 'how do you do that?', 'start': 859.559, 'duration': 1.04}, {'end': 862.92, 'text': 'you have different options on how you could do that.', 'start': 860.599, 'duration': 2.321}, {'end': 868.021, 'text': 'you could change the color, you could change the font weight by making it bold or something like that.', 'start': 862.92, 'duration': 5.101}], 'summary': 'In navigation and ui ux design, active status for home page should be clear, achieved through color or font weight.', 'duration': 25.367, 'max_score': 842.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8842654.jpg'}], 'start': 63.403, 'title': 'Ui design in figma', 'summary': 'Provides an introduction to figma ui design, covering ui layout, frame tool usage, essential keyboard shortcuts, ui design fundamentals, website containers, layout grids, creating a desktop header with a logo and navigation, design principles, tools, efficient navigation design, and active status indicators.', 'chapters': [{'end': 294.925, 'start': 63.403, 'title': 'Learning figma ui design', 'summary': 'Provides an introduction to figma ui design, covering ui layout, frame tool usage, and essential keyboard shortcuts.', 'duration': 231.522, 'highlights': ["The chapter introduces Figma UI design, covering UI layout, frame tool usage, and essential keyboard shortcuts. The transcript provides an overview of Figma's UI, including the layers and assets panel, toolbar, frame tool, property inspector, tabs for design, prototype, and inspect, along with sharing and play options. It also introduces the usage of the frame tool and essential keyboard shortcuts for navigation and zooming.", 'The importance of starting UI design with desktop layout is emphasized for a comprehensive approach. The speaker highlights the importance of starting UI design with the desktop layout to understand the full experience of the layout before working on tablet and mobile designs, promoting a comprehensive approach to UI design.', 'Essential keyboard shortcuts for navigation and zooming in Figma are recommended for efficient workflow. The transcript emphasizes the use of essential keyboard shortcuts, such as holding the space bar and left-click for dragging, mouse scroll wheel for navigation, and control/command + mouse scroll wheel for zooming, promoting efficient workflow and navigation within Figma.']}, {'end': 933.558, 'start': 295.546, 'title': 'Ui design fundamentals', 'summary': 'Covers ui design fundamentals, including setting up website containers, adding layout grids, and creating a desktop header with a logo and navigation, utilizing specific design principles and tools while emphasizing the importance of efficient navigation design and active status indicators.', 'duration': 638.012, 'highlights': ['Setting up website containers and adding layout grids The speaker explains how to select and modify website containers and add layout grids, emphasizing the use of grid systems to help with layout design and the specific adjustments made to column count and margins for effective layout.', 'Creating a desktop header with logo and navigation The process of placing a logo and navigation in a desktop header according to common UI design patterns is demonstrated, including the use of a specific font and placement techniques to ensure proper positioning.', 'Utilizing design principles for efficient navigation design The speaker discusses the importance of efficient navigation design, highlighting the use of components and auto layout for easier revision of the design and the addition of an active status indicator through the use of underlines.']}], 'duration': 870.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR863403.jpg', 'highlights': ['The chapter introduces Figma UI design, covering UI layout, frame tool usage, and essential keyboard shortcuts.', 'The importance of starting UI design with desktop layout is emphasized for a comprehensive approach.', 'Setting up website containers and adding layout grids for effective layout design.', 'Creating a desktop header with logo and navigation according to common UI design patterns.', 'Utilizing design principles for efficient navigation design and adding active status indicators.']}, {'end': 1687.205, 'segs': [{'end': 961.214, 'src': 'embed', 'start': 934.559, 'weight': 4, 'content': [{'end': 942.867, 'text': "Okay So now that we have the active state version of the button designed, we're going to take both of these elements.", 'start': 934.559, 'duration': 8.308}, {'end': 952.549, 'text': "And this is real important to remember when you're creating navigations like this, we first want to go ahead and Here, let's go ahead.", 'start': 943.948, 'duration': 8.601}, {'end': 954.79, 'text': "I'm gonna drag that just down a tad bit.", 'start': 952.589, 'duration': 2.201}, {'end': 955.891, 'text': 'There we go.', 'start': 954.81, 'duration': 1.081}, {'end': 961.214, 'text': "We wanna make sure this bounding box from this type isn't overlapping this.", 'start': 957.272, 'duration': 3.942}], 'summary': 'Designing the active state button and ensuring non-overlapping bounding boxes.', 'duration': 26.655, 'max_score': 934.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8934559.jpg'}, {'end': 983.799, 'src': 'heatmap', 'start': 934.559, 'weight': 1, 'content': [{'end': 942.867, 'text': "Okay So now that we have the active state version of the button designed, we're going to take both of these elements.", 'start': 934.559, 'duration': 8.308}, {'end': 952.549, 'text': "And this is real important to remember when you're creating navigations like this, we first want to go ahead and Here, let's go ahead.", 'start': 943.948, 'duration': 8.601}, {'end': 954.79, 'text': "I'm gonna drag that just down a tad bit.", 'start': 952.589, 'duration': 2.201}, {'end': 955.891, 'text': 'There we go.', 'start': 954.81, 'duration': 1.081}, {'end': 961.214, 'text': "We wanna make sure this bounding box from this type isn't overlapping this.", 'start': 957.272, 'duration': 3.942}, {'end': 969.358, 'text': 'That way we can select both, holding Shift and left clicking both, and we can choose Auto Layout right up here.', 'start': 961.694, 'duration': 7.664}, {'end': 971.059, 'text': 'All right, so we click that.', 'start': 969.378, 'duration': 1.681}, {'end': 973.64, 'text': 'Now, not much has really changed.', 'start': 971.739, 'duration': 1.901}, {'end': 977.202, 'text': 'Now, Auto Layout allows you to do a couple things.', 'start': 974.44, 'duration': 2.762}, {'end': 983.799, 'text': 'So if I move this over here and I zoom up, Essentially what auto layout will allow us to do now?', 'start': 977.442, 'duration': 6.357}], 'summary': 'Designing active state button with auto layout for better navigation.', 'duration': 49.24, 'max_score': 934.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8934559.jpg'}, {'end': 1016.829, 'src': 'embed', 'start': 983.799, 'weight': 0, 'content': [{'end': 989.02, 'text': "now that these two elements are in what's called an auto layout is, we could do all sorts of interesting things.", 'start': 983.799, 'duration': 5.221}, {'end': 992.52, 'text': 'Like we could change it from a vertical direction to a horizontal direction.', 'start': 989.04, 'duration': 3.48}, {'end': 996.701, 'text': "And now that's moved this over here to the right side automatically.", 'start': 993.16, 'duration': 3.541}, {'end': 1002.982, 'text': 'We can also adjust the spacing between these elements by left clicking and dragging this value.', 'start': 998.001, 'duration': 4.981}, {'end': 1005.282, 'text': "I don't want to do that.", 'start': 1004.462, 'duration': 0.82}, {'end': 1008.423, 'text': 'You can change horizontal padding.', 'start': 1006.283, 'duration': 2.14}, {'end': 1016.829, 'text': 'vertical padding, and you have options to adjust all four of the padding options here.', 'start': 1010.404, 'duration': 6.425}], 'summary': 'Auto layout enables changing direction, spacing, and padding for elements.', 'duration': 33.03, 'max_score': 983.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8983799.jpg'}, {'end': 1081.624, 'src': 'embed', 'start': 1053.454, 'weight': 1, 'content': [{'end': 1063.978, 'text': 'for instance you know we have our nav items here and or your boss or a client says I want you to change the color of these links.', 'start': 1053.454, 'duration': 10.524}, {'end': 1066.499, 'text': "We don't want black, we're gonna use something else, maybe like a blue.", 'start': 1064.058, 'duration': 2.441}, {'end': 1071.121, 'text': 'So I come here and I wanna change these all to blue.', 'start': 1067.279, 'duration': 3.842}, {'end': 1077.423, 'text': "All right, now I have to do it individually or select all of them and do it and it's a pain.", 'start': 1073.081, 'duration': 4.342}, {'end': 1081.624, 'text': 'A component negates that necessity.', 'start': 1078.203, 'duration': 3.421}], 'summary': 'Using a component to change link colors collectively eliminates the need for individual changes.', 'duration': 28.17, 'max_score': 1053.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81053454.jpg'}, {'end': 1169.257, 'src': 'embed', 'start': 1143.248, 'weight': 3, 'content': [{'end': 1151.91, 'text': 'components are of allowing you to revise things easily that are supposed to be the same all right?', 'start': 1143.248, 'duration': 8.662}, {'end': 1155.071, 'text': 'Now next topic component variance.', 'start': 1152.67, 'duration': 2.401}, {'end': 1163.313, 'text': 'Remember what I said, we wanna have an active state, but also a state without this little underline, right? Correct.', 'start': 1155.171, 'duration': 8.142}, {'end': 1169.257, 'text': 'So we use component variance to achieve that.', 'start': 1163.774, 'duration': 5.483}], 'summary': 'Component variance allows for easy revision and achieves an active state without an underline.', 'duration': 26.009, 'max_score': 1143.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81143248.jpg'}, {'end': 1601.952, 'src': 'heatmap', 'start': 1259.486, 'weight': 0.891, 'content': [{'end': 1262.628, 'text': "So we're gonna need a few of them because I also wanna have a hover state.", 'start': 1259.486, 'duration': 3.142}, {'end': 1268.993, 'text': "So, on desktop, when people are using with their mouse and you hover over something that's an actionable clickable item,", 'start': 1262.708, 'duration': 6.285}, {'end': 1280.42, 'text': 'you should also have a hover state, which, again, that could be denoted by changing something like the color an underline, adding an underline,', 'start': 1268.993, 'duration': 11.427}, {'end': 1281.5, 'text': 'making a bold whatever.', 'start': 1280.42, 'duration': 1.08}, {'end': 1287.083, 'text': "So what we're going to do here is we could see this one.", 'start': 1282.221, 'duration': 4.862}, {'end': 1293.587, 'text': 'if we select it under the property inspectors, we could see it where it says property one is default.', 'start': 1287.083, 'duration': 6.504}, {'end': 1297.93, 'text': "We're going to change that to active because that's our active state.", 'start': 1293.667, 'duration': 4.263}, {'end': 1299.47, 'text': 'Let me get out of here.', 'start': 1298.61, 'duration': 0.86}, {'end': 1300.951, 'text': 'There we go.', 'start': 1300.531, 'duration': 0.42}, {'end': 1308.454, 'text': "So this is our active state and there's only ever going to be one active link because there's only one page a person could be on at a time.", 'start': 1301.351, 'duration': 7.103}, {'end': 1316.177, 'text': 'Now, when it comes to here home, the second one this is going to be the default state,', 'start': 1309.054, 'duration': 7.123}, {'end': 1320.079, 'text': "where it's not the active page and it's also not being hovered over.", 'start': 1316.177, 'duration': 3.902}, {'end': 1321.16, 'text': 'All right.', 'start': 1320.84, 'duration': 0.32}, {'end': 1323.801, 'text': "Now, before I make changes to this, I'm going to duplicate that.", 'start': 1321.22, 'duration': 2.581}, {'end': 1325.99, 'text': "and we're gonna make a change.", 'start': 1325.089, 'duration': 0.901}, {'end': 1328.011, 'text': 'This is gonna be our hover state, this third one.', 'start': 1326.07, 'duration': 1.941}, {'end': 1333.435, 'text': "So for our hover state, I'm gonna double click to get access to this line right there.", 'start': 1328.572, 'duration': 4.863}, {'end': 1340.641, 'text': "It is selected and we're gonna change the stroke color to like a mid gray or something like that.", 'start': 1334.136, 'duration': 6.505}, {'end': 1351.455, 'text': "So 8C, 8C, 8C is the color code if you wanna follow along, all right? Now, if I'm gonna come up here, to this middle one.", 'start': 1341.241, 'duration': 10.214}, {'end': 1353.276, 'text': 'This is going to be the default state one.', 'start': 1351.495, 'duration': 1.781}, {'end': 1358.239, 'text': "Oh, and by the way, let's go ahead and click on this and we'll change over here, variant three to hover.", 'start': 1353.517, 'duration': 4.722}, {'end': 1360.2, 'text': 'All right.', 'start': 1358.259, 'duration': 1.941}, {'end': 1363.642, 'text': 'And then this one is going to be our default state.', 'start': 1361.12, 'duration': 2.522}, {'end': 1365.483, 'text': "So we'll change that to default.", 'start': 1364.062, 'duration': 1.421}, {'end': 1376.397, 'text': "for the property one name, and then we're going to go ahead and double click and gain access or control I and left click to gain access to this.", 'start': 1366.308, 'duration': 10.089}, {'end': 1385.245, 'text': "and we're going to shrink this sucker all the way down to its small size and then also come over here where it says pass through and change that to zero percent.", 'start': 1376.397, 'duration': 8.848}, {'end': 1387.928, 'text': "now, when we do that it's hidden, you cannot see it.", 'start': 1385.245, 'duration': 2.683}, {'end': 1391.932, 'text': "basically it's taking the opacity and says goodbye, we're not going to see you.", 'start': 1387.928, 'duration': 4.004}, {'end': 1402.969, 'text': "now we're going to prototype this middle one so that when we hover over this element, it's going to smart, animate into this,", 'start': 1391.932, 'duration': 11.037}, {'end': 1405.23, 'text': "which basically means it's gonna morph into this.", 'start': 1402.969, 'duration': 2.261}, {'end': 1411.052, 'text': "We're gonna see this line come from nowhere and grow into this gray line on hover.", 'start': 1405.27, 'duration': 5.782}, {'end': 1417.255, 'text': "We're gonna achieve this in the HTML and CSS as well in that video, which I hope you will watch.", 'start': 1411.613, 'duration': 5.642}, {'end': 1419.396, 'text': 'So how do we do that prototyping?', 'start': 1417.775, 'duration': 1.621}, {'end': 1426.864, 'text': "We come up here to prototype And with that element selected, which it currently is, we're gonna add an interaction.", 'start': 1419.476, 'duration': 7.388}, {'end': 1432.367, 'text': 'So we click plus, we click this click, and then this is gonna be while hovering.', 'start': 1426.924, 'duration': 5.443}, {'end': 1437.65, 'text': "So we want this thing to occur while the mouse is hovering over that element that's currently selected.", 'start': 1432.687, 'duration': 4.963}, {'end': 1443.113, 'text': "So while hovering, what are we going to do? Well, let's see here.", 'start': 1438.25, 'duration': 4.863}, {'end': 1446.275, 'text': "We're gonna drag this here.", 'start': 1443.633, 'duration': 2.642}, {'end': 1448.076, 'text': 'all right.', 'start': 1447.475, 'duration': 0.601}, {'end': 1452.359, 'text': "so, while hovering, it's going to change to property one hover.", 'start': 1448.076, 'duration': 4.283}, {'end': 1454.761, 'text': 'notice this pointing to the hover element.', 'start': 1452.359, 'duration': 2.402}, {'end': 1458.304, 'text': 'and then then we also want to use smart animate.', 'start': 1454.761, 'duration': 3.543}, {'end': 1459.565, 'text': 'instant will make it.', 'start': 1458.304, 'duration': 1.261}, {'end': 1466.891, 'text': "i'm not animated, it's just going to show up this, this, uh, gray bar or gray line immediately, without any type of transition.", 'start': 1459.565, 'duration': 7.326}, {'end': 1469.072, 'text': 'you know animation occurring.', 'start': 1466.891, 'duration': 2.181}, {'end': 1476.017, 'text': 'if we do smart animate, it will create a nice, smooth growing effect on that line.', 'start': 1469.072, 'duration': 6.945}, {'end': 1485.143, 'text': "and we have properties down here like the duration 300 milliseconds, that's fine the easing which will affect how fast it comes in or how slow it,", 'start': 1476.017, 'duration': 9.126}, {'end': 1487.264, 'text': 'you know, goes out and all that stuff.', 'start': 1485.143, 'duration': 2.121}, {'end': 1488.305, 'text': "and then that's it.", 'start': 1487.264, 'duration': 1.041}, {'end': 1497.471, 'text': 'so now i what we can do is how do we get this, this new component variant, onto here?', 'start': 1488.305, 'duration': 9.166}, {'end': 1499.572, 'text': 'all right, well, we can come over here to assets.', 'start': 1497.471, 'duration': 2.101}, {'end': 1504.528, 'text': "you'll see frame one and then we'll see this nav item.", 'start': 1501.545, 'duration': 2.983}, {'end': 1505.229, 'text': "that's what we want.", 'start': 1504.528, 'duration': 0.701}, {'end': 1509.793, 'text': 'to left click and drag over here and there we go.', 'start': 1505.229, 'duration': 4.564}, {'end': 1514.938, 'text': "notice, it's outlined in that purple and by default it's on our active state.", 'start': 1509.793, 'duration': 5.145}, {'end': 1523.185, 'text': 'we can choose to make it not active by coming over here with it selected first and changing it to default.', 'start': 1514.938, 'duration': 8.247}, {'end': 1525.96, 'text': 'guess what that goes away, right?', 'start': 1523.185, 'duration': 2.775}, {'end': 1529.263, 'text': "so let's bring that back, though, because we want our home element.", 'start': 1525.96, 'duration': 3.303}, {'end': 1531.745, 'text': "that's our first nav element.", 'start': 1529.263, 'duration': 2.482}, {'end': 1534.027, 'text': 'we want that to be the active state now.', 'start': 1531.745, 'duration': 2.282}, {'end': 1536.029, 'text': "now what we're going to do is we're going to duplicate it.", 'start': 1534.027, 'duration': 2.002}, {'end': 1541.354, 'text': 'ctrl d, hold shift, move it over somewhere right around here looks fine to me.', 'start': 1536.029, 'duration': 5.325}, {'end': 1545.816, 'text': 'amount of Again, the amount of white space you have between your nav items is very important.', 'start': 1541.354, 'duration': 4.462}, {'end': 1551.298, 'text': "You don't want them to be too close because they might accidentally click on one they didn't intend to,", 'start': 1545.836, 'duration': 5.462}, {'end': 1557.36, 'text': "or you don't want them to be too far and really spread out to where they don't feel like they're a cohesive element.", 'start': 1551.298, 'duration': 6.062}, {'end': 1561.442, 'text': "I'm just going to put somewhere around here and we'll be able to adjust this white space easily, because, guess what?", 'start': 1557.44, 'duration': 4.002}, {'end': 1566.843, 'text': 'We are going to select both of these and put those in an auto layout as well.', 'start': 1562.162, 'duration': 4.681}, {'end': 1568.084, 'text': 'We click plus.', 'start': 1567.204, 'duration': 0.88}, {'end': 1576.858, 'text': "All right, notice that in new smart, it was smart enough to know that this is a horizontal direction because we're having a horizontal navigation.", 'start': 1569.155, 'duration': 7.703}, {'end': 1581.9, 'text': 'And then if you want to adjust the spacing, we can just take this and move it in and out.', 'start': 1577.218, 'duration': 4.682}, {'end': 1585.722, 'text': 'Very handy stuff using auto layout.', 'start': 1582.6, 'duration': 3.122}, {'end': 1596.186, 'text': 'So now what I can do is for this one, we double click into it to select that instance and we can go ahead and change property one to default.', 'start': 1586.342, 'duration': 9.844}, {'end': 1601.952, 'text': "Now what's really cool is we can also double click and change this to products.", 'start': 1597.25, 'duration': 4.702}], 'summary': 'Designing interactive states for desktop navigation with active, default, and hover states using html and css.', 'duration': 342.466, 'max_score': 1259.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81259486.jpg'}, {'end': 1596.186, 'src': 'embed', 'start': 1569.155, 'weight': 2, 'content': [{'end': 1576.858, 'text': "All right, notice that in new smart, it was smart enough to know that this is a horizontal direction because we're having a horizontal navigation.", 'start': 1569.155, 'duration': 7.703}, {'end': 1581.9, 'text': 'And then if you want to adjust the spacing, we can just take this and move it in and out.', 'start': 1577.218, 'duration': 4.682}, {'end': 1585.722, 'text': 'Very handy stuff using auto layout.', 'start': 1582.6, 'duration': 3.122}, {'end': 1596.186, 'text': 'So now what I can do is for this one, we double click into it to select that instance and we can go ahead and change property one to default.', 'start': 1586.342, 'duration': 9.844}], 'summary': 'New smart feature identifies horizontal direction for navigation and allows easy spacing adjustments using auto layout.', 'duration': 27.031, 'max_score': 1569.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81569155.jpg'}], 'start': 934.559, 'title': 'Ui design components', 'summary': 'Covers button design, auto layout, and creating ui components to simplify design changes, with an emphasis on flexibility and cohesive design. it also highlights the use of component variance and adjusting white space.', 'chapters': [{'end': 1030.819, 'start': 934.559, 'title': 'Button design and auto layout', 'summary': 'Discusses the design of an active state button and the use of auto layout to adjust spacing and alignment of elements, enabling flexibility in design and layout.', 'duration': 96.26, 'highlights': ['Auto Layout allows for flexible arrangement of elements, such as changing from vertical to horizontal direction and adjusting spacing, providing greater design flexibility.', 'Demonstrates the process of selecting elements, applying Auto Layout, and adjusting padding options to ensure proper alignment and spacing.', 'Importance of avoiding overlap in the bounding box of elements when creating navigations to enable efficient selection and application of Auto Layout.', 'Instructions for applying Auto Layout to elements, including selecting both elements, choosing Auto Layout, and demonstrating the impact on design arrangement.', 'Explanation of the significance of utilizing Auto Layout when designing navigations, emphasizing its role in facilitating various design adjustments.']}, {'end': 1687.205, 'start': 1031.743, 'title': 'Creating and using components for ui design', 'summary': 'Discusses creating components in ui design, explaining how they can simplify the process of making design changes and how to use component variance to create different states for elements. it also demonstrates how to use auto layout for navigation items and the importance of adjusting white space for cohesive design.', 'duration': 655.462, 'highlights': ['Components simplify design changes and enable easy revisions Components negate the need to individually change multiple elements, allowing for easy and consistent design revisions.', 'Creating component variance for different states of elements Component variance is used to create different states for elements, such as active and hover states, providing flexibility in design.', 'Demonstrating the use of auto layout for navigation items Auto layout is used to arrange navigation items, and the importance of adjusting white space for cohesive design is emphasized.']}], 'duration': 752.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR8934559.jpg', 'highlights': ['Auto Layout allows for flexible arrangement of elements, such as changing from vertical to horizontal direction and adjusting spacing, providing greater design flexibility.', 'Components simplify design changes and enable easy revisions Components negate the need to individually change multiple elements, allowing for easy and consistent design revisions.', 'Demonstrating the use of auto layout for navigation items Auto layout is used to arrange navigation items, and the importance of adjusting white space for cohesive design is emphasized.', 'Creating component variance for different states of elements Component variance is used to create different states for elements, such as active and hover states, providing flexibility in design.', 'Importance of avoiding overlap in the bounding box of elements when creating navigations to enable efficient selection and application of Auto Layout.']}, {'end': 2127.768, 'segs': [{'end': 1766.618, 'src': 'embed', 'start': 1721.525, 'weight': 0, 'content': [{'end': 1723.466, 'text': 'Make sure this is right aligned right there.', 'start': 1721.525, 'duration': 1.941}, {'end': 1730.649, 'text': 'So we have equal white space, or the empty space, to the very right of the design compared to the very left of the design.', 'start': 1723.506, 'duration': 7.143}, {'end': 1731.589, 'text': 'Very important.', 'start': 1730.749, 'duration': 0.84}, {'end': 1736.191, 'text': 'Alignment is one of those key fundamentals that you need to learn.', 'start': 1731.669, 'duration': 4.522}, {'end': 1738.252, 'text': 'So we can go ahead and hide that.', 'start': 1737.071, 'duration': 1.181}, {'end': 1740.854, 'text': 'All right, now watch this.', 'start': 1739.493, 'duration': 1.361}, {'end': 1748.26, 'text': 'If we select this frame, hit the play button on the upper right corner, we can see that animation take place.', 'start': 1740.914, 'duration': 7.346}, {'end': 1750.822, 'text': "It's hard to see, so I'm gonna zoom up.", 'start': 1749.46, 'duration': 1.362}, {'end': 1754.094, 'text': 'control four, look at that.', 'start': 1751.613, 'duration': 2.481}, {'end': 1760.956, 'text': "So this becomes quite powerful when you use it in different contexts, which we're going to as well.", 'start': 1754.814, 'duration': 6.142}, {'end': 1766.618, 'text': "I know it's very simple right here, but you're going to see it's very powerful and a cool way to prototype.", 'start': 1760.996, 'duration': 5.622}], 'summary': 'Importance of right alignment in design, demonstrated with animation and emphasized for powerful prototyping.', 'duration': 45.093, 'max_score': 1721.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81721525.jpg'}, {'end': 1830.938, 'src': 'embed', 'start': 1803.891, 'weight': 4, 'content': [{'end': 1807.072, 'text': 'Well, remember what we do to negate that, we use components.', 'start': 1803.891, 'duration': 3.181}, {'end': 1809.092, 'text': "So let's delete that.", 'start': 1807.852, 'duration': 1.24}, {'end': 1812.533, 'text': "We're going to take both of these elements.", 'start': 1810.233, 'duration': 2.3}, {'end': 1817.695, 'text': 'First, before we create a component, we can also use auto layout here.', 'start': 1813.874, 'duration': 3.821}, {'end': 1820.175, 'text': "And I'll tell you why it would make sense to use auto layout.", 'start': 1817.775, 'duration': 2.4}, {'end': 1823.336, 'text': "Let's say for instance, you don't have to follow along.", 'start': 1820.836, 'duration': 2.5}, {'end': 1824.197, 'text': "I'm going to hit frame.", 'start': 1823.356, 'duration': 0.841}, {'end': 1825.297, 'text': "I'm going to get a tablet.", 'start': 1824.237, 'duration': 1.06}, {'end': 1830.938, 'text': 'I will get an iPad mini right here and we duplicate this and we come over here.', 'start': 1826.097, 'duration': 4.841}], 'summary': 'Using components and auto layout to create a tablet interface for ipad mini.', 'duration': 27.047, 'max_score': 1803.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81803891.jpg'}, {'end': 2031.294, 'src': 'embed', 'start': 2003.181, 'weight': 6, 'content': [{'end': 2008.883, 'text': 'to place emphasis on elements that we deemed are high priority.', 'start': 2003.181, 'duration': 5.702}, {'end': 2015.366, 'text': 'A headline is one of the most high priority elements of a design in a hero section,', 'start': 2009.343, 'duration': 6.023}, {'end': 2018.828, 'text': "because it's usually the first thing that you want a person to read.", 'start': 2015.366, 'duration': 3.462}, {'end': 2022.229, 'text': 'And if you want them to read something first,', 'start': 2019.688, 'duration': 2.541}, {'end': 2031.294, 'text': 'one of the biggest UI fundamentals that you use at your disposal to ensure proper visual hierarchy on that element is size.', 'start': 2022.229, 'duration': 9.065}], 'summary': 'A headline is a high priority element in design, crucial for visual hierarchy and reader attention.', 'duration': 28.113, 'max_score': 2003.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82003181.jpg'}, {'end': 2091.077, 'src': 'embed', 'start': 2060.079, 'weight': 1, 'content': [{'end': 2063.94, 'text': "So it's a very important process of understanding visual hierarchy.", 'start': 2060.079, 'duration': 3.861}, {'end': 2066.261, 'text': "And it's not just achieved through font size.", 'start': 2064.34, 'duration': 1.921}, {'end': 2072.362, 'text': "Like I said, it's also through color, proximity, white space, contrast, the list goes on.", 'start': 2066.4, 'duration': 5.962}, {'end': 2073.263, 'text': 'All right.', 'start': 2073.003, 'duration': 0.26}, {'end': 2078.606, 'text': "So, With this type selected, I don't want this to go all the way out,", 'start': 2074.083, 'duration': 4.523}, {'end': 2085.972, 'text': "and there's a lot of subjective ways we could lay out this layout or piece together this layout, so to speak.", 'start': 2078.606, 'duration': 7.366}, {'end': 2091.077, 'text': 'We could center it and the way you can align certain items based on your selection is up here.', 'start': 2086.391, 'duration': 4.686}], 'summary': 'Visual hierarchy is achieved through font size, color, proximity, white space, and contrast.', 'duration': 30.998, 'max_score': 2060.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82060079.jpg'}], 'start': 1688.005, 'title': 'Web and ui design tips', 'summary': 'Covers web design prototyping tips such as duplicating elements, creating links, adjusting white space, aligning elements, and using animation, alongside ui design fundamentals emphasizing component use, visual hierarchy, auto layout, and component creation in figma.', 'chapters': [{'end': 1766.618, 'start': 1688.005, 'title': 'Web design prototyping tips', 'summary': 'Covers web design prototyping tips including duplicating elements, creating links, adjusting white space, aligning elements, and using animation to create powerful prototypes.', 'duration': 78.613, 'highlights': ['The importance of alignment in design, ensuring equal white space between elements, is emphasized as a key fundamental principle.', 'Demonstrating how to use animation in web design prototypes to create a powerful effect is highlighted, showcasing its versatility in different contexts.', 'The process of creating links, duplicating elements, and adjusting white space to enhance the design is explained, providing practical insights for web designers.', 'The significance of understanding the fundamentals of design, such as alignment and white space, is emphasized for creating effective web design prototypes.']}, {'end': 2127.768, 'start': 1766.858, 'title': 'Ui design fundamentals', 'summary': 'Discusses the importance of using components in ui design to avoid manual duplication, introduces the concept of visual hierarchy, and demonstrates the use of auto layout and component creation in figma.', 'duration': 360.91, 'highlights': ['The chapter emphasizes the use of components in UI design to avoid manual duplication, which can be achieved by creating auto layout and components in Figma.', 'It introduces the concept of visual hierarchy, explaining its significance in emphasizing high priority elements like headlines through factors such as font size, color, proximity, and white space.', 'The demonstration of using auto layout and component creation in Figma showcases the practical application of UI design principles to create a hero section with a headline and sub-headline.', 'The discussion on subjective and objective approaches in layout design provides insights into the flexibility and personal preferences in UI design implementation.']}], 'duration': 439.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR81688005.jpg', 'highlights': ['Demonstrating how to use animation in web design prototypes to create a powerful effect is highlighted, showcasing its versatility in different contexts.', 'The process of creating links, duplicating elements, and adjusting white space to enhance the design is explained, providing practical insights for web designers.', 'The importance of alignment in design, ensuring equal white space between elements, is emphasized as a key fundamental principle.', 'The significance of understanding the fundamentals of design, such as alignment and white space, is emphasized for creating effective web design prototypes.', 'The chapter emphasizes the use of components in UI design to avoid manual duplication, which can be achieved by creating auto layout and components in Figma.', 'It introduces the concept of visual hierarchy, explaining its significance in emphasizing high priority elements like headlines through factors such as font size, color, proximity, and white space.', 'The demonstration of using auto layout and component creation in Figma showcases the practical application of UI design principles to create a hero section with a headline and sub-headline.', 'The discussion on subjective and objective approaches in layout design provides insights into the flexibility and personal preferences in UI design implementation.']}, {'end': 2731.571, 'segs': [{'end': 2153.559, 'src': 'embed', 'start': 2128.528, 'weight': 5, 'content': [{'end': 2135.917, 'text': 'uh, so there are objective things when it comes to ui design, and there are subjective things, many more subjective things, i would say.', 'start': 2128.528, 'duration': 7.389}, {'end': 2140.122, 'text': "so i we're not going to center align this, i'm going to put this right back over here.", 'start': 2135.917, 'duration': 4.205}, {'end': 2142.965, 'text': "notice how i'm making sure it's aligned on the same column.", 'start': 2140.122, 'duration': 2.843}, {'end': 2149.514, 'text': "and, by the way, if you hit shift r, you'll get these little rulers at the top and left.", 'start': 2143.706, 'duration': 5.808}, {'end': 2153.559, 'text': 'you can left click and drag them on there, just so you can quickly visualize things.', 'start': 2149.514, 'duration': 4.045}], 'summary': 'Ui design involves objective and subjective elements, utilize rulers for alignment and visualization.', 'duration': 25.031, 'max_score': 2128.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82128528.jpg'}, {'end': 2302.726, 'src': 'embed', 'start': 2268.865, 'weight': 0, 'content': [{'end': 2270.588, 'text': 'There we go, much better.', 'start': 2268.865, 'duration': 1.723}, {'end': 2276.346, 'text': 'Now, proximity is very important.', 'start': 2274.164, 'duration': 2.182}, {'end': 2281.75, 'text': 'And for those of you who are feeling adventurous,', 'start': 2276.966, 'duration': 4.784}, {'end': 2296.201, 'text': "which I typically don't advise for most newbie or new coming UI designers we can also create more of a distinction with the visual hierarchy between these two elements by changing the font family itself between these two elements.", 'start': 2281.75, 'duration': 14.451}, {'end': 2302.726, 'text': "So for this, I'm going to do that and we're gonna change it to Poppins, which is used up in the navigation.", 'start': 2296.761, 'duration': 5.965}], 'summary': 'Proximity and font family used for visual hierarchy in ui design.', 'duration': 33.861, 'max_score': 2268.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82268865.jpg'}, {'end': 2353.351, 'src': 'embed', 'start': 2324.372, 'weight': 3, 'content': [{'end': 2327.374, 'text': "And now you can see there's a big difference between these two elements.", 'start': 2324.372, 'duration': 3.002}, {'end': 2332.217, 'text': 'Very important to have visual hierarchy, typographically speaking.', 'start': 2327.574, 'duration': 4.643}, {'end': 2333.598, 'text': 'All right.', 'start': 2332.898, 'duration': 0.7}, {'end': 2339.882, 'text': 'so another thing that you can do is to make your type more readable.', 'start': 2333.598, 'duration': 6.284}, {'end': 2348.027, 'text': "when you have lines of type like a sentence or paragraphs, is you can adjust what's called the leading, which is a fancy way of saying,", 'start': 2339.882, 'duration': 8.145}, {'end': 2353.351, 'text': 'line height or the white space or the distance between your lines of text.', 'start': 2348.027, 'duration': 5.324}], 'summary': 'Visual hierarchy is crucial for readability, adjust leading for better type readability.', 'duration': 28.979, 'max_score': 2324.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82324372.jpg'}, {'end': 2413.673, 'src': 'embed', 'start': 2381.293, 'weight': 4, 'content': [{'end': 2383.916, 'text': 'So right around 155 I think is good.', 'start': 2381.293, 'duration': 2.623}, {'end': 2397.347, 'text': 'So now the next element that is pretty typical is going to be the call to actions, your primary call to actions and secondary call to actions.', 'start': 2385.837, 'duration': 11.51}, {'end': 2404.838, 'text': 'Before we get to that, I do want to talk about alignment and also white space.', 'start': 2398.429, 'duration': 6.409}, {'end': 2407.001, 'text': 'We have these two elements.', 'start': 2405.759, 'duration': 1.242}, {'end': 2411.711, 'text': 'Newcomers sometimes will put them too close together.', 'start': 2409.269, 'duration': 2.442}, {'end': 2413.673, 'text': 'This is difficult to read.', 'start': 2412.312, 'duration': 1.361}], 'summary': 'Typical call to actions include primary and secondary ones, aligning and spacing elements around 155 is good.', 'duration': 32.38, 'max_score': 2381.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82381293.jpg'}, {'end': 2482.325, 'src': 'embed', 'start': 2459.235, 'weight': 1, 'content': [{'end': 2467.018, 'text': 'Next up, and by the way, all this stuff is really cemented in my UI UX design course, so you should definitely consider joining that.', 'start': 2459.235, 'duration': 7.783}, {'end': 2474.161, 'text': "All right, so let's go ahead and create our buttons, our primary and the secondary call to action.", 'start': 2467.859, 'duration': 6.302}, {'end': 2482.325, 'text': 'And again, a call to action or CTA is just a fancy way of saying a button or a thing that we want a person to do.', 'start': 2474.661, 'duration': 7.664}], 'summary': 'Ui/ux design course emphasizes creating primary and secondary call to action buttons.', 'duration': 23.09, 'max_score': 2459.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82459235.jpg'}, {'end': 2710.765, 'src': 'heatmap', 'start': 2662.423, 'weight': 0.769, 'content': [{'end': 2664.184, 'text': 'it says secondary as well.', 'start': 2662.423, 'duration': 1.761}, {'end': 2674.53, 'text': 'so if we change secondary, uh elsewhere, and by the way, we could do that by clicking here and then see this we can right click edit style.', 'start': 2664.184, 'duration': 10.346}, {'end': 2678.799, 'text': 'Now we can change the actual color right there.', 'start': 2675.416, 'duration': 3.383}, {'end': 2681.882, 'text': "So we only have to do it in one place, so that's very handy.", 'start': 2678.879, 'duration': 3.003}, {'end': 2684.344, 'text': "All right, that's just a pro tip for ya.", 'start': 2682.543, 'duration': 1.801}, {'end': 2685.445, 'text': "Let's delete that one.", 'start': 2684.464, 'duration': 0.981}, {'end': 2689.389, 'text': "Now we're gonna take both of these elements.", 'start': 2687.147, 'duration': 2.242}, {'end': 2695.354, 'text': 'you can just left click and drag around all of it to select them both, and we can go ahead and choose Auto Layout.', 'start': 2689.389, 'duration': 5.965}, {'end': 2698.998, 'text': 'And then, right here, we wanna center it.', 'start': 2696.596, 'duration': 2.402}, {'end': 2706.435, 'text': "And doing that allows us so that if we want to change the size, the type's always going to stay in the center, which is what we want.", 'start': 2700.427, 'duration': 6.008}, {'end': 2707.604, 'text': 'All right.', 'start': 2707.284, 'duration': 0.32}, {'end': 2710.765, 'text': 'Now, I want to give it some rounded corners.', 'start': 2708.084, 'duration': 2.681}], 'summary': 'Tips for efficient design editing, such as changing colors and using auto layout for alignment.', 'duration': 48.342, 'max_score': 2662.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82662423.jpg'}, {'end': 2714.166, 'src': 'embed', 'start': 2689.389, 'weight': 2, 'content': [{'end': 2695.354, 'text': 'you can just left click and drag around all of it to select them both, and we can go ahead and choose Auto Layout.', 'start': 2689.389, 'duration': 5.965}, {'end': 2698.998, 'text': 'And then, right here, we wanna center it.', 'start': 2696.596, 'duration': 2.402}, {'end': 2706.435, 'text': "And doing that allows us so that if we want to change the size, the type's always going to stay in the center, which is what we want.", 'start': 2700.427, 'duration': 6.008}, {'end': 2707.604, 'text': 'All right.', 'start': 2707.284, 'duration': 0.32}, {'end': 2710.765, 'text': 'Now, I want to give it some rounded corners.', 'start': 2708.084, 'duration': 2.681}, {'end': 2714.166, 'text': 'Now, this is also a subjective design preference.', 'start': 2711.485, 'duration': 2.681}], 'summary': 'Using auto layout centers and maintains text position, then adds rounded corners.', 'duration': 24.777, 'max_score': 2689.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82689389.jpg'}], 'start': 2128.528, 'title': 'Ui and ux design best practices', 'summary': 'Covers ui and ux design best practices including visual hierarchy, alignment, white space, and typographic principles, emphasizing the importance of these elements, and creating primary and secondary call-to-action buttons, establishing visual hierarchy through font weight and color, and utilizing auto layout for centering elements.', 'chapters': [{'end': 2458.07, 'start': 2128.528, 'title': 'Ui design best practices', 'summary': 'Covers ui design best practices such as visual hierarchy, alignment, white space, and typographic principles, emphasizing the importance of these elements in creating an effective user interface.', 'duration': 329.542, 'highlights': ['Visual Hierarchy and Typographic Principles Explains the importance of visual hierarchy in UI design, emphasizing changes in font size, proximity, font family, and leading to create distinction and readability.', 'Alignment and White Space Emphasizes the significance of proper alignment and white space in UI design, highlighting the impact of spacing on readability and the importance of aligning elements along the same column or row.', 'Utilizing Rulers for Visualization Mentions the use of rulers to visualize and align elements, demonstrating the practical application of utilizing shift r to toggle rulers on and off for effective design visualization.']}, {'end': 2731.571, 'start': 2459.235, 'title': 'Ui ux design: creating buttons and visual hierarchy', 'summary': 'Covers creating primary and secondary call-to-action buttons, establishing visual hierarchy through font weight and color, and utilizing auto layout for centering elements.', 'duration': 272.336, 'highlights': ['Establishing visual hierarchy through font weight and color Changing font weight and using different colors to establish visual hierarchy for better user experience.', 'Creating primary and secondary call-to-action buttons Demonstrating the process of creating primary and secondary call-to-action buttons for user interaction.', 'Utilizing Auto Layout for centering elements Using Auto Layout to ensure centered elements for consistent design and user experience.']}], 'duration': 603.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82128528.jpg', 'highlights': ['Establishing visual hierarchy through font weight and color Changing font weight and using different colors to establish visual hierarchy for better user experience.', 'Creating primary and secondary call-to-action buttons Demonstrating the process of creating primary and secondary call-to-action buttons for user interaction.', 'Utilizing Auto Layout for centering elements Using Auto Layout to ensure centered elements for consistent design and user experience.', 'Visual Hierarchy and Typographic Principles Explains the importance of visual hierarchy in UI design, emphasizing changes in font size, proximity, font family, and leading to create distinction and readability.', 'Alignment and White Space Emphasizes the significance of proper alignment and white space in UI design, highlighting the impact of spacing on readability and the importance of aligning elements along the same column or row.', 'Utilizing Rulers for Visualization Mentions the use of rulers to visualize and align elements, demonstrating the practical application of utilizing shift r to toggle rulers on and off for effective design visualization.']}, {'end': 3439.926, 'segs': [{'end': 2783.122, 'src': 'embed', 'start': 2757.802, 'weight': 2, 'content': [{'end': 2764.609, 'text': "Notice, I'm keeping these two elements closer together with the amount of white space between them compared to this.", 'start': 2757.802, 'duration': 6.807}, {'end': 2768.993, 'text': 'Because semantically speaking, this is kind of a different element.', 'start': 2765.409, 'duration': 3.584}, {'end': 2771.455, 'text': 'This is an actionable button that they can click.', 'start': 2769.033, 'duration': 2.422}, {'end': 2773.897, 'text': 'And so this is also referred to as grouping.', 'start': 2771.995, 'duration': 1.902}, {'end': 2776.56, 'text': 'But these two elements kind of work hand in hand.', 'start': 2774.638, 'duration': 1.922}, {'end': 2777.32, 'text': "You're telling a story.", 'start': 2776.58, 'duration': 0.74}, {'end': 2783.122, 'text': "First you're getting their interest with good ad copy in your headline, and then they're gonna read a little bit more,", 'start': 2778.041, 'duration': 5.081}], 'summary': 'Explaining the relationship between elements and their functionality in web design.', 'duration': 25.32, 'max_score': 2757.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82757802.jpg'}, {'end': 2856.264, 'src': 'heatmap', 'start': 2803.669, 'weight': 0.978, 'content': [{'end': 2809.513, 'text': "all right, so maybe we're just going to have a hover here where we change the background in a very subtle manner.", 'start': 2803.669, 'duration': 5.844}, {'end': 2817.257, 'text': 'now notice, this is tied to a actual asset here called secondary for our color.', 'start': 2809.513, 'duration': 7.744}, {'end': 2819.439, 'text': 'so we can break that.', 'start': 2817.257, 'duration': 2.182}, {'end': 2823.361, 'text': 'come over here, just make it a little bit darker.', 'start': 2819.439, 'duration': 3.922}, {'end': 2829.345, 'text': 'the color code for that is E4D2BC right there, all right.', 'start': 2823.361, 'duration': 5.984}, {'end': 2835.641, 'text': "So it's just very slightly darker essentially.", 'start': 2831.82, 'duration': 3.821}, {'end': 2847.043, 'text': 'So what we can do now is switch to prototype tab, double click here, drag this down and then under our properties this is going to be on.', 'start': 2836.241, 'duration': 10.802}, {'end': 2848.623, 'text': 'click is gonna change to while hovering.', 'start': 2847.043, 'duration': 1.58}, {'end': 2856.264, 'text': "And we could use smart animate, but for this, typically I'm just gonna use instant just to change the background color real quickly.", 'start': 2849.703, 'duration': 6.561}], 'summary': 'In the prototype, a subtle hover effect is created by changing the background color to e4d2bc for instant transition.', 'duration': 52.595, 'max_score': 2803.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82803669.jpg'}, {'end': 2934.295, 'src': 'embed', 'start': 2906.656, 'weight': 4, 'content': [{'end': 2909.978, 'text': 'So now we hover over it and it changes the color.', 'start': 2906.656, 'duration': 3.322}, {'end': 2911.819, 'text': 'All right.', 'start': 2911.479, 'duration': 0.34}, {'end': 2918.063, 'text': "Awesome Now let's go ahead and create another call to action here.", 'start': 2913.479, 'duration': 4.584}, {'end': 2921.625, 'text': 'This is referred to as a secondary call to action.', 'start': 2919.244, 'duration': 2.381}, {'end': 2928.09, 'text': 'And we utilize visual hierarchy between these two buttons to make this secondary.', 'start': 2921.946, 'duration': 6.144}, {'end': 2931.513, 'text': "So it means it's not as important, but it's still important enough to put.", 'start': 2928.15, 'duration': 3.363}, {'end': 2932.173, 'text': 'All right.', 'start': 2931.533, 'duration': 0.64}, {'end': 2934.295, 'text': "You don't always have to have a secondary call to action.", 'start': 2932.213, 'duration': 2.082}], 'summary': 'Creating visual hierarchy for primary and secondary calls to action.', 'duration': 27.639, 'max_score': 2906.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82906656.jpg'}, {'end': 3027.309, 'src': 'embed', 'start': 3000.952, 'weight': 1, 'content': [{'end': 3008.714, 'text': 'We can also utilize, if we take both of these, auto layout and leaving it right here.', 'start': 3000.952, 'duration': 7.762}, {'end': 3011.734, 'text': 'It was smart enough to know to put it in the center left.', 'start': 3008.734, 'duration': 3}, {'end': 3017.275, 'text': "If we drag this out, it's not going to center it.", 'start': 3013.955, 'duration': 3.32}, {'end': 3020.536, 'text': "So if we put it in the center, you'll see now it's going to stay to the center.", 'start': 3017.335, 'duration': 3.201}, {'end': 3023.427, 'text': 'as well as a center this way.', 'start': 3021.866, 'duration': 1.561}, {'end': 3025.748, 'text': 'And this is fine as is right here.', 'start': 3024.047, 'duration': 1.701}, {'end': 3027.309, 'text': 'All right.', 'start': 3026.969, 'duration': 0.34}], 'summary': 'Demonstrating usage of auto layout for centering elements.', 'duration': 26.357, 'max_score': 3000.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83000952.jpg'}, {'end': 3134.256, 'src': 'heatmap', 'start': 3052.363, 'weight': 0, 'content': [{'end': 3056.325, 'text': 'So we can do that here in Figma, obviously as well in CSS when we get to that.', 'start': 3052.363, 'duration': 3.962}, {'end': 3060.487, 'text': 'So the way we do that is we take both of these elements.', 'start': 3056.925, 'duration': 3.562}, {'end': 3064.889, 'text': "We're going to go ahead and click Create Component up there.", 'start': 3061.227, 'duration': 3.662}, {'end': 3070.932, 'text': 'And once we have that, we click again up here to add a variant.', 'start': 3064.909, 'duration': 6.023}, {'end': 3077.516, 'text': "And now we're going to drag it back right here.", 'start': 3071.993, 'duration': 5.523}, {'end': 3084.594, 'text': "Let's give that a label, secondary call to action.", 'start': 3080.031, 'duration': 4.563}, {'end': 3089.457, 'text': 'All right, so we take this one.', 'start': 3086.455, 'duration': 3.002}, {'end': 3094.461, 'text': "The only change we're gonna make is adjusting the white space.", 'start': 3090.098, 'duration': 4.363}, {'end': 3098.22, 'text': 'Just like that.', 'start': 3097.54, 'duration': 0.68}, {'end': 3105.884, 'text': "Doesn't seem like a big change, but there's something satisfying about these little micro interactions for users when they hover over elements.", 'start': 3098.981, 'duration': 6.903}, {'end': 3108.026, 'text': "It just kinda lets you know it's a clickable element.", 'start': 3105.904, 'duration': 2.122}, {'end': 3119.311, 'text': 'You could also, if you wanted, to double click to select the actual type and then come over here, choose underline for decoration,', 'start': 3108.506, 'duration': 10.805}, {'end': 3120.771, 'text': 'so you can underline it as well.', 'start': 3119.311, 'duration': 1.46}, {'end': 3124.013, 'text': "there's no, you know, it's just a subjective preference.", 'start': 3120.771, 'duration': 3.242}, {'end': 3126.073, 'text': "you don't have to, but we're choosing to.", 'start': 3124.013, 'duration': 2.06}, {'end': 3134.256, 'text': "so we're gonna double click to select this one, go to prototype, drag this down, create a connection and this is going to be once again,", 'start': 3126.073, 'duration': 8.183}], 'summary': 'Demonstrating creating components, variants, and interactions in figma and css.', 'duration': 55.663, 'max_score': 3052.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83052363.jpg'}, {'end': 3345.973, 'src': 'embed', 'start': 3321.635, 'weight': 6, 'content': [{'end': 3328.761, 'text': "There's a whole ecosystem of awesome Figma plugins that you can use to ensure minimum contrast adherence.", 'start': 3321.635, 'duration': 7.126}, {'end': 3330.422, 'text': "OK, so here's what I mean.", 'start': 3329.161, 'duration': 1.261}, {'end': 3334.586, 'text': "Let's say, for instance, we change this background color here and you don't have to follow along.", 'start': 3330.943, 'duration': 3.643}, {'end': 3336.808, 'text': "We're going to make it darker for some reason.", 'start': 3334.606, 'duration': 2.202}, {'end': 3340.851, 'text': "We're not ultimately, but let's just say you decide you want like a mid gray.", 'start': 3337.028, 'duration': 3.823}, {'end': 3343.352, 'text': "Then we're going to have type on top of it.", 'start': 3341.832, 'duration': 1.52}, {'end': 3345.973, 'text': "So I'm just going to save myself some time.", 'start': 3343.892, 'duration': 2.081}], 'summary': 'Figma plugins can ensure minimum contrast adherence for design elements, such as changing background colors for better visibility.', 'duration': 24.338, 'max_score': 3321.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83321635.jpg'}, {'end': 3433.201, 'src': 'embed', 'start': 3408.603, 'weight': 5, 'content': [{'end': 3416.089, 'text': "Well, there's something called the Web Content Accessibility Guidelines and this is in the world of accessibility which is very important to understand.", 'start': 3408.603, 'duration': 7.486}, {'end': 3424.055, 'text': "It's one of those core principles to understand if you're a UI designer and you're responsible for piecing together the visual aesthetics of a layout.", 'start': 3416.109, 'duration': 7.946}, {'end': 3433.201, 'text': "And the Web Content Accessibility Guidelines, otherwise known as WCAG, or WCAG, nobody says that, don't do it, and you'll embarrass yourself.", 'start': 3424.575, 'duration': 8.626}], 'summary': 'Understanding the web content accessibility guidelines (wcag) is crucial for ui designers in creating visually aesthetic layouts.', 'duration': 24.598, 'max_score': 3408.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83408603.jpg'}], 'start': 2732.112, 'title': 'Ui design best practices', 'summary': 'Covers best practices for ui design, emphasizing auto layout, micro interactions, good contrast, web content accessibility guidelines, and figma plugins.', 'chapters': [{'end': 3000.432, 'start': 2732.112, 'title': 'Designing call-to-action buttons', 'summary': 'Focuses on designing call-to-action buttons, emphasizing the importance of proximity and white space between elements, creating component variants, and utilizing visual hierarchy and icons to enhance user experience.', 'duration': 268.32, 'highlights': ['Emphasizing the importance of proximity and white space between elements The speaker highlights the significance of keeping elements closer together with the right amount of white space between them to differentiate between different types of elements, such as actionable buttons, for effective storytelling.', 'Creating component variants for call-to-action buttons The speaker demonstrates the process of creating a component variant for a call-to-action button, including details about hover effects and color changes, providing practical insights into enhancing user interaction.', 'Utilizing visual hierarchy and icons to enhance user experience The chapter emphasizes the use of visual hierarchy and icons, such as unique colors and arrows, to draw attention and reinforce the importance of different call-to-action buttons, ultimately enhancing user experience and interaction.']}, {'end': 3439.926, 'start': 3000.952, 'title': 'Ui design best practices', 'summary': 'Covers best practices for ui design, including utilizing auto layout for centering elements, creating micro interactions for user engagement, and establishing good contrast in design, with a mention of the web content accessibility guidelines and figma plugins.', 'duration': 438.974, 'highlights': ['Utilizing auto layout for centering elements Auto layout smartly centers elements and allows for adjustments, providing a visually pleasing design and user experience.', 'Creating micro interactions for user engagement Implementing micro interactions, such as shifting elements on hover, enhances user engagement and interactivity.', 'Establishing good contrast in design Emphasizing the importance of contrast in design for readability and referencing the Web Content Accessibility Guidelines for accessibility compliance.', 'Mention of Figma plugins for design assistance Introduction to the Figma plugin ecosystem, showcasing its potential for ensuring design best practices and accessibility compliance.']}], 'duration': 707.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR82732112.jpg', 'highlights': ['Creating component variants for call-to-action buttons, including details about hover effects and color changes, providing practical insights into enhancing user interaction.', 'Utilizing auto layout for centering elements, providing a visually pleasing design and user experience.', 'Emphasizing the importance of proximity and white space between elements to differentiate between different types of elements for effective storytelling.', 'Implementing micro interactions, such as shifting elements on hover, enhances user engagement and interactivity.', 'Utilizing visual hierarchy and icons, such as unique colors and arrows, to draw attention and reinforce the importance of different call-to-action buttons, ultimately enhancing user experience and interaction.', 'Establishing good contrast in design for readability and referencing the Web Content Accessibility Guidelines for accessibility compliance.', 'Mention of Figma plugins for design assistance, showcasing its potential for ensuring design best practices and accessibility compliance.']}, {'end': 3996.227, 'segs': [{'end': 3466.859, 'src': 'embed', 'start': 3439.926, 'weight': 2, 'content': [{'end': 3456.135, 'text': 'but contrast is a very important part of it and the contrast guidelines state that i a couple different things about contrast and you want to adhere to minimum contrast guidelines to have a truly accessible design,', 'start': 3439.926, 'duration': 16.209}, {'end': 3461.177, 'text': "because they've gone through and they've done research and not everybody has the same vision, right?", 'start': 3456.135, 'duration': 5.042}, {'end': 3462.798, 'text': 'Some people have a hard time seeing.', 'start': 3461.337, 'duration': 1.461}, {'end': 3466.859, 'text': 'So with that in mind, there is a plugin.', 'start': 3463.378, 'duration': 3.481}], 'summary': 'Adhere to minimum contrast guidelines for truly accessible design.', 'duration': 26.933, 'max_score': 3439.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83439926.jpg'}, {'end': 3546.401, 'src': 'embed', 'start': 3514.295, 'weight': 0, 'content': [{'end': 3516.116, 'text': "and you'll see Stark, this one right here.", 'start': 3514.295, 'duration': 1.821}, {'end': 3521.539, 'text': 'So if you come over here, it tells you how many people have used it.', 'start': 3517.057, 'duration': 4.482}, {'end': 3524.06, 'text': 'Obviously a ton, 195, 000 people.', 'start': 3521.899, 'duration': 2.161}, {'end': 3526.102, 'text': 'We choose try it out.', 'start': 3524.921, 'duration': 1.181}, {'end': 3532.625, 'text': "It's gonna open up a new document and you can actually click run and you can give it a shot.", 'start': 3526.822, 'duration': 5.803}, {'end': 3541.29, 'text': 'But once we do that, we come over here back to our original design and we click on this little icon right here and we go to plugins.', 'start': 3532.725, 'duration': 8.565}, {'end': 3546.401, 'text': "We can now choose Stark We're gonna click run.", 'start': 3541.77, 'duration': 4.631}], 'summary': 'Stark plugin used by 195,000 people for design testing.', 'duration': 32.106, 'max_score': 3514.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83514295.jpg'}, {'end': 3623.142, 'src': 'embed', 'start': 3595.962, 'weight': 1, 'content': [{'end': 3601.666, 'text': 'No So we really want that to be at least 4.5 to 1.', 'start': 3595.962, 'duration': 5.704}, {'end': 3608.091, 'text': "Large text, which I believe is anything, I'm probably going to get this wrong, 22 to 24 pixels above.", 'start': 3601.666, 'duration': 6.425}, {'end': 3614.315, 'text': "You can actually get away with less contrast a little bit because it's larger text.", 'start': 3609.331, 'duration': 4.984}, {'end': 3616.492, 'text': 'Hopefully you understand that.', 'start': 3615.25, 'duration': 1.242}, {'end': 3620.058, 'text': 'Okay, so this also gives you suggestions.', 'start': 3616.913, 'duration': 3.145}, {'end': 3623.142, 'text': 'So like if we do, oh, you have to be pro for that.', 'start': 3620.258, 'duration': 2.884}], 'summary': 'Recommended text contrast ratio of at least 4.5 to 1, with 22 to 24 pixels for larger text.', 'duration': 27.18, 'max_score': 3595.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83595962.jpg'}, {'end': 3810.28, 'src': 'embed', 'start': 3780.578, 'weight': 3, 'content': [{'end': 3785.681, 'text': "So if we go back here to the home icon, and we're still under the community section, I'm gonna type in confetti.", 'start': 3780.578, 'duration': 5.103}, {'end': 3790.207, 'text': 'Now they actually have some confetti plugins that you can use.', 'start': 3787.025, 'duration': 3.182}, {'end': 3792.209, 'text': "I think this one I've used already.", 'start': 3790.728, 'duration': 1.481}, {'end': 3794.27, 'text': 'It says confetti is 39, 000 people.', 'start': 3792.229, 'duration': 2.041}, {'end': 3796.012, 'text': "I think that's the one I use.", 'start': 3794.29, 'duration': 1.722}, {'end': 3797.032, 'text': 'You can really experiment.', 'start': 3796.052, 'duration': 0.98}, {'end': 3803.657, 'text': 'But you can also search for all and there could be just documents people created with confetti.', 'start': 3797.313, 'duration': 6.344}, {'end': 3810.28, 'text': 'so you can do this with all sorts of things, based on what you need like for emoticons and just hand-drawn elements,', 'start': 3804.958, 'duration': 5.322}], 'summary': 'Confetti plugin used by 39,000 people, can search for related documents.', 'duration': 29.702, 'max_score': 3780.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83780578.jpg'}, {'end': 3996.227, 'src': 'embed', 'start': 3953.204, 'weight': 4, 'content': [{'end': 3958.467, 'text': "And again, we're going to use the same border radius that we've been using around to keep consistent.", 'start': 3953.204, 'duration': 5.263}, {'end': 3959.608, 'text': "That's eight.", 'start': 3959.088, 'duration': 0.52}, {'end': 3965.148, 'text': "So we're going to use eight over here up in this section with that selected.", 'start': 3960.409, 'duration': 4.739}, {'end': 3968.83, 'text': "And then I'm gonna show you a really awesome plugin that I use almost every time.", 'start': 3966.029, 'duration': 2.801}, {'end': 3971.592, 'text': "It's probably the most popular Figma plugin.", 'start': 3969.311, 'duration': 2.281}, {'end': 3972.533, 'text': "It's called Unsplash.", 'start': 3971.612, 'duration': 0.921}, {'end': 3976.555, 'text': "They have an associated website called unsplash.com, and it's where you can use free images.", 'start': 3972.553, 'duration': 4.002}, {'end': 3979.677, 'text': "100% free, even for commercial, it's awesome.", 'start': 3977.576, 'duration': 2.101}, {'end': 3981.658, 'text': 'A very awesome resource.', 'start': 3980.618, 'duration': 1.04}, {'end': 3991.184, 'text': "So with this selected, we're gonna come out here to our plugins, and I have already used and searched for Unsplash, so it's gonna show up here for me.", 'start': 3982.259, 'duration': 8.925}, {'end': 3991.945, 'text': "I'm gonna click Run.", 'start': 3991.224, 'duration': 0.721}, {'end': 3996.227, 'text': 'And then we can do an image search.', 'start': 3994.525, 'duration': 1.702}], 'summary': 'Using unsplash plugin to access 100% free images for design in figma.', 'duration': 43.023, 'max_score': 3953.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83953204.jpg'}], 'start': 3439.926, 'title': 'Design contrast and figma accents', 'summary': 'Covers the significance of contrast in design for accessibility, introduces the stark plugin in figma, and discusses adding accents to designs using figma community plugins like confetti and unsplash for free images.', 'chapters': [{'end': 3760.352, 'start': 3439.926, 'title': 'Understanding contrast in design', 'summary': 'Discusses the importance of contrast in design, highlighting the need for adhering to minimum contrast guidelines for accessibility and introduces the stark plugin in figma, which assists in evaluating and adjusting color contrast ratios.', 'duration': 320.426, 'highlights': ['The Stark plugin in Figma allows users to evaluate color contrast ratios and make adjustments to adhere to the minimum guidelines for accessibility, with a reported usage by 195,000 people. The Stark plugin in Figma is widely used, with 195,000 people reported to have used it, indicating its relevance and popularity in the design community.', 'The importance of adhering to minimum contrast guidelines for accessibility is emphasized, with specific reference to the color contrast ratio needing to be at least 4.5 to 1 for normal text and large text, and the impact of text size on the contrast ratio is explained. The chapter emphasizes the need to adhere to minimum contrast guidelines for accessibility, with specific reference to the required color contrast ratios of 4.5 to 1 for normal text and large text, and the explanation of how text size affects the contrast ratio.', 'The chapter provides insights into adjusting color contrast ratios to meet the accessibility guidelines, demonstrating the process of using the Stark plugin to modify contrast and ensure adherence to the recommended ratios. The chapter provides insights into the process of adjusting color contrast ratios to meet accessibility guidelines, demonstrating the use of the Stark plugin to modify contrast and ensure compliance with the recommended ratios.']}, {'end': 3996.227, 'start': 3761.149, 'title': 'Figma design: adding accents and integrating plugins', 'summary': 'Discusses adding accents to designs to make them more lively, using the figma community to access plugins like confetti, and integrating the unsplash plugin for free images.', 'duration': 235.078, 'highlights': ['Using Figma community to access design accents and plugins like confetti The Figma community offers plugins like confetti, with approximately 39,000 people using it, allowing experimentation and access to various design elements.', 'Integrating Unsplash plugin for free images The Unsplash plugin in Figma allows users to access free images for commercial use, providing a valuable resource for adding photo-based backgrounds to designs.', "Using keyboard shortcuts and plugins for efficient design creation The use of keyboard shortcuts like 'Control-C' and 'Control-B' along with popular plugins like Unsplash enhances the efficiency of design creation in Figma."]}], 'duration': 556.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83439926.jpg', 'highlights': ['The Stark plugin in Figma is widely used, with 195,000 people reported to have used it, indicating its relevance and popularity in the design community.', 'The chapter emphasizes the need to adhere to minimum contrast guidelines for accessibility, with specific reference to the required color contrast ratios of 4.5 to 1 for normal text and large text, and the explanation of how text size affects the contrast ratio.', 'The chapter provides insights into the process of adjusting color contrast ratios to meet accessibility guidelines, demonstrating the use of the Stark plugin to modify contrast and ensure compliance with the recommended ratios.', 'The Figma community offers plugins like confetti, with approximately 39,000 people using it, allowing experimentation and access to various design elements.', 'The Unsplash plugin in Figma allows users to access free images for commercial use, providing a valuable resource for adding photo-based backgrounds to designs.', "The use of keyboard shortcuts like 'Control-C' and 'Control-B' along with popular plugins like Unsplash enhances the efficiency of design creation in Figma."]}, {'end': 4672.456, 'segs': [{'end': 4106.66, 'src': 'heatmap', 'start': 4014.954, 'weight': 0, 'content': [{'end': 4020.656, 'text': "That's on my other monitor, and of course, I can't find it.", 'start': 4014.954, 'duration': 5.702}, {'end': 4022.197, 'text': 'Maybe I just typed in Shu.', 'start': 4020.876, 'duration': 1.321}, {'end': 4023.497, 'text': "Let's just use this one.", 'start': 4022.537, 'duration': 0.96}, {'end': 4026.058, 'text': 'We click it, and guess what? It shows up.', 'start': 4023.597, 'duration': 2.461}, {'end': 4028.119, 'text': 'That is awesome.', 'start': 4027.159, 'duration': 0.96}, {'end': 4030.644, 'text': 'Very, very cool.', 'start': 4029.744, 'duration': 0.9}, {'end': 4039.846, 'text': 'So now what we can do is we can create kind of like a little card within a card on top of this.', 'start': 4031.464, 'duration': 8.382}, {'end': 4041.947, 'text': "So let's just duplicate this.", 'start': 4040.146, 'duration': 1.801}, {'end': 4043.447, 'text': 'Control D to duplicate.', 'start': 4042.007, 'duration': 1.44}, {'end': 4045.628, 'text': 'Drag the copy down.', 'start': 4043.847, 'duration': 1.781}, {'end': 4047.368, 'text': 'Hold Alt.', 'start': 4046.568, 'duration': 0.8}, {'end': 4049.588, 'text': 'Left click and drag in.', 'start': 4048.488, 'duration': 1.1}, {'end': 4053.209, 'text': 'Alt would make it so that both left and right are being affected.', 'start': 4049.888, 'duration': 3.321}, {'end': 4055.93, 'text': "Otherwise, if you let go of Alt, it's just going to affect this side.", 'start': 4053.549, 'duration': 2.381}, {'end': 4066.062, 'text': "again these these keyboard shortcuts, you'll understand as you you'll bake it into your muscle memory as you keep on designing now.", 'start': 4056.877, 'duration': 9.185}, {'end': 4073.286, 'text': 'we also want to put equal white space all the way around from left, bottom and right.', 'start': 4066.062, 'duration': 7.224}, {'end': 4075.527, 'text': 'all right to check that.', 'start': 4073.286, 'duration': 2.241}, {'end': 4077.108, 'text': 'yeah, so i was on one off.', 'start': 4075.527, 'duration': 1.581}, {'end': 4079.75, 'text': 'my bottom says 11, the right and left say 10.', 'start': 4077.108, 'duration': 2.642}, {'end': 4083.832, 'text': 'so we can just use our keyboard down arrow key to push it down by one pixel.', 'start': 4079.75, 'duration': 4.082}, {'end': 4089.113, 'text': "Now, another thing that's very important is when it comes to corner radiuses inside corner radiuses.", 'start': 4084.571, 'duration': 4.542}, {'end': 4097.576, 'text': "This element being that it's nested inside of this element should not have equal or larger corner radiuses.", 'start': 4090.533, 'duration': 7.043}, {'end': 4099.577, 'text': "It just looks dumb if it's even larger.", 'start': 4097.636, 'duration': 1.941}, {'end': 4102.098, 'text': "So if they're larger, that doesn't look right.", 'start': 4099.657, 'duration': 2.441}, {'end': 4103.537, 'text': 'It just looks awkward.', 'start': 4102.518, 'duration': 1.019}, {'end': 4104.238, 'text': 'All right.', 'start': 4103.898, 'duration': 0.34}, {'end': 4106.66, 'text': 'So we want to make it smaller.', 'start': 4104.859, 'duration': 1.801}], 'summary': 'Demonstrating design process with keyboard shortcuts and pixel adjustments.', 'duration': 49.783, 'max_score': 4014.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR84014954.jpg'}, {'end': 4455.002, 'src': 'embed', 'start': 4424.848, 'weight': 3, 'content': [{'end': 4425.328, 'text': 'All right.', 'start': 4424.848, 'duration': 0.48}, {'end': 4432.743, 'text': "Now, one final thing I wanted to show you that's very cool, components can be also quite complex.", 'start': 4426.738, 'duration': 6.005}, {'end': 4435.485, 'text': 'This whole thing can be a component itself.', 'start': 4433.103, 'duration': 2.382}, {'end': 4441.731, 'text': "So with this selected, we could just choose component up here and let's create a component variant out of this.", 'start': 4436.146, 'duration': 5.585}, {'end': 4443.072, 'text': 'So we click the plus up there.', 'start': 4441.791, 'duration': 1.281}, {'end': 4445.234, 'text': "Oopsie, don't move that.", 'start': 4443.092, 'duration': 2.142}, {'end': 4449.477, 'text': "And let's really give ourselves some room with this frame.", 'start': 4446.214, 'duration': 3.263}, {'end': 4451.099, 'text': "So I'm gonna move things around.", 'start': 4449.497, 'duration': 1.602}, {'end': 4453.481, 'text': "We're gonna drag this up here.", 'start': 4452.28, 'duration': 1.201}, {'end': 4455.002, 'text': 'Oh, we need even more.', 'start': 4453.501, 'duration': 1.501}], 'summary': 'Components can be complex and create variants, providing flexibility in design.', 'duration': 30.154, 'max_score': 4424.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR84424848.jpg'}, {'end': 4608.343, 'src': 'embed', 'start': 4575.728, 'weight': 5, 'content': [{'end': 4577.589, 'text': "so we're going to take all three holding shift.", 'start': 4575.728, 'duration': 1.861}, {'end': 4582.652, 'text': 'so we have four elements selected, three pieces of type in the background, and maybe just move it up a little bit.', 'start': 4577.589, 'duration': 5.063}, {'end': 4591.332, 'text': 'so now, if we go back, look at that, let me zoom up, so you can see this Very, very cool.', 'start': 4582.652, 'duration': 8.68}, {'end': 4595.535, 'text': 'So we have all of our micro interactions up here.', 'start': 4591.772, 'duration': 3.763}, {'end': 4599.277, 'text': 'And now that is essentially it.', 'start': 4596.936, 'duration': 2.341}, {'end': 4603.12, 'text': 'So hopefully you learned a lot.', 'start': 4600.358, 'duration': 2.762}, {'end': 4608.343, 'text': "There's obviously a lot more to learn, but this is a crash course and it's already been quite lengthy.", 'start': 4603.96, 'duration': 4.383}], 'summary': 'Demonstrating selection and movement of elements, with a focus on micro interactions.', 'duration': 32.615, 'max_score': 4575.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR84575728.jpg'}, {'end': 4672.456, 'src': 'embed', 'start': 4641.287, 'weight': 4, 'content': [{'end': 4652.997, 'text': 'i seriously suggest you all consider joining designcourse.com my ui ux course if this is something that you enjoy and you really think you can tackle and trust me,', 'start': 4641.287, 'duration': 11.71}, {'end': 4656.44, 'text': 'anybody can tackle this i if you try hard enough.', 'start': 4652.997, 'duration': 3.443}, {'end': 4664.447, 'text': "and so my ui ux course is interactive and there's so many different examples layout examples, component based examples,", 'start': 4656.44, 'duration': 8.007}, {'end': 4670.233, 'text': 'all in Figma that will help you have a successful UI UX design career.', 'start': 4664.987, 'duration': 5.246}, {'end': 4672.456, 'text': "All right, I'll see you all soon and goodbye.", 'start': 4670.634, 'duration': 1.822}], 'summary': 'Join designcourse.com for an interactive ui/ux course in figma to have a successful design career.', 'duration': 31.169, 'max_score': 4641.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR84641287.jpg'}], 'start': 3996.948, 'title': 'Designing product card in webpage and figma design tips', 'summary': 'Demonstrates creating a product card with visual hierarchy and design principles, and showcases the value of creating components and micro interactions while highlighting the potential of a ui/ux course.', 'chapters': [{'end': 4367.581, 'start': 3996.948, 'title': 'Designing product card in webpage', 'summary': 'Demonstrates the process of creating a product card with visual hierarchy, equal white space, and proper corner radiuses, utilizing keyboard shortcuts and design principles, to ensure a cohesive and visually appealing webpage.', 'duration': 370.633, 'highlights': ['Creating visual hierarchy and equal white space is crucial for a cohesive design The speaker emphasizes the importance of visual hierarchy and equal white space, ensuring proper alignment and dimensions for a visually appealing design.', 'Utilizing proper corner radiuses for nested elements The speaker highlights the significance of using appropriate corner radiuses for nested elements to maintain visual balance and aesthetic appeal.', 'Utilizing keyboard shortcuts for efficiency in design process The speaker encourages the use of keyboard shortcuts to expedite the design process and ensure the efficient creation of product cards.']}, {'end': 4672.456, 'start': 4367.661, 'title': 'Figma design tips & ui/ux course', 'summary': 'Showcases the value of creating components, demonstrates the process of changing images and creating complex components, and highlights the potential of micro interactions, and encourages viewers to join a ui/ux course.', 'duration': 304.795, 'highlights': ['The value of creating components is demonstrated, emphasizing the potential to save time and effort for future modifications.', 'The process of changing images and creating complex components is explained, showcasing the versatility of Figma in design creation.', 'The potential of micro interactions is highlighted, demonstrating the interactive capabilities of designs.', 'Encouragement to join a UI/UX course is given, emphasizing its interactive nature and the potential for a successful design career.']}], 'duration': 675.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QwSN4n2sjR8/pics/QwSN4n2sjR83996948.jpg', 'highlights': ['Creating visual hierarchy and equal white space is crucial for a cohesive design', 'Utilizing proper corner radiuses for nested elements to maintain visual balance', 'Utilizing keyboard shortcuts for efficiency in design process', 'The value of creating components is demonstrated, emphasizing the potential to save time and effort', 'The process of changing images and creating complex components is explained, showcasing the versatility of Figma', 'The potential of micro interactions is highlighted, demonstrating the interactive capabilities of designs', 'Encouragement to join a UI/UX course is given, emphasizing its interactive nature and the potential for a successful design career']}], 'highlights': ['The crash course focuses on building a simple web page for a fictional business using Adobe Figma, emphasizing the popularity of Figma as the most popular UI UX design software.', 'Auto Layout allows for flexible arrangement of elements, such as changing from vertical to horizontal direction and adjusting spacing, providing greater design flexibility.', 'Demonstrating how to use animation in web design prototypes to create a powerful effect is highlighted, showcasing its versatility in different contexts.', 'Establishing visual hierarchy through font weight and color Changing font weight and using different colors to establish visual hierarchy for better user experience.', 'Creating component variants for call-to-action buttons, including details about hover effects and color changes, providing practical insights into enhancing user interaction.', 'The Stark plugin in Figma is widely used, with 195,000 people reported to have used it, indicating its relevance and popularity in the design community.']}