0
1
00:00:00,210 --> 00:00:04,280
This is a poster from BMW spare parts advertisement campaign.
1

2
00:00:04,380 --> 00:00:10,480
It says BWM instead of BMW. On the bottom, it says, "Use original parts".
2

3
00:00:10,580 --> 00:00:11,490
You get the joke, right?
3

4
00:00:11,700 --> 00:00:15,430
It's a very clever ad. But that's not the reason I'm showing it to you.
4

5
00:00:15,450 --> 00:00:21,140
I want to demonstrate a huge design concept called Whitespace. Whitespace is empty space around elements
5

6
00:00:21,150 --> 00:00:27,800
in this case around the BM... no BWM title. Whitespace draws attention to the object.
6

7
00:00:27,810 --> 00:00:32,250
It's not just easier to see the object, but it becomes much more interesting and important.
7

8
00:00:32,310 --> 00:00:33,740
That's Yahoo's home page.
8

9
00:00:33,750 --> 00:00:35,160
There is not much whitespace here.
9

10
00:00:35,160 --> 00:00:38,010
It's hard to tell what's important on this page.
10

11
00:00:38,010 --> 00:00:40,330
This one, on the other hand, is a whole different story.
11

12
00:00:40,380 --> 00:00:43,350
The importance of whitespace isn't just an attention and simplicity.
12

13
00:00:43,350 --> 00:00:46,320
It's also, your design achieving its primary goal.
13

14
00:00:46,560 --> 00:00:51,600
If you're a website primary goal is for people to search, then you better make sure all attention
14

15
00:00:51,600 --> 00:00:53,240
is directed towards that.
15

16
00:00:53,310 --> 00:00:58,290
When we arrive on Google, we instantly know where to click and where to direct our attention.
16

17
00:00:58,290 --> 00:01:02,100
It's much less demanding to search on Google than on Yahoo.
17

18
00:01:02,100 --> 00:01:07,440
And much more likely that we will achieve our goal on Google, than being distracted on Yahoo and forgetting
18

19
00:01:07,470 --> 00:01:09,620
what we came for in the first place.
19

20
00:01:09,740 --> 00:01:15,420
Whitespace doesn't have to be white. It can be any color. It's any unused space that is in between the
20

21
00:01:15,420 --> 00:01:16,210
elements.
21

22
00:01:16,300 --> 00:01:22,470
The word "white" is a leftover from the era, when graphic design used to take place only in print and
22

23
00:01:22,470 --> 00:01:23,920
on a white piece of paper.
23

24
00:01:23,940 --> 00:01:25,420
Let's have a look at this example.
24

25
00:01:25,500 --> 00:01:28,460
Say you are working on a taxi app website.
25

26
00:01:28,500 --> 00:01:33,930
You could put a photo as a background and there is nothing wrong with it at all. Or you can use whitespace
26

27
00:01:33,930 --> 00:01:37,350
to bring more attention to the message and the button.
27

28
00:01:37,350 --> 00:01:40,010
By the way, remember tinting with image overlays?
28

29
00:01:40,050 --> 00:01:42,940
Sometimes you don't have to make the photo black and white.
29

30
00:01:43,020 --> 00:01:48,120
You can keep the image colorful and still add color tint over it, like in this case. You know a long
30

31
00:01:48,120 --> 00:01:48,690
time ago.
31

32
00:01:48,690 --> 00:01:54,510
Before I knew anything about graphic design, I worked as a marketing manager. And as a marketeer you do
32

33
00:01:54,510 --> 00:02:00,630
need to create a lot of graphic materials, design materials. Like flyers, booklets, magazines or posters,
33

34
00:02:00,960 --> 00:02:07,560
advertisements on Facebook, or Google AdWords, or Facebook covers or whatnot. And I used to work with this
34

35
00:02:07,920 --> 00:02:13,590
excellent graphic designer, who later became my design mentor basically.
35

36
00:02:13,590 --> 00:02:19,140
And when we would sit down and I would look at his design iterations, I always had this comment. That
36

37
00:02:19,890 --> 00:02:25,650
I would look at his whatever composition we were doing, sometimes it would be like a booklet for our
37

