0 1 00:00:00,390 --> 00:00:05,670 Take a look at this hero section design. This design isn't bad at all, but there is one thing wrong 1 2 00:00:05,670 --> 00:00:06,270 with it. 2 3 00:00:06,270 --> 00:00:11,740 See if you can notice. Individually, each element is very well designed, but composition together looks 3 4 00:00:11,740 --> 00:00:12,690 somewhat off. 4 5 00:00:12,690 --> 00:00:19,260 If I were to draw lines on the edges of each element, you'll see that elements aren't really lined up. 5 6 00:00:19,260 --> 00:00:20,860 Fixing this is quite easy. 6 7 00:00:20,880 --> 00:00:23,820 We just line things up, as much as we can. 7 8 00:00:24,750 --> 00:00:31,080 A simple trick changed the same design looking from clumsy, to orderly and polished. 8 9 00:00:31,080 --> 00:00:37,560 Now, if I was to draw lines on the edges, you'd see a simplistic grid with two main vertical axes. 9 10 00:00:37,590 --> 00:00:41,220 Why does aligning objects make a composition look better? 10 11 00:00:41,220 --> 00:00:45,640 It's exactly the same reason why this room, looks better than this room. 11 12 00:00:45,660 --> 00:00:53,610 It's the order. We avoid chaos and seek order. And everything that is orderly, symmetric and organized, will 12 13 00:00:53,610 --> 00:00:58,620 be perceived as more beautiful, than anything that is chaotic and disorderly. 13 14 00:00:58,620 --> 00:01:01,600 Some of the most important design rules are about layout. 14 15 00:01:01,650 --> 00:01:06,060 It's a question of where to put things, how to arrange them, what comes after what. 15 16 00:01:06,270 --> 00:01:11,970 In the upcoming lessons, we'll be talking about all the design techniques and rules, related to a layout. 16 17 00:01:11,970 --> 00:01:14,160 This one is about alignment. 17 18 00:01:14,190 --> 00:01:21,060 Probably one of the simplest, the most basic, but one of the most powerful design rules out there. 18 19 00:01:21,060 --> 00:01:26,850 Just a simple alignment, can make something look designed, on the other hand, misalignment will make it 19 20 00:01:26,880 --> 00:01:29,260 look sloppy and amateur work. 20 21 00:01:29,290 --> 00:01:34,560 Many web developers, who don't have a background in design, will just drop elements on the page randomly 21 22 00:01:34,560 --> 00:01:35,640 wherever they fit. 22 23 00:01:35,640 --> 00:01:39,900 This makes the page look messy and not attractive at all. 23 24 00:01:40,080 --> 00:01:47,190 But, if we take every chance to align objects with each other, then we create something that looks aesthetically 24 25 00:01:47,490 --> 00:01:48,540 more attractive. 25 26 00:01:51,550 --> 00:01:55,170 There are six ways you can align objects. Left alignment. 26 27 00:01:55,180 --> 00:02:01,630 This is the most natural way of aligning things, because the way we read in Western languages, from left 27 28 00:02:01,840 --> 00:02:08,760 to right. It feels the most natural to our eyes, to start scanning for objects, from top left corner. 28 29 00:02:08,770 --> 00:02:11,200 Then you have the center alignment. 29 30 00:02:11,200 --> 00:02:15,070 This is frequently seen in web design, less in print design. 30 31 00:02:15,400 --> 00:02:21,100 If you're designing for Arabic, Hebrew and other right-to-left languages, then most natural alignment 31 32 00:02:21,430 --> 00:02:26,580 would be right alignment. Not just for text, but for other objects too. 32 33 00:02:26,650 --> 00:02:33,010 And there are three, similar ways, to align objects on the horizontal axis. Top alignment, center alignment 33 34 00:02:33,010 --> 00:02:36,640 again but horizontal axis, and the bottom alignment. 34 35 00:02:36,640 --> 00:02:42,460 Almost all design software will have alignment action buttons and they will use these exact icons to 35 36 00:02:42,460 --> 00:02:44,080 represent each. Figma uses 36 37 00:02:44,080 --> 00:02:46,660 these icons too and I'll show you where they are. 37 38 00:02:46,720 --> 00:02:51,160 In this example, you can see that we've aligned objects on their left edges. 38 39 00:02:54,050 --> 00:02:56,980 Alignment is the first step for a good layout. 39 40 00:02:56,990 --> 00:03:02,990 When you start lining things up, you'll see that the layout starts to form some sort of a structure. 40 41 00:03:02,990 --> 00:03:05,060 This is called the grid. 41 42 00:03:05,060 --> 00:03:11,060 It's the way of organizing elements on the page, to put them in a recognizable structure. 42 43 00:03:11,060 --> 00:03:16,300 But what design really likes: the grid, that is divided in equal sizes. 43 44 00:03:16,310 --> 00:03:24,020 So, if we were to draw eight equal-width columns, that are spaced out evenly. And we took all our objects 44 45 00:03:24,050 --> 00:03:29,840 and aligned them with these columns. Then we would get a layout, that feels so much more balanced and 45 46 00:03:29,840 --> 00:03:30,600 designed. 46 47 00:03:30,740 --> 00:03:36,180 And the final step in this process is to reuse the same values as much as possible. 47 48 00:03:36,200 --> 00:03:42,240 The vertical gaps between objects are all 30 pixels, but the horizontal gap is 60 pixels. 48 49 00:03:42,400 --> 00:03:47,090 Right move here would be, to make that horizontal gap 30 as well. 49 50 00:03:47,360 --> 00:03:52,160 Now we have a truly balanced layout. Why is the grid so important? 50 51 00:03:52,160 --> 00:03:58,500 It gives the audience the sense of clarity. The grid lines aren't actually drawn. Right? You know, they are implied. 51 52 00:03:58,570 --> 00:04:02,100 And they are there. And audience sort of feels it. 52 53 00:04:02,150 --> 00:04:09,290 And when something looks predictable and familiar, because of the repeating grid, the audience and 53 54 00:04:09,290 --> 00:04:14,930 the viewer, will trust the website more. And they'll understand that, you know, this is the website that 54 55 00:04:14,930 --> 00:04:16,130 is not going to waste their time. 55 56 00:04:19,000 --> 00:04:23,080 The grid rule is flexible, I don't always design inside the grid. 56 57 00:04:23,280 --> 00:04:28,650 Sometimes I do, sometimes I ignore it. Sometimes I have a grid and then you know, I let things sometimes 57 58 00:04:28,650 --> 00:04:34,410 go out of the constraints. And I know many designers do exact the same, which is you know, they might not 58 59 00:04:34,410 --> 00:04:40,920 use the grid completely, or they might somehow have it, but you know, use it more in a flexible manner. 59 60 00:04:41,010 --> 00:04:47,370 But for you, in the beginning, I want you to use the grid, because for the beginning and when you're learning 60 61 00:04:47,370 --> 00:04:54,480 how to design, it's just a really amazing way how to, kinda, ingrain this great design habit inside 61 62 00:04:54,480 --> 00:04:55,050 of you. 62 63 00:04:55,050 --> 00:04:59,900 And then, later on, you can kinda go about it, a bit you know, more flexible way. 63 64 00:04:59,910 --> 00:05:05,810 We're going to do a practice exercise after this lesson. And I'm going to show you how to easily create 64 65 00:05:05,810 --> 00:05:10,770 a grid inside Figma, and how to design within the grid. 65 66 00:05:10,770 --> 00:05:17,760 Most of the design rules, that we're going to be speaking in this course, can be broken. Although if we're 66 67 00:05:17,760 --> 00:05:23,460 breaking a design rule, we have to do it with an intention. Because if we're not doing it with an intention, 67 68 00:05:23,480 --> 00:05:27,050 and if we're not really thinking about it, probably we're being sloppy. 68 69 00:05:27,060 --> 00:05:35,550 One very common design layout to use, in web design, is a center layout. Which doesn't really fall under 69 70 00:05:35,820 --> 00:05:37,230 a proper grid. 70 71 00:05:37,230 --> 00:05:38,920 Let's take a look at this example. 71 72 00:05:38,930 --> 00:05:45,360 There is no prominent grid on this section, the art is free-flowing, and the elements in the middle aren't 72 73 00:05:45,360 --> 00:05:46,830 creating any sort of grid. 73 74 00:05:47,280 --> 00:05:54,000 However, it still looks good and doesn't look sloppy at all. Because at least there is an alignment. 74 75 00:05:54,000 --> 00:05:57,840 You can break grid, but you can rarely break an alignment. 75 76 00:05:57,960 --> 00:06:06,180 We can feel the imaginary vertical line, these elements, are aligned with. In print design, they rarely use 76 77 00:06:06,180 --> 00:06:07,470 center alignment. 77 78 00:06:08,010 --> 00:06:14,190 However, unlike print the website can be viewed on hundreds of different screen sizes, anywhere from 78 79 00:06:14,190 --> 00:06:17,130 our tiny smartphone to a large TV screen. 79 80 00:06:17,130 --> 00:06:20,030 Because of this our websites have become responsive. 80 81 00:06:20,040 --> 00:06:24,660 The content can shrink or expand, depending on the screen it's being viewed on. In print, 81 82 00:06:24,660 --> 00:06:32,700 the designer would mold the elements to his absolute will, whatever is printed, isn't going to change 82 83 00:06:32,700 --> 00:06:36,480 shape or size. So, you know, he would achieve an optimal result. 83 84 00:06:36,480 --> 00:06:40,540 This is why you see crazy layouts in magazines, but not in web. 84 85 00:06:40,590 --> 00:06:43,320 So that's alignment and grid in theory. 85 86 00:06:43,320 --> 00:06:49,290 Up next we're going to practice alignment and grid, so you can make it as part of your design process.