title
Learn Adobe XD in 2021 by Example (Crash Course)

description
https://bit.ly/2KAQUv5 - Take my UI Design Bootcamp Now! -- Want to learn UI/UX? https://designcourse.com -- Today, we're going to step back into the world of UI/UX design and cover one of the most popular UI/UX design and prototyping tools: Adobe Experience Design (Adobe XD). You're going to learn all major features of this powerful app in crash course format, all while doing so by creating a UI for a fictional business. You will learn all about components, states, repeating grids, content aware layouts, plugins, auto-animate, scroll groups and much more. As mentioned in the video, I would link you all to my Figma Crash Course I just released 2 weeks ago, if you're interested in that: https://youtu.be/Gu1so3pz4bA Timestamps: 0:00 - Introduction 1:24 - An awesome offer 2:00 - Using the Interface 6:54 - The Navbar Design 33:00 - The Hero Section Design 57:17 - Features Section Design 1:06:27 - Testimonials Section Design 1:17:22 - Contact Section Design 1:25:17 - Watch a Video Overlay Design & Prototyping 1:34:49 - "Try for free" Design & Prototyping 1:41:28 - Creating a Mobile Version 1:56:55 - Closing Let's get started! - - - - - - - - - - - - - - - - - - - - - - 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': 'Learn Adobe XD in 2021 by Example (Crash Course)', 'heatmap': [{'end': 1482.655, 'start': 1194.484, 'weight': 0.807}, {'end': 2470.565, 'start': 2392.108, 'weight': 0.722}, {'end': 3873.177, 'start': 3797.06, 'weight': 1}, {'end': 4371.568, 'start': 4293.422, 'weight': 0.853}, {'end': 4514.193, 'start': 4432.938, 'weight': 0.829}, {'end': 5635.567, 'start': 5492.967, 'weight': 0.738}, {'end': 5985.798, 'start': 5912.793, 'weight': 0.814}], 'summary': 'Learn adobe xd in 2021 by example (crash course) covers ui design fundamentals, web elements, landing page design, prototyping concepts, reusable components, and interactive prototypes, emphasizing the use of adobe xd features such as components, states, repeat grids, plugins, and tools for creating visually appealing and responsive ui/ux designs.', 'chapters': [{'end': 848.603, 'segs': [{'end': 33.066, 'src': 'embed', 'start': 6.075, 'weight': 0, 'content': [{'end': 9.58, 'text': "What's up everybody, Gary Simon here and today we've got a great one for you.", 'start': 6.075, 'duration': 3.505}, {'end': 14.267, 'text': "We're going to be covering Adobe XD or Adobe Experience Design in Crash Course format.", 'start': 9.6, 'duration': 4.667}, {'end': 22.619, 'text': "So you're going to learn how to use this application by creating this project right here that you can see for a fictional to do kind of task app.", 'start': 14.688, 'duration': 7.931}, {'end': 33.066, 'text': "right here and you can see that we're gonna work in a lot of the different features and demonstrating the features of Adobe XD by actually creating what you see here,", 'start': 22.759, 'duration': 10.307}], 'summary': 'Learn adobe xd in a crash course format by creating a fictional to-do task app project.', 'duration': 26.991, 'max_score': 6.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06075.jpg'}, {'end': 84.647, 'src': 'embed', 'start': 42.672, 'weight': 2, 'content': [{'end': 51.538, 'text': 'like this on desktop and how to also quickly and easily translate it to make sure it works on mobile as well.', 'start': 42.672, 'duration': 8.866}, {'end': 52.218, 'text': 'all right.', 'start': 51.538, 'duration': 0.68}, {'end': 56.7, 'text': 'so also i want you to make sure to go to designcourse.com.', 'start': 52.218, 'duration': 4.482}, {'end': 63.364, 'text': "i enter your email to be notified when this course in this subscription service launches that i'm creating.", 'start': 56.7, 'duration': 6.664}, {'end': 71.131, 'text': "it will be sometime this year, in 2021, And the features that we're going to be talking about and showing for Adobe XD are going to be components,", 'start': 63.364, 'duration': 7.767}, {'end': 80.042, 'text': 'states, repeat grids, content, aware layouts, plugins and how to use them, auto animate, scroll groups and so much more.', 'start': 71.131, 'duration': 8.911}, {'end': 84.647, 'text': "So as always, if you haven't yet, make sure to subscribe and let's go ahead and get started.", 'start': 80.502, 'duration': 4.145}], 'summary': 'Subscribe to designcourse.com for adobe xd course launching in 2021 with components, states, repeat grids, plugins, and more.', 'duration': 41.975, 'max_score': 42.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah042672.jpg'}, {'end': 174.087, 'src': 'embed', 'start': 144.401, 'weight': 1, 'content': [{'end': 148.262, 'text': "there's some certain you know tutorials and stuff like that.", 'start': 144.401, 'duration': 3.861}, {'end': 153.043, 'text': 'but basically this is where you get started in choosing what you want to work with for us.', 'start': 148.262, 'duration': 4.781}, {'end': 159.824, 'text': "I'm gonna get started with a desktop, a full desktop resolution to design, for that's how I like approaching UI design,", 'start': 153.043, 'duration': 6.781}, {'end': 165.645, 'text': 'just designing the full experience and then working down smaller to like tablet size and mobile phone size.', 'start': 159.824, 'duration': 5.821}, {'end': 174.087, 'text': "so we'll be going from a desktop and then I'll show you how to take that desktop design and then translate it into a mobile app design as well.", 'start': 165.645, 'duration': 8.442}], 'summary': 'Tutorial on starting ui design from desktop to mobile app.', 'duration': 29.686, 'max_score': 144.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0144401.jpg'}, {'end': 259.474, 'src': 'embed', 'start': 230.688, 'weight': 3, 'content': [{'end': 237.156, 'text': 'if we want to select it, we just choose our select button or hit the V shortcut and then it allows you to select it.', 'start': 230.688, 'duration': 6.468}, {'end': 238.598, 'text': 'Not a big deal.', 'start': 238.018, 'duration': 0.58}, {'end': 244.843, 'text': 'Then we also have our rectangle tool, very simple, make squares, perfect squares and rectangles.', 'start': 239.559, 'duration': 5.284}, {'end': 252.369, 'text': 'We have an ellipse tool, perfect ellipses that we can create as well as ovals.', 'start': 244.903, 'duration': 7.466}, {'end': 254.07, 'text': 'And then we have a polygon tool.', 'start': 252.829, 'duration': 1.241}, {'end': 259.474, 'text': "It's not just for triangles though, but we can create many different sided polygons here.", 'start': 254.11, 'duration': 5.364}], 'summary': 'Using select, rectangle, ellipse, and polygon tools to create shapes in the software.', 'duration': 28.786, 'max_score': 230.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0230688.jpg'}, {'end': 631.396, 'src': 'embed', 'start': 603.857, 'weight': 4, 'content': [{'end': 609.701, 'text': "usually there's a grid system that's used that the front end developer uses in order to implement your design.", 'start': 603.857, 'duration': 5.844}, {'end': 618.646, 'text': "It makes life a lot easier, especially for the developer, when they're trying to translate your design into workable code through HTML,", 'start': 610.441, 'duration': 8.205}, {'end': 619.687, 'text': 'CSS and JavaScript.', 'start': 618.646, 'duration': 1.041}, {'end': 626.192, 'text': "we can toggle this on and off to make sure that we're, you know, creating a good,", 'start': 621.408, 'duration': 4.784}, {'end': 631.396, 'text': 'well-defined structure and a container for the elements that we place on the artboard.', 'start': 626.192, 'duration': 5.204}], 'summary': 'A grid system is used by front-end developers to implement designs, making it easier to translate designs into workable code through html, css, and javascript.', 'duration': 27.539, 'max_score': 603.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0603857.jpg'}, {'end': 742.457, 'src': 'embed', 'start': 713.167, 'weight': 5, 'content': [{'end': 716.148, 'text': 'Hopefully you know how to install fonts, but if not, you can always use Google.', 'start': 713.167, 'duration': 2.981}, {'end': 716.868, 'text': 'All right.', 'start': 716.628, 'duration': 0.24}, {'end': 719.849, 'text': "So now we're going to go ahead and take the color.", 'start': 717.308, 'duration': 2.541}, {'end': 721.79, 'text': 'This is where you change your color for the text.', 'start': 719.889, 'duration': 1.901}, {'end': 726.411, 'text': 'So remember when I said, when you select different things, the panel over here is going to show different elements.', 'start': 721.81, 'duration': 4.601}, {'end': 731.893, 'text': 'So we have a white, you know, rectangle, and these are all the things that we can do with it.', 'start': 726.451, 'duration': 5.442}, {'end': 733.093, 'text': 'And then we have our text.', 'start': 732.033, 'duration': 1.06}, {'end': 742.457, 'text': 'Okay, well, here we have text specific properties such as changing the typeface of the font, changing the weight, making it thin or bold or whatever,', 'start': 733.653, 'duration': 8.804}], 'summary': 'Demonstrating how to change text color and font properties in a design tool.', 'duration': 29.29, 'max_score': 713.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0713167.jpg'}], 'start': 6.075, 'title': 'Adobe xd crash course and ui design features', 'summary': 'Covers a crash course on adobe xd, creating a to-do task app for both desktop and mobile, and demonstrates various features including components, states, repeat grids, and more to focus on ui design tools and properties.', 'chapters': [{'end': 63.364, 'start': 6.075, 'title': 'Adobe xd crash course', 'summary': 'Covers a crash course on adobe xd, demonstrating its features by creating a fictional to-do task app for both desktop and mobile, and encourages viewers to sign up for a new subscription service.', 'duration': 57.289, 'highlights': ['The chapter covers a crash course on Adobe XD, demonstrating its features by creating a fictional to-do task app for both desktop and mobile. The tutorial focuses on teaching by example, illustrating UI design and prototyping while showing how to quickly translate a design from desktop to mobile.', 'Encourages viewers to sign up for a new subscription service. The instructor prompts the audience to visit designcourse.com and enter their email to receive notifications about the launch of a new subscription service.']}, {'end': 848.603, 'start': 63.364, 'title': 'Adobe xd ui design features', 'summary': 'Covers the various features of adobe xd including components, states, repeat grids, content-aware layouts, plugins, auto animate, scroll groups, and more, with a focus on ui design tools and properties, grid layout, and color customization.', 'duration': 785.239, 'highlights': ['The chapter covers the various features of Adobe XD including components, states, repeat grids, content-aware layouts, plugins, auto animate, scroll groups, and more. The features showcased for Adobe XD include components, states, repeat grids, content-aware layouts, plugins, auto animate, scroll groups, and more.', 'The tutorial provides a detailed overview of the UI design tools and properties, such as the select button, rectangle tool, ellipse tool, polygon tool, line tool, pen tool, type tool, and artboard tool. The tutorial provides a detailed overview of the UI design tools and properties, covering the select button, rectangle tool, ellipse tool, polygon tool, line tool, pen tool, type tool, and artboard tool.', 'The chapter explains the grid layout and its importance in designing layouts for the web, along with customization options and the process for toggling the grid layout on and off. The chapter explains the grid layout and its importance in designing layouts for the web, along with customization options and the process for toggling the grid layout on and off.', 'The tutorial demonstrates the process of customizing colors for the text and background, including selecting predefined color swatches and entering specific color codes. The tutorial demonstrates the process of customizing colors for the text and background, including selecting predefined color swatches and entering specific color codes.']}], 'duration': 842.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06075.jpg', 'highlights': ['The chapter covers a crash course on Adobe XD, demonstrating its features by creating a fictional to-do task app for both desktop and mobile.', 'The tutorial focuses on teaching by example, illustrating UI design and prototyping while showing how to quickly translate a design from desktop to mobile.', 'The chapter covers the various features of Adobe XD including components, states, repeat grids, content-aware layouts, plugins, auto animate, scroll groups, and more.', 'The tutorial provides a detailed overview of the UI design tools and properties, such as the select button, rectangle tool, ellipse tool, polygon tool, line tool, pen tool, type tool, and artboard tool.', 'The chapter explains the grid layout and its importance in designing layouts for the web, along with customization options and the process for toggling the grid layout on and off.', 'The tutorial demonstrates the process of customizing colors for the text and background, including selecting predefined color swatches and entering specific color codes.', 'Encourages viewers to sign up for a new subscription service. The instructor prompts the audience to visit designcourse.com and enter their email to receive notifications about the launch of a new subscription service.']}, {'end': 1828.897, 'segs': [{'end': 944.108, 'src': 'embed', 'start': 911.373, 'weight': 0, 'content': [{'end': 912.374, 'text': 'That does not make sense.', 'start': 911.373, 'duration': 1.001}, {'end': 913.254, 'text': "Don't do that.", 'start': 912.634, 'duration': 0.62}, {'end': 918.299, 'text': "We have all this space, so we're going to use it and we're going to put a horizontal navigation here.", 'start': 914.175, 'duration': 4.124}, {'end': 922.222, 'text': "So I'm going to choose to have three links right here.", 'start': 918.899, 'duration': 3.323}, {'end': 924.584, 'text': "One's going to say home.", 'start': 923.483, 'duration': 1.101}, {'end': 928.719, 'text': 'And you should generally always have a home button.', 'start': 926.238, 'duration': 2.481}, {'end': 929.6, 'text': 'People expect it.', 'start': 928.759, 'duration': 0.841}, {'end': 931.621, 'text': "It's a user experience thing.", 'start': 930.06, 'duration': 1.561}, {'end': 932.922, 'text': "It's a usability thing.", 'start': 931.681, 'duration': 1.241}, {'end': 935.383, 'text': 'People want to be able to find a quick way to get back to your home.', 'start': 932.982, 'duration': 2.401}, {'end': 939.045, 'text': "Usually I'll take the logo, I'll link that and make sure,", 'start': 935.863, 'duration': 3.182}, {'end': 944.108, 'text': "if they click that that'll go back to the homepage and then also have another home link as well on top of that.", 'start': 939.045, 'duration': 5.063}], 'summary': 'Emphasizing the importance of a home button for user experience and usability, proposing to include three links in a horizontal navigation.', 'duration': 32.735, 'max_score': 911.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0911373.jpg'}, {'end': 1082.768, 'src': 'embed', 'start': 1052.727, 'weight': 1, 'content': [{'end': 1054.348, 'text': 'which is another ui design fundamental.', 'start': 1052.727, 'duration': 1.621}, {'end': 1066.037, 'text': "so what we're going to do is we're going to make these a little bit smaller, and by that i mean probably well, first let's change the weight.", 'start': 1055.948, 'duration': 10.089}, {'end': 1073.945, 'text': 'i one great way to separate and establish a visual hierarchy is by changing the weight of your type.', 'start': 1066.037, 'duration': 7.908}, {'end': 1076.287, 'text': 'so now look at that.', 'start': 1073.945, 'duration': 2.342}, {'end': 1082.768, 'text': "your eye is kind of more drawn over here because it's big and bold right, But at least these look different now.", 'start': 1076.287, 'duration': 6.481}], 'summary': 'Changing type weight can establish visual hierarchy in ui design.', 'duration': 30.041, 'max_score': 1052.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01052727.jpg'}, {'end': 1490.277, 'src': 'heatmap', 'start': 1191.722, 'weight': 2, 'content': [{'end': 1193.544, 'text': "So we haven't talked about the layers yet.", 'start': 1191.722, 'duration': 1.822}, {'end': 1194.484, 'text': 'The layers.', 'start': 1193.984, 'duration': 0.5}, {'end': 1200.729, 'text': 'basically every shape that you or every element that you put onto this canvas will show up here, all right?', 'start': 1194.484, 'duration': 6.245}, {'end': 1206.333, 'text': "And they're all stacked, uh, in a certain order.", 'start': 1201.509, 'duration': 4.824}, {'end': 1209.495, 'text': 'so, for instance, this rectangle 2 is this navbar background.', 'start': 1206.333, 'duration': 3.162}, {'end': 1215.32, 'text': "by the way, it's a good idea to get in habit of changing the name of your layer so you double click into it.", 'start': 1209.495, 'duration': 5.825}, {'end': 1219.203, 'text': 'this could be like nav background, all right.', 'start': 1215.32, 'duration': 3.883}, {'end': 1224.607, 'text': "so if we move it up by left clicking, dragging notice, it's on top, all right.", 'start': 1219.203, 'duration': 5.404}, {'end': 1230.712, 'text': 'so this is how layers work in most applications, i starting with the old school adobe photoshop way back in the day.', 'start': 1224.607, 'duration': 6.105}, {'end': 1234.029, 'text': 'so what we want to do?', 'start': 1232.648, 'duration': 1.381}, {'end': 1240.733, 'text': "we can't see our home button, because any element that you the last element you added is naturally going to be placed on top of it.", 'start': 1234.029, 'duration': 6.704}, {'end': 1245.636, 'text': "uh, so we're just going to push it right there underneath it.", 'start': 1240.733, 'duration': 4.903}, {'end': 1246.176, 'text': 'all right.', 'start': 1245.636, 'duration': 0.54}, {'end': 1248.838, 'text': "so we can't see it, because it's, it's the white color, right.", 'start': 1246.176, 'duration': 2.662}, {'end': 1259.405, 'text': "so we can change it, just so we can see what it's looking like i, by changing the color here like that and What we wanna do.", 'start': 1248.838, 'duration': 10.567}, {'end': 1265.729, 'text': 'and we are gonna make a cool little interaction where, when you hover the mouse over it, it will change to like a gray color, like it is.', 'start': 1259.405, 'duration': 6.324}, {'end': 1270.111, 'text': 'What we wanna do now is just take that and remove that.', 'start': 1266.649, 'duration': 3.462}, {'end': 1272.473, 'text': "We're gonna select both of those layers.", 'start': 1270.352, 'duration': 2.121}, {'end': 1278.897, 'text': "And to do that, we're gonna select just this home, and then hold shift and then left click and select that.", 'start': 1273.253, 'duration': 5.644}, {'end': 1280.898, 'text': 'Now you can see these two layers are highlighted.', 'start': 1278.957, 'duration': 1.941}, {'end': 1283.52, 'text': 'You can also select them the same way up here in the layers panel.', 'start': 1280.938, 'duration': 2.582}, {'end': 1290.665, 'text': "And what we want to do now is right click and we're going to choose make component or the shortcut is control K.", 'start': 1284.24, 'duration': 6.425}, {'end': 1298.005, 'text': "We're gonna click that and notice now it turns into this green outline.", 'start': 1291.903, 'duration': 6.102}, {'end': 1302.246, 'text': 'We select other things, it has this typical blue outline or hover over, we see blue outline.', 'start': 1298.185, 'duration': 4.061}, {'end': 1304.327, 'text': 'This is now green because it is a component.', 'start': 1302.286, 'duration': 2.041}, {'end': 1309.188, 'text': 'So a component allows us to do something really cool.', 'start': 1305.027, 'duration': 4.161}, {'end': 1313.63, 'text': 'You can see right here that it has a padding option.', 'start': 1309.809, 'duration': 3.821}, {'end': 1316.15, 'text': 'So enable, disable padding.', 'start': 1314.37, 'duration': 1.78}, {'end': 1317.091, 'text': 'We wanna click on that.', 'start': 1316.191, 'duration': 0.9}, {'end': 1328.178, 'text': "Now when we click on it, it's going to add padding from the top, left, or right rather, bottom, and left.", 'start': 1318.171, 'duration': 10.007}, {'end': 1335.941, 'text': "And these values are pixel values, and if we adjust these, you'll see how it starts adjusting situations right here.", 'start': 1328.218, 'duration': 7.723}, {'end': 1339.642, 'text': 'Now you want these pretty much to be even for the most part.', 'start': 1336.761, 'duration': 2.881}, {'end': 1341.543, 'text': 'So this is top, this is bottom.', 'start': 1339.702, 'duration': 1.841}, {'end': 1347.543, 'text': "Let's just change this one to 30.", 'start': 1341.863, 'duration': 5.68}, {'end': 1349.786, 'text': 'And then your values may be slightly different.', 'start': 1347.543, 'duration': 2.243}, {'end': 1350.067, 'text': 'This is 46.', 'start': 1349.806, 'duration': 0.261}, {'end': 1353.492, 'text': "So let's just change that to let's change this one to 46 as well.", 'start': 1350.067, 'duration': 3.425}, {'end': 1357.377, 'text': "So now they're pretty much even top left, bottom right.", 'start': 1354.032, 'duration': 3.345}, {'end': 1363.386, 'text': 'Now what we can do is we can duplicate this with control D move it over.', 'start': 1358.318, 'duration': 5.068}, {'end': 1366.522, 'text': 'And remember, use your guides.', 'start': 1365.322, 'duration': 1.2}, {'end': 1373.584, 'text': 'You can see right there is where the edges meet because of that turquoise little line showed up vertically between them.', 'start': 1366.702, 'duration': 6.882}, {'end': 1380.125, 'text': 'And so now what we can do is I can double click into this and I can change this to features.', 'start': 1374.404, 'duration': 5.721}, {'end': 1389.668, 'text': 'And guess what? The space around it automatically expands, which is very helpful.', 'start': 1381.926, 'duration': 7.742}, {'end': 1394.44, 'text': 'So now I duplicate this.', 'start': 1390.608, 'duration': 3.832}, {'end': 1404.548, 'text': 'we can put it here and we can get, we can name this one pricing, and there we go all right.', 'start': 1394.44, 'duration': 10.108}, {'end': 1412.773, 'text': "so I wanted to show another thing here that you can do with, as far as creating little interesting micro interactions, as they're called.", 'start': 1404.548, 'duration': 8.225}, {'end': 1417.921, 'text': 'for instance, if we hover over one of these and We can make it,', 'start': 1412.773, 'duration': 5.148}, {'end': 1422.905, 'text': 'we can make the background change or we can make the font bold or change the color of the font.', 'start': 1417.921, 'duration': 4.984}, {'end': 1424.627, 'text': 'You could do a lot of different things.', 'start': 1422.905, 'duration': 1.722}, {'end': 1427.969, 'text': 'so, Right up here, if we select on our home right here.', 'start': 1424.627, 'duration': 3.342}, {'end': 1432.613, 'text': "You'll see, it says like the default state.", 'start': 1428.65, 'duration': 3.963}, {'end': 1438.878, 'text': 'well, if we click on plus, we can add a hover state and Then just hit enter.', 'start': 1432.613, 'duration': 6.265}, {'end': 1442.561, 'text': 'so now we have two different states a default state and a hover state.', 'start': 1438.878, 'duration': 3.683}, {'end': 1445.323, 'text': 'nothing changes when we select between these.', 'start': 1442.561, 'duration': 2.762}, {'end': 1453.667, 'text': "so let's say, for instance, for the hover state, all we have to do is, if we want the background to change, we double click into it.", 'start': 1445.323, 'duration': 8.344}, {'end': 1464.135, 'text': "so notice it's selected, our rectangle 3, and we'll change the background color something very light, gray, f1, f1, f1 is the color code.", 'start': 1453.667, 'duration': 10.468}, {'end': 1466.958, 'text': "we'll hit enter.", 'start': 1464.135, 'duration': 2.823}, {'end': 1475.525, 'text': "now, if we select it and we go back, we could see it maintain that change only for the hover state, because that's the state that we had selected.", 'start': 1466.958, 'duration': 8.567}, {'end': 1482.655, 'text': "And so now, if we go back to default state and we're going to hit this play icon we haven't checked this out yet,", 'start': 1476.894, 'duration': 5.761}, {'end': 1490.277, 'text': 'but it basically allows you to preview your design and it has any type of interactivity ready to go.', 'start': 1482.655, 'duration': 7.622}], 'summary': 'Demonstration of using layers and creating interactions in design software.', 'duration': 298.555, 'max_score': 1191.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01191722.jpg'}, {'end': 1743.465, 'src': 'embed', 'start': 1712.289, 'weight': 3, 'content': [{'end': 1713.733, 'text': 'And it is.', 'start': 1712.289, 'duration': 1.444}, {'end': 1716.248, 'text': 'Awesome, okay.', 'start': 1715.507, 'duration': 0.741}, {'end': 1718.269, 'text': "So I know I've been talking a lot.", 'start': 1716.808, 'duration': 1.461}, {'end': 1728.035, 'text': "we haven't got very far, but I definitely wanted to spend time on demonstrating a very integral feature of Adobe XD,", 'start': 1718.269, 'duration': 9.766}, {'end': 1730.637, 'text': "and that's using components and knowing how to use them.", 'start': 1728.035, 'duration': 2.602}, {'end': 1736.921, 'text': "So next up, let's say for instance, we're also gonna have something over here.", 'start': 1731.337, 'duration': 5.584}, {'end': 1743.465, 'text': 'Now, many times people will simply opt to take their navigation and put it all the way to the right.', 'start': 1737.541, 'duration': 5.924}], 'summary': 'Demonstrating the integral feature of using components in adobe xd.', 'duration': 31.176, 'max_score': 1712.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01712289.jpg'}], 'start': 848.603, 'title': 'Ui design fundamentals', 'summary': 'Delves into ui design fundamentals, covering topics such as visual hierarchy, alignment, and components in adobe xd, emphasizing the importance of consistency and efficiency in design.', 'chapters': [{'end': 987.36, 'start': 848.603, 'title': 'Adobe xd logo and navigation tutorial', 'summary': 'Explores designing a simple logo using adobe xd and discusses the considerations for creating a navigation menu for a web design, emphasizing the importance of having a home button and avoiding the use of hamburger menus on desktop.', 'duration': 138.757, 'highlights': ['The importance of having a home button is emphasized for user experience and usability, as per recommended usability studies.', 'It is advised not to use hamburger menus on desktop when there is enough space for a horizontal navigation menu, as demonstrated with the example of having three links on the desktop layout.', 'The chapter highlights the process of duplicating and aligning links horizontally in UI design using Adobe XD, demonstrating the use of shortcuts and techniques for maintaining alignment and positioning.']}, {'end': 1163.903, 'start': 987.681, 'title': 'Ui design fundamentals: visual hierarchy and alignment', 'summary': 'Discusses the importance of alignment and consistency in ui design, demonstrating the impact of visual hierarchy through changes in font size and weight, and addresses the issue of spacing inconsistency in user interface elements.', 'duration': 176.222, 'highlights': ['Establishing visual hierarchy by changing font size and weight is a fundamental aspect of UI design', 'The impact of visual hierarchy is demonstrated through changes in font size and weight, drawing attention to different elements', 'The importance of consistency in spacing between UI elements is emphasized to maintain a visually appealing design']}, {'end': 1335.941, 'start': 1163.903, 'title': 'Adobe xd tutorial: layers and components', 'summary': 'Explains how to use layers and components in adobe xd to arrange elements and create interactions, emphasizing the importance of naming layers and utilizing components for padding adjustments.', 'duration': 172.038, 'highlights': ['Layers are essential in Adobe XD as they allow stacking and arranging elements on the canvas, emphasizing the importance of naming layers for clarity and organization.', 'Components in Adobe XD enable the creation of interactions and padding adjustments, providing pixel values for top, right, bottom, and left adjustments.', 'The tutorial emphasizes the use of components for creating interactions, such as changing colors on hover, showcasing the practical application of components in Adobe XD for user interactions.']}, {'end': 1828.897, 'start': 1336.761, 'title': 'Ui design with adobe xd', 'summary': 'Discusses the use of components and micro interactions in adobe xd, demonstrating how to create components, use states, and utilize them for efficient design reusability.', 'duration': 492.136, 'highlights': ['Demonstrating the use of components and states in Adobe XD The chapter extensively demonstrates the use of components and states in Adobe XD, illustrating the process of creating and utilizing components to maintain design consistency and reusability.', 'Explaining the concept of call to action (CTA) in UI design The concept of call to action (CTA) in UI design is explained, highlighting its significance in guiding visitor interaction and engagement, including examples of various CTAs.', 'Addressing the importance of layout and positioning in UI design The importance of layout and positioning in UI design is emphasized, discussing the impact of navigation placement and the rationale behind situating elements within the design layout.']}], 'duration': 980.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah0848603.jpg', 'highlights': ['The importance of having a home button is emphasized for user experience and usability, as per recommended usability studies.', 'Establishing visual hierarchy by changing font size and weight is a fundamental aspect of UI design', 'Layers are essential in Adobe XD as they allow stacking and arranging elements on the canvas, emphasizing the importance of naming layers for clarity and organization.', 'Demonstrating the use of components and states in Adobe XD The chapter extensively demonstrates the use of components and states in Adobe XD, illustrating the process of creating and utilizing components to maintain design consistency and reusability.']}, {'end': 2645.739, 'segs': [{'end': 1861.166, 'src': 'embed', 'start': 1829.677, 'weight': 0, 'content': [{'end': 1834.858, 'text': "We're going to put one that says go, premium like this is some sort of premium task service, right?", 'start': 1829.677, 'duration': 5.181}, {'end': 1840.52, 'text': "So to do that, we're gonna style it differently, because it is a call to action.", 'start': 1835.658, 'duration': 4.862}, {'end': 1843.16, 'text': "We're not gonna make it like a simple just piece of type like this.", 'start': 1840.72, 'duration': 2.44}, {'end': 1852.263, 'text': "So I'm going to first, we're gonna get the rectangle tool and we're gonna start in the very left right there and drag out somewhere around there.", 'start': 1843.781, 'duration': 8.482}, {'end': 1861.166, 'text': 'And you can use your keyboard up and down keys as well as the right and left to situate things very easily if you need to make fine adjustments.', 'start': 1853.143, 'duration': 8.023}], 'summary': 'Creating a premium task service call to action with styled rectangle tool.', 'duration': 31.489, 'max_score': 1829.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01829677.jpg'}, {'end': 2025.507, 'src': 'embed', 'start': 1998.112, 'weight': 1, 'content': [{'end': 2002.674, 'text': "All right, so next up is what's commonly referred to as the hero section.", 'start': 1998.112, 'duration': 4.562}, {'end': 2008.937, 'text': "So on a website, on your homepage, or the landing page, as it's called sometimes, you'll have what's called the hero section,", 'start': 2003.254, 'duration': 5.683}, {'end': 2011.018, 'text': 'which is generally found underneath your nav bar.', 'start': 2008.937, 'duration': 2.081}, {'end': 2015.901, 'text': 'And this is where really important pieces of type go.', 'start': 2011.738, 'duration': 4.163}, {'end': 2023.405, 'text': "This is where you're trying to grab the person's attention and you're trying to answer a question that they might have in their head,", 'start': 2016.361, 'duration': 7.044}, {'end': 2025.507, 'text': 'which is what is this site about?', 'start': 2023.405, 'duration': 2.102}], 'summary': "The hero section on a website grabs attention and answers the site's purpose.", 'duration': 27.395, 'max_score': 1998.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01998112.jpg'}, {'end': 2174.65, 'src': 'embed', 'start': 2142.692, 'weight': 3, 'content': [{'end': 2143.553, 'text': 'A lot of people ask me that.', 'start': 2142.692, 'duration': 0.861}, {'end': 2147.656, 'text': "Why do we have to design it when we're just going to start over with HTML and CSS?", 'start': 2143.613, 'duration': 4.043}, {'end': 2148.837, 'text': 'And I was like.', 'start': 2147.756, 'duration': 1.081}, {'end': 2153.541, 'text': "this is the reason why because it's so quick and easy to iterate and to change your design.", 'start': 2148.837, 'duration': 4.704}, {'end': 2154.142, 'text': 'All right.', 'start': 2153.561, 'duration': 0.581}, {'end': 2160.385, 'text': "Right here, we could choose to use this blue, but for me, I'm gonna make it black.", 'start': 2155.723, 'duration': 4.662}, {'end': 2166.847, 'text': "It's a high contrast and people will see it, because we have pretty large type here.", 'start': 2160.905, 'duration': 5.942}, {'end': 2174.65, 'text': "but, most importantly, we're gonna use our primary color for our primary call to action button and that's gonna really stand out,", 'start': 2166.847, 'duration': 7.803}], 'summary': 'Quick and easy design iteration helps in using high contrast black color and primary color for call to action button.', 'duration': 31.958, 'max_score': 2142.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02142692.jpg'}, {'end': 2470.565, 'src': 'heatmap', 'start': 2371.218, 'weight': 5, 'content': [{'end': 2385.564, 'text': 'And the way we reinforce this visual hierarchy is through your other UI design fundamentals, such as topography, scale, font weight I, the alignment,', 'start': 2371.218, 'duration': 14.346}, {'end': 2388.185, 'text': 'white space between them all that stuff.', 'start': 2385.564, 'duration': 2.621}, {'end': 2388.886, 'text': 'All right.', 'start': 2388.646, 'duration': 0.24}, {'end': 2391.587, 'text': 'Enough on the UI design fundamental stuff.', 'start': 2389.446, 'duration': 2.141}, {'end': 2399.031, 'text': 'Right here, we could choose to have another, like maybe a couple, not a couple paragraphs, but a couple sentences.', 'start': 2392.108, 'duration': 6.923}, {'end': 2401.753, 'text': 'You could do that if you wanted to.', 'start': 2400.072, 'duration': 1.681}, {'end': 2404.775, 'text': "For me, I'm just going to have a big call to action, like right here.", 'start': 2401.993, 'duration': 2.782}, {'end': 2413.317, 'text': "And it's gonna be styled pretty similar to this one, but it's gonna be filled in with all blue with white text so that it really stands out.", 'start': 2405.515, 'duration': 7.802}, {'end': 2424.641, 'text': "So we're gonna take our rectangle, drag those in to create the pill container, get rid of the fill, give it this color right here.", 'start': 2413.858, 'duration': 10.783}, {'end': 2427.822, 'text': 'By the way, I wanna show you something.', 'start': 2426.682, 'duration': 1.14}, {'end': 2432.063, 'text': "Let's go back here to the libraries.", 'start': 2428.262, 'duration': 3.801}, {'end': 2439.448, 'text': 'And if we take this We have this blue rectangle selected.', 'start': 2432.383, 'duration': 7.065}, {'end': 2443.152, 'text': "Let's choose this plus right there under colors.", 'start': 2439.468, 'duration': 3.684}, {'end': 2451.722, 'text': "That's gonna make it so that if we want to right click and edit, or before we edit it, if we choose right click and highlight on canvas,", 'start': 2443.192, 'duration': 8.53}, {'end': 2454.726, 'text': "it's gonna highlight every element that uses that color.", 'start': 2451.722, 'duration': 3.004}, {'end': 2460.874, 'text': "But watch what doing this really, how it's really powerful.", 'start': 2456.069, 'duration': 4.805}, {'end': 2465.519, 'text': 'If we right click and choose edit and we choose in the future,', 'start': 2461.014, 'duration': 4.505}, {'end': 2470.565, 'text': 'or your client asks you or your employer asks you what if we change this blue to something else?', 'start': 2465.519, 'duration': 5.046}], 'summary': 'The transcript discusses ui design fundamentals and demonstrates creating a call to action with a blue pill container and white text.', 'duration': 30.535, 'max_score': 2371.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02371218.jpg'}, {'end': 2503.193, 'src': 'embed', 'start': 2479.54, 'weight': 2, 'content': [{'end': 2490.264, 'text': "When you're dealing with a large project that has hundreds of layers and tons of artboards, working intelligently really will pay off,", 'start': 2479.54, 'duration': 10.724}, {'end': 2491.384, 'text': "because it's going to save you time.", 'start': 2490.264, 'duration': 1.12}, {'end': 2494.225, 'text': "All right, so let's continue on.", 'start': 2492.224, 'duration': 2.001}, {'end': 2499.547, 'text': "We're going to take the type tool and for this call to action, I'm just going to say try for free.", 'start': 2494.305, 'duration': 5.242}, {'end': 2503.193, 'text': "All right, I can't see it because it's gray, I'm gonna make it white.", 'start': 2500.492, 'duration': 2.701}], 'summary': 'Working intelligently with large projects saves time. utilizing the type tool to create a call to action.', 'duration': 23.653, 'max_score': 2479.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02479540.jpg'}], 'start': 1829.677, 'title': 'Designing web elements', 'summary': 'Covers designing a premium task service navigation and creating a call-to-action button with rounded edges, emphasizes the importance of visual hierarchy and typography in hero section creation, and demonstrates the use of adobe xd for customizing text elements.', 'chapters': [{'end': 1998.092, 'start': 1829.677, 'title': 'Designing a premium task service navigation', 'summary': "Discusses designing a premium task service navigation, creating a call-to-action button with rounded edges and a text link 'go premium', and using components and padding for alignment and consistency.", 'duration': 168.415, 'highlights': ["The chapter discusses designing a premium task service navigation, creating a call-to-action button with rounded edges and a text link 'Go Premium', and using components and padding for alignment and consistency.", "The tutorial demonstrates using the rectangle tool to create a call-to-action button with rounded edges and a text link 'Go Premium'.", 'It highlights the use of components and padding for aligning and maintaining consistency in the design.']}, {'end': 2645.739, 'start': 1998.112, 'title': 'Web design: hero section creation', 'summary': "Discusses the creation of a hero section on a website's landing page, emphasizing the importance of visual hierarchy, typography, and call-to-action buttons, and provides tips for effective design and layout. it also highlights the reasons for designing before coding and the significance of quick iteration and easy design changes. the chapter also demonstrates the use of adobe xd for creating and customizing text elements to optimize visual appeal and readability.", 'duration': 647.627, 'highlights': ["The importance of visual hierarchy, typography, and call-to-action buttons Emphasizes the significance of visual hierarchy, typography, and call-to-action buttons in the hero section creation for a website's landing page.", 'Reasons for designing before coding and the significance of quick iteration and easy design changes Explains the importance of designing before coding, highlighting the quick iteration and easy design changes.', 'Demonstration of using Adobe XD for creating and customizing text elements to optimize visual appeal and readability Demonstrates the use of Adobe XD for creating and customizing text elements to optimize visual appeal and readability.']}], 'duration': 816.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah01829677.jpg', 'highlights': ["The chapter discusses designing a premium task service navigation, creating a call-to-action button with rounded edges and a text link 'Go Premium', and using components and padding for alignment and consistency.", "The importance of visual hierarchy, typography, and call-to-action buttons Emphasizes the significance of visual hierarchy, typography, and call-to-action buttons in the hero section creation for a website's landing page.", 'Demonstration of using Adobe XD for creating and customizing text elements to optimize visual appeal and readability Demonstrates the use of Adobe XD for creating and customizing text elements to optimize visual appeal and readability.', 'Reasons for designing before coding and the significance of quick iteration and easy design changes Explains the importance of designing before coding, highlighting the quick iteration and easy design changes.', "The tutorial demonstrates using the rectangle tool to create a call-to-action button with rounded edges and a text link 'Go Premium'.", 'It highlights the use of components and padding for aligning and maintaining consistency in the design.']}, {'end': 3725.678, 'segs': [{'end': 2680.557, 'src': 'embed', 'start': 2648.06, 'weight': 2, 'content': [{'end': 2649.88, 'text': "And you know what? We don't even need to make it bold.", 'start': 2648.06, 'duration': 1.82}, {'end': 2650.941, 'text': "Let's just go to regular.", 'start': 2650.02, 'duration': 0.921}, {'end': 2658.164, 'text': "Now, to make it evident that it's a link that somebody can click, we can underline it by clicking the underline button here.", 'start': 2653.182, 'duration': 4.982}, {'end': 2663.946, 'text': "Now this is a lot better than what we had, right? Let's also put an icon.", 'start': 2659.383, 'duration': 4.563}, {'end': 2668.349, 'text': 'Now this is gonna be the first time I introduce you to plugins in Adobe XD.', 'start': 2663.966, 'duration': 4.383}, {'end': 2673.692, 'text': "If we come up here to the hamburger menu, we'll see we have plugins.", 'start': 2669.41, 'duration': 4.282}, {'end': 2676.074, 'text': 'Now I already have a bunch of plugins installed.', 'start': 2673.832, 'duration': 2.242}, {'end': 2680.557, 'text': "If you're new to this, you probably have none, which case you wanna go to browse plugins.", 'start': 2676.434, 'duration': 4.123}], 'summary': 'Demonstrating how to improve text appearance and introduce plugins in adobe xd.', 'duration': 32.497, 'max_score': 2648.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02648060.jpg'}, {'end': 2817.509, 'src': 'embed', 'start': 2791.921, 'weight': 3, 'content': [{'end': 2800.686, 'text': "and let's make it a rounded, and maybe this is going to be illustration, like a rough skeleton UI based illustration of like a task app.", 'start': 2791.921, 'duration': 8.765}, {'end': 2801.046, 'text': 'All right.', 'start': 2800.746, 'duration': 0.3}, {'end': 2810.491, 'text': "And that's going to allow me to show you a couple of really cool things called the repeat grid and also stacks.", 'start': 2802.507, 'duration': 7.984}, {'end': 2817.509, 'text': "So Let's go ahead and create like a little checkbox situation, like icon.", 'start': 2811.192, 'duration': 6.317}], 'summary': 'Creating a rounded, skeleton ui illustration for a task app using repeat grid and stacks.', 'duration': 25.588, 'max_score': 2791.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02791921.jpg'}, {'end': 2890.924, 'src': 'embed', 'start': 2865.867, 'weight': 1, 'content': [{'end': 2872.311, 'text': "We're going to add it to the swatches by clicking plus, and then we're going to come in here, and we're going to take the pen tool.", 'start': 2865.867, 'duration': 6.444}, {'end': 2880.497, 'text': "I'm going to left click right around here, hold shift, left click, keep on holding shift, and then left click finally, hit escape.", 'start': 2872.331, 'duration': 8.166}, {'end': 2887.662, 'text': 'Now we can change the border, make it bold, and make it white so that it really contrasts well.', 'start': 2881.277, 'duration': 6.385}, {'end': 2890.924, 'text': 'Oops, I did not mean to do that.', 'start': 2889.563, 'duration': 1.361}], 'summary': 'Demonstrating adding swatches and customizing borders and colors in a design tool.', 'duration': 25.057, 'max_score': 2865.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02865867.jpg'}, {'end': 2998.954, 'src': 'embed', 'start': 2970.662, 'weight': 0, 'content': [{'end': 2973.324, 'text': "I'm going to select both, hold Shift-Alt-Scale down.", 'start': 2970.662, 'duration': 2.662}, {'end': 2974.205, 'text': 'There we go.', 'start': 2973.845, 'duration': 0.36}, {'end': 2986.21, 'text': 'So it would be very dumb to recreate all that by hand like we just did, right? So Adobe XD will give you several different ways to tackle this.', 'start': 2975.325, 'duration': 10.885}, {'end': 2992.153, 'text': 'So level newbie would be to recreate all that stuff that we did and try to do it three times.', 'start': 2986.85, 'duration': 5.303}, {'end': 2997.153, 'text': 'But one step up from that would be to take all those.', 'start': 2993.131, 'duration': 4.022}, {'end': 2998.954, 'text': 'Notice how we selected the background.', 'start': 2997.573, 'duration': 1.381}], 'summary': 'Adobe xd provides multiple ways to efficiently handle scaling and selection, saving time and effort in design tasks.', 'duration': 28.292, 'max_score': 2970.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02970662.jpg'}, {'end': 3365.498, 'src': 'embed', 'start': 3337.422, 'weight': 4, 'content': [{'end': 3342.651, 'text': "So we're going to say that that is our, our hero section,", 'start': 3337.422, 'duration': 5.229}, {'end': 3350.608, 'text': "and this may be the only thing that a person sees with what's called above the fold when they look at the app.", 'start': 3342.651, 'duration': 7.957}, {'end': 3350.869, 'text': 'all right?', 'start': 3350.608, 'duration': 0.261}, {'end': 3360.834, 'text': "We're going to create more design, though, because obviously this is pretty understated.", 'start': 3354.249, 'duration': 6.585}, {'end': 3365.498, 'text': 'And obviously I also want to show you a lot more of what Adobe XD can do.', 'start': 3361.135, 'duration': 4.363}], 'summary': 'Creating a hero section for app with adobe xd to showcase its features.', 'duration': 28.076, 'max_score': 3337.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03337422.jpg'}, {'end': 3436.668, 'src': 'embed', 'start': 3390.484, 'weight': 6, 'content': [{'end': 3393.55, 'text': "It's basically what the user sees by default without having to scroll.", 'start': 3390.484, 'duration': 3.066}, {'end': 3396.936, 'text': 'Now we can scroll down here by using our mouse scroll wheel.', 'start': 3394.251, 'duration': 2.685}, {'end': 3405.159, 'text': "Now for me, when I'm designing initially, I like to just make this all the way, take this all the way at the very bottom, just so I don't see it.", 'start': 3398.271, 'duration': 6.888}, {'end': 3412.728, 'text': 'So maybe this area will list out all the different tasks, not tasks, but features that are associated with our app.', 'start': 3405.72, 'duration': 7.008}, {'end': 3415.11, 'text': "So there's a lot of ways to do this.", 'start': 3413.248, 'duration': 1.862}, {'end': 3426.157, 'text': "Generally speaking, when you have different containers or different areas of your layout, that semantically they're talking about different things,", 'start': 3416.092, 'duration': 10.065}, {'end': 3430.842, 'text': 'like there could be testimonials in one area, there could be contact form in another area.', 'start': 3426.157, 'duration': 4.685}, {'end': 3434.045, 'text': 'You wanna separate them out visually, like with the background color.', 'start': 3431.202, 'duration': 2.843}, {'end': 3436.668, 'text': "Not always, but we're gonna do that here.", 'start': 3434.586, 'duration': 2.082}], 'summary': 'Design layout separates content visually using background color for better user experience.', 'duration': 46.184, 'max_score': 3390.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03390484.jpg'}, {'end': 3483.474, 'src': 'embed', 'start': 3455.923, 'weight': 8, 'content': [{'end': 3464.71, 'text': 'We could go many different colors or not many, but we have a lot of options and a lot of them would be subjective, I would say.', 'start': 3455.923, 'duration': 8.787}, {'end': 3466.011, 'text': 'Like we could go white.', 'start': 3465.03, 'duration': 0.981}, {'end': 3473.424, 'text': "We could see clearly there's a big difference between this gray and this white.", 'start': 3467.819, 'duration': 5.605}, {'end': 3475.967, 'text': 'We could go blue.', 'start': 3474.485, 'duration': 1.482}, {'end': 3477.548, 'text': 'You could do that.', 'start': 3476.948, 'duration': 0.6}, {'end': 3480.231, 'text': 'I want to do something different though.', 'start': 3478.769, 'duration': 1.462}, {'end': 3483.474, 'text': "I'm going to take the same hue of blue that we have here.", 'start': 3480.251, 'duration': 3.223}], 'summary': 'Discussion on color options for a design project.', 'duration': 27.551, 'max_score': 3455.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03455923.jpg'}, {'end': 3590.058, 'src': 'embed', 'start': 3566.206, 'weight': 9, 'content': [{'end': 3575.672, 'text': "there's a lot of different variations of this or different types of elements that you can add, but they're there just for graphic design elements,", 'start': 3566.206, 'duration': 9.466}, {'end': 3577.374, 'text': 'just to add interest to a layout.', 'start': 3575.672, 'duration': 1.702}, {'end': 3584.799, 'text': "They're not important, they're not like, they shouldn't be primary elements, but they're there just to supplement the design.", 'start': 3577.974, 'duration': 6.825}, {'end': 3587.141, 'text': "All right, so we'll leave that over here.", 'start': 3584.819, 'duration': 2.322}, {'end': 3590.058, 'text': "And now we're gonna list out the features.", 'start': 3588.297, 'duration': 1.761}], 'summary': 'Various design elements are used as supplements for layout interest, not as primary elements.', 'duration': 23.852, 'max_score': 3566.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03566206.jpg'}], 'start': 2648.06, 'title': 'Adobe xd ui design', 'summary': 'Covers using adobe xd plugins and tools to create a rough ui illustration, designing ui elements, and creating a visually appealing app layout, emphasizing design elements and graphic design. it demonstrates the use of tools like the pen tool, repeat grid, stacks, viewport height control, and color selection.', 'chapters': [{'end': 2865.827, 'start': 2648.06, 'title': 'Adobe xd plugins and illustrations', 'summary': 'Introduces the use of plugins in adobe xd to add icons and demonstrates the creation of a rough skeleton ui illustration using tools like the rectangle tool, repeat grid, and stacks.', 'duration': 217.767, 'highlights': ['The chapter introduces the use of plugins in Adobe XD to add icons. The speaker demonstrates how to use plugins in Adobe XD to add an icon to a design, mentioning the process of browsing and selecting an icon plugin.', 'The demonstration includes the creation of a rough skeleton UI illustration using tools like the rectangle tool, repeat grid, and stacks. The speaker shows the process of creating a rough skeleton UI illustration using tools like the rectangle tool, repeat grid, and stacks, while also mentioning the removal of borders and color selection for the illustration.']}, {'end': 3337.122, 'start': 2865.867, 'title': 'Adobe xd ui design tutorial', 'summary': 'Covers creating ui elements in adobe xd, including using the pen tool, creating a repeat grid, and utilizing stacks to efficiently organize and modify design components.', 'duration': 471.255, 'highlights': ['Creating UI elements using the pen tool The speaker demonstrates using the pen tool to create and customize UI elements, allowing for precise design control.', "Utilizing repeat grid for efficient design replication The tutorial showcases the use of Adobe XD's repeat grid feature to efficiently replicate and modify design components, reducing manual effort and time.", 'Implementing stacks for organized UI element management The tutorial explains the use of stacks to easily organize and modify UI elements, providing a streamlined approach for managing design components.']}, {'end': 3725.678, 'start': 3337.422, 'title': 'Designing app layout with adobe xd', 'summary': 'Discusses creating a visually appealing app layout using adobe xd, including viewport height control, container separation, color selection, and feature listing for an app, with an emphasis on design elements and graphic design elements.', 'duration': 388.256, 'highlights': ['The chapter discusses creating a visually appealing app layout using Adobe XD. Visually appealing app layout, Adobe XD', 'Viewport height control is demonstrated, allowing control over what the user sees by default without scrolling. Viewport height control, controlling user view', 'The concept of visually separating different areas of the layout with background colors is emphasized. Separating layout areas with background colors', 'Color selection process and considerations are discussed, including creating high contrast and aligning hues. Color selection, creating high contrast, aligning hues', "Use of design elements and graphic design elements to add interest and supplement the app's design. Use of design elements, graphic design elements, supplementing design", 'Demonstration of feature listing for the app and its visual arrangement within the layout. Feature listing, visual arrangement']}], 'duration': 1077.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah02648060.jpg', 'highlights': ["The tutorial showcases the use of Adobe XD's repeat grid feature to efficiently replicate and modify design components, reducing manual effort and time.", 'The speaker demonstrates using the pen tool to create and customize UI elements, allowing for precise design control.', 'The chapter introduces the use of plugins in Adobe XD to add icons, mentioning the process of browsing and selecting an icon plugin.', 'The demonstration includes the creation of a rough skeleton UI illustration using tools like the rectangle tool, repeat grid, and stacks, while also mentioning the removal of borders and color selection for the illustration.', 'The chapter discusses creating a visually appealing app layout using Adobe XD.', 'Implementing stacks for organized UI element management, providing a streamlined approach for managing design components.', 'Viewport height control is demonstrated, allowing control over what the user sees by default without scrolling.', 'The concept of visually separating different areas of the layout with background colors is emphasized.', 'Color selection process and considerations are discussed, including creating high contrast and aligning hues.', "Use of design elements and graphic design elements to add interest and supplement the app's design.", 'Demonstration of feature listing for the app and its visual arrangement within the layout.']}, {'end': 4613.762, 'segs': [{'end': 3873.177, 'src': 'heatmap', 'start': 3797.06, 'weight': 1, 'content': [{'end': 3805.915, 'text': "So maybe we'll make a block right here and this time we are going to put in an image, a photograph of some sort.", 'start': 3797.06, 'duration': 8.855}, {'end': 3811.264, 'text': "So that's going to lead us to another plugin called Photosplash.", 'start': 3806.456, 'duration': 4.808}, {'end': 3814.716, 'text': "All right, so I'm gonna enter a keyword here.", 'start': 3813.035, 'duration': 1.681}, {'end': 3819.577, 'text': 'So, by the way, if you wanna install it, go to the plugin section and go to manage plugins.', 'start': 3814.816, 'duration': 4.761}, {'end': 3822.638, 'text': "then search for it, click install and then you'll have access to it.", 'start': 3819.577, 'duration': 3.061}, {'end': 3829.06, 'text': "We'll just type in using phone, find photos.", 'start': 3823.698, 'duration': 5.362}, {'end': 3837.022, 'text': 'And so now we can have all these photos at our disposal from which we see people using their phone.', 'start': 3830.74, 'duration': 6.282}, {'end': 3838.103, 'text': "Let's just choose this one.", 'start': 3837.062, 'duration': 1.041}, {'end': 3840.724, 'text': 'And there we go.', 'start': 3840.083, 'duration': 0.641}, {'end': 3846.051, 'text': "There's something called blend modes, which we haven't talked about yet.", 'start': 3843.39, 'duration': 2.661}, {'end': 3848.451, 'text': "And blend modes aren't new to Adobe XD.", 'start': 3846.191, 'duration': 2.26}, {'end': 3850.131, 'text': 'Blend modes have been around since Photoshop.', 'start': 3848.531, 'duration': 1.6}, {'end': 3859.113, 'text': 'So if we check a blend mode, and we just select one, but we use our keyboard down arrow key, we can start going through them.', 'start': 3851.112, 'duration': 8.001}, {'end': 3863.814, 'text': 'Notice multiply, color burn, and all of them do something a little bit different than the other ones.', 'start': 3859.233, 'duration': 4.581}, {'end': 3868.095, 'text': "Me, I'm gonna choose, if we go all the way down, to luminosity.", 'start': 3864.394, 'duration': 3.701}, {'end': 3873.177, 'text': "It doesn't really work too well with this background because it's almost seamless.", 'start': 3869.255, 'duration': 3.922}], 'summary': 'Using photosplash plugin to find and apply images in adobe xd, with introduction to blend modes.', 'duration': 76.117, 'max_score': 3797.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03797060.jpg'}, {'end': 3850.131, 'src': 'embed', 'start': 3823.698, 'weight': 1, 'content': [{'end': 3829.06, 'text': "We'll just type in using phone, find photos.", 'start': 3823.698, 'duration': 5.362}, {'end': 3837.022, 'text': 'And so now we can have all these photos at our disposal from which we see people using their phone.', 'start': 3830.74, 'duration': 6.282}, {'end': 3838.103, 'text': "Let's just choose this one.", 'start': 3837.062, 'duration': 1.041}, {'end': 3840.724, 'text': 'And there we go.', 'start': 3840.083, 'duration': 0.641}, {'end': 3846.051, 'text': "There's something called blend modes, which we haven't talked about yet.", 'start': 3843.39, 'duration': 2.661}, {'end': 3848.451, 'text': "And blend modes aren't new to Adobe XD.", 'start': 3846.191, 'duration': 2.26}, {'end': 3850.131, 'text': 'Blend modes have been around since Photoshop.', 'start': 3848.531, 'duration': 1.6}], 'summary': 'Adobe xd features blend modes, available for photo editing, which have been around since photoshop.', 'duration': 26.433, 'max_score': 3823.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03823698.jpg'}, {'end': 4050.031, 'src': 'embed', 'start': 4013.245, 'weight': 2, 'content': [{'end': 4025.273, 'text': 'So, in UI design, Google material, I made it real popular what are called cards, which is just kind of like a rectangular pieces of content,', 'start': 4013.245, 'duration': 12.028}, {'end': 4025.774, 'text': 'essentially.', 'start': 4025.273, 'duration': 0.501}, {'end': 4031.037, 'text': "And that's what we're gonna contain each of these testimonials in that you're gonna see.", 'start': 4026.354, 'duration': 4.683}, {'end': 4044.109, 'text': "So let's bring back a grid and let's place a card right here And it'll span maybe around three.", 'start': 4031.798, 'duration': 12.311}, {'end': 4050.031, 'text': "Yeah, I think that's pretty good.", 'start': 4044.129, 'duration': 5.902}], 'summary': 'In ui design, google material popularized cards, rectangular pieces of content, each testimonial placed in a card spanning around three.', 'duration': 36.786, 'max_score': 4013.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04013245.jpg'}, {'end': 4197.115, 'src': 'embed', 'start': 4168.886, 'weight': 5, 'content': [{'end': 4171.688, 'text': "Now let's put in the actual text quote.", 'start': 4168.886, 'duration': 2.802}, {'end': 4179.747, 'text': "So I'm left clicking, dragging out, and I'm gonna show you another very handy plugin in a second.", 'start': 4172.725, 'duration': 7.022}, {'end': 4180.888, 'text': "So we're gonna drag this down.", 'start': 4179.787, 'duration': 1.101}, {'end': 4182.828, 'text': "We're gonna go over here.", 'start': 4181.929, 'duration': 0.899}, {'end': 4193.033, 'text': "We're gonna go to lorem ipsum, all right? And so for lorem ipsum, if you don't know what that is, it's just Latin text for placeholder text.", 'start': 4184.85, 'duration': 8.183}, {'end': 4197.115, 'text': "So you don't have to sit there and figure out all the ad copy while you're designing.", 'start': 4193.513, 'duration': 3.602}], 'summary': 'Demonstrating the use of a plugin by dragging and adding lorem ipsum for placeholder text.', 'duration': 28.229, 'max_score': 4168.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04168886.jpg'}, {'end': 4371.568, 'src': 'heatmap', 'start': 4293.422, 'weight': 0.853, 'content': [{'end': 4299.905, 'text': "we have the, the avatar, we have the description or the, the quote and the person's name in the background.", 'start': 4293.422, 'duration': 6.483}, {'end': 4309.15, 'text': 'we can right click and choose to make it a component and then stack them so vertical stacks, and now you know if, for some reason,', 'start': 4299.905, 'duration': 9.245}, {'end': 4313.813, 'text': 'i want to put this at the bottom, we could do that and all that good stuff.', 'start': 4309.15, 'duration': 4.663}, {'end': 4314.413, 'text': 'all right.', 'start': 4313.813, 'duration': 0.6}, {'end': 4321.874, 'text': "so now we can also take repeat grid and we're gonna repeat this pretty far out, like right here.", 'start': 4314.413, 'duration': 7.461}, {'end': 4328.138, 'text': "Let's make it start maybe like right here, and then repeat it out all the way that far.", 'start': 4323.555, 'duration': 4.583}, {'end': 4338.804, 'text': "Now, the reason I'm doing that is because, when we select this, if we choose this option right here, this little icon scroll groups,", 'start': 4329.078, 'duration': 9.726}, {'end': 4344.956, 'text': "we're going to create a horizontal scroll group, because you can see the two little icons are pointing to the left and right.", 'start': 4339.77, 'duration': 5.186}, {'end': 4348.58, 'text': 'You can also do vertical and one that does horizontal and vertical.', 'start': 4345.396, 'duration': 3.184}, {'end': 4350.802, 'text': "We'll do one of those in a second here.", 'start': 4349.14, 'duration': 1.662}, {'end': 4352.644, 'text': "This one's just going to be horizontal.", 'start': 4351.223, 'duration': 1.421}, {'end': 4361.84, 'text': 'When we click it, then we can kind of choose on the left and right what will be the visible portion of this scroll group.', 'start': 4353.505, 'duration': 8.335}, {'end': 4364.643, 'text': 'So let me show you what a scroll group actually is.', 'start': 4361.921, 'duration': 2.722}, {'end': 4371.568, 'text': "So if we go back here, now if we hit play, we're gonna see the whole thing because our viewport height is real high.", 'start': 4365.183, 'duration': 6.385}], 'summary': 'Demonstration of creating a horizontal scroll group and repeating grid in ui design.', 'duration': 78.146, 'max_score': 4293.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04293422.jpg'}, {'end': 4361.84, 'src': 'embed', 'start': 4314.413, 'weight': 0, 'content': [{'end': 4321.874, 'text': "so now we can also take repeat grid and we're gonna repeat this pretty far out, like right here.", 'start': 4314.413, 'duration': 7.461}, {'end': 4328.138, 'text': "Let's make it start maybe like right here, and then repeat it out all the way that far.", 'start': 4323.555, 'duration': 4.583}, {'end': 4338.804, 'text': "Now, the reason I'm doing that is because, when we select this, if we choose this option right here, this little icon scroll groups,", 'start': 4329.078, 'duration': 9.726}, {'end': 4344.956, 'text': "we're going to create a horizontal scroll group, because you can see the two little icons are pointing to the left and right.", 'start': 4339.77, 'duration': 5.186}, {'end': 4348.58, 'text': 'You can also do vertical and one that does horizontal and vertical.', 'start': 4345.396, 'duration': 3.184}, {'end': 4350.802, 'text': "We'll do one of those in a second here.", 'start': 4349.14, 'duration': 1.662}, {'end': 4352.644, 'text': "This one's just going to be horizontal.", 'start': 4351.223, 'duration': 1.421}, {'end': 4361.84, 'text': 'When we click it, then we can kind of choose on the left and right what will be the visible portion of this scroll group.', 'start': 4353.505, 'duration': 8.335}], 'summary': 'Using repeat grid to create a horizontal scroll group with visible portion selection.', 'duration': 47.427, 'max_score': 4314.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04314413.jpg'}, {'end': 4514.193, 'src': 'heatmap', 'start': 4432.938, 'weight': 0.829, 'content': [{'end': 4437.88, 'text': "Let's take a rectangle tool roughly right around there.", 'start': 4432.938, 'duration': 4.942}, {'end': 4439.8, 'text': 'Get rid of the stroke.', 'start': 4439.08, 'duration': 0.72}, {'end': 4446.737, 'text': "We'll make the background color this, but we're gonna click on this and change from solid color to linear gradient.", 'start': 4441.51, 'duration': 5.227}, {'end': 4451.324, 'text': 'So what we can do is we can create these gradients.', 'start': 4448.143, 'duration': 3.181}, {'end': 4454.264, 'text': 'We can change the color of each of these different gradient stops.', 'start': 4451.404, 'duration': 2.86}, {'end': 4456.645, 'text': 'We can also reposition the gradient.', 'start': 4454.904, 'duration': 1.741}, {'end': 4461.565, 'text': 'So if we want a gradient that faces this way, we could push that right there.', 'start': 4456.905, 'duration': 4.66}, {'end': 4466.146, 'text': "And the darker one, let's make our original color right here.", 'start': 4462.346, 'duration': 3.8}, {'end': 4472.527, 'text': "And then we'll choose this one right here and take the opacity slider all the way down.", 'start': 4467.146, 'duration': 5.381}, {'end': 4480.433, 'text': 'So what that does is it creates an effect where it kind of fades off these areas right here.', 'start': 4473.087, 'duration': 7.346}, {'end': 4483.216, 'text': 'So now I can duplicate this.', 'start': 4481.274, 'duration': 1.942}, {'end': 4489.709, 'text': 'hit alt and then just flip it so it goes to the reverse side and then push it over.', 'start': 4485.646, 'duration': 4.063}, {'end': 4492.67, 'text': "here we'll have to take this right click.", 'start': 4489.709, 'duration': 2.961}, {'end': 4498.094, 'text': 'we can choose, uh, arrange and bring to front so that it is not on top.', 'start': 4492.67, 'duration': 5.424}, {'end': 4501.356, 'text': "although it's I, it's blend mode is screwing it up.", 'start': 4498.094, 'duration': 3.262}, {'end': 4505.018, 'text': 'so let me resort these a little bit.', 'start': 4501.356, 'duration': 3.662}, {'end': 4514.193, 'text': "let's take our scroll group right here as well, as well as these two, and let's put them underneath wherever this shows up.", 'start': 4505.018, 'duration': 9.175}], 'summary': 'Creating a linear gradient rectangle, adjusting colors and opacity, and arranging layers in a design software.', 'duration': 81.255, 'max_score': 4432.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04432938.jpg'}, {'end': 4483.216, 'src': 'embed', 'start': 4456.905, 'weight': 6, 'content': [{'end': 4461.565, 'text': 'So if we want a gradient that faces this way, we could push that right there.', 'start': 4456.905, 'duration': 4.66}, {'end': 4466.146, 'text': "And the darker one, let's make our original color right here.", 'start': 4462.346, 'duration': 3.8}, {'end': 4472.527, 'text': "And then we'll choose this one right here and take the opacity slider all the way down.", 'start': 4467.146, 'duration': 5.381}, {'end': 4480.433, 'text': 'So what that does is it creates an effect where it kind of fades off these areas right here.', 'start': 4473.087, 'duration': 7.346}, {'end': 4483.216, 'text': 'So now I can duplicate this.', 'start': 4481.274, 'duration': 1.942}], 'summary': 'Demonstrates creating a gradient effect with opacity slider, resulting in faded areas. can duplicate the effect.', 'duration': 26.311, 'max_score': 4456.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04456905.jpg'}, {'end': 4573.845, 'src': 'embed', 'start': 4543.829, 'weight': 3, 'content': [{'end': 4547.852, 'text': "And so let's go ahead and do one more section of this design right here.", 'start': 4543.829, 'duration': 4.023}, {'end': 4552.116, 'text': "And then we'll get into prototyping and animation, all that cool stuff.", 'start': 4548.253, 'duration': 3.863}, {'end': 4554.238, 'text': "Let's go ahead.", 'start': 4553.577, 'duration': 0.661}, {'end': 4555.299, 'text': 'Let me think here.', 'start': 4554.478, 'duration': 0.821}, {'end': 4558.281, 'text': 'That was a scroll group.', 'start': 4557.08, 'duration': 1.201}, {'end': 4559.582, 'text': 'Let me undo that.', 'start': 4558.301, 'duration': 1.281}, {'end': 4561.224, 'text': 'There we go.', 'start': 4560.784, 'duration': 0.44}, {'end': 4563.386, 'text': 'Okay So now we can move this up.', 'start': 4561.604, 'duration': 1.782}, {'end': 4568.243, 'text': 'We can select both of those elements holding shift and move those up as well.', 'start': 4564.721, 'duration': 3.522}, {'end': 4573.845, 'text': 'And we just want them in like a good amount of white space on the top and even amount as well as the bottom.', 'start': 4568.263, 'duration': 5.582}], 'summary': 'Design section completed, ready for prototyping and animation.', 'duration': 30.016, 'max_score': 4543.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04543829.jpg'}], 'start': 3727.697, 'title': 'Designing landing page elements and prototyping concepts', 'summary': 'Discusses designing landing page elements in adobe xd, covering creating a repeatable grid, integrating images with blend modes, and building testimonial cards with rounded edges. it also explores prototyping concepts, including using plugins for text, creating scroll groups for horizontal carousels, demonstrating gradient effects, and arranging components for visually appealing design.', 'chapters': [{'end': 4168.267, 'start': 3727.697, 'title': 'Designing landing page elements', 'summary': 'Discusses designing landing page elements, including creating a repeatable grid, integrating images using blend modes, and building testimonial cards with rounded edges and images, all demonstrated using adobe xd.', 'duration': 440.57, 'highlights': ['Creating a repeatable grid to structure the layout The speaker demonstrates how to adjust spacing and layout to create a repeatable grid for organizing landing page elements in Adobe XD.', 'Using blend modes for image integration The speaker explains the concept of blend modes and how to apply them to images, demonstrating the use of blend modes in Adobe XD for creative integration of photographs.', 'Designing testimonial cards with rounded edges and images The speaker instructs on creating testimonial cards with rounded edges, integrating images and adjusting borders in Adobe XD for a visually appealing design.']}, {'end': 4613.762, 'start': 4168.886, 'title': 'Design prototyping and animation', 'summary': 'Covers designing and prototyping concepts, including using plugins for text and creating scroll groups for horizontal carousels, also demonstrating gradient effects and arranging components for a visually appealing design.', 'duration': 444.876, 'highlights': ['The chapter covers designing and prototyping concepts It includes using plugins for text, creating scroll groups for horizontal carousels, demonstrating gradient effects, and arranging components for a visually appealing design.', 'Creating scroll groups for horizontal carousels The scroll groups allow for the creation of a horizontal carousel, defining the initially visible content and enabling left-click and drag to sort through all items.', 'Using plugins for text Plugins are used to insert lorem ipsum text, with the ability to adjust letter height and line height, as well as to center and format the text.', 'Demonstrating gradient effects The demonstration involves creating linear gradients, adjusting color and opacity, repositioning the gradient, and duplicating and flipping the gradient to create a visually appealing effect.']}], 'duration': 886.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah03727697.jpg', 'highlights': ['Creating a repeatable grid to structure the layout The speaker demonstrates how to adjust spacing and layout to create a repeatable grid for organizing landing page elements in Adobe XD.', 'Using blend modes for image integration The speaker explains the concept of blend modes and how to apply them to images, demonstrating the use of blend modes in Adobe XD for creative integration of photographs.', 'Designing testimonial cards with rounded edges and images The speaker instructs on creating testimonial cards with rounded edges, integrating images and adjusting borders in Adobe XD for a visually appealing design.', 'The chapter covers designing and prototyping concepts It includes using plugins for text, creating scroll groups for horizontal carousels, demonstrating gradient effects, and arranging components for a visually appealing design.', 'Creating scroll groups for horizontal carousels The scroll groups allow for the creation of a horizontal carousel, defining the initially visible content and enabling left-click and drag to sort through all items.', 'Using plugins for text Plugins are used to insert lorem ipsum text, with the ability to adjust letter height and line height, as well as to center and format the text.', 'Demonstrating gradient effects The demonstration involves creating linear gradients, adjusting color and opacity, repositioning the gradient, and duplicating and flipping the gradient to create a visually appealing effect.']}, {'end': 5127.627, 'segs': [{'end': 4756.363, 'src': 'embed', 'start': 4699.188, 'weight': 0, 'content': [{'end': 4703.372, 'text': 'and save an image of what I screenshotted.', 'start': 4699.188, 'duration': 4.184}, {'end': 4705.855, 'text': "I'm gonna call it maps2.", 'start': 4703.393, 'duration': 2.462}, {'end': 4707.597, 'text': 'So I just saved the screenshot.', 'start': 4705.955, 'duration': 1.642}, {'end': 4710.92, 'text': "You can see it's maps2.jpg right there.", 'start': 4708.638, 'duration': 2.282}, {'end': 4718.047, 'text': 'And so I, unmaximize the screen so that I could just see my desktop.', 'start': 4711.561, 'duration': 6.486}, {'end': 4721.549, 'text': 'And then just with this selected, I will left click and drag it in.', 'start': 4718.107, 'duration': 3.442}, {'end': 4723.811, 'text': 'All right, very, very cool.', 'start': 4722.49, 'duration': 1.321}, {'end': 4727.793, 'text': 'So now we have this fictional location for our business.', 'start': 4723.911, 'duration': 3.882}, {'end': 4729.615, 'text': "And let's say, for instance,", 'start': 4728.494, 'duration': 1.121}, {'end': 4741.175, 'text': 'we wanna be able to make it so that people can zoom around in it or move it around on an X Y axis by grabbing it or whatever.', 'start': 4729.615, 'duration': 11.56}, {'end': 4749.099, 'text': "So if I double click into it, you'll see we have the ability to, you know, make it larger if we wish or whatever.", 'start': 4741.715, 'duration': 7.384}, {'end': 4750.98, 'text': "So I'll just make it a little bit larger.", 'start': 4749.119, 'duration': 1.861}, {'end': 4756.363, 'text': "I'm going to take this and then we're going to click on this, the horizontal and vertical scroll option.", 'start': 4751, 'duration': 5.363}], 'summary': 'Demonstrated how to save and manipulate an image, and enable zoom and movement on an x y axis using a fictional location.', 'duration': 57.175, 'max_score': 4699.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04699188.jpg'}, {'end': 4858.633, 'src': 'embed', 'start': 4823.703, 'weight': 2, 'content': [{'end': 4831.065, 'text': 'make this black, and we will go ahead and hide that grid.', 'start': 4823.703, 'duration': 7.362}, {'end': 4834.906, 'text': 'All right, so now we just need to make this larger.', 'start': 4833.265, 'duration': 1.641}, {'end': 4839.027, 'text': 'Contact us, or contact, whatever you wanna call it.', 'start': 4836.226, 'duration': 2.801}, {'end': 4845.968, 'text': "So right here, there's a lot of different ways to put a contact form information.", 'start': 4841.067, 'duration': 4.901}, {'end': 4849.409, 'text': "We're gonna just do like a form field, just with two fields.", 'start': 4845.988, 'duration': 3.421}, {'end': 4858.633, 'text': "So the first field is gonna be name, We'll make that smaller.", 'start': 4849.929, 'duration': 8.704}], 'summary': 'Adjust design elements, create contact form with two fields.', 'duration': 34.93, 'max_score': 4823.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04823703.jpg'}, {'end': 4953.323, 'src': 'embed', 'start': 4928.167, 'weight': 3, 'content': [{'end': 4933.03, 'text': 'And oh, by the way, this would be a good use case, you know, because form elements like you know,', 'start': 4928.167, 'duration': 4.863}, {'end': 4938.953, 'text': 'text fields and all that are elements that are reused commonly in different parts of an app,', 'start': 4933.03, 'duration': 5.923}, {'end': 4942.215, 'text': 'like a login screen like this might have a login screen or whatever.', 'start': 4938.953, 'duration': 3.262}, {'end': 4947.739, 'text': "anything that's reused, of course, is a very good use case for components.", 'start': 4943.676, 'duration': 4.063}, {'end': 4951.622, 'text': 'so if i right click, you choose make component.', 'start': 4947.739, 'duration': 3.883}, {'end': 4953.323, 'text': "it's now a component.", 'start': 4951.622, 'duration': 1.701}], 'summary': 'Form elements like text fields are good use case for components, commonly reused in apps.', 'duration': 25.156, 'max_score': 4928.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04928167.jpg'}, {'end': 5092.783, 'src': 'embed', 'start': 5063.082, 'weight': 5, 'content': [{'end': 5066.785, 'text': "In this case, it's probably not so important because we can move things easily around.", 'start': 5063.082, 'duration': 3.703}, {'end': 5070.128, 'text': "Plus, it wouldn't make sense necessarily to use stacks here.", 'start': 5067.606, 'duration': 2.522}, {'end': 5074.893, 'text': 'If we right-click, make component, and then choose stacks.', 'start': 5071.39, 'duration': 3.503}, {'end': 5083.017, 'text': 'then we have the option to double click into here, move things around if we wish, but it would not make sense to put the message at top.', 'start': 5076.513, 'duration': 6.504}, {'end': 5086.979, 'text': "But again, it's a good idea just to get in the habit of knowing how to do this stuff.", 'start': 5083.097, 'duration': 3.882}, {'end': 5092.783, 'text': "So that, I'm gonna say, is it for the homepage design.", 'start': 5087.6, 'duration': 5.183}], 'summary': "The homepage design does not require using stacks, and it's important to get in the habit of knowing how to move components easily.", 'duration': 29.701, 'max_score': 5063.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05063082.jpg'}], 'start': 4613.762, 'title': 'Creating scroll group, contact form & reusable components', 'summary': 'Covers creating a scroll group for a map view with the ability to scroll on the x and y axis, implementing a contact form with name and email fields, and discusses creating reusable components like text fields and buttons for an app design, emphasizing the use of components for reusability and the process of converting elements into components, grouping, and utilizing stacks.', 'chapters': [{'end': 4926.645, 'start': 4613.762, 'title': 'Creating a scroll group and contact form', 'summary': 'Covers creating a scroll group for a map view with the ability to scroll on the x and y axis, and implementing a contact form with name and email fields.', 'duration': 312.883, 'highlights': ['Creating a 50-50 column layout for the scroll group and contact form.', 'Adding a Google Maps view to the scroll group to display a fictional location for the business.', 'Implementing the ability to zoom and move the map around on an X Y axis within the scroll group.', 'Designing and customizing a contact form with name and email fields, ensuring visibility and visual hierarchy.']}, {'end': 5127.627, 'start': 4928.167, 'title': 'Creating reusable components in app design', 'summary': 'Discusses creating reusable components like text fields and buttons for an app design, emphasizing the use of components for reusability and the process of converting elements into components, grouping, and utilizing stacks.', 'duration': 199.46, 'highlights': ['Creating reusable components like text fields and buttons for an app design The chapter emphasizes the use of components for reusability, which are commonly reused in different parts of an app, such as login screens, and discusses the process of converting elements into components, grouping, and utilizing stacks.', "Process of converting elements into components, grouping, and utilizing stacks The process of converting elements into components, grouping them, and utilizing stacks is explained, demonstrating the use of shortcuts like 'ctrl g' and 'ctrl D' and the option to utilize stacks for efficient design.", 'Emphasizing the use of components for reusability in app design The importance of using components for reusability in app design is highlighted, as they can be commonly reused in different parts of an app and are essential for efficient and consistent design.']}], 'duration': 513.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah04613762.jpg', 'highlights': ['Adding a Google Maps view to the scroll group to display a fictional location for the business.', 'Implementing the ability to zoom and move the map around on an X Y axis within the scroll group.', 'Designing and customizing a contact form with name and email fields, ensuring visibility and visual hierarchy.', 'Creating reusable components like text fields and buttons for an app design.', 'Emphasizing the use of components for reusability in app design.', 'Process of converting elements into components, grouping, and utilizing stacks.']}, {'end': 6024.003, 'segs': [{'end': 5176.479, 'src': 'embed', 'start': 5129.207, 'weight': 0, 'content': [{'end': 5138.077, 'text': "Now let's say, for instance, we want to design a page that shows what happens when somebody clicks on the watch a video button.", 'start': 5129.207, 'duration': 8.87}, {'end': 5138.838, 'text': 'All right.', 'start': 5138.658, 'duration': 0.18}, {'end': 5141.421, 'text': "There's, there's many approaches that work with this.", 'start': 5138.858, 'duration': 2.563}, {'end': 5149.387, 'text': 'A common approach is you click on, watch a video and instead of redirecting you off the entire page,', 'start': 5141.861, 'duration': 7.526}, {'end': 5154.229, 'text': 'a little window or a modal kind of shows up and it dims out everything behind it.', 'start': 5149.387, 'duration': 4.842}, {'end': 5160.712, 'text': "so we're going to take that approach and we're going to create a couple artboards to create a multi-step animation for that,", 'start': 5154.229, 'duration': 6.483}, {'end': 5163.173, 'text': "using what's called auto animate.", 'start': 5160.712, 'duration': 2.461}, {'end': 5166.715, 'text': "so first thing we'll do is we'll duplicate this artboard.", 'start': 5163.173, 'duration': 3.542}, {'end': 5170.137, 'text': "so you select the artboard, hit ctrl d, it'll just place it right to the side.", 'start': 5166.715, 'duration': 3.422}, {'end': 5176.479, 'text': 'So now we can just call this video player or something like that.', 'start': 5170.717, 'duration': 5.762}], 'summary': "Design a page with a multi-step animation for 'watch a video' button using auto animate.", 'duration': 47.272, 'max_score': 5129.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05129207.jpg'}, {'end': 5301.936, 'src': 'embed', 'start': 5277.373, 'weight': 4, 'content': [{'end': 5283.101, 'text': "You can see there's also different types of triggers like a drag trigger, keys and gamepad, and voice even.", 'start': 5277.373, 'duration': 5.728}, {'end': 5285.984, 'text': 'Then underneath it, we have action.', 'start': 5284.462, 'duration': 1.522}, {'end': 5288.646, 'text': 'We have a type of transition.', 'start': 5286.604, 'duration': 2.042}, {'end': 5295.311, 'text': 'We have auto animate, overlay, scroll to, previous artboard, audio playback, and speech playback.', 'start': 5289.566, 'duration': 5.745}, {'end': 5298.333, 'text': 'So these are all things that you can experiment with on your own.', 'start': 5295.331, 'duration': 3.002}, {'end': 5301.936, 'text': "I'm gonna show you what happens when we just do a simple transition.", 'start': 5298.894, 'duration': 3.042}], 'summary': 'Adobe xd offers various triggers and actions like drag, keys, gamepad, voice, auto animate, overlay, scroll to, previous artboard, audio playback, and speech playback for experimentation.', 'duration': 24.563, 'max_score': 5277.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05277373.jpg'}, {'end': 5635.567, 'src': 'heatmap', 'start': 5492.967, 'weight': 0.738, 'content': [{'end': 5493.508, 'text': 'There we go.', 'start': 5492.967, 'duration': 0.541}, {'end': 5499.653, 'text': 'So Shift-Alt, you can hold Shift while rotating to get us to a 90 degree angle.', 'start': 5493.548, 'duration': 6.105}, {'end': 5501.635, 'text': 'All right, that looks pretty good.', 'start': 5500.534, 'duration': 1.101}, {'end': 5508.981, 'text': 'And of course, you could take this further and you can get a little bit more elaborate if you duplicate that element and, you know,', 'start': 5502.075, 'duration': 6.906}, {'end': 5510.222, 'text': 'make this a little bit darker.', 'start': 5508.981, 'duration': 1.241}, {'end': 5516.768, 'text': 'You know, put another play icon here, down here for your controls.', 'start': 5510.242, 'duration': 6.526}, {'end': 5525.862, 'text': 'And you could just, you know, you could keep on really just adding to it as much as you wish.', 'start': 5521.26, 'duration': 4.602}, {'end': 5531.125, 'text': "For now, we're going to say this is good just to demonstrate what would happen when somebody clicks that link.", 'start': 5526.663, 'duration': 4.462}, {'end': 5539.07, 'text': 'So now I can take all these layers holding shift and then group them up, control G.', 'start': 5531.626, 'duration': 7.444}, {'end': 5540.79, 'text': "And then we'll duplicate this.", 'start': 5539.07, 'duration': 1.72}, {'end': 5548.755, 'text': "And what we'll do is we'll take this and we'll push it up a little bit and then hide it.", 'start': 5542.371, 'duration': 6.384}, {'end': 5555.839, 'text': "We'll also take this overlay right there and we'll drop that all the way down for the opacity.", 'start': 5549.838, 'duration': 6.001}, {'end': 5558.36, 'text': 'So then we go back to prototype.', 'start': 5556.379, 'duration': 1.981}, {'end': 5560.18, 'text': "We're going to create a connect.", 'start': 5559.16, 'duration': 1.02}, {'end': 5570.082, 'text': 'We click on the actual artboard and then we drag this little thing on the right to the next artboard and it will be auto animate, but the trigger,', 'start': 5560.2, 'duration': 9.882}, {'end': 5572.283, 'text': 'this time instead of tap, is going to be time.', 'start': 5570.082, 'duration': 2.201}, {'end': 5577.685, 'text': "And then for the delay, we'll put zero seconds because we want this to happen instantaneously.", 'start': 5573.163, 'duration': 4.522}, {'end': 5582.987, 'text': 'So once the animation here is done where everything moves out, then this will come in.', 'start': 5578.105, 'duration': 4.882}, {'end': 5589.43, 'text': "So now let's go ahead and select our original artboard, hit play.", 'start': 5583.547, 'duration': 5.883}, {'end': 5593.964, 'text': 'Click this and look at that.', 'start': 5591.803, 'duration': 2.161}, {'end': 5595.565, 'text': 'Very cool.', 'start': 5594.925, 'duration': 0.64}, {'end': 5599.628, 'text': 'So let me show you a couple other things about these properties here, which are really cool.', 'start': 5595.585, 'duration': 4.043}, {'end': 5604.11, 'text': 'So that duration, this is going at a third of a second, so 0.3 seconds.', 'start': 5599.688, 'duration': 4.422}, {'end': 5605.131, 'text': "It's going quite fast.", 'start': 5604.17, 'duration': 0.961}, {'end': 5614.324, 'text': "If we turn this up you'll see that it actually, if we hit play, notice it's starting here because we have this artboard selected.", 'start': 5605.651, 'duration': 8.673}, {'end': 5623.773, 'text': 'If we hit our keyboard back key, we can cycle through the different artboards essentially that are a part of this flow.', 'start': 5614.824, 'duration': 8.949}, {'end': 5628.537, 'text': 'So if I go back, here and click watch a video.', 'start': 5624.413, 'duration': 4.124}, {'end': 5630.32, 'text': "That's a little bit better.", 'start': 5629.399, 'duration': 0.921}, {'end': 5631.982, 'text': 'I think that animation is better.', 'start': 5630.46, 'duration': 1.522}, {'end': 5635.567, 'text': "There's a lot of different types of, there's several different types of easings.", 'start': 5632.383, 'duration': 3.184}], 'summary': 'Demonstration of creating interactive prototype with animation and triggers.', 'duration': 142.6, 'max_score': 5492.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05492967.jpg'}, {'end': 5599.628, 'src': 'embed', 'start': 5570.082, 'weight': 1, 'content': [{'end': 5572.283, 'text': 'this time instead of tap, is going to be time.', 'start': 5570.082, 'duration': 2.201}, {'end': 5577.685, 'text': "And then for the delay, we'll put zero seconds because we want this to happen instantaneously.", 'start': 5573.163, 'duration': 4.522}, {'end': 5582.987, 'text': 'So once the animation here is done where everything moves out, then this will come in.', 'start': 5578.105, 'duration': 4.882}, {'end': 5589.43, 'text': "So now let's go ahead and select our original artboard, hit play.", 'start': 5583.547, 'duration': 5.883}, {'end': 5593.964, 'text': 'Click this and look at that.', 'start': 5591.803, 'duration': 2.161}, {'end': 5595.565, 'text': 'Very cool.', 'start': 5594.925, 'duration': 0.64}, {'end': 5599.628, 'text': 'So let me show you a couple other things about these properties here, which are really cool.', 'start': 5595.585, 'duration': 4.043}], 'summary': 'Adjusting animation timing and properties, demonstrating instant transition and cool features.', 'duration': 29.546, 'max_score': 5570.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05570082.jpg'}, {'end': 5672.185, 'src': 'embed', 'start': 5640.634, 'weight': 5, 'content': [{'end': 5641.695, 'text': 'So it makes it bounce.', 'start': 5640.634, 'duration': 1.061}, {'end': 5642.877, 'text': "Let's watch that from the start.", 'start': 5641.735, 'duration': 1.142}, {'end': 5645.004, 'text': "So it's really cool.", 'start': 5644.264, 'duration': 0.74}, {'end': 5648.746, 'text': 'Sometimes you can use the wrong easings.', 'start': 5646.245, 'duration': 2.501}, {'end': 5650.047, 'text': "That one doesn't really make sense.", 'start': 5648.826, 'duration': 1.221}, {'end': 5653.449, 'text': 'So ease in and out is always a nice one to use.', 'start': 5650.867, 'duration': 2.582}, {'end': 5660.572, 'text': "It'll start slow and then in the middle it's fast and then it ends up slow as well.", 'start': 5654.309, 'duration': 6.263}, {'end': 5661.753, 'text': 'So ease in, out.', 'start': 5660.632, 'duration': 1.121}, {'end': 5665.114, 'text': 'But yeah, very cool stuff either way.', 'start': 5663.153, 'duration': 1.961}, {'end': 5666.135, 'text': 'So now.', 'start': 5665.134, 'duration': 1.001}, {'end': 5672.185, 'text': "let's also create a another page.", 'start': 5669.241, 'duration': 2.944}], 'summary': 'Demonstrating the use of easings in creating animations. ease in and out provides a smooth transition. creating another page is also discussed.', 'duration': 31.551, 'max_score': 5640.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05640634.jpg'}, {'end': 5718.179, 'src': 'embed', 'start': 5693.106, 'weight': 2, 'content': [{'end': 5698.77, 'text': "So what's really cool is we can reuse these artboards in these different manners.", 'start': 5693.106, 'duration': 5.664}, {'end': 5700.091, 'text': "Let me show you what I'm talking about.", 'start': 5698.79, 'duration': 1.301}, {'end': 5705.035, 'text': "So if we take this try for free, we'll push this over to the same artboard.", 'start': 5700.151, 'duration': 4.884}, {'end': 5711.317, 'text': "It's going to remember the previous settings that we used, which is okay.", 'start': 5706.355, 'duration': 4.962}, {'end': 5718.179, 'text': "But if we click on this one beneath it, we'll see it's an ease out 0.3 seconds.", 'start': 5711.917, 'duration': 6.262}], 'summary': 'Artboards can be reused in different ways, preserving previous settings and transitions, such as ease out 0.3 seconds.', 'duration': 25.073, 'max_score': 5693.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05693106.jpg'}, {'end': 5939.32, 'src': 'embed', 'start': 5912.793, 'weight': 6, 'content': [{'end': 5917.054, 'text': 'with a zero second delay, maybe 0.8 seconds ease in and out.', 'start': 5912.793, 'duration': 4.261}, {'end': 5918.935, 'text': "We'll hit play.", 'start': 5918.234, 'duration': 0.701}, {'end': 5920.535, 'text': "Let's go back.", 'start': 5919.935, 'duration': 0.6}, {'end': 5925.096, 'text': "Where's the homepage? There we are.", 'start': 5923.536, 'duration': 1.56}, {'end': 5926.497, 'text': 'Try for free.', 'start': 5925.796, 'duration': 0.701}, {'end': 5927.957, 'text': 'All right.', 'start': 5927.677, 'duration': 0.28}, {'end': 5933.698, 'text': "So we want this little graphic here to spin while we're waiting essentially.", 'start': 5928.297, 'duration': 5.401}, {'end': 5939.32, 'text': "So we'll go ahead and duplicate this and we'll go to design and then we'll spin, make this spin essentially.", 'start': 5934.199, 'duration': 5.121}], 'summary': 'Create a spinning graphic with 0-second delay and 0.8-second ease in/out for the homepage.', 'duration': 26.527, 'max_score': 5912.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05912793.jpg'}, {'end': 5985.798, 'src': 'heatmap', 'start': 5912.793, 'weight': 0.814, 'content': [{'end': 5917.054, 'text': 'with a zero second delay, maybe 0.8 seconds ease in and out.', 'start': 5912.793, 'duration': 4.261}, {'end': 5918.935, 'text': "We'll hit play.", 'start': 5918.234, 'duration': 0.701}, {'end': 5920.535, 'text': "Let's go back.", 'start': 5919.935, 'duration': 0.6}, {'end': 5925.096, 'text': "Where's the homepage? There we are.", 'start': 5923.536, 'duration': 1.56}, {'end': 5926.497, 'text': 'Try for free.', 'start': 5925.796, 'duration': 0.701}, {'end': 5927.957, 'text': 'All right.', 'start': 5927.677, 'duration': 0.28}, {'end': 5933.698, 'text': "So we want this little graphic here to spin while we're waiting essentially.", 'start': 5928.297, 'duration': 5.401}, {'end': 5939.32, 'text': "So we'll go ahead and duplicate this and we'll go to design and then we'll spin, make this spin essentially.", 'start': 5934.199, 'duration': 5.121}, {'end': 5953.741, 'text': "we can make it go pretty much all the way around and notice now what's going to happen if we put negative 360, is it actually going to animate??", 'start': 5942.315, 'duration': 11.426}, {'end': 5958.964, 'text': 'Well, first we have to go to prototype and we will drag this over.', 'start': 5953.761, 'duration': 5.203}, {'end': 5963.786, 'text': "And we're at 0.8 seconds ease in out.", 'start': 5960.664, 'duration': 3.122}, {'end': 5964.987, 'text': "Let's change this to none.", 'start': 5963.826, 'duration': 1.161}, {'end': 5966.989, 'text': 'The easing might make it look weird.', 'start': 5965.648, 'duration': 1.341}, {'end': 5968.93, 'text': "Actually, let's leave it there and see what happens.", 'start': 5967.049, 'duration': 1.881}, {'end': 5973.534, 'text': "And then we'll also come back here and drag this artboard over to it.", 'start': 5969.371, 'duration': 4.163}, {'end': 5975.995, 'text': "And that way it's gonna go back and forth between these.", 'start': 5973.694, 'duration': 2.301}, {'end': 5985.798, 'text': 'So coming back here to our home, And by the way, you wanna click on this little home icon and notice how it says flow one.', 'start': 5976.856, 'duration': 8.942}], 'summary': 'Creating an animation with 0.8s ease in and out for spinning graphic on the homepage.', 'duration': 73.005, 'max_score': 5912.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05912793.jpg'}], 'start': 5129.207, 'title': 'Creating interactive prototypes with adobe xd', 'summary': 'Delves into designing multi-step animations using auto-animate and creating interactive prototypes with adobe xd. it covers creating a video player with a modal overlay, utilizing triggers, transitions, and auto-animating properties, while also demonstrating the creation of play icons, time-triggered animations, and loading graphics with spinning animations.', 'chapters': [{'end': 5510.222, 'start': 5129.207, 'title': 'Designing multi-step animation with auto animate', 'summary': 'Discusses creating a multi-step animation using auto-animate, including designing a video player with a modal overlay and explaining the use of triggers, transitions, and auto-animating properties.', 'duration': 381.015, 'highlights': ['Creating a multi-step animation using auto-animate The chapter covers the creation of a multi-step animation using auto-animate for designing a video player with a modal overlay.', 'Explaining the use of triggers and transitions The explanation of triggers and transitions for interaction properties, including tap triggers, transition types, easings, and duration.', 'Designing a video player with a modal overlay The process of designing a video player with a modal overlay, including creating a darker overlay, embedding a video player, and adjusting its appearance.']}, {'end': 6024.003, 'start': 5510.242, 'title': 'Interactive prototype demonstration', 'summary': 'Demonstrates creating interactive prototypes using adobe xd, with highlights including creating play icon, time-triggered animation, and creating loading graphics with spinning animation.', 'duration': 513.761, 'highlights': ['Creating time-triggered animation with zero delay and third of a second duration, resulting in instantaneous transition between artboards.', 'Demonstrating the use of different easing types such as bounce and ease in and out for animations, showcasing the impact on the visual effects.', 'Creating loading graphics with spinning animation using Adobe XD, allowing for indefinite or infinite animation while waiting for a process to complete.', 'Demonstrating the reuse of artboards for different interactions, such as using the same animation effect for multiple buttons by duplicating and adjusting connections.']}], 'duration': 894.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah05129207.jpg', 'highlights': ['Creating a multi-step animation using auto-animate for designing a video player with a modal overlay', 'Creating time-triggered animation with zero delay and third of a second duration, resulting in instantaneous transition between artboards', 'Demonstrating the reuse of artboards for different interactions, such as using the same animation effect for multiple buttons by duplicating and adjusting connections', 'Designing a video player with a modal overlay, including creating a darker overlay, embedding a video player, and adjusting its appearance', 'Explaining the use of triggers and transitions for interaction properties, including tap triggers, transition types, easings, and duration', 'Demonstrating the use of different easing types such as bounce and ease in and out for animations, showcasing the impact on the visual effects', 'Creating loading graphics with spinning animation using Adobe XD, allowing for indefinite or infinite animation while waiting for a process to complete']}, {'end': 7027.706, 'segs': [{'end': 6049.573, 'src': 'embed', 'start': 6025.765, 'weight': 0, 'content': [{'end': 6032.948, 'text': 'So obviously in a real world scenario like a download pop up depending on your browser would pop up and this is what a user would see.', 'start': 6025.765, 'duration': 7.183}, {'end': 6037.549, 'text': 'Now, of course, you would also want to take your home features, pricing, contact,', 'start': 6033.568, 'duration': 3.981}, {'end': 6041.391, 'text': 'all that and start hooking those up all to your different artboards that you create.', 'start': 6037.549, 'duration': 3.842}, {'end': 6044.692, 'text': "And so that's how you use the prototype feature.", 'start': 6042.051, 'duration': 2.641}, {'end': 6049.573, 'text': "Of course there's a lot of other different tiny features in there, a lot of other details,", 'start': 6044.732, 'duration': 4.841}], 'summary': 'Using the prototype feature to link home features, pricing, and contact to different artboards.', 'duration': 23.808, 'max_score': 6025.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06025765.jpg'}, {'end': 6179.122, 'src': 'embed', 'start': 6152.193, 'weight': 1, 'content': [{'end': 6161.694, 'text': "because if we compare a phone that you're able to hold in your hand to a big desktop monitor, there's a lot less space.", 'start': 6152.193, 'duration': 9.501}, {'end': 6168.297, 'text': 'so we have to make certain adaptations based on the space that we have available to us.', 'start': 6161.694, 'duration': 6.603}, {'end': 6173.56, 'text': "so if we were to take this whole uh element right there, let's go to my right.", 'start': 6168.297, 'duration': 5.263}, {'end': 6179.122, 'text': "here we see it's a component like a header component, and we come over here and just paste it.", 'start': 6173.56, 'duration': 5.562}], 'summary': 'Adapting ui components to fit limited mobile space.', 'duration': 26.929, 'max_score': 6152.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06152193.jpg'}, {'end': 6991.139, 'src': 'embed', 'start': 6967.077, 'weight': 2, 'content': [{'end': 6976.966, 'text': 'So this is the process of what I would say is UI, UX design here within, or a part of UX design at least, here within Adobe XD.', 'start': 6967.077, 'duration': 9.889}, {'end': 6980.25, 'text': 'So yeah, I hope you learned a lot here.', 'start': 6977.087, 'duration': 3.163}, {'end': 6983.973, 'text': 'We covered a ton of different features.', 'start': 6980.47, 'duration': 3.503}, {'end': 6991.139, 'text': 'And I would say just learning the features that I taught in this crash course, those alone will take you very far.', 'start': 6984.694, 'duration': 6.445}], 'summary': 'Adobe xd crash course covers ui/ux design features extensively.', 'duration': 24.062, 'max_score': 6967.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06967077.jpg'}], 'start': 6025.765, 'title': 'Designing responsive ui/ux', 'summary': 'Covers creating prototypes and responsive views, making design adaptations for different devices, and the process of ui/ux design in adobe xd. it emphasizes the importance of optimizing user experience and the role of application knowledge in design.', 'chapters': [{'end': 6128.874, 'start': 6025.765, 'title': 'Design prototype and responsive views', 'summary': 'Discusses creating prototypes and responsive views for a website, including using artboards and duplicating elements for different devices, providing the ability to create pages independently.', 'duration': 103.109, 'highlights': ['Creating prototypes and responsive views for a website The chapter focuses on creating prototypes and responsive views for a website, including using artboards and duplicating elements for different devices.', 'Using artboards and duplicating elements for different devices The process involves using artboards and duplicating elements for different devices, such as smartphones and tablets, to create a responsive design.', 'Providing the ability to create pages independently The techniques taught provide the ability to create various pages, like features and pricing pages, independently for a website.']}, {'end': 6595.374, 'start': 6128.874, 'title': 'Responsive design adaptations', 'summary': 'Discusses making design adaptations for different devices, including resizing elements, adding a hamburger menu, and using stacks for layout, aiming to optimize user experience and visual hierarchy on smartphones.', 'duration': 466.5, 'highlights': ['The need to make design adaptations for different devices, such as resizing elements and adding a hamburger menu, to optimize user experience and visual hierarchy on smartphones. The speaker emphasizes the importance of understanding how navigation and design elements should behave on different devices, discussing the need to resize elements like the logo and links, as well as adding a hamburger menu for improved navigation on smartphones.', 'Utilizing stacks for layout and adjusting text size and positioning to maintain visual hierarchy on smaller screens. The speaker demonstrates using stacks for layout and adjusting text size and positioning to maintain visual hierarchy on smartphones, emphasizing the need to center text and scale down elements while ensuring good visual hierarchy.', 'Exploring progressive enhancement and the process of translating a design from mobile to desktop, aiming to optimize user experience across different devices. The speaker discusses the concept of progressive enhancement and the process of translating a design from mobile to desktop, emphasizing the importance of optimizing user experience across different devices.']}, {'end': 7027.706, 'start': 6595.374, 'title': 'Ui/ux design in adobe xd', 'summary': 'Discusses the process of ui/ux design in adobe xd, covering features and emphasizing the importance of developing an eye for design, with the application knowledge being only 10% of the battle.', 'duration': 432.332, 'highlights': ['The process of UI/UX design in Adobe XD is covered, emphasizing the importance of developing an eye for design. UI/UX design process, developing an eye for design', 'The features covered in the crash course are highlighted as essential for progress in UI/UX design. Features covered in the crash course', 'The speaker emphasizes that knowing how to use the application is only 10% of the battle in creating great and functional designs. Importance of application knowledge in design process']}], 'duration': 1001.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3rQ-eTmWah0/pics/3rQ-eTmWah06025765.jpg', 'highlights': ['Creating prototypes and responsive views for a website, using artboards and duplicating elements for different devices', 'The need to make design adaptations for different devices, such as resizing elements and adding a hamburger menu, to optimize user experience and visual hierarchy on smartphones', 'The process of UI/UX design in Adobe XD is covered, emphasizing the importance of developing an eye for design']}], 'highlights': ['The tutorial covers a crash course on Adobe XD, demonstrating its features by creating a fictional to-do task app for both desktop and mobile.', 'The tutorial focuses on teaching by example, illustrating UI design and prototyping while showing how to quickly translate a design from desktop to mobile.', 'The chapter covers the various features of Adobe XD including components, states, repeat grids, content-aware layouts, plugins, auto animate, scroll groups, and more.', 'The tutorial provides a detailed overview of the UI design tools and properties, such as the select button, rectangle tool, ellipse tool, polygon tool, line tool, pen tool, type tool, and artboard tool.', 'The tutorial demonstrates the process of customizing colors for the text and background, including selecting predefined color swatches and entering specific color codes.', 'The importance of having a home button is emphasized for user experience and usability, as per recommended usability studies.', 'Establishing visual hierarchy by changing font size and weight is a fundamental aspect of UI design', 'Layers are essential in Adobe XD as they allow stacking and arranging elements on the canvas, emphasizing the importance of naming layers for clarity and organization.', 'Demonstrating the use of components and states in Adobe XD The chapter extensively demonstrates the use of components and states in Adobe XD, illustrating the process of creating and utilizing components to maintain design consistency and reusability.', "The chapter discusses designing a premium task service navigation, creating a call-to-action button with rounded edges and a text link 'Go Premium', and using components and padding for alignment and consistency.", "The importance of visual hierarchy, typography, and call-to-action buttons Emphasizes the significance of visual hierarchy, typography, and call-to-action buttons in the hero section creation for a website's landing page.", 'Demonstration of using Adobe XD for creating and customizing text elements to optimize visual appeal and readability Demonstrates the use of Adobe XD for creating and customizing text elements to optimize visual appeal and readability.', "The tutorial showcases the use of Adobe XD's repeat grid feature to efficiently replicate and modify design components, reducing manual effort and time.", 'The speaker demonstrates using the pen tool to create and customize UI elements, allowing for precise design control.', 'The chapter introduces the use of plugins in Adobe XD to add icons, mentioning the process of browsing and selecting an icon plugin.', 'The demonstration includes the creation of a rough skeleton UI illustration using tools like the rectangle tool, repeat grid, and stacks, while also mentioning the removal of borders and color selection for the illustration.', 'Creating a repeatable grid to structure the layout The speaker demonstrates how to adjust spacing and layout to create a repeatable grid for organizing landing page elements in Adobe XD.', 'Using blend modes for image integration The speaker explains the concept of blend modes and how to apply them to images, demonstrating the use of blend modes in Adobe XD for creative integration of photographs.', 'Designing testimonial cards with rounded edges and images The speaker instructs on creating testimonial cards with rounded edges, integrating images and adjusting borders in Adobe XD for a visually appealing design.', 'The chapter covers designing and prototyping concepts It includes using plugins for text, creating scroll groups for horizontal carousels, demonstrating gradient effects, and arranging components for a visually appealing design.', 'Creating scroll groups for horizontal carousels The scroll groups allow for the creation of a horizontal carousel, defining the initially visible content and enabling left-click and drag to sort through all items.', 'Using plugins for text Plugins are used to insert lorem ipsum text, with the ability to adjust letter height and line height, as well as to center and format the text.', 'Demonstrating gradient effects The demonstration involves creating linear gradients, adjusting color and opacity, repositioning the gradient, and duplicating and flipping the gradient to create a visually appealing effect.', 'Adding a Google Maps view to the scroll group to display a fictional location for the business.', 'Implementing the ability to zoom and move the map around on an X Y axis within the scroll group.', 'Designing and customizing a contact form with name and email fields, ensuring visibility and visual hierarchy.', 'Creating reusable components like text fields and buttons for an app design.', 'Emphasizing the use of components for reusability in app design.', 'Process of converting elements into components, grouping, and utilizing stacks.', 'Creating a multi-step animation using auto-animate for designing a video player with a modal overlay', 'Creating time-triggered animation with zero delay and third of a second duration, resulting in instantaneous transition between artboards', 'Demonstrating the reuse of artboards for different interactions, such as using the same animation effect for multiple buttons by duplicating and adjusting connections', 'Designing a video player with a modal overlay, including creating a darker overlay, embedding a video player, and adjusting its appearance', 'Explaining the use of triggers and transitions for interaction properties, including tap triggers, transition types, easings, and duration', 'Demonstrating the use of different easing types such as bounce and ease in and out for animations, showcasing the impact on the visual effects', 'Creating loading graphics with spinning animation using Adobe XD, allowing for indefinite or infinite animation while waiting for a process to complete', 'Creating prototypes and responsive views for a website, using artboards and duplicating elements for different devices', 'The need to make design adaptations for different devices, such as resizing elements and adding a hamburger menu, to optimize user experience and visual hierarchy on smartphones', 'The process of UI/UX design in Adobe XD is covered, emphasizing the importance of developing an eye for design']}