38
00:02:25,650 --> 00:02:31,410
company and I would say "oh you know why don't you fill this space, there is like too much, too much empty
38

39
00:02:31,410 --> 00:02:36,870
space". And I always and I never liked the empty space when he would make in the designs, and I would always
39

40
00:02:36,870 --> 00:02:41,830
push him to try to fill that empty space with something. Because I felt it was empty.
40

41
00:02:41,910 --> 00:02:44,160
Oh man, I had no idea back then.
41

42
00:02:44,190 --> 00:02:50,790
This is quite a common reaction with beginner designers, or clients who don't have any design training,
42

43
00:02:50,820 --> 00:02:56,760
but are looking at the work from a kind of sort of wearing a designer's hat or from a designer's perspective.
43

44
00:02:56,760 --> 00:03:02,780
They have this insecurity about empty space and they always try to fill it with something.
44

45
00:03:02,790 --> 00:03:07,020
For them it feels like, if it's empty space then it's not designed enough.
45

46
00:03:07,050 --> 00:03:07,850
Keep this in mind.
46

47
00:03:07,860 --> 00:03:11,920
No user will ever complain about too much empty space.
47

48
00:03:12,030 --> 00:03:15,390
However, they will be annoyed with too much clutter on the page.
48

49
00:03:15,390 --> 00:03:19,410
My personal portfolio site uses a lot of whitespace.
49

50
00:03:19,650 --> 00:03:22,160
I wanted to bring all the attention to me first.
50

51
00:03:22,200 --> 00:03:29,120
A person behind the work, so I removed all the distractions and pointed the entire focus towards me.
51

52
00:03:29,490 --> 00:03:35,640
Apple always does this masterfully. Using a lot of whitespace is a very ballsy design. That MacBook looks
52

53
00:03:35,640 --> 00:03:42,030
super important and much more valuable when it's displayed like that. Whitespace improves almost everything
53

54
00:03:42,090 --> 00:03:47,940
Even on paragraphs. Remember what we learned about line spacing? Increasing line spacing is basically
54

55
00:03:47,970 --> 00:03:50,970
adding more whitespace between the lines. And guess what?
55

56
00:03:50,970 --> 00:03:55,310
Designing with a lot of whitespace is actually easier than designing without it.
56

57
00:03:55,330 --> 00:04:00,220
Dieter Rams is this industrial designer and best known for his work for Braun.
57

58
00:04:00,240 --> 00:04:07,680
He has coined these popular 10 Principles for Good Design. The closing 10th principle is this:
58

59
00:04:07,680 --> 00:04:13,750
"Good design is as little design as possible". So don't be scared of whitespace and doing less.
59

60
00:04:13,770 --> 00:04:15,270
That's just good design.
60

61
00:04:15,270 --> 00:04:20,910
There is an exception with whitespace. For items that are related and are part of the same context, should
61

62
00:04:20,910 --> 00:04:22,560
be closer to each other.
62

63
00:04:22,680 --> 00:04:29,160
Putting whitespace between them will disconnect them and will feel like separate unrelated objects.
63

64
00:04:29,160 --> 00:04:32,130
Like we learned in the lesson about proximity.
64

65
00:04:32,160 --> 00:04:37,670
For example, the headline in the paragraph on this page. Whitespace will disconnect them from each other.
65

66
00:04:37,680 --> 00:04:43,470
This does add more focus on the paragraph, but now it's an independent object. Adding to the amount
66

67
00:04:43,470 --> 00:04:46,950
of elements, the viewer has to process. In the original version,
67

68
00:04:46,950 --> 00:04:52,140
the headline in the paragraph looks connected due to the proximity. And will be perceived as a single
68

69
00:04:52,140 --> 00:04:52,750
group.
69

70
00:04:52,830 --> 00:04:57,000
Sort of like those links in the navigation bar. Because of their proximity and grouping,
70

71
00:04:57,000 --> 00:05:02,710
they will be identified as a single group instantly. This sort of grouping makes it easy for a viewer
71

72
00:05:02,710 --> 00:05:07,220
to process the elements on the page. And it's more organized and meaningful.