WEBVTT 00:00:03.960 --> 00:00:05.800 To create a proper hierarchy. 00:00:05.800 --> 00:00:09.240 We're going to use one of the gestalt rules called proximity. 00:00:09.240 --> 00:00:12.760 And of course, if you know the Gestalt rules, you should 00:00:12.840 --> 00:00:14.160 try to follow all of them. 00:00:14.160 --> 00:00:17.160 But I believe proximity is the most important one, 00:00:17.200 --> 00:00:20.200 because in many cases we're using very simple shapes. 00:00:20.360 --> 00:00:24.680 So the distance between those shapes is what actually makes the entire layout. 00:00:24.760 --> 00:00:27.360 And this rule says that objects placed close 00:00:27.360 --> 00:00:30.360 to each other are automatically understood as a group. 00:00:30.600 --> 00:00:33.600 So in our case, how many groups do we have here? 00:00:33.720 --> 00:00:37.600 So we have the group of 12 00:00:37.680 --> 00:00:40.080 bluish green circles. 00:00:40.080 --> 00:00:44.160 Then we have a group of three in green circles and then another group 00:00:44.160 --> 00:00:45.840 of three green circles. 00:00:45.840 --> 00:00:49.280 But then we also have a group of all the circles combined. 00:00:49.360 --> 00:00:53.160 And this is how this grouping and proximity works. 00:00:53.240 --> 00:00:54.160 You need to be aware 00:00:54.160 --> 00:00:57.880 that there are groups within groups and there can be groups within groups. 00:00:57.960 --> 00:01:01.920 So let's take one of our examples from before. 00:01:02.000 --> 00:01:05.000 And if we add grouping on top of it, 00:01:05.240 --> 00:01:10.240 you'll see that we can just by proximity, establish a couple of groups here. 00:01:10.280 --> 00:01:14.760 The emoji is one group, then the text and the other text is the second group. 00:01:14.760 --> 00:01:18.640 And then the pattern with the other clickable element is the third group. 00:01:18.720 --> 00:01:22.360 And of course, you can also consider the emoji 00:01:22.360 --> 00:01:26.160 being one group and all of the content is being another group. 00:01:26.160 --> 00:01:30.040 It's not just how you approach it and how you're actually going to work it in. 00:01:30.120 --> 00:01:34.720 Additional examples of this design, because it's not just going to be 00:01:34.800 --> 00:01:39.440 just this one version, but the thing is that we should be able 00:01:39.440 --> 00:01:44.360 to consistently replicate those groups in other versions of that screen. 00:01:44.400 --> 00:01:47.520 So if we created those groups and those distances 00:01:47.520 --> 00:01:50.520 between the groups, they need to be consistent. 00:01:50.640 --> 00:01:54.360 And this is what you should use basically to create that consistency. 00:01:54.440 --> 00:01:59.240 So if you have a distance between the two groups, which are just the whole windows, 00:01:59.320 --> 00:02:02.280 the distance should always be bigger than the distance 00:02:02.280 --> 00:02:06.880 between individual elements within the groups, within a group. 00:02:06.960 --> 00:02:12.240 So the further down we go in a group, the smaller the distance can be. 00:02:12.320 --> 00:02:15.680 That allows our brain to process it naturally and really quickly. 00:02:15.920 --> 00:02:16.800 And we'll see that. 00:02:16.800 --> 00:02:18.960 Okay, we have two separate 00:02:18.960 --> 00:02:22.640 big groups of things and then they are divided into smaller groups. 00:02:22.720 --> 00:02:25.480 And then you can use that rule to organize it further. 00:02:25.480 --> 00:02:30.200 So you can use another smaller square to 00:02:30.280 --> 00:02:33.040 place between elements within those groups. 00:02:33.040 --> 00:02:35.840 Or you can even use the same one because you can see 00:02:35.840 --> 00:02:39.400 you could use the Red Square here between the large title 00:02:39.400 --> 00:02:43.080 and the text as well and the bottom and the smaller text underneath. 00:02:43.280 --> 00:02:47.720 And that would still fit so that or a smaller one would work here. 00:02:47.800 --> 00:02:51.480 And this is really important because that's the whole rule of clarity 00:02:51.560 --> 00:02:54.080 and layout that is really important to follow. 00:02:54.080 --> 00:02:56.560 So those distances cannot be random. 00:02:56.560 --> 00:03:00.960 They need to be based on something and they need to be based on 00:03:01.040 --> 00:03:02.680 the natural hierarchy. 00:03:02.680 --> 00:03:06.800 So we quickly understand that, okay, this is a group and this is a group within 00:03:06.800 --> 00:03:09.000 a group, and these things are together as well 00:03:09.000 --> 00:03:11.000 because that's going to make it a lot easier. 00:03:11.000 --> 00:03:13.960 Grouping is also important with the distances. 00:03:13.960 --> 00:03:18.920 For example, this is one of the largest, like more common problems that I've seen 00:03:19.000 --> 00:03:23.320 in many forms designed by junior designers is not having 00:03:23.400 --> 00:03:26.960 enough space between the label and the previous field. 00:03:27.040 --> 00:03:30.280 And that creates an effect where if there is a longer 00:03:30.440 --> 00:03:33.920 a forum where coming it through with our eyes 00:03:33.920 --> 00:03:37.840 and we don't really know which field that label belongs to, 00:03:37.920 --> 00:03:41.840 so just increase the distance by two or three times between the fields 00:03:41.840 --> 00:03:45.040 and then four or six times between the title and the form. 00:03:45.120 --> 00:03:48.840 And by having that consistency with all the other elements on the site, 00:03:48.840 --> 00:03:54.000 so like if smaller distances extend, the larger one is to extend keep the X 00:03:54.000 --> 00:03:57.760 and to X across all of the other things to keep that consistent 00:03:57.760 --> 00:04:01.040 grading of all of those elements.