0
1
00:00:00,180 --> 00:00:04,160
One thing beginner designers tend to do is space out elements equally on the page.
1

2
00:00:04,170 --> 00:00:09,730
Mainly they do this to fill the empty space. Because all beginner designers have a fear of empty space.
2

3
00:00:09,750 --> 00:00:11,600
More about this in a later lesson.
3

4
00:00:11,790 --> 00:00:16,860
But what design actually likes is grouping elements closer to each other,
4

5
00:00:16,980 --> 00:00:21,430
if they have something in common. This is a design concept called proximity.
5

6
00:00:21,450 --> 00:00:28,230
The basic idea of proximity is that: things that are related, should be close together, and things that
6

7
00:00:28,230 --> 00:00:30,860
are NOT related, should be further apart.
7

8
00:00:30,870 --> 00:00:35,960
In this example, I have moved all the navigation links closer to each other, because they are related.
8

9
00:00:36,060 --> 00:00:38,520
They have a same context.
9

10
00:00:38,580 --> 00:00:42,630
Now the headline is closer to the text underneath because they are related.
10

11
00:00:42,660 --> 00:00:48,750
The buttons are a little further from the text, but two of them are close to each other. Because they are
11

12
00:00:48,750 --> 00:00:50,640
similar action buttons.
12

13
00:00:50,700 --> 00:00:53,080
They both offer what to do next.
13

14
00:00:53,130 --> 00:00:56,160
And finally, the little text underneath the green button,
14

15
00:00:56,160 --> 00:01:02,040
I have moved much closer to the button. Because it's sort of a description of the button, so it can't even
15

16
00:01:02,040 --> 00:01:02,970
exist without it.
16

17
00:01:03,060 --> 00:01:07,210
Now, what happens if you put unrelated elements close to each other?
17

18
00:01:07,320 --> 00:01:11,250
Well, this will imply a relation which in fact doesn't exist.
18

19
00:01:11,340 --> 00:01:17,850
For example, if we put a slogan right next to the navigation links, because of its proximity users will
19

20
00:01:17,850 --> 00:01:25,110
easily confuse the slogan with a menu item and will think it's a clickable link. Especially if
20

21
00:01:25,110 --> 00:01:27,480
those elements have a similar style.
21

22
00:01:27,480 --> 00:01:29,970
Proximity is a very useful design guideline.
22

23
00:01:29,970 --> 00:01:36,890
It not only makes content easy to understand and digest for the user, but it also makes it pretty and designed.
23

24
00:01:37,110 --> 00:01:42,390
And I guess, you know, things that are simple and easy to understand, is quite beautiful for the users.