WEBVTT Kind: captions Language: en 00:00:02.260 --> 00:00:04.020 Layout and composition. 00:00:04.020 --> 00:00:06.920 In a way, they're the foundation of design. 00:00:06.920 --> 00:00:12.060 They give your work structure and make it easier to navigate, from the margins on the 00:00:12.060 --> 00:00:16.810 sides... to the content in between. 00:00:16.810 --> 00:00:20.470 Of course, it's not just about working with text. 00:00:20.470 --> 00:00:25.090 Composition matters in other mediums too, like graphic design, web design, and much 00:00:25.090 --> 00:00:26.410 more. 00:00:26.410 --> 00:00:32.140 Without a well-composed layout, your work would basically... fall apart. 00:00:32.140 --> 00:00:36.480 The key to mastering layout and composition is to think like a designer. 00:00:36.480 --> 00:00:39.769 Luckily, it's easier than it sounds. 00:00:39.769 --> 00:00:44.399 There are five basic principles that can help you transform your work and sharpen your eye 00:00:44.399 --> 00:00:45.850 for design. 00:00:45.850 --> 00:00:50.210 Let's start at the top and work our way down. 00:00:50.210 --> 00:00:55.789 Proximity is all about using visual space to show relationships in your content. 00:00:55.789 --> 00:01:00.559 In practice, it's pretty simple—all you have to do is make sure related items are 00:01:00.559 --> 00:01:06.060 grouped together; for example, blocks of text or elements in a graphic. 00:01:06.060 --> 00:01:10.210 Groups that are not related to each other should be separated, to visually emphasize 00:01:10.210 --> 00:01:12.440 their lack of a relationship. 00:01:12.440 --> 00:01:16.720 All in all, this makes your work easier to understand at a glance—whether it's purely 00:01:16.720 --> 00:01:21.500 text or something more visual. 00:01:21.500 --> 00:01:24.700 White space is an important part of every composition. 00:01:24.700 --> 00:01:30.510 Now, this doesn't mean literal "white space"—it just means negative space, like the spaces 00:01:30.510 --> 00:01:36.520 between your content, between lines, and even the outer margins. 00:01:36.520 --> 00:01:41.730 There's no "one way" to use white space correctly, but it's good to understand its purpose. 00:01:41.730 --> 00:01:46.210 White space helps you define and separate different sections; it gives your content 00:01:46.210 --> 00:01:48.270 room to breath. 00:01:48.270 --> 00:01:52.640 If your work ever starts to feel cluttered or uncomfortable… a little white space might 00:01:52.640 --> 00:01:57.330 be just what the doctor ordered. 00:01:57.330 --> 00:02:02.000 Alignment is something you deal with all the time, even if you don't realize it. 00:02:02.000 --> 00:02:07.890 Whenever you type an email or create a document, the text is aligned automatically. 00:02:07.890 --> 00:02:13.299 When aligning objects by yourself (for instance, images or separate text boxes), getting it 00:02:13.299 --> 00:02:15.409 right can be tricky. 00:02:15.409 --> 00:02:18.620 The most important thing is to be consistent. 00:02:18.620 --> 00:02:22.079 Let's take a look at what that means. 00:02:22.079 --> 00:02:26.590 It might help to imagine your content arranged inside of a grid. 00:02:26.590 --> 00:02:30.959 Notice how there's an invisible line centering each image to the text? 00:02:30.959 --> 00:02:36.389 Each grouping is also evenly spaced and aligned, with equal-sized margins. 00:02:36.389 --> 00:02:40.879 It's that attention to detail that makes the composition easier to navigate. 00:02:40.879 --> 00:02:48.349 Without consistent alignment, your work could start to feel disorganized. 00:02:48.349 --> 00:02:52.459 Contrast simply means that one item is different from another. 00:02:52.459 --> 00:02:57.239 In layout and composition, contrast can help you do many things; for example, catch the 00:02:57.239 --> 00:03:02.870 reader's eye, create emphasis, or call attention to something important. 00:03:02.870 --> 00:03:07.950 There are lots of strategies or creating contrast. 00:03:07.950 --> 00:03:14.700 You can use color... adjust the size, shape, or visual weight of an object... or use contrasting 00:03:14.700 --> 00:03:18.209 styles of text. 00:03:18.209 --> 00:03:22.910 Contrast is also closely tied to hierarchy, a visual technique that can help the viewer 00:03:22.910 --> 00:03:24.799 navigate you work. 00:03:24.799 --> 00:03:29.439 In other words, it shows them where to begin and where to go next, using different levels 00:03:29.439 --> 00:03:32.230 of emphasis. 00:03:32.230 --> 00:03:37.209 Establishing hierarchy is simple: just decide which elements you want the reader to notice 00:03:37.209 --> 00:03:40.609 first, then make them stand out. 00:03:40.609 --> 00:03:46.069 High-level or important items are usually larger, bolder, or more eye-catching in some 00:03:46.069 --> 00:03:49.140 way. 00:03:49.140 --> 00:03:54.109 Repetition is a reminder that every project should have a consistent look and feel. 00:03:54.109 --> 00:03:59.790 That means finding ways to reinforce your design by repeating or echoing certain elements. 00:03:59.790 --> 00:04:06.260 For instance, if you have a specific color palette, look for ways to carry it through. 00:04:06.260 --> 00:04:10.790 If you've chosen a special header style, use it every time. 00:04:10.790 --> 00:04:15.529 It's not just for aesthetic reasons—being consistent can also make your work easier 00:04:15.529 --> 00:04:17.030 to read. 00:04:17.030 --> 00:04:26.460 When the viewer knows what to expect, they can relax and focus on the content. 00:04:26.460 --> 00:04:31.650 In many ways, layout and composition are the unsung heroes of design. 00:04:31.650 --> 00:04:35.900 It's easy to overlook their role, but they're part of everything you do. 00:04:35.900 --> 00:04:43.570 A nudge here... some extra white space there... and voila! 00:04:43.570 --> 00:04:51.900 With a little attention to detail, you can create beautiful, professional-looking compositions. 00:04:51.900 --> 00:04:55.750 Thanks for joining us for the basics of layout and composition. 00:04:55.750 --> 00:05:00.820 Check out the rest of our design topics, including typography, color, and images.