WEBVTT

00:00:00.000 --> 00:00:30.360
To create a proper hierarchy.
We're going to use one of the gestalt rules called proximity.
And of course, if you know the Gestalt rules, you should
try to follow all of them.
But I believe proximity is the most important one,
because in many cases we're using very simple shapes.
So the distance between those shapes is what actually makes the entire layout.
And this rule says that objects placed close
to each other are automatically understood as a group.

00:00:30.360 --> 00:01:01.920
So in our case, how many groups do we have here?
So we have the group of 12
bluish green circles.
Then we have a group of three in green circles and then another group
of three green circles.
But then we also have a group of all the circles combined.
And this is how this grouping and proximity works.
You need to be aware
that there are groups within groups and there can be groups within groups.
So let's take one of our examples from before.

00:01:01.920 --> 00:01:30.040
And if we add grouping on top of it,
you'll see that we can just by proximity, establish a couple of groups here.
The emoji is one group, then the text and the other text is the second group.
And then the pattern with the other clickable element is the third group.
And of course, you can also consider the emoji
being one group and all of the content is being another group.
It's not just how you approach it and how you're actually going to work it in.

00:01:30.040 --> 00:02:02.280
Additional examples of this design, because it's not just going to be
just this one version, but the thing is that we should be able
to consistently replicate those groups in other versions of that screen.
So if we created those groups and those distances
between the groups, they need to be consistent.
And this is what you should use basically to create that consistency.
So if you have a distance between the two groups, which are just the whole windows,
the distance should always be bigger than the distance

00:02:02.280 --> 00:02:30.200
between individual elements within the groups, within a group.
So the further down we go in a group, the smaller the distance can be.
That allows our brain to process it naturally and really quickly.
And we'll see that.
Okay, we have two separate
big groups of things and then they are divided into smaller groups.
And then you can use that rule to organize it further.
So you can use another smaller square to

00:02:30.200 --> 00:03:00.960
place between elements within those groups.
Or you can even use the same one because you can see
you could use the Red Square here between the large title
and the text as well and the bottom and the smaller text underneath.
And that would still fit so that or a smaller one would work here.
And this is really important because that's the whole rule of clarity
and layout that is really important to follow.
So those distances cannot be random.
They need to be based on something and they need to be based on

00:03:00.960 --> 00:03:30.280
the natural hierarchy.
So we quickly understand that, okay, this is a group and this is a group within
a group, and these things are together as well
because that's going to make it a lot easier.
Grouping is also important with the distances.
For example, this is one of the largest, like more common problems that I've seen
in many forms designed by junior designers is not having
enough space between the label and the previous field.
And that creates an effect where if there is a longer

00:03:30.280 --> 00:04:01.040
a forum where coming it through with our eyes
and we don't really know which field that label belongs to,
so just increase the distance by two or three times between the fields
and then four or six times between the title and the form.
And by having that consistency with all the other elements on the site,
so like if smaller distances extend, the larger one is to extend keep the X
and to X across all of the other things to keep that consistent
grading of all of those elements.