title
Ultimate Figma Crash Course 2023 - Full Layout by Example

description
https://hostinger.com/design (Use code: DESIGNCOURSE for 10% off!) http://bit.ly/3ECKzr1 👈 Learn UI/UX Today. Use "BF40" for 40% Off! -- Today, I'm releasing my annual Figma Crash Course, which will teach you Figma through the process of designing a full layout for desktop, tablet and mobile. There's a lot of stuff packed in here, so take it nice and easy! ;) Project logo: https://coursetro.s3.amazonaws.com/stuff/couply.svg 0:00 - Introduction 0:51 - An Awesome Offer 1:48 - UI Overview 4:01 - Navigation Design 22:30 - Hero Section 39:40 - Logo Section 43:00 - Product Gallery 53:00 - Footer Design 54:45 - Responsive Tablet Design 1:01:19 - Responsive Mobile Design 1:08:26 - Mobile Navigation Prototyping 1:11:00 - Website Deployment Let's get started! #figma #uiux #uidesign - - - - - - - - - - - - - - - - - - - - - - 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': 'Ultimate Figma Crash Course 2023 - Full Layout by Example', 'heatmap': [{'end': 531.352, 'start': 477.66, 'weight': 0.838}, {'end': 1018.354, 'start': 770.629, 'weight': 0.72}, {'end': 1264.179, 'start': 1205.022, 'weight': 0.802}, {'end': 1546.03, 'start': 1492.148, 'weight': 0.739}], 'summary': "A comprehensive figma crash course for web design and ui/ux is covered, emphasizing responsive design components, component variants, auto layout constraints, prototyping, and hostinger's black friday sale offering an all-in-one hosting plan for $2.49 per month. additionally, it includes tutorials on creating components, ui design principles and techniques, avatar creation, design elements, customizing cards for responsive websites, mobile ui/ux design, and hostinger's web hosting deal and domain registration.", 'chapters': [{'end': 92.144, 'segs': [{'end': 50.702, 'src': 'embed', 'start': 25.956, 'weight': 0, 'content': [{'end': 36.449, 'text': "things you're going to learn how to tackle in this crash course are responsive design components, component variants, auto layout constraints,", 'start': 25.956, 'duration': 10.493}, {'end': 40.053, 'text': 'prototyping, the grid and so much more.', 'start': 37.15, 'duration': 2.903}, {'end': 44.697, 'text': "And if you're interested in learning more about UI UX, definitely check out designcourse.com,", 'start': 40.393, 'duration': 4.304}, {'end': 50.702, 'text': 'where you can take my interactive UI UX course along with my newly launched interactive CSS course.', 'start': 44.697, 'duration': 6.005}], 'summary': 'Learn responsive design, component variants, auto layout constraints, prototyping, and more in this crash course.', 'duration': 24.746, 'max_score': 25.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE25956.jpg'}, {'end': 100.97, 'src': 'embed', 'start': 70.956, 'weight': 1, 'content': [{'end': 77.037, 'text': "And later on in this video, I'm going to show you how to deploy a website with Hostinger, so make sure you check the timestamps.", 'start': 70.956, 'duration': 6.081}, {'end': 83.459, 'text': 'Now, while they always have awesome deals that you can definitely take advantage of, definitely check out the YouTube description for that.', 'start': 77.497, 'duration': 5.962}, {'end': 86.38, 'text': 'This is their Black Friday sale right now.', 'start': 83.999, 'duration': 2.381}, {'end': 92.144, 'text': 'You can get their all-in-one hosting plan for just $2.49 per month.', 'start': 86.9, 'duration': 5.244}, {'end': 93.425, 'text': 'Yes, $2.49 per month.', 'start': 92.384, 'duration': 1.041}, {'end': 100.97, 'text': 'It also includes up to $80 off of four-year hosting plans, free domains, free email, unlimited free SSL and DDoS protection.', 'start': 93.485, 'duration': 7.485}], 'summary': 'Hostinger offers all-in-one hosting for $2.49/month in black friday sale.', 'duration': 30.014, 'max_score': 70.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE70956.jpg'}], 'start': 0.209, 'title': 'Figma crash course: web design & ui/ux', 'summary': "Covers a comprehensive figma crash course for web design and ui/ux, detailing responsive design components, component variants, auto layout constraints, prototyping, and hostinger's black friday sale offering an all-in-one hosting plan for $2.49 per month.", 'chapters': [{'end': 92.144, 'start': 0.209, 'title': 'Figma crash course: web design & ui/ux', 'summary': "Covers a comprehensive figma crash course for web design and ui/ux, featuring details on responsive design components, component variants, auto layout constraints, prototyping, and hosting with hostinger's black friday sale offering an all-in-one hosting plan for just $2.49 per month.", 'duration': 91.935, 'highlights': ['The crash course covers details on responsive design components, component variants, auto layout constraints, prototyping, and more.', 'The chapter also highlights the sponsorship by Hostinger.com, offering hosting plans for just $2.49 per month during their Black Friday sale.', 'Additionally, the chapter mentions interactive UI/UX and CSS courses available at designcourse.com.']}], 'duration': 91.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE209.jpg', 'highlights': ['The crash course covers details on responsive design components, component variants, auto layout constraints, prototyping, and more.', 'The chapter also highlights the sponsorship by Hostinger.com, offering hosting plans for just $2.49 per month during their Black Friday sale.', 'Additionally, the chapter mentions interactive UI/UX and CSS courses available at designcourse.com.']}, {'end': 499.66, 'segs': [{'end': 122.619, 'src': 'embed', 'start': 92.384, 'weight': 0, 'content': [{'end': 93.425, 'text': 'Yes, $2.49 per month.', 'start': 92.384, 'duration': 1.041}, {'end': 100.97, 'text': 'It also includes up to $80 off of four-year hosting plans, free domains, free email, unlimited free SSL and DDoS protection.', 'start': 93.485, 'duration': 7.485}, {'end': 106.735, 'text': 'And with my exclusive coupon code DESIGNCOURSE, you can get an additional 10% off.', 'start': 101.511, 'duration': 5.224}, {'end': 108.176, 'text': "All right, let's get started.", 'start': 107.035, 'duration': 1.141}, {'end': 111.876, 'text': 'All right, so I have a new design file here in Figma.', 'start': 108.595, 'duration': 3.281}, {'end': 116.097, 'text': "Before we begin, I'm gonna go ahead and just do a very quick overview of the UI.", 'start': 112.216, 'duration': 3.881}, {'end': 119.478, 'text': 'Up here, we can see that we have several different tools.', 'start': 116.797, 'duration': 2.681}, {'end': 122.619, 'text': 'This is just like a move and select tool.', 'start': 120.338, 'duration': 2.281}], 'summary': 'Web hosting plan for $2.49/mo, includes up to $80 off, free domains, email, ssl, ddos protection, and extra 10% off with code designcourse.', 'duration': 30.235, 'max_score': 92.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE92384.jpg'}, {'end': 166.91, 'src': 'embed', 'start': 138.693, 'weight': 1, 'content': [{'end': 141.236, 'text': "It's just for you basically to draw shapes.", 'start': 138.693, 'duration': 2.543}, {'end': 142.778, 'text': 'We have the type tool here.', 'start': 141.537, 'duration': 1.241}, {'end': 151.225, 'text': "Over here is kind of an area where we have, if we click on it, It's set up in tabs where we can see there's components.", 'start': 143.659, 'duration': 7.566}, {'end': 153.026, 'text': 'You can browse plugins and widgets.', 'start': 151.465, 'duration': 1.561}, {'end': 155.726, 'text': 'And this hand tool allows you to move.', 'start': 153.846, 'duration': 1.88}, {'end': 156.987, 'text': "I'll show you how to use that.", 'start': 155.786, 'duration': 1.201}, {'end': 158.327, 'text': 'And a comment tool.', 'start': 157.267, 'duration': 1.06}, {'end': 165.389, 'text': 'And this is for leaving comments, so that other people can basically communicate with each other based on a given design,', 'start': 158.847, 'duration': 6.542}, {'end': 166.91, 'text': 'if you have stakeholders and all that stuff.', 'start': 165.389, 'duration': 1.521}], 'summary': 'The tool offers drawing, type, components, plugins, widgets, hand tool for movement, and comment tool for communication.', 'duration': 28.217, 'max_score': 138.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE138693.jpg'}, {'end': 321.576, 'src': 'embed', 'start': 290.782, 'weight': 2, 'content': [{'end': 296.566, 'text': 'And then from column, typically on a desktop, you use 12 columns and we give ourselves a little bit of margin.', 'start': 290.782, 'duration': 5.784}, {'end': 300.628, 'text': "So I'm going to use like 120 pixels on the left and right side of the margin.", 'start': 296.606, 'duration': 4.022}, {'end': 305.131, 'text': "Now, if I hit if I zoom back out, you'll see this is what it basically should look like.", 'start': 300.968, 'duration': 4.163}, {'end': 309.833, 'text': "Now, we're not actually going to use the margins here or not the margins, but the columns.", 'start': 305.211, 'duration': 4.622}, {'end': 314.136, 'text': "I'm only looking at right now the space from here to there.", 'start': 310.274, 'duration': 3.862}, {'end': 321.576, 'text': 'and as well as from here to there, because when it comes to good design, we want to make sure things are aligned properly,', 'start': 315.553, 'duration': 6.023}], 'summary': 'Using 12 columns with 120 pixels margin on each side for proper alignment.', 'duration': 30.794, 'max_score': 290.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE290782.jpg'}, {'end': 482.762, 'src': 'embed', 'start': 455.867, 'weight': 3, 'content': [{'end': 460.85, 'text': 'it can be viewed on tablets and it can be viewed on, you know, tiny mobile phones.', 'start': 455.867, 'duration': 4.983}, {'end': 470.236, 'text': 'so we have to create a version of these, these things that will work and it will adapt to these different screen sizes.', 'start': 460.85, 'duration': 9.386}, {'end': 472.258, 'text': "very important, it's called responsive design.", 'start': 470.236, 'duration': 2.022}, {'end': 475.999, 'text': 'Okay, so the first thing I usually start off with is a logo.', 'start': 473.118, 'duration': 2.881}, {'end': 477.66, 'text': "now I'm going to link this asset here.", 'start': 475.999, 'duration': 1.661}, {'end': 482.762, 'text': "then I'm about to paste in in the YouTube description so that you can use this SVG based logo.", 'start': 477.66, 'duration': 5.102}], 'summary': 'Creating responsive design for viewing on various devices, including tablets and mobile phones. incorporating svg-based logo.', 'duration': 26.895, 'max_score': 455.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE455867.jpg'}], 'start': 92.384, 'title': 'Figma design, web layout, and responsive design', 'summary': 'Covers a figma design tutorial with hosting plans starting at $2.49 per month, web layout setup with 12 columns and 120-pixel margin, and creation of tablet and phone versions using adobe xd, emphasizing responsive design principles.', 'chapters': [{'end': 244.471, 'start': 92.384, 'title': 'Figma design tutorial', 'summary': 'Covers a figma design tutorial, offering hosting plans at $2.49 per month, with up to $80 off on four-year plans, free domains, free email, unlimited free ssl, and ddos protection, along with an additional 10% discount using the coupon code designcourse. the tutorial provides an overview of the figma ui, including tools for designing, prototyping, and sharing designs.', 'duration': 152.087, 'highlights': ['The hosting plans are available for $2.49 per month with up to $80 off on four-year plans, free domains, free email, unlimited free SSL, and DDoS protection, and an extra 10% discount using the coupon code DESIGNCOURSE. The hosting plan details with cost, discounts, and additional benefits.', 'The tutorial provides an overview of the Figma UI, including tools for designing, prototyping, and sharing designs. Description of the content and focus of the Figma design tutorial.', 'The UI overview includes tools for creating canvases, designing layouts, shaping tools, type tools, components, plugins, widgets, and prototyping. Detailed description of the tools and features within the Figma UI.', 'The tutorial also covers how to create frames or layouts within the Figma design file. Specific focus on the process of creating frames or layouts within Figma.']}, {'end': 332.381, 'start': 244.791, 'title': 'Web design layout and grid basics', 'summary': 'Explains how to set up a desktop layout grid with 12 columns and 120-pixel margin on each side for proper alignment and negative space, emphasizing the importance of equal white space in good design.', 'duration': 87.59, 'highlights': ['Setting up a desktop layout grid with 12 columns and 120-pixel margin on each side ensures proper alignment and negative space, crucial for good design.', 'Selecting a desktop of 1440 by 1024 and adding a grid with 12 columns and 120-pixel margin on each side ensures equal white space and proper alignment for good design.', 'Explaining the process of setting up a desktop layout grid with 12 columns and 120-pixel margin on each side to achieve equal white space and proper alignment for good design.']}, {'end': 499.66, 'start': 332.381, 'title': 'Designing responsive websites', 'summary': 'Focuses on creating tablet and phone versions of a website using adobe xd, emphasizing the importance of responsive design and providing practical tips on using grid view, zooming, and creating different frame designs.', 'duration': 167.279, 'highlights': ['The importance of responsive design is emphasized, as it enables the website to adapt to different screen sizes, including desktops, tablets, and mobile phones. The website needs to be responsive to be viewed on desktops, tablets, and mobile phones, emphasizing the importance of responsive design.', 'Practical tips on using grid view, zooming, and creating different frame designs using Adobe XD are provided, including shortcuts such as Shift G, control/command + scroll wheel, and using the frame tool (F). Practical tips on using grid view, zooming, and creating different frame designs using Adobe XD are provided, including shortcuts such as Shift G, control/command + scroll wheel, and using the frame tool (F).', 'The process of designing layouts, starting with desktop design and emphasizing the ease of imagining the full layout, is explained. The process of designing layouts, starting with desktop design and emphasizing the ease of imagining the full layout, is explained.']}], 'duration': 407.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE92384.jpg', 'highlights': ['The hosting plans are available for $2.49 per month with up to $80 off on four-year plans, free domains, free email, unlimited free SSL, and DDoS protection, and an extra 10% discount using the coupon code DESIGNCOURSE.', 'The tutorial provides an overview of the Figma UI, including tools for designing, prototyping, and sharing designs.', 'Setting up a desktop layout grid with 12 columns and 120-pixel margin on each side ensures proper alignment and negative space, crucial for good design.', 'The importance of responsive design is emphasized, as it enables the website to adapt to different screen sizes, including desktops, tablets, and mobile phones.']}, {'end': 983.048, 'segs': [{'end': 540.297, 'src': 'embed', 'start': 500.32, 'weight': 0, 'content': [{'end': 506.142, 'text': "Now, once we have that in place, we're going to go ahead and create a centered horizontal navigation.", 'start': 500.32, 'duration': 5.822}, {'end': 510.403, 'text': 'And then over here to the right will be a call to action button where it says start saving.', 'start': 506.262, 'duration': 4.141}, {'end': 512.823, 'text': 'So to create that navigation.', 'start': 510.923, 'duration': 1.9}, {'end': 520.706, 'text': "it's actually a little bit of work, because I have to introduce some very several key concepts that are so important to working with in Figma.", 'start': 512.823, 'duration': 7.883}, {'end': 524.067, 'text': "So make sure you pay attention to this because you're going to be using this stuff a lot.", 'start': 520.746, 'duration': 3.321}, {'end': 529.831, 'text': 'we want to create what are called components and component variants.', 'start': 526.048, 'duration': 3.783}, {'end': 531.352, 'text': 'now this actually is a component.', 'start': 529.831, 'duration': 1.521}, {'end': 532.292, 'text': 'how do I know that?', 'start': 531.352, 'duration': 0.94}, {'end': 535.234, 'text': "because it's outlined here in purple.", 'start': 532.292, 'duration': 2.942}, {'end': 538.856, 'text': 'so if you look at this, it has this purple outline.', 'start': 535.234, 'duration': 3.622}, {'end': 540.297, 'text': "that means it's a component.", 'start': 538.856, 'duration': 1.441}], 'summary': 'Creating a centered horizontal navigation with a call to action button. introduction to key concepts like components and component variants in figma.', 'duration': 39.977, 'max_score': 500.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE500320.jpg'}, {'end': 672.986, 'src': 'embed', 'start': 642.226, 'weight': 4, 'content': [{'end': 645.648, 'text': 'where it has this red line in the center.', 'start': 642.226, 'duration': 3.422}, {'end': 648.69, 'text': "that means it's going to be centered vertically with each other.", 'start': 645.648, 'duration': 3.042}, {'end': 651.531, 'text': 'alignment and ui design is massively important.', 'start': 648.69, 'duration': 2.841}, {'end': 655.133, 'text': 'you have to really pay attention and make sure your things are aligned in a cohesive manner.', 'start': 651.531, 'duration': 3.602}, {'end': 656.113, 'text': 'that makes sense.', 'start': 655.133, 'duration': 0.98}, {'end': 658.675, 'text': 'once you have it over there, hold, shift, you can move it over without it.', 'start': 656.113, 'duration': 2.562}, {'end': 663.298, 'text': "uh, doing something like this like when you're trying to move it over.", 'start': 659.375, 'duration': 3.923}, {'end': 667.942, 'text': "so right there and right now, the its actual placement isn't that important.", 'start': 663.298, 'duration': 4.644}, {'end': 672.986, 'text': "we just want to make sure you know it's aligned up here, right there in the center.", 'start': 667.942, 'duration': 5.044}], 'summary': 'Ui design: emphasize alignment for cohesive and centered layout.', 'duration': 30.76, 'max_score': 642.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE642226.jpg'}, {'end': 747.404, 'src': 'embed', 'start': 715.432, 'weight': 3, 'content': [{'end': 720.317, 'text': 'you can change the color, you can make it bold, you can add a little icon next to it.', 'start': 715.432, 'duration': 4.885}, {'end': 724.199, 'text': 'so those are the primary ways that you can signify an active state.', 'start': 720.317, 'duration': 3.882}, {'end': 730.96, 'text': "but what's important when it comes to our components is that we have a way to toggle on and off which one of these is active,", 'start': 724.199, 'duration': 6.761}, {'end': 733.741, 'text': "and you do that through what's called component variance.", 'start': 730.96, 'duration': 2.781}, {'end': 737.261, 'text': "so before we create the component, let's create this design right here.", 'start': 733.741, 'duration': 3.52}, {'end': 739.142, 'text': "i'm holding ctrl mouse scroll,", 'start': 737.261, 'duration': 1.881}, {'end': 747.404, 'text': "zooming up and we're going to take the rectangle tool and i'm just going to create kind of like a half sort of underline.", 'start': 739.142, 'duration': 8.262}], 'summary': 'Components can signify an active state through color, boldness, and icons. component variance allows toggling between active and inactive states.', 'duration': 31.972, 'max_score': 715.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE715432.jpg'}], 'start': 500.32, 'title': 'Creating components in figma', 'summary': 'Explains creating a centered horizontal navigation, emphasizing the importance of components and variants in figma, showcasing the power of components in reusability and the significance of alignment in ui design. additionally, it demonstrates creating a component with default and active states and utilizing auto layout for effective organization.', 'chapters': [{'end': 733.741, 'start': 500.32, 'title': 'Creating centered horizontal navigation and component variants', 'summary': 'Explains the process of creating a centered horizontal navigation and emphasizing the importance of components and component variants in figma, showcasing the power of components in reusability and the significance of alignment in ui design.', 'duration': 233.421, 'highlights': ['Components are outlined in purple and offer reusability, showcasing the power of components in reusability and the significance of alignment in UI design. Components are outlined in purple and offer reusability, allowing for easy changes across instances and showcasing the importance of alignment in UI design.', 'The chapter emphasizes the importance of components and component variants, showcasing the power of components in reusability and the significance of alignment in UI design. The chapter emphasizes the importance of components and component variants, showcasing the power of components in reusability and the significance of alignment in UI design.', 'Creating a centered horizontal navigation and demonstrating the process of creating a centered horizontal navigation. The chapter explains the process of creating a centered horizontal navigation.']}, {'end': 983.048, 'start': 733.741, 'title': 'Creating component and states in design', 'summary': 'Demonstrates the process of creating a component with two different states, default and active, and utilizing auto layout to organize and manage the design elements effectively.', 'duration': 249.307, 'highlights': ['The chapter explains the process of creating a component with two states, default and active, to allow toggling between them, showcasing the practical application of design principles. (Relevance: 5)', 'It demonstrates the use of auto layout to organize and manage design elements effectively, showcasing the practical application of UI/UX design techniques. (Relevance: 4)', 'The speaker explains the step-by-step process of creating a frame and adding auto layout to enable effective management of design elements, emphasizing the importance of structuring components for efficient design workflows. (Relevance: 3)', 'The demonstration includes the use of zoom, selection, and manipulation tools to showcase the practical application of design software functionalities, providing hands-on guidance for design professionals. (Relevance: 2)', 'The chapter emphasizes the significance of naming components and states accurately to ensure clarity and organization within the design process, highlighting the importance of maintaining a structured design system. (Relevance: 1)']}], 'duration': 482.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE500320.jpg', 'highlights': ['Components are outlined in purple and offer reusability, showcasing the power of components in reusability and the significance of alignment in UI design.', 'The chapter emphasizes the importance of components and component variants, showcasing the power of components in reusability and the significance of alignment in UI design.', 'Creating a centered horizontal navigation and demonstrating the process of creating a centered horizontal navigation.', 'The chapter explains the process of creating a component with two states, default and active, to allow toggling between them, showcasing the practical application of design principles.', 'It demonstrates the use of auto layout to organize and manage design elements effectively, showcasing the practical application of UI/UX design techniques.']}, {'end': 1603.806, 'segs': [{'end': 1046.898, 'src': 'embed', 'start': 983.048, 'weight': 0, 'content': [{'end': 989.59, 'text': "we can automatically, when it's an auto layout, change the space between or the white space between these elements.", 'start': 983.048, 'duration': 6.542}, {'end': 990.731, 'text': 'so it allows you.', 'start': 989.59, 'duration': 1.141}, {'end': 993.372, 'text': 'auto layout allows you to do really cool things like this.', 'start': 990.731, 'duration': 2.641}, {'end': 995.573, 'text': 'that can save you a bunch of time.', 'start': 993.372, 'duration': 2.201}, {'end': 1005.037, 'text': 'I and now that is essentially our nav item right here, and what we can do is come right up here with it selected and click this.', 'start': 995.573, 'duration': 9.464}, {'end': 1006.159, 'text': 'this is an alignment.', 'start': 1005.037, 'duration': 1.122}, {'end': 1012.226, 'text': 'So you can align things to left, right, in horizontal and vertical fashion with these elements right here.', 'start': 1006.219, 'duration': 6.007}, {'end': 1018.354, 'text': 'So we wanna choose the align horizontal centers, and that puts us right in the center of this entire frame.', 'start': 1012.707, 'duration': 5.647}, {'end': 1020.877, 'text': 'And that right there is our navigation.', 'start': 1019.395, 'duration': 1.482}, {'end': 1025.933, 'text': "Now we're going to go ahead and create another component, and it's going to be a call to action,", 'start': 1021.812, 'duration': 4.121}, {'end': 1030.334, 'text': "which is just a fancy term of saying a button that you want people to click, and it's going to be,", 'start': 1025.933, 'duration': 4.401}, {'end': 1032.395, 'text': "and we're going to give it the name of start saving.", 'start': 1030.334, 'duration': 2.061}, {'end': 1033.694, 'text': "So let's do that.", 'start': 1032.954, 'duration': 0.74}, {'end': 1037.476, 'text': 'Take your type tool T on your keyboard or just hit T up here.', 'start': 1034.135, 'duration': 3.341}, {'end': 1040.797, 'text': "We're going to left click and type in start saving.", 'start': 1038.036, 'duration': 2.761}, {'end': 1046.898, 'text': "Okay So for start saving type, it's going to be 18 pixels again.", 'start': 1041.977, 'duration': 4.921}], 'summary': "Auto layout allows easy alignment, saving time. creating a call-to-action button 'start saving' at 18 pixels.", 'duration': 63.85, 'max_score': 983.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE983048.jpg'}, {'end': 1129.459, 'src': 'embed', 'start': 1100.525, 'weight': 2, 'content': [{'end': 1103.748, 'text': 'And we also want to choose center right here, center alignment.', 'start': 1100.525, 'duration': 3.223}, {'end': 1107.371, 'text': 'This means when I drag this out, this is going to stay in the center.', 'start': 1103.828, 'duration': 3.543}, {'end': 1112.895, 'text': 'So you can change the position of where this type stays with your auto layout, which is very handy.', 'start': 1107.751, 'duration': 5.144}, {'end': 1115.117, 'text': 'So somewhere right around here looks pretty good.', 'start': 1113.396, 'duration': 1.721}, {'end': 1117.9, 'text': "We'll give it a little bit of a corner radius.", 'start': 1115.438, 'duration': 2.462}, {'end': 1122.896, 'text': "And I'm also going to go ahead and give it a high contrast black stroke.", 'start': 1119.195, 'duration': 3.701}, {'end': 1126.578, 'text': 'So you can add a stroke, which is basically a border around it.', 'start': 1123.457, 'duration': 3.121}, {'end': 1129.459, 'text': 'When you click it, you have properties for now.', 'start': 1127.018, 'duration': 2.441}], 'summary': 'Demonstrating center alignment and applying stroke to object.', 'duration': 28.934, 'max_score': 1100.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1100525.jpg'}, {'end': 1266.18, 'src': 'heatmap', 'start': 1200.741, 'weight': 5, 'content': [{'end': 1203.942, 'text': 'So now would be a good time to create a component out of this.', 'start': 1200.741, 'duration': 3.201}, {'end': 1208.603, 'text': 'If you wanted to create a component variant, maybe where you have a hover state, you can do that.', 'start': 1205.022, 'duration': 3.581}, {'end': 1211.324, 'text': "In fact, I'll go ahead and show you how to do that.", 'start': 1209.243, 'duration': 2.081}, {'end': 1212.524, 'text': 'We can click plus right here.', 'start': 1211.384, 'duration': 1.14}, {'end': 1215.525, 'text': "Let's drag this over here to our component frame.", 'start': 1213.164, 'duration': 2.361}, {'end': 1221.126, 'text': 'Maybe on hover this side, maybe the background gets slightly darker.', 'start': 1217.885, 'duration': 3.241}, {'end': 1223.887, 'text': 'So the fill over here is on a right-hand property inspector.', 'start': 1221.186, 'duration': 2.701}, {'end': 1225.187, 'text': "It's going to make it a little bit darker.", 'start': 1223.907, 'duration': 1.28}, {'end': 1228.553, 'text': "right, and that's it.", 'start': 1226.152, 'duration': 2.401}, {'end': 1231.915, 'text': "now what's really cool is i for interactivity.", 'start': 1228.553, 'duration': 3.362}, {'end': 1233.696, 'text': 'we can prototype this.', 'start': 1231.915, 'duration': 1.781}, {'end': 1238.719, 'text': "so i'm going to double click on the first one and then choose prototype up here.", 'start': 1233.696, 'duration': 5.023}, {'end': 1243.161, 'text': "and when i choose prototype, you're going to see this little plus sign.", 'start': 1238.719, 'duration': 4.442}, {'end': 1248.764, 'text': 'we can drag it right there and when we do that, it shows this area over here.', 'start': 1243.161, 'duration': 5.603}, {'end': 1251.085, 'text': 'so on click, you can make things happen.', 'start': 1248.764, 'duration': 2.321}, {'end': 1255.994, 'text': "on click, on drag while hovering, we're going to do while hovering for a hover state right.", 'start': 1251.085, 'duration': 4.909}, {'end': 1264.179, 'text': "so now it's going to change that and we can change it from instant to smart animate i, which can do really interesting things.", 'start': 1255.994, 'duration': 8.185}, {'end': 1266.18, 'text': "for now, i think i'm fine with that.", 'start': 1264.179, 'duration': 2.001}], 'summary': 'Creating a component with hover state and interactivity, using prototype for smart animate.', 'duration': 65.439, 'max_score': 1200.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1200741.jpg'}, {'end': 1470.405, 'src': 'embed', 'start': 1441.903, 'weight': 3, 'content': [{'end': 1446.726, 'text': "I talk about this a lot, and it's basically one of the core UI design principles.", 'start': 1441.903, 'duration': 4.823}, {'end': 1452.951, 'text': "Basically, it means you're setting priority to things based on how you design and present them.", 'start': 1448.587, 'duration': 4.364}, {'end': 1459.396, 'text': 'And when it comes to type, one of the primary ways to do that is through the scale or the font size.', 'start': 1453.571, 'duration': 5.825}, {'end': 1464.7, 'text': "So we're going to make this a font size of 45 from 24.", 'start': 1459.856, 'duration': 4.844}, {'end': 1467.022, 'text': 'So 45.', 'start': 1464.7, 'duration': 2.322}, {'end': 1470.405, 'text': "And then we're going to left click and drag this in right around there.", 'start': 1467.022, 'duration': 3.383}], 'summary': 'Ui design prioritizes elements based on scale and font size, with an increase from 24 to 45.', 'duration': 28.502, 'max_score': 1441.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1441903.jpg'}, {'end': 1546.03, 'src': 'heatmap', 'start': 1492.148, 'weight': 0.739, 'content': [{'end': 1497.553, 'text': "If we come up here at the little home icon on the upper left, we're gonna go ahead and choose community.", 'start': 1492.148, 'duration': 5.405}, {'end': 1506.94, 'text': "And then when you do that, you get to this section and I'm gonna search for just the following words, hand drawn up in the top search bar.", 'start': 1498.373, 'duration': 8.567}, {'end': 1510.383, 'text': 'Hit enter and you have all these.', 'start': 1507.48, 'duration': 2.903}, {'end': 1518.488, 'text': 'the Figma community basically has a bunch of assets that you can use and search through that other people have created now some of them.', 'start': 1510.383, 'duration': 8.105}, {'end': 1523.232, 'text': "if you click them, it'll give you like a trial of some of them and you'll have to pay or whatever.", 'start': 1518.488, 'duration': 4.744}, {'end': 1525.915, 'text': "but um, this one's not the case as it looks.", 'start': 1523.232, 'duration': 2.683}, {'end': 1530.098, 'text': "it's called hand-drawn retro shapes, so you can just type in retro shapes and find this as well.", 'start': 1525.915, 'duration': 4.183}, {'end': 1533.661, 'text': 'if you click on the upper right hand corner, get a copy.', 'start': 1530.098, 'duration': 3.563}, {'end': 1536.944, 'text': "it's going to open up a new tab here in figma.", 'start': 1533.661, 'duration': 3.283}, {'end': 1539.726, 'text': 'We could change over here as pages.', 'start': 1538.025, 'duration': 1.701}, {'end': 1546.03, 'text': "We're gonna choose design and Here's all these just little assets that we can choose to integrate.", 'start': 1540.166, 'duration': 5.864}], 'summary': 'Access hand-drawn retro shapes in figma community for free trial and integration', 'duration': 53.882, 'max_score': 1492.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1492148.jpg'}], 'start': 983.048, 'title': 'Ui design principles and techniques', 'summary': 'Covers ui design principles and techniques, including auto layout, creating buttons, adding icons, creating components, and establishing visual hierarchy, with a focus on font sizes and positioning.', 'chapters': [{'end': 1025.933, 'start': 983.048, 'title': 'Auto layout and alignment in ui design', 'summary': 'Discusses the use of auto layout to adjust space between elements, saving time, and aligning elements horizontally and vertically, with a focus on creating a navigation item and a call to action component.', 'duration': 42.885, 'highlights': ['Auto layout feature allows for automatic adjustment of space between elements, saving time and effort.', 'Demonstrates aligning elements to the center horizontally, providing a clear understanding of UI design principles.', 'Creating a call to action component, showcasing practical application of the discussed UI design concepts.']}, {'end': 1603.806, 'start': 1025.933, 'title': 'Ui design principles and techniques', 'summary': 'Covers ui design principles and techniques, including creating buttons, using auto layout, adding icons, creating components, and establishing visual hierarchy, with a focus on font sizes and positioning.', 'duration': 577.873, 'highlights': ["Creating buttons with specific font sizes and colors The tutorial demonstrates creating a button named 'start saving' with a font size of 18 pixels and a specific color code of 6CDBBD.", 'Utilizing auto layout and center alignment for button positioning The use of auto layout and center alignment is emphasized to ensure the button stays centered and allows for easy repositioning.', 'Adding icons and creating component variants for interactive buttons The process of adding an icon to the button, creating a component variant with a hover state, and prototyping interactivity is explained.', 'Establishing visual hierarchy through font size and positioning The importance of visual hierarchy in UI design is highlighted, focusing on font sizes, alignment, and priority of elements.']}], 'duration': 620.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE983048.jpg', 'highlights': ['Auto layout feature allows for automatic adjustment of space between elements, saving time and effort.', 'Creating a call to action component, showcasing practical application of the discussed UI design concepts.', 'Utilizing auto layout and center alignment for button positioning The use of auto layout and center alignment is emphasized to ensure the button stays centered and allows for easy repositioning.', 'Establishing visual hierarchy through font size and positioning The importance of visual hierarchy in UI design is highlighted, focusing on font sizes, alignment, and priority of elements.', "Creating buttons with specific font sizes and colors The tutorial demonstrates creating a button named 'start saving' with a font size of 18 pixels and a specific color code of 6CDBBD.", 'Adding icons and creating component variants for interactive buttons The process of adding an icon to the button, creating a component variant with a hover state, and prototyping interactivity is explained.', 'Demonstrates aligning elements to the center horizontally, providing a clear understanding of UI design principles.']}, {'end': 2002.045, 'segs': [{'end': 1633.615, 'src': 'embed', 'start': 1604.307, 'weight': 0, 'content': [{'end': 1605.949, 'text': 'Good white space between our elements.', 'start': 1604.307, 'duration': 1.642}, {'end': 1607.271, 'text': "You don't want things too close.", 'start': 1605.969, 'duration': 1.302}, {'end': 1610.496, 'text': "You don't want things slightly off and not aligned.", 'start': 1607.532, 'duration': 2.964}, {'end': 1616.647, 'text': "And we're gonna create little avatar people.", 'start': 1612.265, 'duration': 4.382}, {'end': 1620.909, 'text': "Just basically circles with people's pictures in them.", 'start': 1617.868, 'duration': 3.041}, {'end': 1622.13, 'text': "So here's how we do that.", 'start': 1621.329, 'duration': 0.801}, {'end': 1627.832, 'text': 'We come over here and we choose ellipse or the shortcut is O, the letter O on your keyboard.', 'start': 1622.17, 'duration': 5.662}, {'end': 1631.074, 'text': "Now I'm gonna hold shift to create a perfect circle.", 'start': 1628.252, 'duration': 2.822}, {'end': 1633.615, 'text': 'If you let shift go, you can create ovals and stuff.', 'start': 1631.474, 'duration': 2.141}], 'summary': "Creating avatar people using perfect circles with people's pictures in them.", 'duration': 29.308, 'max_score': 1604.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1604307.jpg'}, {'end': 1677.145, 'src': 'embed', 'start': 1653.139, 'weight': 1, 'content': [{'end': 1660.345, 'text': 'If you go to unsplash.com, they have a website where you can search through 100% free to use photographs and you could search through them.', 'start': 1653.139, 'duration': 7.206}, {'end': 1663.588, 'text': "So here's how you install an actual plugin.", 'start': 1660.965, 'duration': 2.623}, {'end': 1671.358, 'text': "If we come over here back to the home section in the community search bar, we'll type in Unsplash, hit enter, and we choose plugins.", 'start': 1663.628, 'duration': 7.73}, {'end': 1674.162, 'text': 'And you can see right here, it says Unsplash.', 'start': 1672.039, 'duration': 2.123}, {'end': 1677.145, 'text': 'And over here, you could choose try it out.', 'start': 1674.883, 'duration': 2.262}], 'summary': 'Unsplash.com offers 100% free to use photographs. install the unsplash plugin from the community search bar and try it out.', 'duration': 24.006, 'max_score': 1653.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1653139.jpg'}, {'end': 1849.982, 'src': 'embed', 'start': 1821.03, 'weight': 3, 'content': [{'end': 1822.871, 'text': 'Now we have six unique people.', 'start': 1821.03, 'duration': 1.841}, {'end': 1826.934, 'text': "Now we're gonna wrap around a pill shaped rectangle around them.", 'start': 1823.612, 'duration': 3.322}, {'end': 1834.819, 'text': "So we're gonna hit the R for rectangle and then we're going to go back to layers and left click and drag that underneath the ellipse.", 'start': 1826.954, 'duration': 7.865}, {'end': 1842.158, 'text': "We're gonna select both of them and or rather we're gonna select this one and choose fill, make it white.", 'start': 1835.794, 'duration': 6.364}, {'end': 1844.439, 'text': "We're going to.", 'start': 1843.238, 'duration': 1.201}, {'end': 1849.982, 'text': "you could change the border radius all the way up here, like we've been doing, or if you hover over it,", 'start': 1844.439, 'duration': 5.543}], 'summary': "Using a pill-shaped rectangle, we're creating layers for six unique people.", 'duration': 28.952, 'max_score': 1821.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1821030.jpg'}, {'end': 2002.045, 'src': 'embed', 'start': 1977.558, 'weight': 5, 'content': [{'end': 1983.939, 'text': "It's going to say, download the extension, visit your favorite online retailers, and then save, apply coupons from the toolbar or something like that.", 'start': 1977.558, 'duration': 6.381}, {'end': 1986.82, 'text': 'And so we have to design for this three-step process.', 'start': 1984.499, 'duration': 2.321}, {'end': 1988.16, 'text': "So let's take our type tool.", 'start': 1987.16, 'duration': 1}, {'end': 1997.222, 'text': "We're going to say download the extension for Chrome or Firefox.", 'start': 1988.74, 'duration': 8.482}, {'end': 2002.045, 'text': "All right, that's step one, and we're probably gonna push this in a little bit.", 'start': 1999.002, 'duration': 3.043}], 'summary': 'Design a three-step process for downloading extension for chrome or firefox.', 'duration': 24.487, 'max_score': 1977.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1977558.jpg'}], 'start': 1604.307, 'title': 'Avatar creation and layout design', 'summary': 'Covers creating avatar people using circles and images, utilizing the unsplash plugin in figma to insert free-to-use photographs, and designing layouts with overlapping elements, applying stroke and creating unique shapes.', 'chapters': [{'end': 1729.533, 'start': 1604.307, 'title': 'Creating avatar people and using plugins', 'summary': 'Explains how to create avatar people using circles and images, and also demonstrates the use of the unsplash plugin in figma to search and insert free-to-use photographs, illustrating the process with specific steps and actions taken.', 'duration': 125.226, 'highlights': ['The chapter introduces the concept of creating avatar people using circles and images, emphasizing the importance of maintaining appropriate spacing and alignment between elements.', 'It demonstrates the use of the Unsplash plugin in Figma, which allows users to search and insert free-to-use photographs, providing specific steps on how to install and run the plugin.', 'The explanation includes the process of searching for and selecting a photograph from Unsplash to insert into the created oval, highlighting the ease of use and the availability of free-to-use images.']}, {'end': 2002.045, 'start': 1729.573, 'title': 'Designing a layout with overlapping elements', 'summary': 'Demonstrates designing a layout with overlapping elements, applying stroke, creating a pill-shaped rectangle around unique people, and designing a three-step process for an extension.', 'duration': 272.472, 'highlights': ['Applying stroke and creating overlapping elements The speaker demonstrates applying a white stroke with a width of three on an element and creating overlapping elements using auto layout, resulting in six unique people being positioned on the layout.', "Creating a pill-shaped rectangle around unique people The speaker showcases the creation of a pill-shaped rectangle around the unique people, ensuring equal white space all around, and adding a quote and person's name within the rectangle.", 'Designing a three-step process for an extension The chapter covers the design of a three-step process, including downloading the extension for Chrome or Firefox, visiting favorite online retailers, and saving or applying coupons from the toolbar, highlighting the design process for the extension.']}], 'duration': 397.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE1604307.jpg', 'highlights': ['The chapter covers creating avatar people using circles and images, emphasizing appropriate spacing and alignment.', 'Demonstrates the use of the Unsplash plugin in Figma, providing specific steps on how to install and run the plugin.', 'The process includes searching for and selecting a photograph from Unsplash to insert into the created oval, highlighting the ease of use and availability of free-to-use images.', 'Applying a white stroke with a width of three on an element and creating overlapping elements using auto layout, resulting in six unique people being positioned on the layout.', "Showcases the creation of a pill-shaped rectangle around the unique people, ensuring equal white space all around, and adding a quote and person's name within the rectangle.", 'Covers the design of a three-step process for an extension, including downloading the extension for Chrome or Firefox, visiting favorite online retailers, and saving or applying coupons from the toolbar.']}, {'end': 2816.789, 'segs': [{'end': 2031.452, 'src': 'embed', 'start': 2002.805, 'weight': 2, 'content': [{'end': 2005.868, 'text': "And then we're gonna go ahead and create a circle.", 'start': 2002.805, 'duration': 3.063}, {'end': 2007.69, 'text': 'hit O, the letter O on the keyboard.', 'start': 2005.868, 'duration': 1.822}, {'end': 2011.613, 'text': "hold shift, we'll make it black.", 'start': 2007.69, 'duration': 3.923}, {'end': 2014.456, 'text': 'hit T for the type tool and then put one.', 'start': 2011.613, 'duration': 2.843}, {'end': 2018.119, 'text': "I'm gonna put that right around there.", 'start': 2014.476, 'duration': 3.643}, {'end': 2023.904, 'text': "Now, pro tip whenever you're dealing with numbers that need to be centered,", 'start': 2018.92, 'duration': 4.984}, {'end': 2031.452, 'text': "We can hold the alt key or option key on Mac and push this all the way to the very left and right side of whatever container it's in which,", 'start': 2024.67, 'duration': 6.782}], 'summary': 'Creating a black circle and adding the number one using keyboard shortcuts and alignment adjustments.', 'duration': 28.647, 'max_score': 2002.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2002805.jpg'}, {'end': 2096.216, 'src': 'embed', 'start': 2068.513, 'weight': 1, 'content': [{'end': 2073.476, 'text': "You're gonna see why we do this in a little bit when it comes to our tablet version, because let me duplicate this.", 'start': 2068.513, 'duration': 4.963}, {'end': 2080.283, 'text': "Our tablet version, we're gonna change the direction of the auto layout from column to row right here.", 'start': 2073.937, 'duration': 6.346}, {'end': 2086.467, 'text': "So if I click this, notice how it's on top now, and we can control the white space, and you'll see how that comes into play.", 'start': 2080.362, 'duration': 6.105}, {'end': 2090.17, 'text': "So now we're gonna take this, duplicate it, hold shift, move it down,", 'start': 2087.068, 'duration': 3.102}, {'end': 2096.216, 'text': "select both of these left click and drag and we're gonna choose another auto layout.", 'start': 2090.17, 'duration': 6.046}], 'summary': 'Demonstrating tablet layout with auto layout adjustments.', 'duration': 27.703, 'max_score': 2068.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2068513.jpg'}, {'end': 2435.478, 'src': 'embed', 'start': 2411.405, 'weight': 4, 'content': [{'end': 2418.047, 'text': "It's all, you know, everything's looking quite solid and consistent, which is what you want with your design.", 'start': 2411.405, 'duration': 6.642}, {'end': 2420.588, 'text': "You don't wanna push things up too close or anything like that.", 'start': 2418.067, 'duration': 2.521}, {'end': 2423.909, 'text': 'So mind your white space, very important.', 'start': 2421.608, 'duration': 2.301}, {'end': 2428.931, 'text': "Now in this section, I don't, at this point in time, I don't wanna have to select this.", 'start': 2424.389, 'duration': 4.542}, {'end': 2429.851, 'text': "Here's another tip.", 'start': 2429.191, 'duration': 0.66}, {'end': 2435.478, 'text': 'With this layer selected, we can come over here and choose this little lock.', 'start': 2430.392, 'duration': 5.086}], 'summary': 'Design focused on solid and consistent elements, emphasizing white space and layer lock feature.', 'duration': 24.073, 'max_score': 2411.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2411405.jpg'}, {'end': 2537.517, 'src': 'embed', 'start': 2506.645, 'weight': 3, 'content': [{'end': 2510.387, 'text': "And this right here is going to be kind of like what's called like a trust section commonly.", 'start': 2506.645, 'duration': 3.742}, {'end': 2512.548, 'text': "It's just to show like.", 'start': 2511.147, 'duration': 1.401}, {'end': 2518.59, 'text': 'companies who possibly have used this service shift G to make sure we have this aligned up.', 'start': 2513.448, 'duration': 5.142}, {'end': 2525.373, 'text': 'there we go and do that for a bunch of other, probably three or three other logos.', 'start': 2518.59, 'duration': 6.783}, {'end': 2528.234, 'text': 'so the other ones are gonna be best buy Shopify and Walmart.', 'start': 2525.373, 'duration': 2.861}, {'end': 2531.735, 'text': "I already have those designed off screen, so I'm just gonna copy those.", 'start': 2528.234, 'duration': 3.501}, {'end': 2537.517, 'text': 'I have them all, all the colors change and just paste them in all right.', 'start': 2531.735, 'duration': 5.782}], 'summary': 'The trust section will feature logos of companies such as best buy, shopify, and walmart.', 'duration': 30.872, 'max_score': 2506.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2506645.jpg'}, {'end': 2660.629, 'src': 'embed', 'start': 2638.63, 'weight': 0, 'content': [{'end': 2651.317, 'text': "And card design is a common pattern in UI design when you have information that's repeated multiple times but has multiple bits of information that are contained within an aesthetic of a card essentially.", 'start': 2638.63, 'duration': 12.687}, {'end': 2654.059, 'text': "We're going to go ahead and make the background white.", 'start': 2651.337, 'duration': 2.722}, {'end': 2657.641, 'text': "We're going to give a little bit of border radius, probably around three.", 'start': 2654.079, 'duration': 3.562}, {'end': 2660.629, 'text': 'border corner radius.', 'start': 2659.528, 'duration': 1.101}], 'summary': 'Card design in ui involves repetition of information within an aesthetic card format, with a white background and a border radius of around three.', 'duration': 21.999, 'max_score': 2638.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2638630.jpg'}], 'start': 2002.805, 'title': 'Design elements and ui components', 'summary': 'Covers creating and styling design elements like circles, text, and layouts, focusing on auto layouts. it also demonstrates creating design iterations and ui components, including text adjustments, adding drop shadows, and designing an image gallery with card patterns.', 'chapters': [{'end': 2271.478, 'start': 2002.805, 'title': 'Creating and styling design elements', 'summary': 'Covers creating and styling design elements such as circles, text, and layouts using keyboard shortcuts and alignment options, with a focus on creating auto layouts for responsive designs.', 'duration': 268.673, 'highlights': ['Creating a circle and adding text with centered alignment The process of creating a circle, adding text, and using the center alignment option for positioning is explained.', 'Utilizing auto layout for responsive design elements The use of auto layout to align and control the white space for responsive design elements, with specific focus on tablet version layouts, is demonstrated.', 'Creating and styling a call-to-action button The process of creating and styling a call-to-action button, including detaching it from a component and making style changes, is discussed.', 'Explaining the process of making changes to component instances The explanation of making changes to component instances, including detaching instances and making style changes, is provided.', 'Demonstrating the process of naming and organizing design elements The process of naming and organizing design elements within a design tool is demonstrated to improve visibility and management.']}, {'end': 2816.789, 'start': 2272.019, 'title': 'Design iterations and ui components', 'summary': 'Demonstrates the process of creating design iterations and ui components, including making text bold, adjusting font size, adding drop shadows, changing background colors, creating trust sections, importing logos, using plugins for design elements, and designing an image gallery with card patterns.', 'duration': 544.77, 'highlights': ['The chapter demonstrates creating design iterations and UI components, including making text bold, adjusting font size, adding drop shadows, changing background colors, and designing an image gallery with card patterns. The speaker discusses making text bold and adjusting font size to 18, adding a drop shadow with specific settings, and changing the background color to 98c588. Additionally, the chapter delves into designing an image gallery with card patterns and adding logos using plugins.', "The importance of maintaining consistent white space and avoiding pushing elements too close together is emphasized, along with the use of the 'lock' feature and the 'Brand Fetch' plugin for importing logos. Emphasizing the importance of consistent white space and avoiding elements being too close, the speaker highlights the use of the 'lock' feature and the 'Brand Fetch' plugin for importing logos, ensuring a solid and consistent design.", "The process of creating a 'trust section' involving logos of companies using the service is detailed, along with the use of the 'Iconify' plugin for adding icons and the technique for aligning elements using 'shift G'. The process of creating a 'trust section' with logos of companies is detailed, along with using the 'Iconify' plugin for adding icons and aligning elements using 'shift G', contributing to a visually appealing design."]}], 'duration': 813.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2002805.jpg', 'highlights': ['The chapter demonstrates creating design iterations and UI components, including making text bold, adjusting font size, adding drop shadows, changing background colors, and designing an image gallery with card patterns.', 'Utilizing auto layout for responsive design elements The use of auto layout to align and control the white space for responsive design elements, with specific focus on tablet version layouts, is demonstrated.', 'The process of creating a circle and adding text with centered alignment is explained.', "The process of creating a 'trust section' involving logos of companies using the service is detailed, along with the use of the 'Iconify' plugin for adding icons and the technique for aligning elements using 'shift G'.", "The importance of maintaining consistent white space and avoiding pushing elements too close together is emphasized, along with the use of the 'lock' feature and the 'Brand Fetch' plugin for importing logos."]}, {'end': 3708.51, 'segs': [{'end': 2935.279, 'src': 'embed', 'start': 2910.234, 'weight': 0, 'content': [{'end': 2917.996, 'text': "All right, so for this card, it looks pretty good and all, but I'm gonna go ahead and create a second kind of iteration of this card.", 'start': 2910.234, 'duration': 7.762}, {'end': 2919.417, 'text': "So I'm gonna duplicate it.", 'start': 2918.377, 'duration': 1.04}, {'end': 2922.526, 'text': "and control d we're going to move it over.", 'start': 2920.444, 'duration': 2.082}, {'end': 2925.409, 'text': "i'm going to right click and detach the instance of this.", 'start': 2922.526, 'duration': 2.883}, {'end': 2931.675, 'text': "so it's no longer going to be a component or tied to this main component, and we're going to make a couple changes here.", 'start': 2925.409, 'duration': 6.266}, {'end': 2935.279, 'text': "so i'm going to right click and ungroup all right.", 'start': 2931.675, 'duration': 3.604}], 'summary': 'Creating a second iteration of the card by duplicating, detaching, and making changes.', 'duration': 25.045, 'max_score': 2910.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2910234.jpg'}, {'end': 3346.224, 'src': 'embed', 'start': 3314.83, 'weight': 3, 'content': [{'end': 3320.334, 'text': "We're going to take this and hold alt or option of Mac shift and left click and drag it over.", 'start': 3314.83, 'duration': 5.504}, {'end': 3321.255, 'text': 'All right.', 'start': 3320.995, 'duration': 0.26}, {'end': 3327.401, 'text': "Now we're going to go ahead and reduce the white space in the middle.", 'start': 3321.315, 'duration': 6.086}, {'end': 3328.722, 'text': 'We can go ahead and center this.', 'start': 3327.561, 'duration': 1.161}, {'end': 3332.374, 'text': 'And we can add a layout grid.', 'start': 3330.633, 'duration': 1.741}, {'end': 3337.058, 'text': 'So this is gonna change from grid to column.', 'start': 3334.536, 'duration': 2.522}, {'end': 3346.224, 'text': "We're gonna choose eight for column count, and then maybe like 60 or so for our margin on the right and left.", 'start': 3337.778, 'duration': 8.446}], 'summary': 'Demonstrating design adjustments: centering, grid layout, margin settings.', 'duration': 31.394, 'max_score': 3314.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3314830.jpg'}, {'end': 3598.18, 'src': 'embed', 'start': 3571.007, 'weight': 2, 'content': [{'end': 3575.649, 'text': 'which is one of the things that you can choose to do based on items that may not be that important.', 'start': 3571.007, 'duration': 4.642}, {'end': 3580.031, 'text': "I'm going to take our frame, hold control and just drag that down.", 'start': 3576.109, 'duration': 3.922}, {'end': 3582.152, 'text': 'And now here.', 'start': 3581.352, 'duration': 0.8}, {'end': 3592.917, 'text': 'one of the common things that you end up changing responsively is the actual, like a photo gallery on how the thumbnails and cards are presented.', 'start': 3582.152, 'duration': 10.765}, {'end': 3598.18, 'text': "So I'm going to take this and hold alt to duplicate it, get it into position.", 'start': 3593.278, 'duration': 4.902}], 'summary': 'Demonstrating responsive design by adjusting photo gallery layout and duplicating elements for positioning.', 'duration': 27.173, 'max_score': 3571.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3571007.jpg'}, {'end': 3708.51, 'src': 'embed', 'start': 3686.109, 'weight': 1, 'content': [{'end': 3697.019, 'text': "there we go, that's the tablet version, and then finally you would have to do the same concept over here as well with the phone.", 'start': 3686.109, 'duration': 10.91}, {'end': 3701.383, 'text': 'so the phone I definitely want to tackle, just because I.', 'start': 3697.019, 'duration': 4.364}, {'end': 3704.286, 'text': "there's some other important considerations when it comes to navigation.", 'start': 3701.383, 'duration': 2.903}, {'end': 3706.648, 'text': "so I know I've been talking on.", 'start': 3704.286, 'duration': 2.362}, {'end': 3708.51, 'text': 'this is a long tutorial.', 'start': 3706.648, 'duration': 1.862}], 'summary': 'Discussion on tablet and phone versions, emphasizing importance of navigation. lengthy tutorial.', 'duration': 22.401, 'max_score': 3686.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3686109.jpg'}], 'start': 2817.469, 'title': 'Designing and customizing cards for responsive websites', 'summary': 'Covers creating and customizing card designs, including duplicating, grouping, ungrouping, and creating components, as well as adjusting constraints. it also demonstrates creating a responsive design for a website, adjusting layout grids, spacing, and elements for tablet and phone viewports.', 'chapters': [{'end': 3076.75, 'start': 2817.469, 'title': 'Creating and customizing card designs', 'summary': 'Covers the process of creating and customizing card designs, including duplicating, grouping, ungrouping, and creating components, as well as adjusting constraints and applying specific changes to elements within the card design.', 'duration': 259.281, 'highlights': ['Creating and customizing card designs, including duplicating, grouping, ungrouping, and creating components. The process involves duplicating elements, grouping and ungrouping them, and creating components, enabling the customization of card designs.', 'Adjusting constraints and applying specific changes to elements within the card design. The chapter emphasizes the importance of adjusting constraints and making specific changes to elements within the card design to ensure proper alignment and visual consistency.', 'Applying specific changes to elements within the card design. Specific changes are made to elements within the card design, such as adjusting corner radius, color, text content, and images, to achieve the desired visual appearance.']}, {'end': 3708.51, 'start': 3076.75, 'title': 'Creating responsive design for a website', 'summary': 'Demonstrates the process of creating a responsive design for a website, adjusting layout grids, spacing, and elements for tablet and phone viewports, emphasizing the importance of maintaining consistency and optimizing user experience.', 'duration': 631.76, 'highlights': ['The tutorial covers creating a responsive design for a website, focusing on adjustments for tablet and phone viewports, showcasing the process of maintaining consistency and optimizing user experience.', 'Demonstrating the use of layout grids, the instructor adjusts the column count to eight and modifies the margin, emphasizing the importance of spacing and alignment in responsive design.', 'The tutorial highlights the process of adjusting elements, such as collapsing columns into rows for better fit on different viewports, showcasing the importance of maintaining a visually appealing layout for user experience.', 'Emphasizing the significance of maintaining consistency, the instructor mentions the creation of components like footers and the use of auto layout for presenting thumbnails and cards, ensuring a cohesive design across different devices.', 'The tutorial showcases the process of adjusting navigation elements and highlighting important considerations for phone viewports, underscoring the need for optimizing user experience across all devices.']}], 'duration': 891.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE2817469.jpg', 'highlights': ['Creating and customizing card designs, including duplicating, grouping, ungrouping, and creating components.', 'The tutorial covers creating a responsive design for a website, focusing on adjustments for tablet and phone viewports.', 'Emphasizing the significance of maintaining consistency, the instructor mentions the creation of components like footers and the use of auto layout for presenting thumbnails and cards, ensuring a cohesive design across different devices.', 'Demonstrating the use of layout grids, the instructor adjusts the column count to eight and modifies the margin, emphasizing the importance of spacing and alignment in responsive design.', 'The process involves duplicating elements, grouping and ungrouping them, and creating components, enabling the customization of card designs.']}, {'end': 4261.37, 'segs': [{'end': 3763.822, 'src': 'embed', 'start': 3708.51, 'weight': 0, 'content': [{'end': 3716.288, 'text': "so what we're going to do now is add a layout grid in columns and four this time, which is common for mobile,", 'start': 3708.51, 'duration': 7.778}, {'end': 3721.532, 'text': "and then we'll use maybe like 20 for the white space on the left and right.", 'start': 3716.288, 'duration': 5.244}, {'end': 3725.675, 'text': "We're going to grab just our logo.", 'start': 3722.573, 'duration': 3.102}, {'end': 3726.236, 'text': "It's all we need.", 'start': 3725.735, 'duration': 0.501}, {'end': 3730.619, 'text': "So I'm just going to control C, copy it, and then control V to paste it in right around here.", 'start': 3726.256, 'duration': 4.363}, {'end': 3740.047, 'text': "And now we're going to go ahead and right click, go to plugins, iconify and type in menu.", 'start': 3735.823, 'duration': 4.224}, {'end': 3755.326, 'text': "and see here, and we'll just choose this one, make it a little bit larger and get that positioned up.", 'start': 3743.736, 'duration': 11.59}, {'end': 3758.049, 'text': 'actually, i may push this in just a little bit, okay.', 'start': 3755.326, 'duration': 2.723}, {'end': 3763.822, 'text': "So we're going to create a navigation for mobile and prototype it as well.", 'start': 3759.301, 'duration': 4.521}], 'summary': 'Adding a 4-column layout grid for mobile, with 20px white space. inserting logo and creating mobile navigation prototype.', 'duration': 55.312, 'max_score': 3708.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3708510.jpg'}, {'end': 3818.578, 'src': 'embed', 'start': 3786.748, 'weight': 1, 'content': [{'end': 3792.752, 'text': "We're going to make it smaller so you can resize the type on smaller devices like 32.", 'start': 3786.748, 'duration': 6.004}, {'end': 3799.637, 'text': "We'll center it, drag this in, and then click your center up here.", 'start': 3792.752, 'duration': 6.885}, {'end': 3800.818, 'text': 'There we go.', 'start': 3800.377, 'duration': 0.441}, {'end': 3805.801, 'text': "We're also going to have this section.", 'start': 3802.799, 'duration': 3.002}, {'end': 3818.578, 'text': "make sure that's centered by clicking center, and then we're just gonna take this by these people alt, drag them over there, center them up as well.", 'start': 3808.635, 'duration': 9.943}], 'summary': 'Adjusting and centering elements for smaller devices, like 32.', 'duration': 31.83, 'max_score': 3786.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3786748.jpg'}, {'end': 3959.42, 'src': 'embed', 'start': 3928.056, 'weight': 5, 'content': [{'end': 3931.437, 'text': "Sometimes it'll put them up where you don't want it, just drag it back down.", 'start': 3928.056, 'duration': 3.381}, {'end': 3933.717, 'text': "We're going to create two rows and two columns out of this.", 'start': 3931.817, 'duration': 1.9}, {'end': 3939.239, 'text': "So you just have to think intelligently in terms of how you're going to structure your designs essentially.", 'start': 3934.417, 'duration': 4.822}, {'end': 3952.279, 'text': "Now at this point, all we have to do is just take this one, All right, and let's create, let's push this in.", 'start': 3940.439, 'duration': 11.84}, {'end': 3953.999, 'text': 'We may have to make some adjustments here.', 'start': 3952.339, 'duration': 1.66}, {'end': 3959.42, 'text': "All right, well, we'll leave it at that height, but we're just gonna push this in.", 'start': 3954.019, 'duration': 5.401}], 'summary': 'Creating two rows and two columns, adjusting designs intelligently.', 'duration': 31.364, 'max_score': 3928.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3928056.jpg'}, {'end': 4204.071, 'src': 'embed', 'start': 4157.145, 'weight': 3, 'content': [{'end': 4157.984, 'text': "Now let's choose Close.", 'start': 4157.145, 'duration': 0.839}, {'end': 4160.086, 'text': 'There we go.', 'start': 4158.005, 'duration': 2.081}, {'end': 4161.287, 'text': "And we'll choose this one right here.", 'start': 4160.145, 'duration': 1.142}, {'end': 4163.448, 'text': 'Make it larger.', 'start': 4162.827, 'duration': 0.621}, {'end': 4166.169, 'text': 'Put it right around there.', 'start': 4165.188, 'duration': 0.981}, {'end': 4168.569, 'text': 'All right.', 'start': 4168.229, 'duration': 0.34}, {'end': 4170.331, 'text': 'I think that looks good for a mobile nav.', 'start': 4168.75, 'duration': 1.581}, {'end': 4176.122, 'text': "So now we're going to take these three elements, holding Shift, and we'll go ahead and create a frame.", 'start': 4170.671, 'duration': 5.451}, {'end': 4178.625, 'text': 'So frame selection, right click frame selection.', 'start': 4176.162, 'duration': 2.463}, {'end': 4183.309, 'text': "Now we're gonna move it off to the side so it comes outside of this frame.", 'start': 4179.845, 'duration': 3.464}, {'end': 4185.491, 'text': "Let's just call this nav.", 'start': 4184.51, 'duration': 0.981}, {'end': 4188.613, 'text': "Now we're gonna switch to prototype.", 'start': 4187.252, 'duration': 1.361}, {'end': 4195.019, 'text': "We're gonna take this hamburger menu and drag a connection to it, in which case we see this over here.", 'start': 4188.834, 'duration': 6.185}, {'end': 4198.662, 'text': 'On click, we want to open overlay.', 'start': 4195.9, 'duration': 2.762}, {'end': 4202.81, 'text': 'And then we can choose top right.', 'start': 4199.508, 'duration': 3.302}, {'end': 4204.071, 'text': "That's where we want it to show.", 'start': 4203.09, 'duration': 0.981}], 'summary': 'Creating a mobile navigation prototype with frame selection and prototype connection.', 'duration': 46.926, 'max_score': 4157.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4157145.jpg'}], 'start': 3708.51, 'title': 'Mobile ui/ux design', 'summary': 'Covers mobile layout design with a layout grid in four columns, resizing type for smaller devices, creating frames, buttons, navigation, and overlay interactions for mobile devices.', 'chapters': [{'end': 3842.603, 'start': 3708.51, 'title': 'Mobile layout design and navigation prototype', 'summary': 'Demonstrates the process of creating a mobile layout design with a layout grid in four columns, resizing type for smaller devices, centering elements, adding navigation, and prototype for mobile.', 'duration': 134.093, 'highlights': ['Creating a mobile layout design with a layout grid in four columns and 20 for the white space on the left and right. Layout grid in four columns, 20 white space on the left and right.', 'Resizing type for smaller devices to 32, centering elements, and duplicating and positioning elements on the mobile layout. Resizing type to 32 for smaller devices, centering elements, duplicating and positioning elements.', 'Adding navigation for mobile and planning to prototype it at the end of the process. Adding mobile navigation, planning to prototype at the end.']}, {'end': 4261.37, 'start': 3843.143, 'title': 'Ui and ux design process', 'summary': 'Covers the process of ui and ux design and prototyping, including creating frames, buttons, navigation, and overlay interactions for mobile devices, with a focus on alignment and scaling.', 'duration': 418.227, 'highlights': ['Creating frames, buttons, and navigation for mobile devices The speaker discusses creating frames, buttons, and navigation for mobile devices, emphasizing the importance of intelligent design structure and alignment.', "Overlay interactions and navigation prototyping The chapter details the process of overlay interactions and navigation prototyping, including creating a hamburger menu and implementing 'move in' and 'close overlay' interactions.", 'Alignment and scaling considerations The speaker stresses the significance of alignment and scaling, demonstrating the adjustment of elements to ensure proper centering and scaling for a cohesive design.']}], 'duration': 552.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE3708510.jpg', 'highlights': ['Creating a mobile layout design with a layout grid in four columns and 20 for the white space on the left and right.', 'Resizing type for smaller devices to 32, centering elements, and duplicating and positioning elements on the mobile layout.', 'Adding navigation for mobile and planning to prototype it at the end of the process.', 'Creating frames, buttons, and navigation for mobile devices.', "Overlay interactions and navigation prototyping, including creating a hamburger menu and implementing 'move in' and 'close overlay' interactions.", 'Alignment and scaling considerations, stressing the significance of alignment and scaling for a cohesive design.']}, {'end': 4822.318, 'segs': [{'end': 4366.327, 'src': 'embed', 'start': 4302.497, 'weight': 0, 'content': [{'end': 4304.658, 'text': 'And this process should be pretty much the same.', 'start': 4302.497, 'duration': 2.161}, {'end': 4305.878, 'text': "I'm gonna click claim deal.", 'start': 4304.678, 'duration': 1.2}, {'end': 4309.16, 'text': 'Scrolls us down here to this premium web hosting option.', 'start': 4306.298, 'duration': 2.862}, {'end': 4311.881, 'text': "All right, so this is the one that you're going to want to choose.", 'start': 4309.18, 'duration': 2.701}, {'end': 4316.205, 'text': "So when you add it to the cart, it's very important what happens next.", 'start': 4312.461, 'duration': 3.744}, {'end': 4321.489, 'text': "You need to enter a coupon code, and I'm gonna show you that code right here.", 'start': 4316.645, 'duration': 4.844}, {'end': 4325.233, 'text': "Of course, it's also mentioned in the description here.", 'start': 4321.53, 'duration': 3.703}, {'end': 4331.447, 'text': 'Have a coupon? we enter design course right there.', 'start': 4326.294, 'duration': 5.153}, {'end': 4337.43, 'text': "We're gonna hit apply and you'll see that it will change our price right here as well.", 'start': 4331.768, 'duration': 5.662}, {'end': 4343.372, 'text': 'Of course, you could choose the different way you pay if you wanted to do monthly and all that good stuff as well.', 'start': 4337.75, 'duration': 5.622}, {'end': 4347.634, 'text': 'So go ahead and sign up and create your account.', 'start': 4343.772, 'duration': 3.862}, {'end': 4354.897, 'text': "And after that, we'll then go ahead and shift our focus towards a domain registration and deployment of a website.", 'start': 4348.074, 'duration': 6.823}, {'end': 4356.245, 'text': 'Okay, so here we are.', 'start': 4355.245, 'duration': 1}, {'end': 4361.426, 'text': "After you create your account, you're going to want to log in, and I have a free domain that I can use.", 'start': 4356.365, 'duration': 5.061}, {'end': 4366.327, 'text': "Now, domains are dirt cheap, so I'm going to show you the process of just creating a domain name.", 'start': 4361.486, 'duration': 4.841}], 'summary': 'Process of claiming web hosting deal and setting up a domain name demonstrated with a coupon code, resulting in price change.', 'duration': 63.83, 'max_score': 4302.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4302497.jpg'}, {'end': 4446.603, 'src': 'embed', 'start': 4412.235, 'weight': 4, 'content': [{'end': 4414.837, 'text': 'Then you have to just fill in your address.', 'start': 4412.235, 'duration': 2.602}, {'end': 4418.321, 'text': "your address information, which I'll do off screen.", 'start': 4415.618, 'duration': 2.703}, {'end': 4422.706, 'text': "It's now being registered after I've inputted the necessary information.", 'start': 4418.661, 'duration': 4.045}, {'end': 4423.487, 'text': 'All right.', 'start': 4423.126, 'duration': 0.361}, {'end': 4424.688, 'text': "And I'm going to hit continue.", 'start': 4423.647, 'duration': 1.041}, {'end': 4428.793, 'text': 'And then we can also add who is privacy, which is actually free.', 'start': 4424.888, 'duration': 3.905}, {'end': 4430.074, 'text': 'Awesome stuff.', 'start': 4429.333, 'duration': 0.741}, {'end': 4436.779, 'text': "That means if somebody tries to look up who you know, owns the website, it's not gonna show your personal information.", 'start': 4430.114, 'duration': 6.665}, {'end': 4446.603, 'text': "All right, so now we're gonna go ahead back to home and under our site, or rather under premium web hosting, we're gonna click setup.", 'start': 4437.279, 'duration': 9.324}], 'summary': 'Registering address, enabling free privacy feature, setting up premium web hosting.', 'duration': 34.368, 'max_score': 4412.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4412235.jpg'}, {'end': 4611.703, 'src': 'embed', 'start': 4585.591, 'weight': 5, 'content': [{'end': 4595.814, 'text': 'So for Git, we can either create a new repo or we can deploy the application directly from a public GitHub repository.', 'start': 4585.591, 'duration': 10.223}, {'end': 4599.095, 'text': 'So for us, what we want to do is just go to GitHub.', 'start': 4596.054, 'duration': 3.041}, {'end': 4604.837, 'text': "You're going to want to create an account at GitHub, and I'm going to create a new repo right here.", 'start': 4599.436, 'duration': 5.401}, {'end': 4611.703, 'text': "I'm going to name it My Awesome site and it's going to be public,", 'start': 4604.857, 'duration': 6.846}], 'summary': 'Using github, create a new public repo for my awesome site.', 'duration': 26.112, 'max_score': 4585.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4585591.jpg'}, {'end': 4793.036, 'src': 'embed', 'start': 4755.802, 'weight': 6, 'content': [{'end': 4759.363, 'text': 'So GitHub repository stored successfully.', 'start': 4755.802, 'duration': 3.561}, {'end': 4763.805, 'text': "So let's click here on deploy.", 'start': 4760.124, 'duration': 3.681}, {'end': 4768.488, 'text': 'Hit yes.', 'start': 4763.825, 'duration': 4.663}, {'end': 4778.223, 'text': "And we're going to go back to the website, which is My Awesome Site 521.", 'start': 4768.508, 'duration': 9.715}, {'end': 4778.723, 'text': 'And there you go.', 'start': 4778.223, 'duration': 0.5}, {'end': 4787.672, 'text': 'It is 100% there in all of its responsive glory and ready to rock.', 'start': 4779.684, 'duration': 7.988}, {'end': 4793.036, 'text': 'Super, super simple, obviously, to deploy a website with Hostinger.', 'start': 4788.252, 'duration': 4.784}], 'summary': 'Github repository deployed successfully, resulting in my awesome site 521 being 100% responsive and ready to rock with hostinger.', 'duration': 37.234, 'max_score': 4755.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4755802.jpg'}], 'start': 4261.991, 'title': "Hostinger's web hosting deal and domain registration", 'summary': "Discusses a special offer on web hosting from hostinger with a reduced price using the code 'design course'. it also details the process of domain registration and website deployment, highlighting simplicity and ease of use.", 'chapters': [{'end': 4347.634, 'start': 4261.991, 'title': 'Hostinger web hosting deal', 'summary': "Discusses a special offer on web hosting from hostinger, guiding the audience through the process of claiming the deal, selecting the hosting option, and applying a coupon code, ensuring a reduced price through the mentioned code 'design course'.", 'duration': 85.643, 'highlights': ["The process involves visiting Hostinger.com/design and clicking on 'claim deal' to select the premium web hosting option.", "A coupon code 'design course' should be entered to apply the discount and change the price, as mentioned in the video description.", 'The tutorial emphasizes the importance of using the mentioned code to avail the reduced price, which is also applicable for monthly payment options.']}, {'end': 4822.318, 'start': 4348.074, 'title': 'Domain registration and website deployment', 'summary': 'Details the process of domain registration and website deployment using hostinger, including creating a domain name, setting up web hosting, adding whois privacy, and deploying a website through github, emphasizing the simplicity and ease of the process.', 'duration': 474.244, 'highlights': ['The process of creating a domain name and checking its availability is explained, with the demonstration of claiming a domain and setting up web hosting for a website. Domain creation process, availability check, claiming a domain, setting up web hosting', 'The addition of whois privacy for the website is highlighted as a free and important feature to protect personal information from being publicly visible. Adding whois privacy, free feature, protection of personal information', 'The process of deploying a website using GitHub is explained, from creating a new repository to initializing and pushing website files, showcasing the modern approach to website deployment. Deploying website through GitHub, creating repository, initializing and pushing website files', 'The simplicity and ease of the website deployment process with Hostinger is emphasized, along with a recommendation to take advantage of available deals and coupons. Emphasis on simplicity, recommendation of deals and coupons']}], 'duration': 560.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o1nCmiW6auE/pics/o1nCmiW6auE4261991.jpg', 'highlights': ["Visiting Hostinger.com/design and clicking on 'claim deal' to select premium web hosting", "Entering coupon code 'design course' to apply discount and change the price", 'Importance of using the mentioned code to avail the reduced price', 'Process of creating a domain name, checking its availability, and claiming a domain', 'Highlighting the addition of whois privacy as a free and important feature', 'Explaining the process of deploying a website using GitHub', 'Emphasizing the simplicity and ease of the website deployment process with Hostinger']}], 'highlights': ['The crash course covers details on responsive design components, component variants, auto layout constraints, prototyping, and more.', 'The hosting plans are available for $2.49 per month with up to $80 off on four-year plans, free domains, free email, unlimited free SSL, and DDoS protection, and an extra 10% discount using the coupon code DESIGNCOURSE.', 'Components are outlined in purple and offer reusability, showcasing the power of components in reusability and the significance of alignment in UI design.', 'Auto layout feature allows for automatic adjustment of space between elements, saving time and effort.', 'The chapter covers creating avatar people using circles and images, emphasizing appropriate spacing and alignment.', 'The chapter demonstrates creating design iterations and UI components, including making text bold, adjusting font size, adding drop shadows, changing background colors, and designing an image gallery with card patterns.', 'Creating and customizing card designs, including duplicating, grouping, ungrouping, and creating components.', 'Creating a mobile layout design with a layout grid in four columns and 20 for the white space on the left and right.', "Visiting Hostinger.com/design and clicking on 'claim deal' to select premium web hosting", "Entering coupon code 'design course' to apply discount and change the price", 'Importance of using the mentioned code to avail the reduced price', 'Process of creating a domain name, checking its availability, and claiming a domain', 'Highlighting the addition of whois privacy as a free and important feature', 'Explaining the process of deploying a website using GitHub', 'Emphasizing the simplicity and ease of the website deployment process with Hostinger']}