Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,390 --> 00:00:05,120
Welcome to the topic of whitespace.
2
00:00:05,120 --> 00:00:08,600
Now whitespace is technically invisible,
3
00:00:08,600 --> 00:00:12,570
but it's still actually one of the easiest and fastest ways
4
00:00:12,570 --> 00:00:15,930
of drastically improving your designs.
5
00:00:15,930 --> 00:00:19,533
So let's now go ahead and learn how to do that.
6
00:00:21,480 --> 00:00:26,330
So whitespace is basically simply space between elements,
7
00:00:26,330 --> 00:00:30,110
but the right amount of whitespace can make our designs
8
00:00:30,110 --> 00:00:34,680
look clean, modern, and polished, and even more important,
9
00:00:34,680 --> 00:00:37,260
easy for the user to understand.
10
00:00:37,260 --> 00:00:38,860
Just look at this design,
11
00:00:38,860 --> 00:00:42,760
which has very little to no whitespace at all.
12
00:00:42,760 --> 00:00:46,030
So the entire content here looks very cramped
13
00:00:46,030 --> 00:00:48,460
and it doesn't look clean at all
14
00:00:48,460 --> 00:00:52,260
and our eyes do not really know how to navigate this page
15
00:00:52,260 --> 00:00:54,960
due to the lack of all this space.
16
00:00:54,960 --> 00:00:56,530
However, fortunately,
17
00:00:56,530 --> 00:00:59,490
it is very easy to fix this simply by adding
18
00:00:59,490 --> 00:01:01,830
some whitespace to the design.
19
00:01:01,830 --> 00:01:05,320
So now it does look quite modern and polished,
20
00:01:05,320 --> 00:01:08,310
and we can feel that somehow the design
21
00:01:08,310 --> 00:01:10,300
has some space to breathe.
22
00:01:10,300 --> 00:01:11,670
So this is in fact,
23
00:01:11,670 --> 00:01:14,890
a dramatic improvement over the first version
24
00:01:14,890 --> 00:01:16,880
on the left side.
25
00:01:16,880 --> 00:01:20,500
But why exactly is whitespace so important?
26
00:01:20,500 --> 00:01:23,610
Well, whitespace automatically communicates
27
00:01:23,610 --> 00:01:27,110
how the different pieces of information in our layout
28
00:01:27,110 --> 00:01:29,270
are related to one another.
29
00:01:29,270 --> 00:01:32,250
And so by doing this whitespace creates
30
00:01:32,250 --> 00:01:36,610
invisible relationships between the elements of the layout,
31
00:01:36,610 --> 00:01:40,600
which automatically makes it easy for the user to navigate
32
00:01:40,600 --> 00:01:44,020
that layout completely intuitively.
33
00:01:44,020 --> 00:01:44,870
Okay.
34
00:01:44,870 --> 00:01:48,130
And so now that we know what whitespace is
35
00:01:48,130 --> 00:01:49,780
and why it's so important,
36
00:01:49,780 --> 00:01:51,923
let's quickly learn how to use it.
37
00:01:53,440 --> 00:01:54,900
So, first of all,
38
00:01:54,900 --> 00:01:59,240
we should use a ton of whitespace between our sections.
39
00:01:59,240 --> 00:02:02,120
And going back to our previous example here,
40
00:02:02,120 --> 00:02:04,870
we can see that the designer did indeed add
41
00:02:04,870 --> 00:02:08,200
a lot of whitespace between the sections.
42
00:02:08,200 --> 00:02:12,560
So 192 pixels is a lot of space,
43
00:02:12,560 --> 00:02:15,060
but it is actually not too much.
44
00:02:15,060 --> 00:02:18,530
I think it does look quite right like this.
45
00:02:18,530 --> 00:02:21,430
At the same in this other design example here,
46
00:02:21,430 --> 00:02:24,050
where again, there is a lot of whitespace
47
00:02:24,050 --> 00:02:25,640
between the sections.
48
00:02:25,640 --> 00:02:30,000
In this case, it's just 140 and 160 pixels,
49
00:02:30,000 --> 00:02:33,490
but of course this will depend on many different aspects.
50
00:02:33,490 --> 00:02:36,250
You cannot just like fix a number
51
00:02:36,250 --> 00:02:38,680
and then use that value of whitespace
52
00:02:38,680 --> 00:02:40,460
in all of your designs.
53
00:02:40,460 --> 00:02:41,560
Okay?
54
00:02:41,560 --> 00:02:44,310
Now the next place where you need to use whitespace
55
00:02:44,310 --> 00:02:46,880
is between groups of elements.
56
00:02:46,880 --> 00:02:49,650
So use a lot of whitespace there as well,
57
00:02:49,650 --> 00:02:54,230
but of course not as much whitespace as between sections.
58
00:02:54,230 --> 00:02:55,500
So here, for example,
59
00:02:55,500 --> 00:02:58,040
we have these different groups of elements,
60
00:02:58,040 --> 00:03:00,200
which we can clearly outline
61
00:03:00,200 --> 00:03:03,810
and so between these, there is some whitespace, of course,
62
00:03:03,810 --> 00:03:05,990
and it is not little whitespace.
63
00:03:05,990 --> 00:03:09,340
So we have 96 there between the heading
64
00:03:09,340 --> 00:03:11,890
and then that first block of content.
65
00:03:11,890 --> 00:03:16,220
And then there is 152 pixels between these two rows.
66
00:03:16,220 --> 00:03:19,840
So it looks like it's a lot of space, but again,
67
00:03:19,840 --> 00:03:22,750
this is actually exactly the space that is needed
68
00:03:22,750 --> 00:03:25,990
to make this look clean and polished.
69
00:03:25,990 --> 00:03:29,110
And going now to our other example here again,
70
00:03:29,110 --> 00:03:32,620
we can easily see the different pieces of content.
71
00:03:32,620 --> 00:03:35,170
So like this groups of elements,
72
00:03:35,170 --> 00:03:38,980
where there are 24 pixels between all of them.
73
00:03:38,980 --> 00:03:42,380
So a little bit less here, but of course, once again,
74
00:03:42,380 --> 00:03:45,460
this will depend on many different factors.
75
00:03:45,460 --> 00:03:48,980
Now we usually focus more on vertical whitespace,
76
00:03:48,980 --> 00:03:51,160
but it's important to also think about
77
00:03:51,160 --> 00:03:52,830
horizontal whitespace,
78
00:03:52,830 --> 00:03:56,120
for example, like between these columns here.
79
00:03:56,120 --> 00:03:57,720
So usually vertically,
80
00:03:57,720 --> 00:04:00,790
we need a lot more space than horizontally
81
00:04:00,790 --> 00:04:03,820
as a general guideline, all right?
82
00:04:03,820 --> 00:04:06,180
Now here, I actually have another example,
83
00:04:06,180 --> 00:04:08,170
which is this one.
84
00:04:08,170 --> 00:04:09,003
And again,
85
00:04:09,003 --> 00:04:10,690
we can easily distinguish between
86
00:04:10,690 --> 00:04:12,640
the different groups of elements.
87
00:04:12,640 --> 00:04:15,400
And so of course there has got to be some whitespace
88
00:04:15,400 --> 00:04:19,720
between them and the same here in this other example.
89
00:04:19,720 --> 00:04:22,170
So again, two groups of elements here,
90
00:04:22,170 --> 00:04:24,430
and then we need to separate them visually
91
00:04:24,430 --> 00:04:26,950
simply by adding some whitespace
92
00:04:26,950 --> 00:04:30,660
in the form of margin for example, in CSS.
93
00:04:30,660 --> 00:04:31,940
Now next up, of course,
94
00:04:31,940 --> 00:04:36,330
we also need whitespace simply between the smaller elements.
95
00:04:36,330 --> 00:04:40,630
So going back here to all our three previous examples,
96
00:04:40,630 --> 00:04:42,730
you have some whitespace here,
97
00:04:42,730 --> 00:04:44,683
as you can see by these arrows,
98
00:04:45,550 --> 00:04:49,760
then also a lot of whitespace visible in this example
99
00:04:49,760 --> 00:04:53,950
and finally, it's also easy to see here in this final one.
100
00:04:53,950 --> 00:04:55,610
And once you're aware of this,
101
00:04:55,610 --> 00:04:57,970
you will start seeing this whitespace
102
00:04:57,970 --> 00:05:01,430
on every well-designed website that you visit.
103
00:05:01,430 --> 00:05:04,080
So it's something that every website
104
00:05:04,080 --> 00:05:06,843
that has a decent design we'll use a lot.
105
00:05:07,690 --> 00:05:10,900
Now, another guideline that I can give you is that
106
00:05:10,900 --> 00:05:13,280
inside of groups of elements,
107
00:05:13,280 --> 00:05:17,710
you should always try to use whitespace instead of lines.
108
00:05:17,710 --> 00:05:20,410
So using lines might look something like this,
109
00:05:20,410 --> 00:05:22,830
and this is actually a mistake
110
00:05:22,830 --> 00:05:25,920
that many beginner designers tend to make.
111
00:05:25,920 --> 00:05:28,240
So they think that in order to
112
00:05:28,240 --> 00:05:30,490
basically distinguish between elements,
113
00:05:30,490 --> 00:05:32,680
they need to add some visual lines.
114
00:05:32,680 --> 00:05:34,660
So just like in this example.
115
00:05:34,660 --> 00:05:37,190
While actually it looks way better
116
00:05:37,190 --> 00:05:39,510
and way more modern and more clean
117
00:05:39,510 --> 00:05:43,840
to simply add some space between the elements, right?
118
00:05:43,840 --> 00:05:45,750
So here you can still clearly see
119
00:05:45,750 --> 00:05:47,800
which elements belong together,
120
00:05:47,800 --> 00:05:51,530
but all without using these ugly looking lines.
121
00:05:51,530 --> 00:05:54,890
And so if you're trying to create a modern looking design,
122
00:05:54,890 --> 00:05:57,730
then this is always the way to go.
123
00:05:57,730 --> 00:06:00,120
Okay, so now you know where
124
00:06:00,120 --> 00:06:02,240
you should actually use whitespace,
125
00:06:02,240 --> 00:06:04,700
but how much should you use?
126
00:06:04,700 --> 00:06:08,143
Well, let's find out with some more guidelines here.
127
00:06:09,220 --> 00:06:12,470
So basically elements that belong together
128
00:06:12,470 --> 00:06:15,550
should be closer together in our interface.
129
00:06:15,550 --> 00:06:17,950
So have less spacing between them
130
00:06:17,950 --> 00:06:19,840
because that will distinguish them
131
00:06:19,840 --> 00:06:24,220
from other surrounding elements or groups of elements.
132
00:06:24,220 --> 00:06:27,370
And what I just described actually has something like
133
00:06:27,370 --> 00:06:31,766
an official name, which is the law of proximity.
134
00:06:31,766 --> 00:06:32,700
All right?
135
00:06:32,700 --> 00:06:34,460
Now, on the other hand, of course,
136
00:06:34,460 --> 00:06:38,100
if elements are not closely related to one another,
137
00:06:38,100 --> 00:06:40,310
then they should be further apart,
138
00:06:40,310 --> 00:06:42,820
so that the user intuitively perceives
139
00:06:42,820 --> 00:06:47,100
that a certain element or groups of elements are unrelated
140
00:06:47,100 --> 00:06:49,410
to another group of elements.
141
00:06:49,410 --> 00:06:52,780
So again, all of this is the law of proximity,
142
00:06:52,780 --> 00:06:54,980
and this should be the guiding principle
143
00:06:54,980 --> 00:06:58,090
when you define how much whitespace you're going to use
144
00:06:58,090 --> 00:07:01,350
between elements or groups of elements.
145
00:07:01,350 --> 00:07:04,020
So of course there are some examples here
146
00:07:04,020 --> 00:07:06,283
and here we have way too little whitespace.
147
00:07:07,560 --> 00:07:10,210
So this is all packed together very closely.
148
00:07:10,210 --> 00:07:12,570
And the relationship between these elements
149
00:07:12,570 --> 00:07:14,450
is not really visible,
150
00:07:14,450 --> 00:07:18,260
but on the other hand, here it is much better.
151
00:07:18,260 --> 00:07:21,820
So the title and the text kind of belong together
152
00:07:21,820 --> 00:07:25,030
and so the spacing between them is a lot less
153
00:07:25,030 --> 00:07:28,620
than the space that's between the icon and the title.
154
00:07:28,620 --> 00:07:32,870
And so this is the law of proximity in action.
155
00:07:32,870 --> 00:07:36,050
Now, another example is this form right here,
156
00:07:36,050 --> 00:07:38,820
which has some ambiguous spacing.
157
00:07:38,820 --> 00:07:40,370
So here on the left side,
158
00:07:40,370 --> 00:07:43,040
these text labels are kind of in-between
159
00:07:43,040 --> 00:07:45,540
two input fields, right?
160
00:07:45,540 --> 00:07:47,000
And so like this,
161
00:07:47,000 --> 00:07:50,810
the user has a hard time of knowing which input field
162
00:07:50,810 --> 00:07:53,210
actually each label belongs to.
163
00:07:53,210 --> 00:07:55,830
However, if we removed the whitespace
164
00:07:55,830 --> 00:07:58,860
and placed the label close to the input field
165
00:07:58,860 --> 00:08:00,610
that it actually belongs to,
166
00:08:00,610 --> 00:08:03,150
we can remove that ambiguity
167
00:08:03,150 --> 00:08:07,400
and therefore help the user navigate this contact form.
168
00:08:07,400 --> 00:08:09,370
And since this is so important,
169
00:08:09,370 --> 00:08:12,520
let's check out another example right here.
170
00:08:12,520 --> 00:08:14,010
So on the left side,
171
00:08:14,010 --> 00:08:17,110
it doesn't really make sense why this "Learn More" button
172
00:08:17,110 --> 00:08:21,450
is so far away from that text that it is actually about.
173
00:08:21,450 --> 00:08:22,410
So for some reason,
174
00:08:22,410 --> 00:08:25,930
it's closer to those links down there at the bottom,
175
00:08:25,930 --> 00:08:28,580
but again, that doesn't make much sense.
176
00:08:28,580 --> 00:08:32,430
And so why should that button be closer to that
177
00:08:32,430 --> 00:08:36,360
and not be closer to the text that it's actually about?
178
00:08:36,360 --> 00:08:38,600
And so fixing that is very simple,
179
00:08:38,600 --> 00:08:41,460
like we did here on the right side.
180
00:08:41,460 --> 00:08:43,810
So now the learn more button is closer
181
00:08:43,810 --> 00:08:45,350
to what it belongs to
182
00:08:45,350 --> 00:08:46,470
and so like this,
183
00:08:46,470 --> 00:08:51,200
it looks more natural and makes it all easier to understand.
184
00:08:51,200 --> 00:08:52,390
Now, next up,
185
00:08:52,390 --> 00:08:55,750
there is a guideline that many beginners find helpful
186
00:08:55,750 --> 00:08:57,570
when designing whitespace,
187
00:08:57,570 --> 00:09:01,440
which is basically to start with too much whitespace
188
00:09:01,440 --> 00:09:06,000
and then from there remove some space until it looks right.
189
00:09:06,000 --> 00:09:08,100
And again, of course, by doing that,
190
00:09:08,100 --> 00:09:10,320
we need to have the guiding principle
191
00:09:10,320 --> 00:09:12,650
of the law of proximity.
192
00:09:12,650 --> 00:09:16,090
And we also need to be aware that too much whitespace
193
00:09:16,090 --> 00:09:19,600
looks detached while having too little whitespace,
194
00:09:19,600 --> 00:09:22,630
of course makes the design look cramped.
195
00:09:22,630 --> 00:09:26,200
So here in this example, we actually tried that.
196
00:09:26,200 --> 00:09:28,660
And so we added way too much space
197
00:09:28,660 --> 00:09:32,860
and actually right now everything looks kind of detached.
198
00:09:32,860 --> 00:09:34,700
So this is not good.
199
00:09:34,700 --> 00:09:36,950
And so in order to fix that,
200
00:09:36,950 --> 00:09:41,100
let's say that we actually removed most of the whitespace,
201
00:09:41,100 --> 00:09:43,880
but then it looked way too cramped,
202
00:09:43,880 --> 00:09:47,380
and we can also say that it even looks uninviting
203
00:09:47,380 --> 00:09:50,200
to read this text in the first place.
204
00:09:50,200 --> 00:09:52,780
So it looks like just a wall of text,
205
00:09:52,780 --> 00:09:56,500
which many times users do not like to read.
206
00:09:56,500 --> 00:09:59,340
But then after experimenting around a little bit
207
00:09:59,340 --> 00:10:01,970
and adding back some of the whitespace,
208
00:10:01,970 --> 00:10:04,590
we may end up with a result like this,
209
00:10:04,590 --> 00:10:06,940
which looks just right.
210
00:10:06,940 --> 00:10:09,860
So here we can feel that the design can breathe
211
00:10:09,860 --> 00:10:12,030
and everything is not too detached,
212
00:10:12,030 --> 00:10:14,430
but also not too cramped.
213
00:10:14,430 --> 00:10:17,090
So like this it's perfect.
214
00:10:17,090 --> 00:10:20,580
And next, another guideline that might help you choose
215
00:10:20,580 --> 00:10:24,053
just the right amount of whitespace for your design is
216
00:10:24,053 --> 00:10:27,790
that you should try to match all the other design choices
217
00:10:27,790 --> 00:10:30,000
when it comes to whitespace.
218
00:10:30,000 --> 00:10:34,140
So for example, if you have big texts or big icons
219
00:10:34,140 --> 00:10:36,743
for example, then you will need more whitespace.
220
00:10:37,720 --> 00:10:40,090
So just like in this first example,
221
00:10:40,090 --> 00:10:42,150
here the text is huge
222
00:10:42,150 --> 00:10:45,190
and so we see there's actually a lot of blank space
223
00:10:45,190 --> 00:10:49,520
here on this page and also between the groups of elements
224
00:10:49,520 --> 00:10:51,960
there is quiet some whitespace there.
225
00:10:51,960 --> 00:10:55,270
Now, if you compare this to the design on the right side
226
00:10:55,270 --> 00:10:58,830
here the text and the images are all quite small
227
00:10:58,830 --> 00:11:02,420
and so therefore there is also a lot less space.
228
00:11:02,420 --> 00:11:05,390
So it would certainly look kind of unnatural
229
00:11:05,390 --> 00:11:07,100
if with this small content
230
00:11:07,100 --> 00:11:10,150
you would add a lot of whitespace between them.
231
00:11:10,150 --> 00:11:12,380
That just wouldn't feel right.
232
00:11:12,380 --> 00:11:13,530
Okay?
233
00:11:13,530 --> 00:11:14,950
And so again,
234
00:11:14,950 --> 00:11:18,420
you need to a little bit try to adjust your whitespace
235
00:11:18,420 --> 00:11:21,810
to all the other design choices that you already took.
236
00:11:21,810 --> 00:11:22,900
And now finally,
237
00:11:22,900 --> 00:11:25,340
when it comes to actually choosing the values
238
00:11:25,340 --> 00:11:27,910
for your white space in CSS,
239
00:11:27,910 --> 00:11:30,460
you can try to follow a hard rule,
240
00:11:30,460 --> 00:11:33,920
just like we have been doing with the font sizes.
241
00:11:33,920 --> 00:11:36,380
Now, of course you should not use the same rule
242
00:11:36,380 --> 00:11:38,510
as we used in typography
243
00:11:38,510 --> 00:11:41,970
because that one is specially adapted for text
244
00:11:41,970 --> 00:11:45,060
but instead you can use a rule like this one,
245
00:11:45,060 --> 00:11:48,540
which only uses multiples of 16 pixels
246
00:11:48,540 --> 00:11:50,603
for all the margins and paddings
247
00:11:50,603 --> 00:11:52,970
that we apply on a page.
248
00:11:52,970 --> 00:11:55,720
Now you will also need to add some smaller values,
249
00:11:55,720 --> 00:12:00,170
like 2 and 4 and 8 and 12 pixels.
250
00:12:00,170 --> 00:12:01,420
But in general,
251
00:12:01,420 --> 00:12:04,640
from there on all the other values are multiples
252
00:12:04,640 --> 00:12:08,460
of 16 pixels and some of them are even skipped
253
00:12:08,460 --> 00:12:11,320
just in order to limit your choices.
254
00:12:11,320 --> 00:12:14,800
So it's the same idea as before with the font sizes
255
00:12:14,800 --> 00:12:18,030
where I mentioned that limiting your choices is actually
256
00:12:18,030 --> 00:12:19,590
a good idea.
257
00:12:19,590 --> 00:12:21,380
So it sounds like a limitation,
258
00:12:21,380 --> 00:12:24,050
but it's actually great because
259
00:12:24,050 --> 00:12:27,770
having to constantly think about what spacing we want to use
260
00:12:27,770 --> 00:12:29,710
can be really tiring.
261
00:12:29,710 --> 00:12:32,320
But if we have a system like this in place,
262
00:12:32,320 --> 00:12:34,470
then we can just choose the value
263
00:12:34,470 --> 00:12:38,550
and if that one doesn't fit, then we go for the next one.
264
00:12:38,550 --> 00:12:41,400
And this one believe me will be even easier to use
265
00:12:41,400 --> 00:12:44,310
than the one for font sizes.
266
00:12:44,310 --> 00:12:48,110
So this makes designing much much easier and faster,
267
00:12:48,110 --> 00:12:50,370
especially for beginners.
268
00:12:50,370 --> 00:12:54,800
And so we will use exactly this rule in our big project
269
00:12:54,800 --> 00:12:56,423
and actually also in the one
270
00:12:56,423 --> 00:12:58,720
that we are doing in this section.
271
00:12:58,720 --> 00:13:00,870
However, before we go doing that,
272
00:13:00,870 --> 00:13:02,460
we will have another lecture
273
00:13:02,460 --> 00:13:05,400
in which we're gonna talk about visual hierarchy.
274
00:13:05,400 --> 00:13:07,433
And so let's move there right now.
20485
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.