Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,442 --> 00:00:02,275 Let's talk about 2 2 00:00:02,275 --> 00:00:06,185 another very important aspect of visual design: 3 3 00:00:06,185 --> 00:00:09,598 How to design a layout using whitespace. 4 4 00:00:09,598 --> 00:00:13,360 Every piece of good design uses whitespace well. 5 5 00:00:13,360 --> 00:00:17,563 In fact, if you want to make a web site that looks designed, 6 6 00:00:17,563 --> 00:00:18,886 you need a lot of whitespace in 7 7 00:00:18,886 --> 00:00:21,553 the correct places on your site. 8 8 00:00:22,973 --> 00:00:25,109 So, what is whitespace? 9 9 00:00:25,109 --> 00:00:29,033 Whitespace is just space where there isn't any stuff. 10 10 00:00:29,033 --> 00:00:30,241 Easy. 11 11 00:00:30,241 --> 00:00:32,609 Whitespace absolutely is the key to create 12 12 00:00:32,609 --> 00:00:35,349 a clean and simple look and feel. 13 13 00:00:35,349 --> 00:00:38,484 This web site uses whitespace quite well. 14 14 00:00:38,484 --> 00:00:41,595 Look at the space between the icons and the text, 15 15 00:00:41,595 --> 00:00:45,403 the space between sections, between the section's headings 16 16 00:00:45,403 --> 00:00:49,188 and its content, and between paragraphs. 17 17 00:00:49,188 --> 00:00:52,393 This makes the web site look clean and inviting, 18 18 00:00:52,393 --> 00:00:56,560 all because it uses whitespace in a well-executed way. 19 19 00:00:57,896 --> 00:01:01,239 And this is the same web site, but without whitespace. 20 20 00:01:01,239 --> 00:01:03,306 Do you see the big difference? 21 21 00:01:03,306 --> 00:01:05,558 There is like no room to breathe here. 22 22 00:01:05,558 --> 00:01:08,786 Everything looks bulky and unthoughtful. 23 23 00:01:08,786 --> 00:01:11,119 Definitely not what we want. 24 24 00:01:12,617 --> 00:01:16,681 So based on this, the first guidelines are quite simple, 25 25 00:01:16,681 --> 00:01:19,653 and it's actually easier than it may sound. 26 26 00:01:19,653 --> 00:01:22,695 Just put whitespace between your elements. 27 27 00:01:22,695 --> 00:01:26,108 Put whitespace between your groups of elements. 28 28 00:01:26,108 --> 00:01:29,707 Put whitespace between your web site's sections. 29 29 00:01:29,707 --> 00:01:32,842 But don't exaggerate because when elements 30 30 00:01:32,842 --> 00:01:35,558 are spaced out too much, they may lose 31 31 00:01:35,558 --> 00:01:38,624 the relationships to one another. 32 32 00:01:38,624 --> 00:01:41,271 So don't use too much whitespace. 33 33 00:01:41,271 --> 00:01:43,778 You have to be careful with this. 34 34 00:01:43,778 --> 00:01:46,681 And with this, you will see how your web site 35 35 00:01:46,681 --> 00:01:50,848 will look nice and clean, professionally designed. 36 36 00:01:52,555 --> 00:01:55,133 Now with the whitespace that you add, 37 37 00:01:55,133 --> 00:01:57,478 you describe invisible relationships 38 38 00:01:57,478 --> 00:02:00,659 between the elements of your web site. 39 39 00:02:00,659 --> 00:02:03,608 You communicate how the pieces of information relate 40 40 00:02:03,608 --> 00:02:07,184 to one another, and this is very important. 41 41 00:02:07,184 --> 00:02:09,669 So whitespace is closely related 42 42 00:02:09,669 --> 00:02:13,268 to something we call visual hierarchy. 43 43 00:02:13,268 --> 00:02:16,611 This is the organization of your content. 44 44 00:02:16,611 --> 00:02:19,676 Let's go back to our previous web site example. 45 45 00:02:19,676 --> 00:02:22,115 Again, the text here is very small, 46 46 00:02:22,115 --> 00:02:24,506 but that's not what matters here. 47 47 00:02:24,506 --> 00:02:26,828 Just look at the way whitespace is used on 48 48 00:02:26,828 --> 00:02:31,008 this web site to define the different sections. 49 49 00:02:31,008 --> 00:02:33,864 We can clearly see where each section begins, 50 50 00:02:33,864 --> 00:02:37,370 just through the correct use of whitespace. 51 51 00:02:37,370 --> 00:02:40,737 And that's what hierarchy is all about, actually. 52 52 00:02:40,737 --> 00:02:44,070 So again, whitespace is really powerful. 53 53 00:02:45,102 --> 00:02:47,355 Hierarchies give your web site order, 54 54 00:02:47,355 --> 00:02:51,093 and so it's kind of important that you get it right. 55 55 00:02:51,093 --> 00:02:52,951 And how do you do it? 56 56 00:02:52,951 --> 00:02:56,248 Just design with having three simple guidelines in mind, 57 57 00:02:56,248 --> 00:02:58,454 and you should be fine. 58 58 00:02:58,454 --> 00:03:02,308 First, define where you want your audience to look first. 59 59 00:03:02,308 --> 00:03:05,141 Also, establish a flow that corresponds 60 60 00:03:05,141 --> 00:03:07,556 to your content's message. 61 61 00:03:07,556 --> 00:03:09,971 Because hierarchy is exactly that. 62 62 00:03:09,971 --> 00:03:14,313 It guides the user from one element to the next. 63 63 00:03:14,313 --> 00:03:18,480 And then, use whitespace to build that exact flow. 64 64 00:03:19,979 --> 00:03:23,670 So concluding, in this lecture, we learned that whitespace 65 65 00:03:23,670 --> 00:03:27,837 is a powerful tool to create well-defined content hierarchy. 66 66 00:03:28,756 --> 00:03:30,288 Using whitespace right can make 67 67 00:03:30,288 --> 00:03:33,284 a web site look clean and simple. 68 68 00:03:33,284 --> 00:03:36,534 So this was quite an important lecture. 5975