Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,380 --> 00:00:03,510
Welcome back to our lecture
2
00:00:03,510 --> 00:00:06,230
about shadows in web design.
3
00:00:06,230 --> 00:00:08,372
Now, shadows can play an important part
4
00:00:08,372 --> 00:00:11,359
in helping users figure out the relationships
5
00:00:11,359 --> 00:00:14,277
between parts of our designs
6
00:00:14,277 --> 00:00:19,000
or we can just use them to add interesting visual details.
7
00:00:19,000 --> 00:00:20,005
But in any case,
8
00:00:20,005 --> 00:00:23,533
let's learn how to use them to our advantage.
9
00:00:24,614 --> 00:00:28,547
And let's begin this lecture with some concepts first.
10
00:00:28,547 --> 00:00:29,631
And in particular,
11
00:00:29,631 --> 00:00:33,229
let's start with a very brief history of shadows
12
00:00:33,229 --> 00:00:35,269
in user interface design
13
00:00:35,269 --> 00:00:38,591
because there has been some back and forth in the trends
14
00:00:38,591 --> 00:00:40,908
over the last couple of years.
15
00:00:40,908 --> 00:00:44,063
So back in the day around 2010,
16
00:00:44,063 --> 00:00:45,999
all interfaces on mobile
17
00:00:45,999 --> 00:00:49,747
and on the web looked something like this.
18
00:00:49,747 --> 00:00:52,623
We call this skeuomorphic design
19
00:00:52,623 --> 00:00:56,846
and it was full of realistic details and glossy effects
20
00:00:56,846 --> 00:00:59,064
and lots of shadows.
21
00:00:59,064 --> 00:01:00,822
Then after some time,
22
00:01:00,822 --> 00:01:03,894
Windows 8 and iOS 7 came along
23
00:01:03,894 --> 00:01:07,006
and introduced the idea of flat design
24
00:01:07,006 --> 00:01:11,070
where all of this was completely stripped away.
25
00:01:11,070 --> 00:01:16,070
So no more realistic details or glossy effects or shadows.
26
00:01:16,124 --> 00:01:19,693
Everything was simply reduced down to the essentials
27
00:01:19,693 --> 00:01:23,650
which is why this design is also called minimal.
28
00:01:23,650 --> 00:01:27,235
However, this quite drastic change to flat design
29
00:01:27,235 --> 00:01:29,626
might've taken it a bit too far
30
00:01:29,626 --> 00:01:33,509
because it brought with it some usability problems.
31
00:01:33,509 --> 00:01:35,761
That's why in the last couple of years,
32
00:01:35,761 --> 00:01:40,518
something that I call flat design 2.0 has emerged.
33
00:01:40,518 --> 00:01:42,310
Now, it's still minimal
34
00:01:42,310 --> 00:01:44,517
without the realistic looking details
35
00:01:44,517 --> 00:01:46,906
but it does bring back some shadows
36
00:01:46,906 --> 00:01:50,198
and depth to user interfaces.
37
00:01:50,198 --> 00:01:52,263
And speaking of depth,
38
00:01:52,263 --> 00:01:55,265
depth actually brings us to our next point
39
00:01:55,265 --> 00:01:59,002
which is the fact that shadow basically creates
40
00:01:59,002 --> 00:02:03,027
so it simulates depth in user interfaces
41
00:02:03,027 --> 00:02:04,267
or in other words,
42
00:02:04,267 --> 00:02:06,150
shadows basically allow us
43
00:02:06,150 --> 00:02:09,251
to add a third dimension to our designs
44
00:02:09,251 --> 00:02:13,271
and that's the whole reason why we use shadows in UI design
45
00:02:13,271 --> 00:02:14,894
in the first place.
46
00:02:14,894 --> 00:02:18,374
So the more shadow that we add to a certain element,
47
00:02:18,374 --> 00:02:20,506
the further away from the screen
48
00:02:20,506 --> 00:02:22,512
or from the user interface,
49
00:02:22,512 --> 00:02:24,467
that element will seem
50
00:02:24,467 --> 00:02:28,373
and we can see that very nicely in this diagram.
51
00:02:28,373 --> 00:02:31,503
So the shadow on the left is very subtle
52
00:02:31,503 --> 00:02:34,504
because it's set to be only two pixels away
53
00:02:34,504 --> 00:02:36,472
from the interface
54
00:02:36,472 --> 00:02:40,267
and keep in mind that shadows are created in the real world
55
00:02:40,267 --> 00:02:42,902
by some light shining at an object
56
00:02:42,902 --> 00:02:46,060
and therefore creating a shadow behind it.
57
00:02:46,060 --> 00:02:46,893
Right?
58
00:02:46,893 --> 00:02:48,771
So in user interfaces,
59
00:02:48,771 --> 00:02:51,423
shadows also simulate the existence
60
00:02:51,423 --> 00:02:54,430
of some imaginary light sources.
61
00:02:54,430 --> 00:02:58,391
Now, if the element is only two pixels away from the screen,
62
00:02:58,391 --> 00:03:02,009
then makes sense that it cannot cast a large shadow
63
00:03:02,009 --> 00:03:04,560
on the rest of the interface.
64
00:03:04,560 --> 00:03:05,393
Right?
65
00:03:05,393 --> 00:03:08,700
And that's why the shadow is very subtle here.
66
00:03:08,700 --> 00:03:10,522
I think that is quite intuitive
67
00:03:10,522 --> 00:03:13,872
because this is exactly what we experienced also
68
00:03:13,872 --> 00:03:15,750
in the real world.
69
00:03:15,750 --> 00:03:17,550
Now, on the other hand,
70
00:03:17,550 --> 00:03:21,630
if the element is far away from the interface like,
71
00:03:21,630 --> 00:03:23,452
let's say 24 pixels,
72
00:03:23,452 --> 00:03:25,753
then the element will of course be able
73
00:03:25,753 --> 00:03:29,189
to cast a huge shadow on the interface.
74
00:03:29,189 --> 00:03:31,901
And so that's the reason why we see that here
75
00:03:31,901 --> 00:03:34,750
on the other end of the spectrum.
76
00:03:34,750 --> 00:03:37,401
We can also see that in this other diagram
77
00:03:37,401 --> 00:03:40,119
where all these different shadows are represented
78
00:03:40,119 --> 00:03:44,080
in a kind of three dimensional space.
79
00:03:44,080 --> 00:03:46,224
Finally, I also want to just mention
80
00:03:46,224 --> 00:03:51,224
that we can use shadows on both boxes and on text.
81
00:03:51,230 --> 00:03:52,063
Now, in this lecture,
82
00:03:52,063 --> 00:03:55,028
we will focus on shadows on boxes though
83
00:03:55,028 --> 00:03:59,430
which is what we see in these diagrams here.
84
00:03:59,430 --> 00:04:00,263
All right.
85
00:04:00,263 --> 00:04:01,530
So let's now see
86
00:04:01,530 --> 00:04:05,173
how we can use this idea of shadows in design.
87
00:04:06,980 --> 00:04:08,200
And first of all,
88
00:04:08,200 --> 00:04:10,634
you actually don't really need to use shadows
89
00:04:10,634 --> 00:04:14,450
if they don't fit your website personality.
90
00:04:14,450 --> 00:04:15,283
And again,
91
00:04:15,283 --> 00:04:17,600
we will talk more about this later.
92
00:04:17,600 --> 00:04:18,433
But for now,
93
00:04:18,433 --> 00:04:20,520
what I want to show you is that for example,
94
00:04:20,520 --> 00:04:23,920
in a serious design like this one here,
95
00:04:23,920 --> 00:04:25,601
we use a lot less shadows
96
00:04:25,601 --> 00:04:28,099
and many times no shadows at all
97
00:04:28,099 --> 00:04:31,513
which is exactly what is happening right here.
98
00:04:31,513 --> 00:04:32,496
On the other hand,
99
00:04:32,496 --> 00:04:36,063
the more playful or more fun a design gets,
100
00:04:36,063 --> 00:04:39,240
the more shadows it will also use.
101
00:04:39,240 --> 00:04:41,104
So that's a very nice and easy rule
102
00:04:41,104 --> 00:04:44,148
that you can use for shadows in your own designs
103
00:04:44,148 --> 00:04:45,788
even if you do not want
104
00:04:45,788 --> 00:04:49,320
to set a certain website personality.
105
00:04:49,320 --> 00:04:50,770
So even if you don't do that,
106
00:04:50,770 --> 00:04:53,768
you will still have some idea about how serious
107
00:04:53,768 --> 00:04:56,492
or how elegant your design should be.
108
00:04:56,492 --> 00:04:59,311
And so the more serious and elegant it is,
109
00:04:59,311 --> 00:05:01,875
the less shadows you are going to use.
110
00:05:01,875 --> 00:05:04,754
Now, we will go into what kind of shadow to use
111
00:05:04,754 --> 00:05:06,554
for different situations.
112
00:05:06,554 --> 00:05:08,145
But before we do that,
113
00:05:08,145 --> 00:05:12,401
let me give you two general rules on how to use shadows
114
00:05:12,401 --> 00:05:15,654
and the first one is that you should always use shadows
115
00:05:15,654 --> 00:05:17,722
in small doses.
116
00:05:17,722 --> 00:05:19,247
So please don't go ahead
117
00:05:19,247 --> 00:05:22,969
and add shadows to every single element on the page
118
00:05:22,969 --> 00:05:25,433
because that will just be confusing
119
00:05:25,433 --> 00:05:28,904
and will kind of defeat the purpose of using shadows
120
00:05:28,904 --> 00:05:31,340
in the first place.
121
00:05:31,340 --> 00:05:33,242
So in this example on the left,
122
00:05:33,242 --> 00:05:36,249
every single element does have a shadow.
123
00:05:36,249 --> 00:05:38,030
And in some cases,
124
00:05:38,030 --> 00:05:40,290
it might not make a lot of sense
125
00:05:40,290 --> 00:05:41,690
like in these bullet points
126
00:05:41,690 --> 00:05:44,406
or the email form on the top left side
127
00:05:44,406 --> 00:05:46,830
or on that big image.
128
00:05:46,830 --> 00:05:49,505
So if you add shadows to every single element,
129
00:05:49,505 --> 00:05:53,900
then that would be like adding shadows to no element at all.
130
00:05:53,900 --> 00:05:56,264
Because if all elements have shadows,
131
00:05:56,264 --> 00:06:00,011
then basically that doesn't create any visual hierarchy
132
00:06:00,011 --> 00:06:02,530
between these different elements.
133
00:06:02,530 --> 00:06:03,363
Now, on the other hand,
134
00:06:03,363 --> 00:06:05,410
in the example on the right,
135
00:06:05,410 --> 00:06:08,686
we only have shadows in some of these small images
136
00:06:08,686 --> 00:06:10,631
in the top right side
137
00:06:10,631 --> 00:06:15,370
and so they are able to then create that illusion of depth.
138
00:06:15,370 --> 00:06:16,203
So basically,
139
00:06:16,203 --> 00:06:17,938
these two images look like they float
140
00:06:17,938 --> 00:06:20,709
on top of that other interface
141
00:06:20,709 --> 00:06:23,500
and then also at the very bottom.
142
00:06:23,500 --> 00:06:25,017
So in these feature boxes,
143
00:06:25,017 --> 00:06:27,470
they also used some shadow stare
144
00:06:27,470 --> 00:06:30,030
because they wanted this part of the design
145
00:06:30,030 --> 00:06:32,554
to really stand out from the rest.
146
00:06:32,554 --> 00:06:36,185
So having this kind of float over the rest of the design
147
00:06:36,185 --> 00:06:37,857
is used in this case
148
00:06:37,857 --> 00:06:40,762
to really make these elements more prominent
149
00:06:40,762 --> 00:06:42,643
than the rest of the content.
150
00:06:43,480 --> 00:06:46,790
So that's the first guideline on how to use shadows well
151
00:06:46,790 --> 00:06:50,142
and the second one is that you must go light on shadows
152
00:06:50,142 --> 00:06:52,271
and not make them too dark
153
00:06:52,271 --> 00:06:55,249
because like you see here on this right example,
154
00:06:55,249 --> 00:06:59,460
depth makes the design look kind of bad, really (chuckles).
155
00:06:59,460 --> 00:07:02,253
There is not another word that I could think of there.
156
00:07:02,253 --> 00:07:06,229
It really just looks bad and unnatural too.
157
00:07:06,229 --> 00:07:09,481
So dark shadows like these look very unnatural
158
00:07:09,481 --> 00:07:12,890
because they actually don't exist in the real world.
159
00:07:12,890 --> 00:07:16,152
And so when we then see them in a design like this,
160
00:07:16,152 --> 00:07:20,970
we perceive them as simply looking bad and well...
161
00:07:20,970 --> 00:07:21,803
Unnatural.
162
00:07:21,803 --> 00:07:23,270
Right?
163
00:07:23,270 --> 00:07:25,750
Now, using shadows in a bad way
164
00:07:25,750 --> 00:07:28,920
which basically means to make them way too dark
165
00:07:28,920 --> 00:07:31,468
and to use them everywhere on the page
166
00:07:31,468 --> 00:07:33,620
is one of the easiest ways
167
00:07:33,620 --> 00:07:36,910
to completely ruin an entire design.
168
00:07:36,910 --> 00:07:38,887
And so that's why following these two rules
169
00:07:38,887 --> 00:07:41,260
is absolutely crucial.
170
00:07:41,260 --> 00:07:42,893
If you make your shadows too dark
171
00:07:42,893 --> 00:07:44,506
and use them everywhere,
172
00:07:44,506 --> 00:07:48,420
it is actually best to not use shadows at all.
173
00:07:48,420 --> 00:07:50,520
And so be careful when you use them
174
00:07:50,520 --> 00:07:53,530
and make sure to follow these rules
175
00:07:53,530 --> 00:07:55,624
and of course, also the next ones.
176
00:07:55,624 --> 00:07:59,740
And these next ones are about when to use shadows.
177
00:07:59,740 --> 00:08:02,754
So we should use shadows in the right situations
178
00:08:02,754 --> 00:08:05,766
and so one of them is to use small shadows
179
00:08:05,766 --> 00:08:07,623
for smaller elements
180
00:08:07,623 --> 00:08:11,048
that we simply want to stand out from the page
181
00:08:11,048 --> 00:08:12,263
or in other words,
182
00:08:12,263 --> 00:08:15,133
elements that we want to draw attention to.
183
00:08:16,410 --> 00:08:18,761
And so that's exactly what happens here.
184
00:08:18,761 --> 00:08:22,560
For example, notice these call to action buttons
185
00:08:22,560 --> 00:08:24,922
or even these entire small forums
186
00:08:24,922 --> 00:08:27,895
which have the input for an email address.
187
00:08:27,895 --> 00:08:30,943
These are very important elements on pages
188
00:08:30,943 --> 00:08:34,273
because these help to actually convert users
189
00:08:34,273 --> 00:08:37,020
to paid customers, for example.
190
00:08:37,020 --> 00:08:39,261
And so these are the kinds of elements
191
00:08:39,261 --> 00:08:41,199
that we usually want to stand out
192
00:08:41,199 --> 00:08:44,770
from the rest of the content on our pages.
193
00:08:44,770 --> 00:08:45,719
So that is the reason
194
00:08:45,719 --> 00:08:48,401
why we use these bright colors on them
195
00:08:48,401 --> 00:08:52,030
and it's also the reason why we then add some shadows
196
00:08:52,030 --> 00:08:54,935
in order to make them stand out even more.
197
00:08:54,935 --> 00:08:58,140
And the same can of course be true for other elements
198
00:08:58,140 --> 00:09:01,143
such as images like you see here on the left
199
00:09:01,143 --> 00:09:03,010
and on the top right
200
00:09:03,010 --> 00:09:05,368
where the shadow simply has the purpose
201
00:09:05,368 --> 00:09:08,133
of basically making these elements
202
00:09:08,133 --> 00:09:09,653
as if they are floating a little bit
203
00:09:09,653 --> 00:09:11,763
on top of the interface
204
00:09:11,763 --> 00:09:14,766
and so that draws attention to these images
205
00:09:14,766 --> 00:09:18,018
because there are somehow important for the storytelling
206
00:09:18,018 --> 00:09:21,960
or for displaying the product that's being sold.
207
00:09:21,960 --> 00:09:25,238
So these are examples of when we use small shadows.
208
00:09:25,238 --> 00:09:28,756
So next, let's talk about medium-sized shadows
209
00:09:28,756 --> 00:09:31,763
that we usually use for larger areas
210
00:09:31,763 --> 00:09:33,890
that we want to stand out even more
211
00:09:33,890 --> 00:09:37,448
than the smaller elements that we just talked about.
212
00:09:37,448 --> 00:09:40,498
So this technique of using medium-sized shadows
213
00:09:40,498 --> 00:09:42,124
is used all the time
214
00:09:42,124 --> 00:09:47,020
to make entire sections completely float above the page.
215
00:09:47,020 --> 00:09:49,004
So basically to make them stand out
216
00:09:49,004 --> 00:09:51,020
from the rest of the page
217
00:09:51,020 --> 00:09:54,995
and these two examples show that in a very beautiful way.
218
00:09:54,995 --> 00:09:58,652
Now, another common application of medium-sized shadows
219
00:09:58,652 --> 00:10:02,907
is to make carts stand out from the rest of the interface.
220
00:10:02,907 --> 00:10:04,690
And again, with carts,
221
00:10:04,690 --> 00:10:08,004
we mean something like what we see here on the left
222
00:10:08,004 --> 00:10:10,380
which in this case is a product cart
223
00:10:10,380 --> 00:10:12,798
which contains the description of a certain product
224
00:10:12,798 --> 00:10:15,210
that the user might buy
225
00:10:15,210 --> 00:10:19,350
and we will better define what carts are a little bit later.
226
00:10:19,350 --> 00:10:20,750
All right.
227
00:10:20,750 --> 00:10:21,631
Now, finally,
228
00:10:21,631 --> 00:10:24,006
we also have large shadows
229
00:10:24,006 --> 00:10:26,837
and these kind of shadows we use for elements
230
00:10:26,837 --> 00:10:31,133
that we really want to kind of float above the entire rest
231
00:10:31,133 --> 00:10:32,943
of the interface
232
00:10:32,943 --> 00:10:35,747
and good examples of that are navigations
233
00:10:35,747 --> 00:10:39,613
and pop up windows like you see here on the right.
234
00:10:39,613 --> 00:10:44,470
So all the three examples have like really large shadows.
235
00:10:44,470 --> 00:10:46,501
And so as we learned in the very beginning
236
00:10:46,501 --> 00:10:49,140
that immediately makes us perceive it
237
00:10:49,140 --> 00:10:53,250
as though these elements are really floating above the rest.
238
00:10:53,250 --> 00:10:54,083
Right?
239
00:10:54,083 --> 00:10:58,700
So I think you can intuitively see that here in action.
240
00:10:58,700 --> 00:10:59,570
All right.
241
00:10:59,570 --> 00:11:02,142
So those are the three different types of shadows
242
00:11:02,142 --> 00:11:05,490
that we can use in different situations.
243
00:11:05,490 --> 00:11:09,100
However, we can also try with experimenting
244
00:11:09,100 --> 00:11:13,220
of changing these types of shadows on different situations.
245
00:11:13,220 --> 00:11:14,060
For example,
246
00:11:14,060 --> 00:11:17,258
on mouse interactions like click and hover.
247
00:11:17,258 --> 00:11:20,016
So that's actually a very nice example
248
00:11:20,016 --> 00:11:24,013
where the normal state doesn't have any shadow at all.
249
00:11:24,013 --> 00:11:26,510
Then as we hover over the button,
250
00:11:26,510 --> 00:11:28,756
we can add a medium-sized shadow
251
00:11:28,756 --> 00:11:30,762
which will kind of create the effect
252
00:11:30,762 --> 00:11:34,820
of the button being pulled closer to the user.
253
00:11:34,820 --> 00:11:36,374
So towards the user
254
00:11:36,374 --> 00:11:39,660
as they hover with the mouse over the button.
255
00:11:39,660 --> 00:11:42,110
Then, once they actually click the button,
256
00:11:42,110 --> 00:11:43,990
we can reduce that shadow
257
00:11:43,990 --> 00:11:45,382
which will then create the interface
258
00:11:45,382 --> 00:11:48,221 line:15%
of pushing that element back down
259
00:11:48,221 --> 00:11:50,520
into the interface.
260
00:11:50,520 --> 00:11:53,413
And so a very small and subtle effect like this
261
00:11:53,413 --> 00:11:58,413
can actually help creating a very natural filling interface.
262
00:11:58,530 --> 00:11:59,363
Now, finally,
263
00:11:59,363 --> 00:12:01,439
let me give you just a bonus here
264
00:12:01,439 --> 00:12:03,991
which is that you can also experiment
265
00:12:03,991 --> 00:12:06,910
with something that I call glows,
266
00:12:06,910 --> 00:12:11,010
which basically are colored shadows like this.
267
00:12:11,010 --> 00:12:14,290
So shadows don't always have to be black.
268
00:12:14,290 --> 00:12:16,247
And so if we give them a certain shadow,
269
00:12:16,247 --> 00:12:20,064 line:15%
then they make the element kind of glow.
270
00:12:20,064 --> 00:12:22,740
So like this first button here,
271
00:12:22,740 --> 00:12:25,253
the red one has a red shadow.
272
00:12:25,253 --> 00:12:26,746
And so that makes it look
273
00:12:26,746 --> 00:12:30,800
as if that button is kind of glowing.
274
00:12:30,800 --> 00:12:31,752
Right?
275
00:12:31,752 --> 00:12:34,764
So that's a very modern effect that if you want,
276
00:12:34,764 --> 00:12:36,981
you can experiment with even though
277
00:12:36,981 --> 00:12:40,429
it might be a little bit difficult for beginners.
278
00:12:40,429 --> 00:12:42,329
But still, it's interesting
279
00:12:42,329 --> 00:12:46,290
and you should definitely try it out at some point.
280
00:12:46,290 --> 00:12:47,123
Nice.
281
00:12:47,123 --> 00:12:49,758
So those are the guidelines on shadows
282
00:12:49,758 --> 00:12:52,500
which I hope you found useful.
283
00:12:52,500 --> 00:12:54,930
However, we actually don't know yet
284
00:12:54,930 --> 00:12:58,420
how to use shadows in CSS, do we?
285
00:12:58,420 --> 00:13:01,793
So let's actually learn that in the next video.
20657
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.