title
Landing Page Tutorial for 2018 - Part 1 of 2 (Design)

description
The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99) Written tutorial: https://goo.gl/2BW3Eb Project file: https://s3.amazonaws.com/coursetro/pre.xd https://coursetro.com for more good stuff! And subscribe here! Follow along as I tackle a landing page design for my own cryptocurrency app! Learn how I approach landing page design. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: 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 Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Landing Page Tutorial for 2018 - Part 1 of 2 (Design)', 'heatmap': [{'end': 194.22, 'start': 132.604, 'weight': 0.85}, {'end': 526.609, 'start': 507.465, 'weight': 1}, {'end': 1262.319, 'start': 1228.285, 'weight': 0.784}, {'end': 1652.396, 'start': 1607.89, 'weight': 0.851}], 'summary': 'This tutorial series covers designing a landing page for a cryptocurrency project, developing a real-time app, adjusting design elements, creating attention-grabbing headlines, interface visual representation, chat interface design with emoticons, and creating design elements using tools like adobe xd and pen tool, emphasizing the importance of landing page optimization and visual hierarchy for maximizing user adoption and conversion rates.', 'chapters': [{'end': 44.817, 'segs': [{'end': 44.817, 'src': 'embed', 'start': 2.79, 'weight': 0, 'content': [{'end': 5.231, 'text': 'Hey everyone, Gary Simon of Corsetro.', 'start': 2.79, 'duration': 2.441}, {'end': 9.593, 'text': 'Welcome to the very first tutorial of 2018 for the Corsetro channel.', 'start': 5.551, 'duration': 4.042}, {'end': 14.095, 'text': "And today we're going to be focusing on designing a landing page.", 'start': 10.193, 'duration': 3.902}, {'end': 16.036, 'text': "And I'm going to show you my process.", 'start': 14.115, 'duration': 1.921}, {'end': 22.319, 'text': "What's also cool is the fact that this landing page we're going to be designing is for a personal project that I have high hopes for.", 'start': 16.356, 'duration': 5.963}, {'end': 24.84, 'text': "And it's based on a cryptocurrency project.", 'start': 22.679, 'duration': 2.161}, {'end': 31.647, 'text': 'So what is a landing page? Well, first, a landing page is basically any page in which your users will land on.', 'start': 25.981, 'duration': 5.666}, {'end': 35.912, 'text': 'And it depends on whatever type of project you have.', 'start': 32.088, 'duration': 3.824}, {'end': 39.851, 'text': 'Regardless of the type of project, it has to have a goal.', 'start': 37.068, 'duration': 2.783}, {'end': 42.635, 'text': 'You have to have an objective for that page.', 'start': 39.891, 'duration': 2.744}, {'end': 44.817, 'text': 'And so, in my context,', 'start': 43.135, 'duration': 1.682}], 'summary': 'Gary simon introduces the first 2018 tutorial for corsetro, focusing on designing a landing page for a personal cryptocurrency project.', 'duration': 42.027, 'max_score': 2.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM2790.jpg'}], 'start': 2.79, 'title': 'Designing a cryptocurrency landing page', 'summary': 'Focuses on designing a landing page for a personal cryptocurrency project and emphasizes the importance of having a clear goal and objective for the page.', 'chapters': [{'end': 44.817, 'start': 2.79, 'title': 'Designing a cryptocurrency landing page', 'summary': 'Focuses on designing a landing page for a personal cryptocurrency project and emphasizes the importance of having a clear goal and objective for the page.', 'duration': 42.027, 'highlights': ['Explaining the concept of a landing page and its necessity for any project, emphasizing the importance of having a clear goal and objective for the page.', "Highlighting the uniqueness of the landing page tutorial by mentioning it's for a personal project based on cryptocurrency with high expectations."]}], 'duration': 42.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM2790.jpg', 'highlights': ['Emphasizes the importance of having a clear goal and objective for the landing page.', 'Mentions the uniqueness of the tutorial for a personal cryptocurrency project with high expectations.']}, {'end': 413.034, 'segs': [{'end': 114.762, 'src': 'embed', 'start': 44.817, 'weight': 0, 'content': [{'end': 55.13, 'text': "it's going to be a web-based app that I want people to click on a button and ultimately create an account so they can use this app essentially.", 'start': 44.817, 'duration': 10.313}, {'end': 58.191, 'text': "So I'm just going to walk you through my process.", 'start': 55.95, 'duration': 2.241}, {'end': 60.932, 'text': "I'm going to be using Adobe experience design.", 'start': 58.211, 'duration': 2.721}, {'end': 63.713, 'text': 'However, you can use anything that you really want.', 'start': 61.572, 'duration': 2.141}, {'end': 69.635, 'text': "So first let me switch over to the desktop and I'll show you the actual app that I've been working on here.", 'start': 63.773, 'duration': 5.862}, {'end': 73.597, 'text': 'So This is just basically an app.', 'start': 69.655, 'duration': 3.942}, {'end': 76.759, 'text': "I'm calling it Crips, C-R-Y-P-T-S.", 'start': 73.657, 'duration': 3.102}, {'end': 80.161, 'text': 'Actually, I showed you how I designed the logo in one of my previous videos.', 'start': 77.08, 'duration': 3.081}, {'end': 86.525, 'text': 'And this is just basically taking the concept of cryptocurrency real time charts as seen here.', 'start': 80.582, 'duration': 5.943}, {'end': 88.106, 'text': "I'm going to have more information, though.", 'start': 86.545, 'duration': 1.561}, {'end': 91.028, 'text': 'This is still very much in development.', 'start': 88.647, 'duration': 2.381}, {'end': 96.152, 'text': 'And then with combining it with basically, you know, real time chat right here.', 'start': 91.308, 'duration': 4.844}, {'end': 101.074, 'text': 'So I That is the purpose of this app.', 'start': 96.592, 'duration': 4.482}, {'end': 110.92, 'text': 'And so what we have to ask ourselves, as designers slash developers, is how can we get people to use this app or as many people as possible.', 'start': 101.114, 'duration': 9.806}, {'end': 114.762, 'text': 'And that, of course, is by designing an effective landing page.', 'start': 110.96, 'duration': 3.802}], 'summary': "Web-based app 'crips' combines cryptocurrency real-time charts with real-time chat to attract users, aiming for an effective landing page.", 'duration': 69.945, 'max_score': 44.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM44817.jpg'}, {'end': 221.537, 'src': 'heatmap', 'start': 132.604, 'weight': 3, 'content': [{'end': 133.685, 'text': "I know it's so silly.", 'start': 132.604, 'duration': 1.081}, {'end': 138.067, 'text': "Anyhow So let's go ahead and actually design a landing page for this app.", 'start': 134.285, 'duration': 3.782}, {'end': 139.788, 'text': "And I'm going to show you how I do it.", 'start': 138.087, 'duration': 1.701}, {'end': 145.432, 'text': 'So, Oh, but real quick, before we begin, make sure you check out my site, course cetera.com,', 'start': 139.868, 'duration': 5.564}, {'end': 149.394, 'text': "where you're going to find a bunch of courses on modern design and development.", 'start': 145.432, 'duration': 3.962}, {'end': 155.077, 'text': 'A lot are free and the others you can access for the cost of buying me like a six pack each month.', 'start': 149.854, 'duration': 5.223}, {'end': 155.578, 'text': "That's it.", 'start': 155.238, 'duration': 0.34}, {'end': 162.803, 'text': "now also, it probably wouldn't hurt to subscribe here on youtube and be sure to make sure the notifications are turned on all right.", 'start': 156.138, 'duration': 6.665}, {'end': 164.344, 'text': "let's get back to it here.", 'start': 162.803, 'duration': 1.541}, {'end': 172.61, 'text': 'i have adobe xd or experience design up and, by the way, let me just show you real quickly the very you know.', 'start': 164.344, 'duration': 8.266}, {'end': 178.975, 'text': "the beginning step is to, uh, actually load up xd and choose web 1920, because i'm going to.", 'start': 172.61, 'duration': 6.365}, {'end': 182.758, 'text': "i'm going to do a web-based um approach for the layout here,", 'start': 178.975, 'duration': 3.783}, {'end': 190.219, 'text': 'at least initially and Right here I have the logo already set up along with three of these icons,', 'start': 182.758, 'duration': 7.461}, {'end': 194.22, 'text': "these cryptocurrency icons that we're going to be using in the actual landing page.", 'start': 190.219, 'duration': 4.001}, {'end': 195.801, 'text': 'I just wanted to have them ready to go.', 'start': 194.24, 'duration': 1.561}, {'end': 201.143, 'text': 'I will make this file available for you to download, however, so you can start with me.', 'start': 195.821, 'duration': 5.322}, {'end': 203.044, 'text': "Also, I'm a big advocate.", 'start': 201.483, 'duration': 1.561}, {'end': 209.329, 'text': "if you're trying to learn how to do something instead of just sitting there watching on YouTube, you should also follow along,", 'start': 203.044, 'duration': 6.285}, {'end': 212.651, 'text': "especially if you're really wanting to become a better designer.", 'start': 209.329, 'duration': 3.322}, {'end': 218.396, 'text': 'Actually, physically going through the steps helps kind of ingrain it in your memory much better.', 'start': 213.312, 'duration': 5.084}, {'end': 219.276, 'text': 'All right.', 'start': 219.056, 'duration': 0.22}, {'end': 221.537, 'text': 'So for this landing page.', 'start': 219.876, 'duration': 1.661}], 'summary': 'Designing a landing page using adobe xd for a web-based layout, including cryptocurrency icons, and encouraging active learning.', 'duration': 42.562, 'max_score': 132.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM132604.jpg'}, {'end': 268.582, 'src': 'embed', 'start': 243.087, 'weight': 2, 'content': [{'end': 252.011, 'text': 'you know, some type of very catchy title that kind of informs them instantly, of kind of at least, what this this whole website is about,', 'start': 243.087, 'duration': 8.924}, {'end': 260.016, 'text': 'or this landing page, a sub headline where you can go into a little bit more detail, and then a call to action of some sort.', 'start': 252.011, 'duration': 8.005}, {'end': 268.582, 'text': "so we're going to have those three elements plus some sort of very unique, uh sort of illustration or graphic that's relevant to this service.", 'start': 260.016, 'duration': 8.566}], 'summary': 'Create a catchy title, subheadline, and call to action with unique graphic for the landing page.', 'duration': 25.495, 'max_score': 243.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM243087.jpg'}], 'start': 44.817, 'title': 'Developing a cryptocurrency real-time app', 'summary': "Covers the development of 'crips', a web-based app offering real-time cryptocurrency charts and chat functionality, emphasizing the importance of an effective landing page to maximize user adoption. it also discusses creating an effective web-based layout in adobe xd, highlighting the significance of headlines, sub-headlines, and calls to action, with a focus on cryptocurrency-related design elements and color schemes.", 'chapters': [{'end': 139.788, 'start': 44.817, 'title': 'Web-based app for cryptocurrency real-time charts', 'summary': 'Discusses the development of a web-based app called crips, designed to offer real-time cryptocurrency charts and chat functionality, emphasizing the importance of an effective landing page to maximize user adoption.', 'duration': 94.971, 'highlights': ['The app, named Crips, is being developed to provide real-time cryptocurrency charts and chat functionality. The app, named Crips, aims to offer real-time cryptocurrency charts combined with real-time chat functionality, targeting user engagement and interaction.', 'Discussion on the importance of designing an effective landing page to maximize user adoption. The chapter emphasizes the significance of creating an effective landing page to encourage user adoption and usage of the app, highlighting the role of designers and developers in achieving this goal.', 'Utilization of Adobe experience design tool for app development. The speaker mentions the use of Adobe experience design for app development, while also noting the flexibility to use other tools based on personal preference.']}, {'end': 413.034, 'start': 139.868, 'title': 'Creating effective landing page in adobe xd', 'summary': 'Discusses creating a web-based layout in adobe xd, emphasizing the importance of a headline, sub-headline, and call to action for an effective landing page, with a focus on cryptocurrency-related design elements and color schemes.', 'duration': 273.166, 'highlights': ['Emphasizing the importance of a headline, sub-headline, and call to action for an effective landing page The speaker highlights the essential elements of an effective landing page, which include a headline, sub-headline, and call to action, stressing the significance of these elements in engaging users and driving conversion.', "Focus on cryptocurrency-related design elements and color schemes The chapter emphasizes the use of cryptocurrency-related design elements, such as cryptocurrency icons and candlestick chart backgrounds, to create a relevant and visually appealing landing page, showcasing the speaker's attention to industry-specific details.", 'Advocacy for active learning and following along during tutorials The speaker advocates for active learning, encouraging viewers to follow along with the tutorial to enhance their design skills, suggesting that physically going through the steps aids in better comprehension and retention of the material.']}], 'duration': 368.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM44817.jpg', 'highlights': ['The app, named Crips, aims to offer real-time cryptocurrency charts combined with real-time chat functionality, targeting user engagement and interaction.', 'Discussion on the importance of designing an effective landing page to maximize user adoption, highlighting the role of designers and developers in achieving this goal.', 'Emphasizing the importance of a headline, sub-headline, and call to action for an effective landing page, stressing the significance of these elements in engaging users and driving conversion.', "Focus on cryptocurrency-related design elements and color schemes to create a relevant and visually appealing landing page, showcasing the speaker's attention to industry-specific details.", 'Utilization of Adobe experience design tool for app development, with flexibility to use other tools based on personal preference.', 'Advocacy for active learning and following along during tutorials to enhance design skills, suggesting that physically going through the steps aids in better comprehension and retention of the material.']}, {'end': 621.418, 'segs': [{'end': 474.565, 'src': 'embed', 'start': 413.154, 'weight': 0, 'content': [{'end': 415.115, 'text': "I'm going to make this the same color as well.", 'start': 413.154, 'duration': 1.961}, {'end': 418.856, 'text': 'All right.', 'start': 418.556, 'duration': 0.3}, {'end': 419.456, 'text': 'That looks good.', 'start': 418.896, 'duration': 0.56}, {'end': 431.878, 'text': "So what I'll do now is I'm going to situate this right over here to the lower left, and we're going to use the repeat grid tool.", 'start': 420.894, 'duration': 10.984}, {'end': 440.28, 'text': 'And so with both of those selected, I can hit repeat grid and then drag this out all the way to the right.', 'start': 433.738, 'duration': 6.542}, {'end': 445.182, 'text': 'Now I want to increase the spacing just a little bit between them.', 'start': 440.72, 'duration': 4.462}, {'end': 448.223, 'text': 'Right there looks good.', 'start': 447.443, 'duration': 0.78}, {'end': 453.304, 'text': 'Okay, now, this next step is kind of tedious.', 'start': 449.483, 'duration': 3.821}, {'end': 458.486, 'text': 'And because of that, I will speed up the the video momentarily.', 'start': 453.924, 'duration': 4.562}, {'end': 464.748, 'text': "But I was just wanted to show you how we're going to adjust this make custom adjustments to each one of these before I do that.", 'start': 458.506, 'duration': 6.242}, {'end': 466.108, 'text': "So I'm going to ungroup them.", 'start': 465.168, 'duration': 0.94}, {'end': 474.565, 'text': 'And now The general concept, by the way, of what I wanted to do is to make it kind of start out low,', 'start': 467.229, 'duration': 7.336}], 'summary': 'Design process: adjusting spacing and making custom adjustments using repeat grid tool.', 'duration': 61.411, 'max_score': 413.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM413154.jpg'}, {'end': 557.246, 'src': 'heatmap', 'start': 507.465, 'weight': 1, 'content': [{'end': 510.987, 'text': 'And now what I wanna do is just make adjustments.', 'start': 507.465, 'duration': 3.522}, {'end': 517.26, 'text': 'So the way candlestick charts kinda work is Um, this is based on the period of time, like a minute for instance.', 'start': 511.007, 'duration': 6.253}, {'end': 519.842, 'text': 'Um, and then this is the next minute.', 'start': 517.982, 'duration': 1.86}, {'end': 526.609, 'text': "It'll start from wherever the other one went off, either whether or not it's going down, um, up in price or down in price.", 'start': 520.484, 'duration': 6.125}, {'end': 532.333, 'text': "And so these initial ones, I'll just kind of make like that.", 'start': 527.389, 'duration': 4.944}, {'end': 535.275, 'text': "And of course we're gonna have to adjust the lines underneath them to match the bottom.", 'start': 532.413, 'duration': 2.862}, {'end': 539.058, 'text': 'So for instance, take this, take this.', 'start': 536.096, 'duration': 2.962}, {'end': 543.802, 'text': "And so I'm going to do this all the way.", 'start': 541.92, 'duration': 1.882}, {'end': 557.246, 'text': "to the very end, and I'm going to increase the trajectory, if I could talk right, as I go along to the right.", 'start': 546.161, 'duration': 11.085}], 'summary': 'Adjusting candlestick charts based on minute periods to show price movement.', 'duration': 56.945, 'max_score': 507.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM507465.jpg'}, {'end': 621.418, 'src': 'embed', 'start': 593.81, 'weight': 4, 'content': [{'end': 603.253, 'text': "So now what I wanna do at this point, shut the hell up please, okay, is I, let's go ahead and get rid of that, is hit Control G.", 'start': 593.81, 'duration': 9.443}, {'end': 606.831, 'text': "And we'll group them all up.", 'start': 605.05, 'duration': 1.781}, {'end': 610.933, 'text': "And then I'll get out the layers here, rather right there.", 'start': 607.471, 'duration': 3.462}, {'end': 618.176, 'text': "And with that selected, we'll go ahead and just lock this because I don't want to adjust it anymore.", 'start': 611.813, 'duration': 6.363}, {'end': 619.957, 'text': "I don't want to mess with it by accident.", 'start': 618.196, 'duration': 1.761}, {'end': 621.418, 'text': "So we'll lock it right there.", 'start': 620.057, 'duration': 1.361}], 'summary': 'Instructing to group and lock layers in a design software.', 'duration': 27.608, 'max_score': 593.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM593810.jpg'}], 'start': 413.154, 'title': 'Design adjustment and candlestick charts', 'summary': 'Covers using the repeat grid tool to adjust and customize elements, aiming to create a growing effect from left to right, with individual custom adjustments made for each element. additionally, it explains how to create candlestick charts based on time periods and discusses making adjustments and grouping the elements together for easier handling.', 'chapters': [{'end': 499.561, 'start': 413.154, 'title': 'Design adjustment and repeat grid tool', 'summary': 'Covers using the repeat grid tool to adjust and customize elements, aiming to create a growing effect from left to right, with individual custom adjustments made for each element.', 'duration': 86.407, 'highlights': ['The general concept is to make it start out low and then grow all the way to the right, aiming to create an exciting effect (quantifiable data: none).', 'Using the repeat grid tool to drag elements all the way to the right and increase spacing between them (quantifiable data: none).', 'Custom adjustments are made to each element by ungrouping them, in order to achieve the desired design effect (quantifiable data: none).']}, {'end': 621.418, 'start': 500.301, 'title': 'Creating candlestick charts', 'summary': 'Explains how to create candlestick charts based on time periods and discusses making adjustments and grouping the elements together for easier handling.', 'duration': 121.117, 'highlights': ['The process involves scaling down initial candlestick charts and making adjustments to match the bottom lines, while increasing the trajectory as one goes along to the right.', 'The speaker plans to group all the elements together and lock them to avoid accidental adjustments for easier handling.']}], 'duration': 208.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM413154.jpg', 'highlights': ['Using the repeat grid tool to drag elements all the way to the right and increase spacing between them', 'The process involves scaling down initial candlestick charts and making adjustments to match the bottom lines, while increasing the trajectory as one goes along to the right', 'The general concept is to make it start out low and then grow all the way to the right, aiming to create an exciting effect', 'Custom adjustments are made to each element by ungrouping them, in order to achieve the desired design effect', 'The speaker plans to group all the elements together and lock them to avoid accidental adjustments for easier handling']}, {'end': 973.415, 'segs': [{'end': 694.076, 'src': 'embed', 'start': 648.247, 'weight': 3, 'content': [{'end': 660.273, 'text': "So I'm gonna say crypto, plus chat, which are really the two foundational elements of what my service is about equals cryptos or crips rather.", 'start': 648.247, 'duration': 12.026}, {'end': 662.435, 'text': "That's the name of the service.", 'start': 660.293, 'duration': 2.142}, {'end': 666.717, 'text': 'So crypto currency plus chat, real time chat is this service.', 'start': 662.475, 'duration': 4.242}, {'end': 669.218, 'text': 'You know, I, it could be better.', 'start': 666.997, 'duration': 2.221}, {'end': 672.26, 'text': 'The way to really find out is to do split testing.', 'start': 669.759, 'duration': 2.501}, {'end': 677.884, 'text': 'When you launch the site to see You know which iteration of the headline, the sub headline,', 'start': 672.6, 'duration': 5.284}, {'end': 683.028, 'text': 'the call to action copy and anything else would really result in the most signups.', 'start': 677.884, 'duration': 5.144}, {'end': 687.971, 'text': "That's what all you can really do at first is just to guess on what would be effective.", 'start': 683.068, 'duration': 4.903}, {'end': 691.154, 'text': "So I'm going to use a font called Montserrat.", 'start': 688.392, 'duration': 2.762}, {'end': 693.356, 'text': 'Montserrat I have no clue how to pronounce that.', 'start': 691.334, 'duration': 2.022}, {'end': 694.076, 'text': "It's free though.", 'start': 693.436, 'duration': 0.64}], 'summary': "Service 'cryptos' combines cryptocurrency and real-time chat for user testing.", 'duration': 45.829, 'max_score': 648.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM648247.jpg'}, {'end': 755.231, 'src': 'embed', 'start': 725.077, 'weight': 0, 'content': [{'end': 729.639, 'text': "Next, gonna have a sub headline underneath and let's draw out some space here.", 'start': 725.077, 'duration': 4.562}, {'end': 736.802, 'text': "And this time I'm gonna do, I'm just gonna left click and do like an area sort of copy here.", 'start': 729.659, 'duration': 7.143}, {'end': 738.803, 'text': 'And this is gonna be the sub headline.', 'start': 737.202, 'duration': 1.601}, {'end': 743.725, 'text': 'So I can elaborate a little bit more on what this is.', 'start': 738.863, 'duration': 4.862}, {'end': 755.231, 'text': 'So when it comes to good ad copy or landing page copy, you want to emphasize benefits rather than features for the most part,', 'start': 743.765, 'duration': 11.466}], 'summary': 'Emphasize benefits over features for effective ad and landing page copy.', 'duration': 30.154, 'max_score': 725.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM725077.jpg'}, {'end': 814.53, 'src': 'embed', 'start': 787.27, 'weight': 2, 'content': [{'end': 792.314, 'text': 'to really make these two elements discernible from each other and make them easy to read.', 'start': 787.27, 'duration': 5.044}, {'end': 802.081, 'text': 'So in terms of visual hierarchy, we can see first we sort of have Crips, which is the branding, the logo, the identity of the service.', 'start': 793.575, 'duration': 8.506}, {'end': 805.844, 'text': 'Then we have this right here, which is a headline.', 'start': 802.461, 'duration': 3.383}, {'end': 808.025, 'text': "It's more important than our sub headline.", 'start': 805.864, 'duration': 2.161}, {'end': 814.53, 'text': 'And this is all reinforced through font size, spacing, positioning, color, etc.', 'start': 808.145, 'duration': 6.385}], 'summary': 'Visual hierarchy establishes distinction between branding and content through font, spacing, positioning, and color.', 'duration': 27.26, 'max_score': 787.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM787270.jpg'}, {'end': 981.66, 'src': 'embed', 'start': 952.483, 'weight': 1, 'content': [{'end': 958.967, 'text': 'And ultimately, the answer comes through split testing and understanding how all of that works effectively.', 'start': 952.483, 'duration': 6.484}, {'end': 963.289, 'text': "So right here, I'm going to have like a illustration of sorts.", 'start': 959.847, 'duration': 3.442}, {'end': 965.15, 'text': "And I'm still going to.", 'start': 963.849, 'duration': 1.301}, {'end': 970.713, 'text': 'You could do it, for instance, with Illustrator or any of your other favorite vector applications.', 'start': 965.15, 'duration': 5.563}, {'end': 973.415, 'text': 'However, Adobe XD does have.', 'start': 971.034, 'duration': 2.381}, {'end': 981.66, 'text': 'decent basic tools where you can do a lot of work essentially completely in this app here.', 'start': 973.975, 'duration': 7.685}], 'summary': 'Understanding split testing is key for effective marketing strategies.', 'duration': 29.177, 'max_score': 952.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM952483.jpg'}], 'start': 622.267, 'title': 'Creating attention-grabbing headlines and optimizing landing page design', 'summary': "Discusses creating attention-grabbing headlines through unique examples like 'crips' and emphasizes the importance of split testing. it also covers optimizing landing page design by highlighting visual hierarchy, contrast, and split testing to improve signups and conversion rates.", 'chapters': [{'end': 672.26, 'start': 622.267, 'title': 'Creating attention-grabbing headlines', 'summary': "Discusses creating attention-grabbing headlines that inform the user in a unique way, using the example of integrating crypto and chat to form the service 'crips', emphasizing the importance of split testing to improve the effectiveness of the headline.", 'duration': 49.993, 'highlights': ["The importance of creating attention-grabbing headlines that inform the user in a unique way is emphasized, with an example of integrating crypto and chat to form the service 'crips' (crypto currency + chat = crips).", 'The significance of split testing to evaluate and improve the effectiveness of headlines is highlighted.']}, {'end': 973.415, 'start': 672.6, 'title': 'Optimizing landing page design', 'summary': 'Discusses the process of designing a landing page, emphasizing the importance of visual hierarchy, contrast, and split testing to optimize for signups and conversion rates.', 'duration': 300.815, 'highlights': ['The importance of visual hierarchy and contrast in designing a landing page is emphasized to make elements discernible and easy to read. Visual hierarchy and contrast are crucial for making elements on a landing page discernible and easy to read, ensuring that the branding, headline, and call to action are effectively prioritized.', 'The process of split testing is mentioned as a method to understand the effectiveness of different design elements in optimizing for signups. Split testing is highlighted as a method to understand the effectiveness of different design elements in optimizing for signups, indicating the significance of data-driven decisions in the design process.', 'The use of the font Montserrat, its attributes, and the recommendation for download are discussed for implementing it in the design. The use of the font Montserrat, its attributes, and the recommendation for download are discussed, providing practical guidance for implementing it in the design process.']}], 'duration': 351.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM622267.jpg', 'highlights': ['The importance of split testing to evaluate and improve the effectiveness of headlines is emphasized.', 'The significance of data-driven decisions in the design process is highlighted through the mention of split testing for optimizing signups.', 'Visual hierarchy and contrast are crucial for making elements on a landing page discernible and easy to read, ensuring effective prioritization of branding, headline, and call to action.', 'The use of the font Montserrat, its attributes, and the recommendation for download are discussed, providing practical guidance for implementing it in the design process.', "The example of integrating crypto and chat to form the service 'crips' (crypto currency + chat = crips) is used to emphasize creating attention-grabbing headlines in a unique way."]}, {'end': 1294.593, 'segs': [{'end': 1026.696, 'src': 'embed', 'start': 973.975, 'weight': 0, 'content': [{'end': 981.66, 'text': 'decent basic tools where you can do a lot of work essentially completely in this app here.', 'start': 973.975, 'duration': 7.685}, {'end': 988.445, 'text': 'So what I wanted to do here was kind of give them a visual representation, not a literal one.', 'start': 981.74, 'duration': 6.705}, {'end': 990.866, 'text': "I don't want to take a screenshot of this interface.", 'start': 988.485, 'duration': 2.381}, {'end': 996.312, 'text': 'But I wanted to kind of recreate it in a simple vectorized fashion.', 'start': 991.909, 'duration': 4.403}, {'end': 999.694, 'text': 'So I want to illustrate to them that this is.', 'start': 996.652, 'duration': 3.042}, {'end': 1002.496, 'text': 'Damn, that just went up high.', 'start': 999.694, 'duration': 2.802}, {'end': 1003.457, 'text': "That's Bitcoin for you.", 'start': 1002.676, 'duration': 0.781}, {'end': 1010.702, 'text': "I just wanted to illustrate that there are charts here on one part of the interface and there's chats here on this part of the interface.", 'start': 1004.237, 'duration': 6.465}, {'end': 1014.424, 'text': 'And I want to do this in a very simplified sort of abstract manner.', 'start': 1010.762, 'duration': 3.662}, {'end': 1016.606, 'text': "So I'm going to have an actual.", 'start': 1014.984, 'duration': 1.622}, {'end': 1021.631, 'text': "let's see, what do you call, a monitor right here.", 'start': 1017.446, 'duration': 4.185}, {'end': 1026.696, 'text': "And I'm going to recreate that interface in a very simplified manner.", 'start': 1022.552, 'duration': 4.144}], 'summary': 'Illustrating features using simplified vectorized graphics for a basic app.', 'duration': 52.721, 'max_score': 973.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM973975.jpg'}, {'end': 1115.68, 'src': 'embed', 'start': 1055.231, 'weight': 3, 'content': [{'end': 1059.494, 'text': "And so there's not enough contrast without it to really make it stand out.", 'start': 1055.231, 'duration': 4.263}, {'end': 1066.377, 'text': "So we're going to add a border and I'm going to make it three for the stroke.", 'start': 1059.534, 'duration': 6.843}, {'end': 1072.681, 'text': "And then also we'll go ahead and pull this in just slightly.", 'start': 1067.238, 'duration': 5.443}, {'end': 1078.834, 'text': 'So I have in that basically that 16 by nine sort of monitor resolution.', 'start': 1073.53, 'duration': 5.304}, {'end': 1082.676, 'text': "I'm also going to do a stand down here.", 'start': 1080.795, 'duration': 1.881}, {'end': 1089.621, 'text': "So I'm just going to hit control D to replicate that and just move it down while holding shift.", 'start': 1082.776, 'duration': 6.845}, {'end': 1091.894, 'text': "We'll drag this in.", 'start': 1090.694, 'duration': 1.2}, {'end': 1093.715, 'text': "We'll say referee around here.", 'start': 1092.554, 'duration': 1.161}, {'end': 1097.736, 'text': "We're going to make it completely normal corners.", 'start': 1093.735, 'duration': 4.001}, {'end': 1102.717, 'text': 'Hold Alt, drag this in, maybe up a little bit more.', 'start': 1098.536, 'duration': 4.181}, {'end': 1105.018, 'text': "And let's see.", 'start': 1104.277, 'duration': 0.741}, {'end': 1106.698, 'text': "We'll make the fill color.", 'start': 1105.298, 'duration': 1.4}, {'end': 1108.458, 'text': 'Get the eyedropper.', 'start': 1107.618, 'duration': 0.84}, {'end': 1111.439, 'text': 'All right, the same right there.', 'start': 1108.478, 'duration': 2.961}, {'end': 1115.68, 'text': "And then I'll do one more.", 'start': 1111.459, 'duration': 4.221}], 'summary': 'Adjustments made to design elements for a 16 by 9 monitor resolution, including adding border, replicating and moving items.', 'duration': 60.449, 'max_score': 1055.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1055231.jpg'}, {'end': 1263.92, 'src': 'heatmap', 'start': 1216.098, 'weight': 4, 'content': [{'end': 1222.402, 'text': "It'll go back to three, but I just want to have some white space between the interface elements in the outer right here.", 'start': 1216.098, 'duration': 6.304}, {'end': 1228.285, 'text': 'So the first element that we have is this sidebar, this black sidebar,', 'start': 1223.302, 'duration': 4.983}, {'end': 1237.173, 'text': "and that's going to be the only part of that sidebar that I actually decide to you know, place or depict in this interface.", 'start': 1228.285, 'duration': 8.888}, {'end': 1242.319, 'text': "I'm not going to add the individual icons in the middle and just become a little bit too busy.", 'start': 1237.754, 'duration': 4.565}, {'end': 1246.023, 'text': "Again, we want this to be simple for the look that we're going for.", 'start': 1242.499, 'duration': 3.524}, {'end': 1247.785, 'text': "And so I'll just use that.", 'start': 1246.784, 'duration': 1.001}, {'end': 1251.95, 'text': 'And then we also have this middle area.', 'start': 1249.387, 'duration': 2.563}, {'end': 1258.117, 'text': "Um, I'm not going to have, well, I just keep looking at this username.", 'start': 1253.314, 'duration': 4.803}, {'end': 1262.319, 'text': "I'm not going to have this little sidebar, um, for the user's area.", 'start': 1258.457, 'duration': 3.862}, {'end': 1263.92, 'text': 'Cause that is actually collapsible.', 'start': 1262.359, 'duration': 1.561}], 'summary': 'Design includes a black sidebar and a collapsible user area for simplicity.', 'duration': 47.822, 'max_score': 1216.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1216098.jpg'}], 'start': 973.975, 'title': 'Interface visual representation and creation', 'summary': 'Covers creating a simplified visual representation of an interface, illustrating the presence of charts and chats, and the process of creating interface elements for a monitor, including adding a border, replicating elements, adjusting colors, and creating a simplified representation for a sidebar and panel.', 'chapters': [{'end': 1026.696, 'start': 973.975, 'title': 'Visual representation of interface', 'summary': 'Discusses creating a simplified vectorized visual representation of an interface to illustrate the presence of charts and chats, aiming to convey the functionality of the app.', 'duration': 52.721, 'highlights': ['The goal is to provide a simplified visual representation of the interface to illustrate the presence of charts and chats, aiming to convey the functionality of the app.', 'The approach involves recreating the interface in a simple vectorized fashion, using a simplified and abstract manner for illustration.', "The tools available in the app allow for significant work to be done, indicating the app's capability for various tasks."]}, {'end': 1294.593, 'start': 1027.558, 'title': 'Creating interface elements', 'summary': 'Demonstrates the process of creating interface elements for a monitor, including adding a border, replicating elements, adjusting colors, and creating a simplified representation for a sidebar and panel.', 'duration': 267.035, 'highlights': ['The process involves adding a border and adjusting colors for the monitor elements to enhance contrast and make them stand out, with a stroke of three and a fill color of 404040.', 'Replicating elements and adjusting their position and colors, with the use of shortcuts like Control D for duplication and holding Alt to scale and drag.', 'Creating a simplified representation for the sidebar and panel by depicting only specific parts to maintain a clean and simple look for the interface.']}], 'duration': 320.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM973975.jpg', 'highlights': ["The tools available in the app allow for significant work to be done, indicating the app's capability for various tasks.", 'The goal is to provide a simplified visual representation of the interface to illustrate the presence of charts and chats, aiming to convey the functionality of the app.', 'The approach involves recreating the interface in a simple vectorized fashion, using a simplified and abstract manner for illustration.', 'The process involves adding a border and adjusting colors for the monitor elements to enhance contrast and make them stand out, with a stroke of three and a fill color of 404040.', 'Creating a simplified representation for the sidebar and panel by depicting only specific parts to maintain a clean and simple look for the interface.', 'Replicating elements and adjusting their position and colors, with the use of shortcuts like Control D for duplication and holding Alt to scale and drag.']}, {'end': 1552.673, 'segs': [{'end': 1338.919, 'src': 'embed', 'start': 1294.613, 'weight': 0, 'content': [{'end': 1295.694, 'text': "We're not going to see this part.", 'start': 1294.613, 'duration': 1.081}, {'end': 1299.237, 'text': "We're going to see the fact that this is overlapping a little bit.", 'start': 1296.795, 'duration': 2.442}, {'end': 1302.78, 'text': "Next we'll have, and by the way, it's not really 50%.", 'start': 1300.238, 'duration': 2.542}, {'end': 1304.421, 'text': "It's more like over here.", 'start': 1302.78, 'duration': 1.641}, {'end': 1306.303, 'text': "There's a little bit more room dedicated to the chat.", 'start': 1304.461, 'duration': 1.842}, {'end': 1309.565, 'text': "So next we'll have, let's see here.", 'start': 1307.384, 'duration': 2.181}, {'end': 1312.428, 'text': 'We have a chat bar, the actual input area down here.', 'start': 1309.866, 'duration': 2.562}, {'end': 1314.924, 'text': 'Oh, by the way, check this out.', 'start': 1313.823, 'duration': 1.101}, {'end': 1319.467, 'text': 'Cool stuff, huh? I stole that from Facebook.', 'start': 1315.384, 'duration': 4.083}, {'end': 1323.929, 'text': "By the way, there's going to be a lot more emoticons, not just two of them.", 'start': 1320.607, 'duration': 3.322}, {'end': 1327.812, 'text': "So let's go ahead and do that little chat area down here.", 'start': 1324.49, 'duration': 3.322}, {'end': 1331.734, 'text': 'No stroke.', 'start': 1330.734, 'duration': 1}, {'end': 1333.155, 'text': 'Give it a fill.', 'start': 1332.315, 'duration': 0.84}, {'end': 1335.637, 'text': 'Probably the same color right here.', 'start': 1333.516, 'duration': 2.121}, {'end': 1338.919, 'text': "And then I'll also give it a border radius.", 'start': 1335.657, 'duration': 3.262}], 'summary': 'The chat area will have more emoticons and a border radius, not just two emoticons, and the space dedicated to the chat is more than 50%.', 'duration': 44.306, 'max_score': 1294.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1294613.jpg'}, {'end': 1445.059, 'src': 'embed', 'start': 1389.092, 'weight': 3, 'content': [{'end': 1394.814, 'text': "We're not going to make it as thick, but there'll be just varying degrees of this.", 'start': 1389.092, 'duration': 5.722}, {'end': 1397.295, 'text': 'So we can repeat this as a repeat grid vertically.', 'start': 1394.834, 'duration': 2.461}, {'end': 1401.484, 'text': 'like that, and then ungroup it.', 'start': 1399.042, 'duration': 2.442}, {'end': 1408.249, 'text': 'And then we could just adjust these to varying sizes to represent chat messages.', 'start': 1403.145, 'duration': 5.104}, {'end': 1413.293, 'text': "So again, it's really simple stuff like that.", 'start': 1408.269, 'duration': 5.024}, {'end': 1425.207, 'text': 'All right, next I just want to have a very simple representation of the candlestick chart, the graph which shows up over here in this area.', 'start': 1415.083, 'duration': 10.124}, {'end': 1432.57, 'text': "So it's going to be the same process almost as the background process, but nowhere near as many of them.", 'start': 1425.748, 'duration': 6.822}, {'end': 1435.752, 'text': "So just to save myself time, I'll duplicate that.", 'start': 1432.691, 'duration': 3.061}, {'end': 1440.574, 'text': "We'll go ahead and make this like a desaturated green almost maybe.", 'start': 1436.332, 'duration': 4.242}, {'end': 1445.059, 'text': 'like that.', 'start': 1444.639, 'duration': 0.42}], 'summary': 'Creating simple representations of chat messages and candlestick chart with varying sizes and colors.', 'duration': 55.967, 'max_score': 1389.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1389092.jpg'}], 'start': 1294.613, 'title': 'Designing chat interface with emoticons and simple data visualization techniques', 'summary': 'Discusses the design of a chat interface with emoticons, focusing on space allocation and border radius, and demonstrates simplified data visualization techniques for creating visual elements such as chat messages and candlestick charts, incorporating specific color codes and design adjustments.', 'chapters': [{'end': 1338.919, 'start': 1294.613, 'title': 'Designing chat interface with emoticons', 'summary': 'Discusses the design of a chat interface, highlighting the allocation of space, addition of emoticons, and the implementation of a border radius.', 'duration': 44.306, 'highlights': ['The chat interface has more room dedicated to the chat, rather than the 50% initially indicated.', 'The design includes the addition of a lot more emoticons, not just two as seen previously.', 'Implementation of a border radius is mentioned as part of the chat interface design.']}, {'end': 1552.673, 'start': 1341.732, 'title': 'Simple data visualization techniques', 'summary': 'Demonstrates a simplified method for creating visual elements, including chat messages and candlestick charts, with specific color codes and design adjustments to represent data.', 'duration': 210.941, 'highlights': ['The process of creating visual elements, such as chat messages and candlestick charts, is simplified and demonstrated step by step, emphasizing the importance of simplicity.', 'Specific color codes are provided for the design elements, including desaturated green (68CAAD) and red (E18888) for the candlestick chart, with a focus on efficient design processes.', 'The demonstration includes practical design adjustments, such as duplicating and adjusting elements, using repeat grid vertically, and making individual color adjustments for the candlestick chart.', 'The chapter emphasizes the use of simple techniques, such as duplicating elements, adjusting varying sizes, and utilizing color swatches for efficient design processes.']}], 'duration': 258.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1294613.jpg', 'highlights': ['The chat interface has more room dedicated to the chat, rather than the 50% initially indicated.', 'The design includes the addition of a lot more emoticons, not just two as seen previously.', 'Implementation of a border radius is mentioned as part of the chat interface design.', 'The process of creating visual elements, such as chat messages and candlestick charts, is simplified and demonstrated step by step, emphasizing the importance of simplicity.', 'Specific color codes are provided for the design elements, including desaturated green (68CAAD) and red (E18888) for the candlestick chart, with a focus on efficient design processes.', 'The demonstration includes practical design adjustments, such as duplicating and adjusting elements, using repeat grid vertically, and making individual color adjustments for the candlestick chart.', 'The chapter emphasizes the use of simple techniques, such as duplicating elements, adjusting varying sizes, and utilizing color swatches for efficient design processes.']}, {'end': 1870.973, 'segs': [{'end': 1652.396, 'src': 'heatmap', 'start': 1552.713, 'weight': 0, 'content': [{'end': 1555.075, 'text': "So let's see what this looks like at this point.", 'start': 1552.713, 'duration': 2.362}, {'end': 1558.197, 'text': "I'm going to move it over just a tad bit more, I think.", 'start': 1556.016, 'duration': 2.181}, {'end': 1562.261, 'text': 'Right around there.', 'start': 1561.701, 'duration': 0.56}, {'end': 1572.385, 'text': 'And then finally, one of the last elements will be creating little chat messages like I mentioned before.', 'start': 1562.281, 'duration': 10.104}, {'end': 1576.487, 'text': "So I'm going to give this the same stroke.", 'start': 1573.086, 'duration': 3.401}, {'end': 1580.189, 'text': "So if I double click in here, because this is a part of a group, we'll see the border.", 'start': 1576.507, 'duration': 3.682}, {'end': 1585.433, 'text': "And the border will be this color and it's three pixels.", 'start': 1581.569, 'duration': 3.864}, {'end': 1586.194, 'text': "It's what we want.", 'start': 1585.493, 'duration': 0.701}, {'end': 1590.539, 'text': "And then I'm going to create a little chat area.", 'start': 1587.055, 'duration': 3.484}, {'end': 1595.584, 'text': 'So a little like kind of like a chat container message blip thing, if you know what I mean.', 'start': 1590.979, 'duration': 4.605}, {'end': 1598.006, 'text': "Let's go up to three.", 'start': 1595.604, 'duration': 2.402}, {'end': 1601.069, 'text': 'Again, keeping the same aesthetic across.', 'start': 1598.026, 'duration': 3.043}, {'end': 1603.492, 'text': "Now we're going to zoom up.", 'start': 1602.591, 'duration': 0.901}, {'end': 1607.089, 'text': 'All right.', 'start': 1606.769, 'duration': 0.32}, {'end': 1609.952, 'text': "And I'm going to use the pen tool.", 'start': 1607.89, 'duration': 2.062}, {'end': 1621.723, 'text': "I'm going to left click, left click here, drag out to create a Bezier curve and then come back like that.", 'start': 1609.972, 'duration': 11.751}, {'end': 1626.307, 'text': "I think that's good right there.", 'start': 1624.786, 'duration': 1.521}, {'end': 1627.308, 'text': 'All right.', 'start': 1627.028, 'duration': 0.28}, {'end': 1629.77, 'text': 'So now what we can do.', 'start': 1628.569, 'duration': 1.201}, {'end': 1632.963, 'text': "I'm going to take both of these holding shift.", 'start': 1629.77, 'duration': 3.193}, {'end': 1636.525, 'text': 'so both of these layers are selected and we can see this up here.', 'start': 1632.963, 'duration': 3.562}, {'end': 1637.606, 'text': 'we have these little path tools.', 'start': 1636.525, 'duration': 1.081}, {'end': 1642.129, 'text': "we're going to choose add ta-da, awesome stuff.", 'start': 1637.606, 'duration': 4.523}, {'end': 1643.83, 'text': "so now it's all part of the same path.", 'start': 1642.129, 'duration': 1.701}, {'end': 1646.532, 'text': "oh, you know what before i do that i'm going to back up.", 'start': 1643.83, 'duration': 2.702}, {'end': 1652.396, 'text': "i want these to be rounded, so we'll say right around here.", 'start': 1646.532, 'duration': 5.864}], 'summary': 'Creating chat messages with stroke color and 3-pixel border.', 'duration': 89.416, 'max_score': 1552.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1552713.jpg'}, {'end': 1727.674, 'src': 'embed', 'start': 1702.181, 'weight': 2, 'content': [{'end': 1709.746, 'text': 'So you can always just make adjustments if you need to, to the path itself or the size or location of the, uh, of the type.', 'start': 1702.181, 'duration': 7.565}, {'end': 1710.886, 'text': 'All right.', 'start': 1710.706, 'duration': 0.18}, {'end': 1711.707, 'text': "So that one's good.", 'start': 1710.926, 'duration': 0.781}, {'end': 1714.849, 'text': 'I would say right here, you move it a little bit closer.', 'start': 1711.727, 'duration': 3.122}, {'end': 1721.913, 'text': "And then we'll take the same process and repeat it two more times.", 'start': 1716.792, 'duration': 5.121}, {'end': 1723.774, 'text': 'So that one will go there.', 'start': 1722.093, 'duration': 1.681}, {'end': 1727.674, 'text': "Let's go ahead and bring this one right here.", 'start': 1724.414, 'duration': 3.26}], 'summary': 'Adjustments made to path, type size, and location; process repeated two more times.', 'duration': 25.493, 'max_score': 1702.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1702181.jpg'}, {'end': 1860.047, 'src': 'embed', 'start': 1793.429, 'weight': 4, 'content': [{'end': 1797.19, 'text': 'Okay So now we have to make adjustments to this container.', 'start': 1793.429, 'duration': 3.761}, {'end': 1799.571, 'text': 'And this is fairly simple.', 'start': 1797.211, 'duration': 2.36}, {'end': 1804.373, 'text': 'So if I go down right there, I double click on this.', 'start': 1799.711, 'duration': 4.662}, {'end': 1808.945, 'text': "and double click again, we'll have access to the anchor point.", 'start': 1806.644, 'duration': 2.301}, {'end': 1811.706, 'text': "so I'm just going to hold shift to select all four.", 'start': 1808.945, 'duration': 2.761}, {'end': 1823.669, 'text': 'move up and that looks pretty good, right there.', 'start': 1811.706, 'duration': 11.963}, {'end': 1824.83, 'text': 'alright, I like that.', 'start': 1823.669, 'duration': 1.161}, {'end': 1828.431, 'text': 'this is a pretty solid in my opinion.', 'start': 1824.83, 'duration': 3.601}, {'end': 1833.572, 'text': "so this is it for the actual landing page I'm going to have now.", 'start': 1828.431, 'duration': 5.141}, {'end': 1841.088, 'text': 'I am going to take this and export them as SVG files and export these individually.', 'start': 1833.572, 'duration': 7.516}, {'end': 1847.076, 'text': 'And that way I can use CSS to animate these on top of this little monitor section.', 'start': 1841.108, 'duration': 5.968}, {'end': 1860.047, 'text': "So I'm going to do another video where we take all of this right here and get it up in his html, css and export the assets, as you can see right here,", 'start': 1847.797, 'duration': 12.25}], 'summary': 'Adjusted container, selected anchor point, exported as svg files for css animation.', 'duration': 66.618, 'max_score': 1793.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1793429.jpg'}], 'start': 1552.713, 'title': 'Creating design elements', 'summary': 'Covers creating chat messages, chat containers, and using the pen tool for design, maintaining consistency in stroke color and width. it also demonstrates creating bezier curves, adding text to a design, and preparing for export as svg files and css animation.', 'chapters': [{'end': 1609.952, 'start': 1552.713, 'title': 'Creating chat messages and chat containers', 'summary': 'Discusses creating chat messages, chat containers, and using the pen tool for design, maintaining consistency in stroke color and width.', 'duration': 57.239, 'highlights': ['Using the pen tool to create chat containers and maintaining consistency in stroke color and width.', 'Discussing the creation of chat messages and ensuring consistency in the design aesthetic.', 'Adjusting the design elements with attention to details and precision.']}, {'end': 1870.973, 'start': 1609.972, 'title': 'Creating bezier curve and text animation', 'summary': 'Demonstrates creating bezier curves and adding text to a design, with a focus on design elements, alignment, and adjustments, preparing for export as svg files and css animation.', 'duration': 261.001, 'highlights': ['Demonstrates creating Bezier curves and adding text to a design Creating Bezier curves, adding text to design', 'Emphasizes design elements, alignment, and adjustments Focus on design elements, alignment, adjustments', 'Prepares for export as SVG files and CSS animation Preparing for export as SVG files, CSS animation']}], 'duration': 318.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cKFy0SFZBdM/pics/cKFy0SFZBdM1552713.jpg', 'highlights': ['Using the pen tool to create chat containers and maintaining consistency in stroke color and width.', 'Discussing the creation of chat messages and ensuring consistency in the design aesthetic.', 'Adjusting the design elements with attention to details and precision.', 'Demonstrates creating Bezier curves and adding text to a design Creating Bezier curves, adding text to design', 'Emphasizes design elements, alignment, and adjustments Focus on design elements, alignment, adjustments', 'Prepares for export as SVG files and CSS animation Preparing for export as SVG files, CSS animation']}], 'highlights': ['The app, named Crips, aims to offer real-time cryptocurrency charts combined with real-time chat functionality, targeting user engagement and interaction.', 'Emphasizing the importance of a headline, sub-headline, and call to action for an effective landing page, stressing the significance of these elements in engaging users and driving conversion.', 'The importance of split testing to evaluate and improve the effectiveness of headlines is emphasized.', 'Visual hierarchy and contrast are crucial for making elements on a landing page discernible and easy to read, ensuring effective prioritization of branding, headline, and call to action.', 'The process involves adding a border and adjusting colors for the monitor elements to enhance contrast and make them stand out, with a stroke of three and a fill color of 404040.', 'The design includes the addition of a lot more emoticons, not just two as seen previously.', 'Using the pen tool to create chat containers and maintaining consistency in stroke color and width.', 'Demonstrates creating Bezier curves and adding text to a design Creating Bezier curves, adding text to design']}