title
Your Layouts are BORING! Layout Design Tutorial

description
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account! - Let's face it, we see a *lot* of the same work from many UI designers. That's not necessarily a bad thing, because some patterns are tried and trued. But sometimes, you need a more unique approach -- and that's what I will be helping you all with today! I will design a few layouts from scratch and discuss my approach when coming up with more unique layouts. Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! 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': 'Your Layouts are BORING! Layout Design Tutorial', 'heatmap': [{'end': 100.619, 'start': 78.556, 'weight': 0.786}, {'end': 778.82, 'start': 754.324, 'weight': 1}], 'summary': 'This tutorial covers a unique layout building technique for non-traditional web designs, ui design fundamentals, alignment, aesthetics, professional layout design tips, website design elements, and ui techniques emphasizing importance of adherence to design fundamentals and demonstrating through examples and tools.', 'chapters': [{'end': 90.729, 'segs': [{'end': 27.281, 'src': 'embed', 'start': 0.069, 'weight': 1, 'content': [{'end': 5.925, 'text': 'If all your designs look like this boring, cookie, cutter web design template and you want to make something that looks more unique,', 'start': 0.069, 'duration': 5.856}, {'end': 7.088, 'text': 'this video is for you.', 'start': 5.925, 'duration': 1.163}, {'end': 11.737, 'text': "Hey, what's up? Gary Simon here.", 'start': 10.097, 'duration': 1.64}, {'end': 15.238, 'text': "So today I'm going to talk about a layout building technique, if you will,", 'start': 11.777, 'duration': 3.461}, {'end': 27.281, 'text': 'and how I like to approach building layouts that I think is really going to help a lot of you break out of the typical hero section with the center text or even just standard boring web designs that you see everywhere.', 'start': 15.238, 'duration': 12.043}], 'summary': 'Video discusses a layout building technique to create unique web designs.', 'duration': 27.212, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE69.jpg'}, {'end': 90.729, 'src': 'embed', 'start': 36.763, 'weight': 0, 'content': [{'end': 42.806, 'text': 'And also make sure, you know, while doing so that you are adhering to good, solid UI design fundamentals.', 'start': 36.763, 'duration': 6.043}, {'end': 45.387, 'text': "All right, so make sure to subscribe if you haven't yet.", 'start': 43.206, 'duration': 2.181}, {'end': 46.168, 'text': "Let's get started.", 'start': 45.608, 'duration': 0.56}, {'end': 52.492, 'text': 'Before we begin Linode makes it easy and affordable to host your website, your portfolio, your online store and more,', 'start': 46.228, 'duration': 6.264}, {'end': 54.173, 'text': 'on whatever technology stack you use.', 'start': 52.492, 'duration': 1.681}, {'end': 58.136, 'text': 'Getting up and running is fast and easy with one click app installs like WordPress and Drupal.', 'start': 54.333, 'duration': 3.803}, {'end': 62.219, 'text': 'With back end access to your server, customization and scaling options are all but limitless.', 'start': 58.396, 'duration': 3.823}, {'end': 62.899, 'text': 'All right.', 'start': 62.719, 'duration': 0.18}, {'end': 80.018, 'text': 'Here I am in Adobe XD.', 'start': 78.556, 'duration': 1.462}, {'end': 81.339, 'text': 'You can use whatever app you wish.', 'start': 80.038, 'duration': 1.301}, {'end': 82.04, 'text': "It doesn't matter.", 'start': 81.399, 'duration': 0.641}, {'end': 90.729, 'text': "And I want you to start thinking about when you're constructing a layout, boiling it down to something more simple.", 'start': 83.401, 'duration': 7.328}], 'summary': 'Linode offers fast and easy web hosting with one-click app installs like wordpress and drupal. adobe xd is recommended for constructing simple layouts.', 'duration': 53.966, 'max_score': 36.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE36763.jpg'}], 'start': 0.069, 'title': 'Unique layout building technique', 'summary': 'Introduces a layout building technique for unique and non-traditional web designs, emphasizing adherence to ui design fundamentals and breaking away from typical templates.', 'chapters': [{'end': 90.729, 'start': 0.069, 'title': 'Unique layout building technique', 'summary': 'Introduces a layout building technique to create unique and non-traditional web designs, emphasizing the importance of adhering to ui design fundamentals, with a focus on breaking away from typical web design templates.', 'duration': 90.66, 'highlights': ['The video introduces a layout building technique to help break out of typical web designs and create unique layouts that adhere to good UI design fundamentals.', 'Emphasizes the importance of branching out from standard boring web designs and creating unique layouts that some people may have never seen before.', 'Encourages subscribers to start thinking about simplifying layout construction and mentions the versatility of using any preferred app for the process.']}], 'duration': 90.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE69.jpg', 'highlights': ['Introduces a layout building technique for unique and non-traditional web designs, emphasizing adherence to UI design fundamentals and breaking away from typical templates.', 'Emphasizes the importance of branching out from standard boring web designs and creating unique layouts that some people may have never seen before.', 'Encourages subscribers to start thinking about simplifying layout construction and mentions the versatility of using any preferred app for the process.']}, {'end': 333.916, 'segs': [{'end': 119.229, 'src': 'embed', 'start': 91.149, 'weight': 0, 'content': [{'end': 93.812, 'text': 'And you can call them blocks or you can call them containers.', 'start': 91.149, 'duration': 2.663}, {'end': 100.619, 'text': 'And a block or a container is created when you add any element that has high enough contrast.', 'start': 94.933, 'duration': 5.686}, {'end': 109.484, 'text': "So you're probably confused on what I mean, but let me just show you maybe just a couple examples, or an example to show you what I'm talking about.", 'start': 101.4, 'duration': 8.084}, {'end': 114.807, 'text': 'So think about, for instance, a button, just a simple button where it has.', 'start': 110.584, 'duration': 4.223}, {'end': 115.267, 'text': "you know, it's like.", 'start': 114.807, 'duration': 0.46}, {'end': 119.229, 'text': "maybe it's a rectangle with rounded corners, whatever, with some text inside of it.", 'start': 115.267, 'duration': 3.962}], 'summary': 'Blocks or containers are created with elements of high contrast, like buttons with text inside.', 'duration': 28.08, 'max_score': 91.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE91149.jpg'}, {'end': 219.127, 'src': 'embed', 'start': 194.751, 'weight': 6, 'content': [{'end': 205.02, 'text': 'for instance, if we add some type like a my button, we can nail all the other design fundamentals, but if one of them are off,', 'start': 194.751, 'duration': 10.269}, {'end': 207.981, 'text': 'such as proximity or alignment, it just throws the whole thing off.', 'start': 205.02, 'duration': 2.961}, {'end': 216.926, 'text': "So we're going to make it white so that color and contrast is taken care of because white in this instance on a darker background is 100% contrast.", 'start': 208.041, 'duration': 8.885}, {'end': 219.127, 'text': "We're making contrast as much as possible.", 'start': 216.966, 'duration': 2.161}], 'summary': 'Focusing on design fundamentals such as color and contrast, aiming for 100% contrast with white on a darker background.', 'duration': 24.376, 'max_score': 194.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE194751.jpg'}, {'end': 280.098, 'src': 'embed', 'start': 237.916, 'weight': 3, 'content': [{'end': 241.557, 'text': 'Visual hierarchy comes into play when you have multiple elements on the same layout.', 'start': 237.916, 'duration': 3.641}, {'end': 245.379, 'text': 'And those are basically the fundamentals.', 'start': 242.858, 'duration': 2.521}, {'end': 250.162, 'text': "So it's color and contrast, scale, visual hierarchy, proximity.", 'start': 245.459, 'duration': 4.703}, {'end': 258.546, 'text': "And I may be forgetting one in the back of my mind, but every time you make a decision in terms of building your layout, like we're going to do,", 'start': 250.822, 'duration': 7.724}, {'end': 260.527, 'text': 'you have to think in terms of blocks.', 'start': 258.546, 'duration': 1.981}, {'end': 261.488, 'text': 'All right.', 'start': 261.188, 'duration': 0.3}, {'end': 266.29, 'text': 'And along with all those UI design fundamentals for each block that you create.', 'start': 261.668, 'duration': 4.622}, {'end': 269.912, 'text': "and then visual hierarchy comes into play when you're looking at the big picture, which is the layout,", 'start': 266.29, 'duration': 3.622}, {'end': 273.054, 'text': "which is just a bunch of blocks that's attached together.", 'start': 269.912, 'duration': 3.142}, {'end': 276.056, 'text': "So let's create a layout with this in mind.", 'start': 273.594, 'duration': 2.462}, {'end': 277.957, 'text': "so we're gonna.", 'start': 276.596, 'duration': 1.361}, {'end': 280.098, 'text': "i'm gonna go like a dark ui for this one.", 'start': 277.957, 'duration': 2.141}], 'summary': "Visual hierarchy in ui design includes color, contrast, scale, and proximity. it's crucial when creating a layout with multiple elements.", 'duration': 42.182, 'max_score': 237.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE237916.jpg'}], 'start': 91.149, 'title': 'Ui design fundamentals', 'summary': 'Covers ui design fundamentals such as contrast, color, scale, proximity, visual hierarchy, and layout blocks, emphasizing their importance for effective design.', 'chapters': [{'end': 148.311, 'start': 91.149, 'title': 'Using containers for high contrast elements', 'summary': 'Discusses the concept of using containers for high contrast elements, providing examples of how buttons can serve as containers with text or icons inside, and emphasizing the importance of high contrast for creating a container.', 'duration': 57.162, 'highlights': ['The concept of using containers for high contrast elements is explained, with examples such as buttons serving as containers with text or icons inside.', 'Emphasis is placed on the importance of high contrast for creating a container.']}, {'end': 333.916, 'start': 149.111, 'title': 'Ui design fundamentals', 'summary': 'Covers the fundamentals of ui design including contrast, color, scale, proximity, visual hierarchy, and layout blocks, emphasizing the importance of adhering to these principles for effective design.', 'duration': 184.805, 'highlights': ["The importance of contrast is emphasized, with the example of ensuring a high contrast for elements like type or icons against the container's background color.", 'The significance of color and its complementarity is highlighted, stressing the need for colors to work well together.', 'The relevance of scale in design is discussed, emphasizing the importance of avoiding elements that are too small or too large.', 'The impact of proximity and alignment on design is underscored, with the example of how a misplaced button can disrupt the overall layout.', 'The concept of visual hierarchy in UI design is introduced, emphasizing its role in managing multiple elements within a layout.']}], 'duration': 242.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE91149.jpg', 'highlights': ['The concept of using containers for high contrast elements is explained, with examples such as buttons serving as containers with text or icons inside.', 'Emphasis is placed on the importance of high contrast for creating a container.', "The importance of contrast is emphasized, with the example of ensuring a high contrast for elements like type or icons against the container's background color.", 'The significance of color and its complementarity is highlighted, stressing the need for colors to work well together.', 'The relevance of scale in design is discussed, emphasizing the importance of avoiding elements that are too small or too large.', 'The impact of proximity and alignment on design is underscored, with the example of how a misplaced button can disrupt the overall layout.', 'The concept of visual hierarchy in UI design is introduced, emphasizing its role in managing multiple elements within a layout.']}, {'end': 543.505, 'segs': [{'end': 406.562, 'src': 'embed', 'start': 357.097, 'weight': 0, 'content': [{'end': 362.522, 'text': "You can put it on one line, whatever you've essentially created another block.", 'start': 357.097, 'duration': 5.425}, {'end': 366.807, 'text': "And I'm not talking about just the headline itself.", 'start': 363.806, 'duration': 3.001}, {'end': 367.748, 'text': 'Yeah, this is a block.', 'start': 366.867, 'duration': 0.881}, {'end': 370.629, 'text': "We can see the outline when I select it, right? Cause it's text layer.", 'start': 367.788, 'duration': 2.841}, {'end': 377.552, 'text': "Yeah, that's a block, but the block actually can help extend vertically and horizontally.", 'start': 370.909, 'duration': 6.643}, {'end': 378.752, 'text': "So here's what I'm talking about.", 'start': 377.632, 'duration': 1.12}, {'end': 379.913, 'text': 'This is just temporary.', 'start': 378.772, 'duration': 1.141}, {'end': 382.254, 'text': "I just want to illustrate what I'm talking about.", 'start': 380.153, 'duration': 2.101}, {'end': 388.297, 'text': "We have a block here that's created, take this opacity down.", 'start': 382.294, 'duration': 6.003}, {'end': 391.398, 'text': 'And then also we have a block here.', 'start': 388.897, 'duration': 2.501}, {'end': 398.898, 'text': "that's created in terms of basically these columns and these rows that are created when you create a block.", 'start': 392.355, 'duration': 6.543}, {'end': 406.562, 'text': "So you don't see these, right? You don't see these explicitly unless you integrate them to the actual design.", 'start': 399.739, 'duration': 6.823}], 'summary': 'Blocks in the design tool can be extended vertically and horizontally, creating columns and rows.', 'duration': 49.465, 'max_score': 357.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE357097.jpg'}, {'end': 543.505, 'src': 'embed', 'start': 514.245, 'weight': 4, 'content': [{'end': 515.905, 'text': "I'm going to go to my plugins.", 'start': 514.245, 'duration': 1.66}, {'end': 519.006, 'text': "I'm going to go to, let's see, Lorem Ipsum, fill with placeholder.", 'start': 515.966, 'duration': 3.04}, {'end': 521.986, 'text': "That's a, Lorem Ipsum is a plugin you can get.", 'start': 519.027, 'duration': 2.959}, {'end': 525.728, 'text': 'And let me bring this up.', 'start': 523.688, 'duration': 2.04}, {'end': 529.049, 'text': "Let's make this light, I think.", 'start': 527.509, 'duration': 1.54}, {'end': 532.923, 'text': 'it right around there.', 'start': 531.263, 'duration': 1.66}, {'end': 535.144, 'text': "so right right there, it's pretty solid.", 'start': 532.923, 'duration': 2.221}, {'end': 537.304, 'text': 'in my opinion it works.', 'start': 535.144, 'duration': 2.16}, {'end': 543.505, 'text': "now let's try to um, add in just a random element of some sort like a random block.", 'start': 537.304, 'duration': 6.201}], 'summary': 'Testing plugins including lorem ipsum, with positive feedback.', 'duration': 29.26, 'max_score': 514.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE514245.jpg'}], 'start': 333.936, 'title': 'Design alignment and aesthetics', 'summary': 'Covers the use of blocks for alignment, benefits of layout alignment, importance of aligning elements in web design for better flow and aesthetics, and demonstration through examples and tools like lorem ipsum plugin.', 'chapters': [{'end': 436.683, 'start': 333.936, 'title': 'Canvas block and alignment in design', 'summary': 'Discusses the concept of using blocks in design to create alignment and illustrates the benefits of utilizing blocks for layout and alignment.', 'duration': 102.747, 'highlights': ['Blocks in design can help extend vertically and horizontally, aiding in alignment and layout.', 'The creation of columns and rows when creating a block can assist in maintaining alignment in the design.', 'Illustrating the clear path created by blocks can greatly aid in alignment when adding other elements to the design.', 'Choosing the appropriate block type can significantly enhance the alignment and layout of design elements.']}, {'end': 543.505, 'start': 437.064, 'title': 'Web design alignment and aesthetics', 'summary': 'Discusses the importance of aligning elements for a better flow and aesthetics in web design, utilizing examples and tools like lorem ipsum plugin to demonstrate the process.', 'duration': 106.441, 'highlights': ["The importance of aligning elements for a better flow and aesthetics in web design is emphasized, with examples provided to illustrate the impact (e.g., 'this just seems to flow a lot better than say something like this').", 'Utilizing tools like the Lorem Ipsum plugin to demonstrate the process of aligning elements and choosing a color scheme is mentioned, showcasing practical implementation in web design.', "The mention of utilizing plugins like Lorem Ipsum for web design and the demonstration of adding a random element to the design (e.g., 'let's try to um, add in just a random element of some sort like a random block')."]}], 'duration': 209.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE333936.jpg', 'highlights': ['Choosing the appropriate block type can significantly enhance the alignment and layout of design elements.', 'The creation of columns and rows when creating a block can assist in maintaining alignment in the design.', 'Illustrating the clear path created by blocks can greatly aid in alignment when adding other elements to the design.', 'Blocks in design can help extend vertically and horizontally, aiding in alignment and layout.', 'The importance of aligning elements for a better flow and aesthetics in web design is emphasized, with examples provided to illustrate the impact.', 'Utilizing tools like the Lorem Ipsum plugin to demonstrate the process of aligning elements and choosing a color scheme is mentioned, showcasing practical implementation in web design.', 'The mention of utilizing plugins like Lorem Ipsum for web design and the demonstration of adding a random element to the design.']}, {'end': 799.44, 'segs': [{'end': 568.831, 'src': 'embed', 'start': 543.505, 'weight': 4, 'content': [{'end': 553.647, 'text': "so i'm just going to draw out, i'm going to hold shift and create a i don't know a square, and this square i'll just put, maybe right here,", 'start': 543.505, 'duration': 10.142}, {'end': 556.968, 'text': "and then i'll put, we'll give it some color, perhaps.", 'start': 553.647, 'duration': 3.321}, {'end': 559.864, 'text': "So it's like a kind of like a pinkish color.", 'start': 558.163, 'duration': 1.701}, {'end': 560.545, 'text': 'There we go.', 'start': 560.145, 'duration': 0.4}, {'end': 566.69, 'text': "And then, um, let's just duplicate this and we will put it right here, right next to it.", 'start': 561.105, 'duration': 5.585}, {'end': 568.831, 'text': 'Perhaps I want them to be the same size.', 'start': 566.73, 'duration': 2.101}], 'summary': 'Creating a square with a pinkish color and duplicating it for uniform sizes', 'duration': 25.326, 'max_score': 543.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE543505.jpg'}, {'end': 628.216, 'src': 'embed', 'start': 601.129, 'weight': 0, 'content': [{'end': 604.912, 'text': "Right here is a block that's been created in this section right here.", 'start': 601.129, 'duration': 3.783}, {'end': 613.299, 'text': "And you can also see where it says choosing a color scheme, it's kind of interceded this block right here in this vertical line.", 'start': 604.932, 'duration': 8.367}, {'end': 615.908, 'text': 'So we have some options.', 'start': 614.267, 'duration': 1.641}, {'end': 619.31, 'text': "So first of all, we'll forget about this one for a second.", 'start': 616.048, 'duration': 3.262}, {'end': 628.216, 'text': 'If we really want to align this as much as possible and try to really create good alignment and proximity,', 'start': 620.391, 'duration': 7.825}], 'summary': 'A block has been created, with alignment and proximity considerations.', 'duration': 27.087, 'max_score': 601.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE601129.jpg'}, {'end': 672.086, 'src': 'embed', 'start': 648.059, 'weight': 2, 'content': [{'end': 656.2, 'text': "All right, so that's very important and it will really help just kind of make your layout look a lot more professional and just flow better.", 'start': 648.059, 'duration': 8.141}, {'end': 658.661, 'text': 'So we have this one lined up here.', 'start': 656.98, 'duration': 1.681}, {'end': 666.404, 'text': "So what are we gonna do with this one? Well, we have, let's say this is where we want our type to be.", 'start': 658.681, 'duration': 7.723}, {'end': 670.866, 'text': 'We can pull out another vertical guide.', 'start': 666.884, 'duration': 3.982}, {'end': 672.086, 'text': 'We could see it starts here.', 'start': 670.986, 'duration': 1.1}], 'summary': 'Using vertical guides can enhance layout professionalism and flow.', 'duration': 24.027, 'max_score': 648.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE648059.jpg'}, {'end': 807.384, 'src': 'heatmap', 'start': 754.324, 'weight': 1, 'content': [{'end': 757.407, 'text': "Maybe take the background color and then just, oh, it's already gray.", 'start': 754.324, 'duration': 3.083}, {'end': 765.434, 'text': 'So we can just go up a bit and you want to make sure that you do at least adhere to the WCAG 2.0 color contrast guidelines.', 'start': 757.507, 'duration': 7.927}, {'end': 768.096, 'text': 'There is a plugin called Stark.', 'start': 765.874, 'duration': 2.222}, {'end': 772.296, 'text': "which? uh, let's see here, check contrast.", 'start': 769.454, 'duration': 2.842}, {'end': 775.058, 'text': 'we could do rapid contrast, checker, all right.', 'start': 772.296, 'duration': 2.762}, {'end': 777.099, 'text': 'so we could see.', 'start': 775.058, 'duration': 2.041}, {'end': 778.82, 'text': 'this already passes the test.', 'start': 777.099, 'duration': 1.721}, {'end': 780.801, 'text': "it's a 7.77.", 'start': 778.82, 'duration': 1.981}, {'end': 783.943, 'text': 'i did a um a video on this, by the way.', 'start': 780.801, 'duration': 3.142}, {'end': 786.104, 'text': 'uh, if you want to search my channel for that.', 'start': 783.943, 'duration': 2.161}, {'end': 789.767, 'text': "so so we've created a layout that works.", 'start': 786.104, 'duration': 3.663}, {'end': 791.928, 'text': 'i i wanted to get a a logo.', 'start': 789.767, 'duration': 2.161}, {'end': 793.029, 'text': "so let's just put a logo.", 'start': 791.928, 'duration': 1.101}, {'end': 799.44, 'text': "i've called this, uh, i don't know 2020, It's just a fake logo.", 'start': 793.029, 'duration': 6.411}, {'end': 807.384, 'text': 'And we could probably stand to move things over a bit just because there was a lot of space on this side.', 'start': 801.201, 'duration': 6.183}], 'summary': 'Adhering to wcag 2.0 color contrast guidelines, the layout passes the test with a score of 7.77.', 'duration': 53.06, 'max_score': 754.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE754324.jpg'}], 'start': 543.505, 'title': 'Design element alignment and professional layout design tips', 'summary': 'Discusses creating and aligning blocks with different colors, emphasizing the importance of white space, negative space, professional layout design tips, guide placement, block sections, and emphasizing type elements while adhering to wcag 2.0 color contrast guidelines.', 'chapters': [{'end': 647.077, 'start': 543.505, 'title': 'Design element alignment and proximity', 'summary': 'Discusses creating and aligning two blocks with different colors, emphasizing on the importance of white space and negative space for good alignment and proximity.', 'duration': 103.572, 'highlights': ['Creating two blocks with high contrast colors, emphasizing their visibility and the effect of different overlays.', 'Emphasizing the importance of equal white space or negative space around elements for good alignment and proximity.', "Demonstrating the impact of color scheme selection on the design elements' visibility and alignment."]}, {'end': 799.44, 'start': 648.059, 'title': 'Professional layout design tips', 'summary': 'Discusses creating a cohesive and professional layout design with tips on guide placement, block sections, and emphasizing type elements through scale and contrast while adhering to wcag 2.0 color contrast guidelines.', 'duration': 151.381, 'highlights': ['The importance of guide placement to enhance layout professionalism and flow is highlighted, emphasizing the use of vertical guides for aligning type and design elements.', 'Tips on creating block sections and aligning elements to achieve a cohesive layout are provided, with a suggestion to place type elements on the baseline for a professional appearance.', 'The technique of emphasizing type elements through scale and contrast is discussed, with a focus on using the WCAG 2.0 color contrast guidelines and a plugin called Stark for ensuring accessibility.', 'The concept of creating a professional layout with block sections and design elements is explained, with an example of placing a logo within the design for a coherent visual representation.']}], 'duration': 255.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE543505.jpg', 'highlights': ['Emphasizing the importance of equal white space or negative space around elements for good alignment and proximity.', 'Creating two blocks with high contrast colors, emphasizing their visibility and the effect of different overlays.', 'The importance of guide placement to enhance layout professionalism and flow is highlighted, emphasizing the use of vertical guides for aligning type and design elements.', 'Tips on creating block sections and aligning elements to achieve a cohesive layout are provided, with a suggestion to place type elements on the baseline for a professional appearance.', 'The technique of emphasizing type elements through scale and contrast is discussed, with a focus on using the WCAG 2.0 color contrast guidelines and a plugin called Stark for ensuring accessibility.']}, {'end': 1280.559, 'segs': [{'end': 961.159, 'src': 'embed', 'start': 932.984, 'weight': 2, 'content': [{'end': 936.246, 'text': "So let's take a look at another example.", 'start': 932.984, 'duration': 3.262}, {'end': 945.031, 'text': "I think we'll stick with the same color scheme, but this time we'll do a little bit more unique, perhaps risky things.", 'start': 936.726, 'duration': 8.305}, {'end': 948.413, 'text': "And I'll show you exactly what I mean here in a second.", 'start': 946.232, 'duration': 2.181}, {'end': 956.337, 'text': "So I think we'll keep We'll keep this, the headline, or not the headline, the logo in the navigation.", 'start': 948.873, 'duration': 7.464}, {'end': 961.159, 'text': "This time, let's just put, you know, sometimes it's all a matter of just experimenting random stuff.", 'start': 957.017, 'duration': 4.142}], 'summary': 'Experimenting with unique and risky design elements using the same color scheme in a second example.', 'duration': 28.175, 'max_score': 932.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE932984.jpg'}, {'end': 1028.653, 'src': 'embed', 'start': 1005.632, 'weight': 5, 'content': [{'end': 1012.819, 'text': "Now I'm also doing something a little bit different, though, because I've created this high contrast element with a block,", 'start': 1005.632, 'duration': 7.187}, {'end': 1015.201, 'text': 'but this is also a high contrast element,', 'start': 1012.819, 'duration': 2.382}, {'end': 1025.651, 'text': "but I'm choosing to and this is something that we've seen in recent design trends to intersect the type and overlap it on top of another block of high contrast block.", 'start': 1015.201, 'duration': 10.45}, {'end': 1028.653, 'text': 'This will work with large type.', 'start': 1026.852, 'duration': 1.801}], 'summary': 'High contrast design trend involves overlapping type with blocks for impact.', 'duration': 23.021, 'max_score': 1005.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE1005632.jpg'}, {'end': 1144.648, 'src': 'embed', 'start': 1082.549, 'weight': 1, 'content': [{'end': 1085.03, 'text': "It's also right here.", 'start': 1082.549, 'duration': 2.481}, {'end': 1089.893, 'text': 'in here, all right.', 'start': 1087.853, 'duration': 2.04}, {'end': 1096.334, 'text': "so let's say, for instance, you know, in this one we took this, this head, this headline or this, the sub headline um,", 'start': 1089.893, 'duration': 6.441}, {'end': 1100.055, 'text': 'right here and we put it underneath it like on this line.', 'start': 1096.334, 'duration': 3.721}, {'end': 1108.957, 'text': "well, let's go ahead and put it over here, because there's a block, that's that's essentially created from this high contrast type layer.", 'start': 1100.055, 'duration': 8.902}, {'end': 1113.077, 'text': 'so we can put this down now.', 'start': 1108.957, 'duration': 4.12}, {'end': 1125.036, 'text': "perhaps we'll fill this all the way out, um, and we'll around 27 or so, and let's get the line height correct for this.", 'start': 1113.077, 'duration': 11.959}, {'end': 1126.737, 'text': "yeah, that'll probably be pretty good.", 'start': 1125.036, 'duration': 1.701}, {'end': 1137.384, 'text': "so i'm going to drag it all the way down and then i'm going to go ahead and put our lorem ipsum text fill with placeholder.", 'start': 1126.737, 'duration': 10.647}, {'end': 1144.648, 'text': "all right, i might want to make this so it's just like three, all right.", 'start': 1137.384, 'duration': 7.264}], 'summary': 'Adjustments made to text layout for better readability and aesthetics.', 'duration': 62.099, 'max_score': 1082.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE1082549.jpg'}, {'end': 1257.744, 'src': 'embed', 'start': 1227.503, 'weight': 0, 'content': [{'end': 1235.725, 'text': "that same amount of white space that's from the bottom of that type to the top of this container that i just added.", 'start': 1227.503, 'duration': 8.222}, {'end': 1239.827, 'text': "so we'll scale down slightly and that's a little bit better, All right.", 'start': 1235.725, 'duration': 4.102}, {'end': 1242.75, 'text': "so here let's put like a photograph.", 'start': 1239.827, 'duration': 2.923}, {'end': 1244.052, 'text': "So we'll select it.", 'start': 1243.191, 'duration': 0.861}, {'end': 1246.855, 'text': "There's a plugin called Photo Splash that you can get.", 'start': 1244.793, 'duration': 2.062}, {'end': 1250.86, 'text': "And we can just put like, I'll put guitar.", 'start': 1247.817, 'duration': 3.043}, {'end': 1255.807, 'text': "Maybe we'll choose that one.", 'start': 1254.886, 'duration': 0.921}, {'end': 1257.744, 'text': 'Nice Okay.', 'start': 1256.883, 'duration': 0.861}], 'summary': 'Adding a photograph using photo splash plugin and selecting a guitar image.', 'duration': 30.241, 'max_score': 1227.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE1227503.jpg'}], 'start': 801.201, 'title': 'Website design elements', 'summary': 'Covers website alignment, space optimization, and design layout, emphasizing correct alignment, addition of quick navigation, and use of contrast in design layouts. it also provides examples of rearranging blocks and highlights the importance of choosing complementary or contrasting photographs.', 'chapters': [{'end': 859, 'start': 801.201, 'title': 'Website alignment and space optimization', 'summary': 'Discusses the process of adjusting website elements for better alignment and space optimization, demonstrating the changes made and suggesting the addition of a quick navigation feature. the speaker emphasizes the importance of correct alignment and provides examples of rearranging blocks.', 'duration': 57.799, 'highlights': ['The speaker demonstrates the process of adjusting website elements for better alignment and space optimization.', 'The speaker suggests the addition of a quick navigation feature to the website.', 'The importance of correct alignment in website design is emphasized, with examples of rearranging blocks provided.']}, {'end': 1280.559, 'start': 859, 'title': 'Design layout and contrast', 'summary': 'Discusses the use of contrast in design layouts, emphasizing the importance of creating blocks and watermarks, experimenting with unique layouts, and considering the intersection of high-contrast elements. it also touches on the importance of choosing photographs that complement or contrast well with the background.', 'duration': 421.559, 'highlights': ['The importance of creating blocks and watermarks in design layouts is emphasized, allowing for more freedom in placement and avoiding distractions. High contrast elements should be used carefully to maintain balance. Importance of blocks and watermarks, freedom in placement, avoiding distractions, careful use of high contrast elements', 'The chapter encourages experimentation with unique layouts and risky elements to create an interesting design. Encouragement of experimentation, unique layouts, risky elements, creating interesting design', 'Highlighting the intersection of high-contrast elements and the importance of choosing photographs that complement or contrast well with the background. Intersection of high-contrast elements, importance of choosing complementary or contrasting photographs']}], 'duration': 479.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE801201.jpg', 'highlights': ['The speaker demonstrates the process of adjusting website elements for better alignment and space optimization.', 'The speaker suggests the addition of a quick navigation feature to the website.', 'The importance of correct alignment in website design is emphasized, with examples of rearranging blocks provided.', 'The importance of creating blocks and watermarks in design layouts is emphasized, allowing for more freedom in placement and avoiding distractions.', 'The chapter encourages experimentation with unique layouts and risky elements to create an interesting design.', 'Highlighting the intersection of high-contrast elements and the importance of choosing photographs that complement or contrast well with the background.']}, {'end': 2429.914, 'segs': [{'end': 1309.633, 'src': 'embed', 'start': 1282.061, 'weight': 1, 'content': [{'end': 1285.323, 'text': "I think I will personally, I'll choose..", 'start': 1282.061, 'duration': 3.262}, {'end': 1289.193, 'text': 'choose that one.', 'start': 1287.791, 'duration': 1.402}, {'end': 1297.301, 'text': "okay, so now we have this, this, uh, this graphic here, and we have another block that's created from it.", 'start': 1289.193, 'duration': 8.108}, {'end': 1302.185, 'text': "so, for instance, i'll just direct this one it's at the top.", 'start': 1297.301, 'duration': 4.884}, {'end': 1304.668, 'text': 'um, and this right here, this whole container is.', 'start': 1302.185, 'duration': 2.483}, {'end': 1307.711, 'text': "it's now is its own container that you can put content in.", 'start': 1304.668, 'duration': 3.043}, {'end': 1309.633, 'text': 'so i could take this type.', 'start': 1307.711, 'duration': 1.922}], 'summary': 'Discussing graphic design and creating a container for content.', 'duration': 27.572, 'max_score': 1282.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE1282061.jpg'}, {'end': 2114.682, 'src': 'embed', 'start': 2077.782, 'weight': 2, 'content': [{'end': 2079.121, 'text': 'Maybe this will just be like a quote.', 'start': 2077.782, 'duration': 1.339}, {'end': 2083.004, 'text': 'So the quote would be like, I thought I was going to die.', 'start': 2079.222, 'duration': 3.782}, {'end': 2087.784, 'text': 'Okay Something like that.', 'start': 2083.024, 'duration': 4.76}, {'end': 2089.826, 'text': "Let's end that quote.", 'start': 2089.045, 'duration': 0.781}, {'end': 2095.965, 'text': "right. let's bring this up right, align it.", 'start': 2091.539, 'duration': 4.426}, {'end': 2103.214, 'text': "maybe we'll put it like right there, maybe make it larger, all right.", 'start': 2095.965, 'duration': 7.249}, {'end': 2104.535, 'text': "so let's get rid of these.", 'start': 2103.214, 'duration': 1.321}, {'end': 2106.198, 'text': 'uh, right there.', 'start': 2104.535, 'duration': 1.663}, {'end': 2114.682, 'text': "And now we have kind of an issue, because there's quite a bit of white space in the middle section and I don't really like that.", 'start': 2107.236, 'duration': 7.446}], 'summary': 'Editing quote and adjusting layout to eliminate white space.', 'duration': 36.9, 'max_score': 2077.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE2077782.jpg'}, {'end': 2228.703, 'src': 'embed', 'start': 2196.724, 'weight': 0, 'content': [{'end': 2203.729, 'text': "We could probably possibly just put it right here because this aligns to this container that's created just from this text here.", 'start': 2196.724, 'duration': 7.005}, {'end': 2209.153, 'text': 'And that way, we have an equal amount of white space from the top down to the bottom.', 'start': 2204.51, 'duration': 4.643}, {'end': 2214.957, 'text': "So as you can see, it's a lot of experimenting.", 'start': 2211.835, 'duration': 3.122}, {'end': 2222.999, 'text': 'We could even, I kind of want to move this stuff down or perhaps just move these elements down.', 'start': 2217.796, 'duration': 5.203}, {'end': 2225.901, 'text': 'There we go.', 'start': 2223.019, 'duration': 2.882}, {'end': 2228.703, 'text': 'We could pull this out.', 'start': 2227.722, 'duration': 0.981}], 'summary': 'Experimenting with layout alignment and white space optimization.', 'duration': 31.979, 'max_score': 2196.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE2196724.jpg'}], 'start': 1282.061, 'title': 'Designing layouts and ui techniques', 'summary': 'Covers designing layouts using graphic elements, experimenting with color schemes, creating web design layouts, and unique ui design techniques to achieve visual hierarchy, balance, and consistency.', 'chapters': [{'end': 1461.94, 'start': 1282.061, 'title': 'Designing a layout with graphic elements', 'summary': 'Illustrates the process of designing a layout using graphic elements, including resizing, aligning, and adding design elements to reinforce the visual hierarchy and layout structure.', 'duration': 179.879, 'highlights': ['The process involves resizing and realigning elements to reinforce visual hierarchy and improve layout structure.', 'Adding design elements to reinforce the layout and visual hierarchy is demonstrated, showcasing the importance of maintaining a clear visual structure.', 'Demonstrating the process of creating a call to action button and additional design elements to enhance the layout and visual hierarchy.']}, {'end': 1585.954, 'start': 1461.94, 'title': 'Design fundamentals and color schemes', 'summary': 'Discusses experimenting with different shapes and containers while adhering to proximity and padding, and the importance of usability testing to determine the effectiveness of different layouts and color schemes.', 'duration': 124.014, 'highlights': ['The importance of usability testing to determine the effectiveness of different layouts and color schemes, as both designs adhere to solid design fundamentals.', 'Emphasizing the importance of adhering to proximity and padding in design to ensure proper white space, with CSS terms used for explanation.', 'Exploring different ways to feature a headline, such as de-emphasizing certain words and changing the alignment, to create varied design examples.', 'Suggesting experimenting with different shapes, containers, and color schemes to create diverse design options for usability testing.', 'Discussing the consideration of white space and outer space in design, highlighting the significance of space around and within elements.']}, {'end': 1798.992, 'start': 1587.616, 'title': 'Web design layout creation', 'summary': 'Discusses the process of creating a web design layout, including the placement of blocks, images, and text to achieve a visually appealing and balanced design.', 'duration': 211.376, 'highlights': ['The process involves placing blocks, images, and text to create a visually appealing layout.', 'The placement of blocks, images, and text is done strategically to achieve a balanced design.', 'The chapter emphasizes the importance of spacing and alignment to enhance the overall layout.', 'The layout is iteratively adjusted to fill out the space and make elements larger for a more visually appealing design.']}, {'end': 2429.914, 'start': 1800.808, 'title': 'Ui design techniques', 'summary': 'Demonstrates the creation of a unique ui design layout, incorporating 45-degree angle lines and different block elements, aiming to achieve balance and visual consistency through experimentation and adjustments.', 'duration': 629.106, 'highlights': ['The layout incorporates unique design elements, such as 45-degree angle lines and different block sections, to create a visually appealing UI design.', 'The designer focuses on achieving balance and visual consistency through experimentation and adjustment of elements, emphasizing the importance of time, practice, and development of UI design fundamentals.', 'The demonstration showcases the use of overlapping elements to encase important design components, such as photographs and type, within the UI design layout.', 'The chapter concludes with a promotion for the upcoming UI design course, emphasizing the importance of continued learning and practice in UI design.', 'The designer encourages new UI designers not to get discouraged and mentions the upcoming release of a UI design course on scrimba.com in early 2020.']}], 'duration': 1147.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bxm89gSRUOE/pics/bxm89gSRUOE1282061.jpg', 'highlights': ['Creating web design layouts with clear visual structure and hierarchy.', 'Importance of usability testing for different layouts and color schemes.', 'Strategic placement of blocks, images, and text for balanced design.', 'Incorporating unique design elements for visually appealing UI design.']}], 'highlights': ['Emphasizes the importance of branching out from standard boring web designs and creating unique layouts that some people may have never seen before.', 'Introduces a layout building technique for unique and non-traditional web designs, emphasizing adherence to UI design fundamentals and breaking away from typical templates.', 'Encourages subscribers to start thinking about simplifying layout construction and mentions the versatility of using any preferred app for the process.', 'The concept of using containers for high contrast elements is explained, with examples such as buttons serving as containers with text or icons inside.', "The importance of contrast is emphasized, with the example of ensuring a high contrast for elements like type or icons against the container's background color.", 'The significance of color and its complementarity is highlighted, stressing the need for colors to work well together.', 'The relevance of scale in design is discussed, emphasizing the importance of avoiding elements that are too small or too large.', 'The impact of proximity and alignment on design is underscored, with the example of how a misplaced button can disrupt the overall layout.', 'The concept of visual hierarchy in UI design is introduced, emphasizing its role in managing multiple elements within a layout.', 'Choosing the appropriate block type can significantly enhance the alignment and layout of design elements.', 'The creation of columns and rows when creating a block can assist in maintaining alignment in the design.', 'Illustrating the clear path created by blocks can greatly aid in alignment when adding other elements to the design.', 'Blocks in design can help extend vertically and horizontally, aiding in alignment and layout.', 'The importance of aligning elements for a better flow and aesthetics in web design is emphasized, with examples provided to illustrate the impact.', 'Utilizing tools like the Lorem Ipsum plugin to demonstrate the process of aligning elements and choosing a color scheme is mentioned, showcasing practical implementation in web design.', 'Emphasizing the importance of equal white space or negative space around elements for good alignment and proximity.', 'Creating two blocks with high contrast colors, emphasizing their visibility and the effect of different overlays.', 'The importance of guide placement to enhance layout professionalism and flow is highlighted, emphasizing the use of vertical guides for aligning type and design elements.', 'Tips on creating block sections and aligning elements to achieve a cohesive layout are provided, with a suggestion to place type elements on the baseline for a professional appearance.', 'The technique of emphasizing type elements through scale and contrast is discussed, with a focus on using the WCAG 2.0 color contrast guidelines and a plugin called Stark for ensuring accessibility.', 'The speaker demonstrates the process of adjusting website elements for better alignment and space optimization.', 'The speaker suggests the addition of a quick navigation feature to the website.', 'The importance of correct alignment in website design is emphasized, with examples of rearranging blocks provided.', 'The importance of creating blocks and watermarks in design layouts is emphasized, allowing for more freedom in placement and avoiding distractions.', 'The chapter encourages experimentation with unique layouts and risky elements to create an interesting design.', 'Highlighting the intersection of high-contrast elements and the importance of choosing photographs that complement or contrast well with the background.', 'Creating web design layouts with clear visual structure and hierarchy.', 'Importance of usability testing for different layouts and color schemes.', 'Strategic placement of blocks, images, and text for balanced design.', 'Incorporating unique design elements for visually appealing UI design.']}