0
1
00:00:00,180 --> 00:00:04,920
Between these two horizontal lines, just the lines not counting the arrow heads.
1

2
00:00:05,040 --> 00:00:10,990
Which one of these lines is longer? Just like 80% of the people you probably went with the bottom
2

3
00:00:10,990 --> 00:00:11,470
line.
3

4
00:00:11,470 --> 00:00:14,080
But the truth is that they are exact the same length.
4

5
00:00:14,110 --> 00:00:17,480
These sort of optical illusions happen all the time in design.
5

6
00:00:17,530 --> 00:00:24,910
You will take two objects, measure them and see that they are often exact size. But our eyes tell us that
6

7
00:00:24,910 --> 00:00:28,550
the circle is slightly smaller than the square.
7

8
00:00:28,570 --> 00:00:30,820
So what do we do in such cases?
8

9
00:00:31,030 --> 00:00:35,130
Do we go what our ruler says or do we trust our eyes?
9

10
00:00:35,170 --> 00:00:37,860
Most of the time we're going to trust our eyes.
10

11
00:00:37,870 --> 00:00:44,140
That means, if an object appears slightly smaller than its counterpart, we need to compensate for the
11

12
00:00:44,170 --> 00:00:51,280
optical illusion and increase the size slightly until the both appear the equal size.
12

13
00:00:51,280 --> 00:00:55,480
Then we're going to have two objects that appear the same size.
13

14
00:00:55,480 --> 00:01:01,090
This is more important than their actual pixel sizes, because audience isn't going to get out the rulers
14

15
00:01:01,090 --> 00:01:01,960
and start measuring.
15

16
00:01:02,290 --> 00:01:05,540
But if something looks smaller they will find it odd.
16

17
00:01:05,550 --> 00:01:09,880
The illustrations are common graphic elements that you will use in your web designs.
17

18
00:01:09,880 --> 00:01:15,760
A lot of times these illustrations or icons are going to have varied shapes.
18

19
00:01:15,820 --> 00:01:20,320
This can make equal sized illustrations look very different from each other.
19

20
00:01:20,380 --> 00:01:24,370
In this example envelope on the left looks bigger.
20

21
00:01:24,370 --> 00:01:28,800
It's overpowering the icon on the right, when they are supposed to have equal hierarchy.
21

22
00:01:29,020 --> 00:01:35,710
Although, their sizes are identical. They have both the same height and the same width. But the envelope
22

23
00:01:35,710 --> 00:01:39,310
has much fuller body compared to the tent.
23

24
00:01:39,310 --> 00:01:44,620
This is what designers usually refer to as the weight of the object. And heavier objects will look
24

25
00:01:44,620 --> 00:01:45,320
bigger.
25

26
00:01:45,370 --> 00:01:47,100
They will look wider or taller.
26

27
00:01:47,290 --> 00:01:54,510
So we need to manually compensate for the tent's lighter body by increasing its actual pixel dimensions.
27

28
00:01:54,520 --> 00:01:57,410
There is no rule on how much to increase.
28

29
00:01:57,430 --> 00:02:02,800
This has to be done by eye. Increasing until they feel like equal size.
29

30
00:02:02,830 --> 00:02:07,110
Then you'll get balanced composition that feels aligned with matching sizes.
30

31
00:02:07,140 --> 00:02:13,690
These tiny little details is what makes the page look like it was designed by an amateur or a pro.
31

32
00:02:13,690 --> 00:02:19,340
Most web designers and developers, who don't have a background in graphic design or anything design related,
32

33
00:02:19,420 --> 00:02:26,410
they measure things by a ruler. And what happens, is that results come out to be inconsistent and quite
33

34
00:02:26,410 --> 00:02:27,030
clumsy.
34

35
00:02:27,040 --> 00:02:31,430
A client or a user isn't going to notice what is exactly wrong with the page.
35

36
00:02:31,510 --> 00:02:39,640
They will notice it, but they won't know what exactly is off with it. But they will feel that the page
36

37
00:02:39,940 --> 00:02:42,100
isn't quote on quote “designed”.
37

38
00:02:42,100 --> 00:02:44,130
Here's another very common optical illusion.
38

39
00:02:44,140 --> 00:02:48,940
This was one of the very first design lessons that I received from my design mentor.
39

40
00:02:48,940 --> 00:02:54,040
Whenever we need to put something, for example, text inside a box. What does one usually do?
40

41
00:02:54,130 --> 00:02:59,580
Find the exact middle of the container and place their element right in the center.
41

42
00:02:59,590 --> 00:03:03,390
The issue with this is that text feels like it's sinking.
42

43
00:03:03,400 --> 00:03:08,440
It even feels like space above the text is larger, compared to the space below it.
43

44
00:03:08,440 --> 00:03:11,070
Sinking Feeling isn't a good impression for any design.
44

45
00:03:11,080 --> 00:03:17,680
Instead what we want to do is to nudge the text a little towards the top. So it feels like it's floating.
45

46
00:03:17,830 --> 00:03:19,030
To remember easily,
46

47
00:03:19,030 --> 00:03:21,550
think of it as a ship. Sinking ship,
47

48
00:03:21,550 --> 00:03:23,200
not good. Floating ship,
48

49
00:03:23,200 --> 00:03:23,700
great.
49

50
00:03:23,710 --> 00:03:27,670
This doesn't mean you should always nudge it up instead of aligning exactly in the middle.
50

51
00:03:27,730 --> 00:03:29,700
Sometimes it won't be necessary.
51

52
00:03:29,740 --> 00:03:32,860
It will depend on the typography spacing and so on.
52

53
00:03:32,920 --> 00:03:35,950
Just like all optical illusions, either it appears or it doesn't.
53

54
00:03:35,950 --> 00:03:41,790
No need to fix an illusion if it doesn't exist. But if you see this sinking effect, then fix it.
54

55
00:03:41,830 --> 00:03:47,440
As a matter of fact, heavier looking objects will feel like they're sinking more. And lighter objects
55

56
00:03:47,440 --> 00:03:49,600
will tend to feel like they're floating.
56

57
00:03:49,600 --> 00:03:51,940
It's crazy how accurate this is to a real world.