Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,500 --> 00:00:02,680
Our next topic
2
00:00:02,680 --> 00:00:06,470
is on how to use icons in web design.
3
00:00:06,470 --> 00:00:09,380
So icons can add a lot of detail
4
00:00:09,380 --> 00:00:11,420
and can completely change the look
5
00:00:11,420 --> 00:00:15,090
and feel of an entire page or application.
6
00:00:15,090 --> 00:00:17,640
And that's why it's so important to know
7
00:00:17,640 --> 00:00:19,253
how to use them properly.
8
00:00:20,240 --> 00:00:23,940
And probably the most important rule of using icons
9
00:00:23,940 --> 00:00:26,670
is to use a very good icon pack
10
00:00:26,670 --> 00:00:31,110
and not simply some random icons that you find online.
11
00:00:31,110 --> 00:00:34,870
And there are a lot of icon packs available online,
12
00:00:34,870 --> 00:00:37,460
both free and paid options.
13
00:00:37,460 --> 00:00:40,710
But free icon packs, such as Phosphor icons,
14
00:00:40,710 --> 00:00:45,710
Ionicons and Icons8 can actually take you a long way.
15
00:00:46,410 --> 00:00:48,540
For example, the Phosphor icons,
16
00:00:48,540 --> 00:00:51,520
which look like this are actually a very,
17
00:00:51,520 --> 00:00:55,190
very good source of high quality icons.
18
00:00:55,190 --> 00:00:56,740
And if you want to make your life
19
00:00:56,740 --> 00:00:58,680
really easy when designing,
20
00:00:58,680 --> 00:01:01,730
you don't even need to add an external icon pack,
21
00:01:01,730 --> 00:01:04,490
you can simply use emojis as well.
22
00:01:04,490 --> 00:01:08,700
And in many situations, emojis actually work really well.
23
00:01:08,700 --> 00:01:11,890
So that's definitely an option to consider.
24
00:01:11,890 --> 00:01:13,200
Now what's important here
25
00:01:13,200 --> 00:01:16,170
is that you use only one icon pack.
26
00:01:16,170 --> 00:01:19,500
So never mix icons from different icon packs,
27
00:01:19,500 --> 00:01:23,920
because otherwise you might end up with a result like this.
28
00:01:23,920 --> 00:01:26,090
So here you have six icons
29
00:01:26,090 --> 00:01:28,610
and one of them looks completely off.
30
00:01:28,610 --> 00:01:31,140
Can you guess which one that is?
31
00:01:31,140 --> 00:01:33,670
So of course it's this one,
32
00:01:33,670 --> 00:01:36,330
it has a completely different style.
33
00:01:36,330 --> 00:01:39,420
So all these other icons are a line icons
34
00:01:39,420 --> 00:01:41,070
and they are very round,
35
00:01:41,070 --> 00:01:44,870
while this other icon is kind of like squared
36
00:01:44,870 --> 00:01:47,590
or boxy and it's also filled.
37
00:01:47,590 --> 00:01:49,250
So this icon style really
38
00:01:49,250 --> 00:01:51,790
is completely different from the rest.
39
00:01:51,790 --> 00:01:54,050
And that can be quite distracting
40
00:01:54,050 --> 00:01:57,580
and take the user's attention away from your content
41
00:01:57,580 --> 00:01:59,320
because they might then only look
42
00:01:59,320 --> 00:02:02,420
at this weird and strange looking icon.
43
00:02:02,420 --> 00:02:05,290
And of course, that's not what you want.
44
00:02:05,290 --> 00:02:07,970
Now, next up, you should only use icons
45
00:02:07,970 --> 00:02:12,810
that are in the SVG format or something called icon fonts.
46
00:02:12,810 --> 00:02:15,680
And that's important because these type of icons
47
00:02:15,680 --> 00:02:17,940
are so called vector-based,
48
00:02:17,940 --> 00:02:20,760
which means that we can scale them indefinitely
49
00:02:20,760 --> 00:02:22,800
without they getting pixelated.
50
00:02:22,800 --> 00:02:25,020
So they will not get unsharp
51
00:02:25,020 --> 00:02:27,920
no matter how big we make the icons.
52
00:02:27,920 --> 00:02:30,600
On the other hands, we have more regular images
53
00:02:30,600 --> 00:02:33,570
like JPEGs or PNGs.
54
00:02:33,570 --> 00:02:36,950
And so we should never use these formats for icons
55
00:02:36,950 --> 00:02:39,200
because we cannot scale them,
56
00:02:39,200 --> 00:02:42,680
so they become unsharp as we make them bigger.
57
00:02:42,680 --> 00:02:46,150
And this is mainly a problem on high definition screens,
58
00:02:46,150 --> 00:02:48,760
where there is a scale factor of 2X.
59
00:02:48,760 --> 00:02:51,490
So just like we talked about in the previous lecture
60
00:02:51,490 --> 00:02:54,130
on images, remember that?
61
00:02:54,130 --> 00:02:56,410
So when you're searching for icons,
62
00:02:56,410 --> 00:02:59,710
it might be tempting to simply Google some images
63
00:02:59,710 --> 00:03:02,930
and then use the results for your design.
64
00:03:02,930 --> 00:03:06,350
However, these results will always be images
65
00:03:06,350 --> 00:03:08,670
like JPEGs or PNGs.
66
00:03:08,670 --> 00:03:12,820
And so therefore, as I just mentioned, these will not scale
67
00:03:12,820 --> 00:03:17,140
so they're not good candidates for using in your design.
68
00:03:17,140 --> 00:03:20,370
Also using images from Google directly
69
00:03:20,370 --> 00:03:24,130
is many times in violation of copyright laws,
70
00:03:24,130 --> 00:03:28,030
and so that is never a good idea anyway, right?
71
00:03:28,030 --> 00:03:30,770
So always go for professional icon packs,
72
00:03:30,770 --> 00:03:35,770
which are usually always in SVG or even in icon fonts.
73
00:03:35,840 --> 00:03:37,570
Okay, but now you need to know
74
00:03:37,570 --> 00:03:41,210
how to actually choose between different icon packs.
75
00:03:41,210 --> 00:03:43,180
So how do you do that?
76
00:03:43,180 --> 00:03:46,300
Well, what matters most is that these icons
77
00:03:46,300 --> 00:03:50,680
need to adjust to your website personality once again.
78
00:03:50,680 --> 00:03:54,160
And the easiest way of doing that is to use an icon pack,
79
00:03:54,160 --> 00:03:58,670
which has a similar roundness and weight to your topography.
80
00:03:58,670 --> 00:04:00,770
Which is important because icons
81
00:04:00,770 --> 00:04:04,080
are many times placed along with text.
82
00:04:04,080 --> 00:04:06,270
So let's see some examples here.
83
00:04:06,270 --> 00:04:09,470
And the first one has a very round typography,
84
00:04:09,470 --> 00:04:11,680
especially in the heading their,
85
00:04:11,680 --> 00:04:16,630
and so therefore the icons are also very, very round, right?
86
00:04:16,630 --> 00:04:20,380
Even the shapes that they're in are not even just round,
87
00:04:20,380 --> 00:04:22,420
they're also a bit irregular.
88
00:04:22,420 --> 00:04:24,330
And so all of that will contribute
89
00:04:24,330 --> 00:04:27,400
to the overall roundness of the design.
90
00:04:27,400 --> 00:04:29,610
Now, on the other hand, on the right side,
91
00:04:29,610 --> 00:04:33,250
we have a very squared or boxy type face.
92
00:04:33,250 --> 00:04:35,690
So it's not round at all right?
93
00:04:35,690 --> 00:04:37,013
It's completely different
94
00:04:37,013 --> 00:04:39,550
than the typeface on the left side.
95
00:04:39,550 --> 00:04:42,980
And so therefore the icons are also completely different,
96
00:04:42,980 --> 00:04:47,570
they're quite squared and so not round at all here
97
00:04:47,570 --> 00:04:51,370
and so they combined perfect with all the texts here.
98
00:04:51,370 --> 00:04:53,410
Now, some website personalities
99
00:04:53,410 --> 00:04:56,110
might actually not need icons at all,
100
00:04:56,110 --> 00:04:59,590
like the minimalist or bold personality,
101
00:04:59,590 --> 00:05:03,300
but again, more about personalities a bit later.
102
00:05:03,300 --> 00:05:05,420
So, but then we will have a big overview
103
00:05:05,420 --> 00:05:08,740
of what to do for each of the personalities
104
00:05:08,740 --> 00:05:11,320
for each of the ingredients.
105
00:05:11,320 --> 00:05:13,940
But now moving on, let's actually learn
106
00:05:13,940 --> 00:05:17,123
when we can use icons in our design.
107
00:05:18,170 --> 00:05:21,410
So one very common use case is to use icons
108
00:05:21,410 --> 00:05:24,800
in order to provide visual assistance to text
109
00:05:24,800 --> 00:05:27,750
such like in all of these examples.
110
00:05:27,750 --> 00:05:29,660
So you have some piece of text,
111
00:05:29,660 --> 00:05:31,600
and then you'll have a small icon
112
00:05:31,600 --> 00:05:33,830
somewhere close to that text,
113
00:05:33,830 --> 00:05:36,010
which basically makes it easier to scan
114
00:05:36,010 --> 00:05:37,900
and understand the text.
115
00:05:37,900 --> 00:05:41,260
And also provides some interesting visual detail
116
00:05:41,260 --> 00:05:45,470
and again, visual assistance to the text itself.
117
00:05:45,470 --> 00:05:49,120
So again, this is a very, very common thing to do,
118
00:05:49,120 --> 00:05:50,500
and I'm sure you have seen it
119
00:05:50,500 --> 00:05:53,820
on all kinds of websites that you visit
120
00:05:53,820 --> 00:05:55,920
on your day-to-day basis?
121
00:05:55,920 --> 00:05:58,000
Now probably the most common use case
122
00:05:58,000 --> 00:06:02,200
of all for icons is to build feature blocks.
123
00:06:02,200 --> 00:06:05,020
So feature blocks are something like this,
124
00:06:05,020 --> 00:06:08,290
where you usually have an icon at the top,
125
00:06:08,290 --> 00:06:11,930
then some smaller heading and then a description.
126
00:06:11,930 --> 00:06:14,260
So the goal of these feature blocks
127
00:06:14,260 --> 00:06:16,700
is to basically describe the features
128
00:06:16,700 --> 00:06:19,360
of a certain product or service.
129
00:06:19,360 --> 00:06:22,570
And so icons in that are extremely helpful
130
00:06:22,570 --> 00:06:24,580
because if they're well chosen,
131
00:06:24,580 --> 00:06:28,270
then the user might not even have to read the text.
132
00:06:28,270 --> 00:06:30,920
For example, in this first feature blocks,
133
00:06:30,920 --> 00:06:34,770
we can see immediately without even reading the text,
134
00:06:34,770 --> 00:06:38,500
that there is some bedrooms, that there is some furniture,
135
00:06:38,500 --> 00:06:40,210
some cleaning going on,
136
00:06:40,210 --> 00:06:43,590
and also that there are some WiFi involved.
137
00:06:43,590 --> 00:06:45,980
So these days in modern web design,
138
00:06:45,980 --> 00:06:47,600
basically all websites
139
00:06:47,600 --> 00:06:50,260
have some kind of feature blocks like this,
140
00:06:50,260 --> 00:06:53,910
where they use some icons to provide a visual information
141
00:06:53,910 --> 00:06:56,810
about each of their features.
142
00:06:56,810 --> 00:07:00,710
Now, another situations where icons are used all the time
143
00:07:00,710 --> 00:07:03,030
is together with actions.
144
00:07:03,030 --> 00:07:07,550
So for example, on buttons or on menus in web applications
145
00:07:07,550 --> 00:07:12,550
like Twitter or Spotify, or many other applications
146
00:07:12,780 --> 00:07:14,930
that I'm sure you have seen.
147
00:07:14,930 --> 00:07:19,200
And once more, the goal of using icons in the situation
148
00:07:19,200 --> 00:07:22,490
is to provide visual assistance to the text.
149
00:07:22,490 --> 00:07:24,390
So, basically to make it easier
150
00:07:24,390 --> 00:07:27,030
and faster for the user to understand
151
00:07:27,030 --> 00:07:29,040
what each action is doing
152
00:07:29,040 --> 00:07:32,750
sometimes maybe even without reading the text at all.
153
00:07:32,750 --> 00:07:35,310
So we all use the web every single day
154
00:07:35,310 --> 00:07:37,660
and by doing that, we have learned the meaning
155
00:07:37,660 --> 00:07:39,720
of many of these icons.
156
00:07:39,720 --> 00:07:42,800
And so for example, here in this Twitter example,
157
00:07:42,800 --> 00:07:46,700
the notification, or the messages, or the bookmarks,
158
00:07:46,700 --> 00:07:49,990
or even the profile, we don't even need the text
159
00:07:49,990 --> 00:07:52,500
for those icons, right?
160
00:07:52,500 --> 00:07:56,730
We would immediately know what each of these option does.
161
00:07:56,730 --> 00:08:00,400
However, we should still label the icons with text
162
00:08:00,400 --> 00:08:04,430
and not just simply use icons and call it a day.
163
00:08:04,430 --> 00:08:08,720
So many users might not know the meaning of these icons,
164
00:08:08,720 --> 00:08:13,080
and also some of the icons are not always that clear.
165
00:08:13,080 --> 00:08:15,570
And so therefore it is a good practice
166
00:08:15,570 --> 00:08:20,570
to always use icons together with the actual action text.
167
00:08:20,760 --> 00:08:24,710
The only exceptions is if there is really no space
168
00:08:24,710 --> 00:08:28,480
or if all the icons are 100% clear.
169
00:08:28,480 --> 00:08:30,760
Also when you're building some navigation,
170
00:08:30,760 --> 00:08:34,250
you should be consistent and not use only icons
171
00:08:34,250 --> 00:08:35,930
for some of the elements,
172
00:08:35,930 --> 00:08:39,400
and then you use only text for the other ones.
173
00:08:39,400 --> 00:08:41,260
So that looks a bit strange,
174
00:08:41,260 --> 00:08:44,990
and so you should avoid a situation like this.
175
00:08:44,990 --> 00:08:48,360
Now, finally another pretty common use case for icons
176
00:08:48,360 --> 00:08:51,110
is to use them as bullet points.
177
00:08:51,110 --> 00:08:54,420
So just like we have here in these examples,
178
00:08:54,420 --> 00:08:56,560
and most of the times we're just talking
179
00:08:56,560 --> 00:08:58,620
about some small check marks
180
00:08:58,620 --> 00:09:00,680
and they are included by default,
181
00:09:00,680 --> 00:09:03,180
basically in all icon packs.
182
00:09:03,180 --> 00:09:06,080
So this can be once again a nice way
183
00:09:06,080 --> 00:09:10,700
of adding some more visual detail to your designs.
184
00:09:10,700 --> 00:09:14,190
All right, so we learned what icons to use,
185
00:09:14,190 --> 00:09:16,010
when to use icons.
186
00:09:16,010 --> 00:09:17,860
And now let's quickly talk about
187
00:09:17,860 --> 00:09:20,373
how to actually use icons well.
188
00:09:21,920 --> 00:09:23,680
So as a first guideline,
189
00:09:23,680 --> 00:09:25,940
if you want to keep icons neutral,
190
00:09:25,940 --> 00:09:29,600
you can set them as the same color as your text.
191
00:09:29,600 --> 00:09:31,740
So just like in this example,
192
00:09:31,740 --> 00:09:35,260
the text is basically black or white,
193
00:09:35,260 --> 00:09:38,760
and so if you set the icons to a similar color,
194
00:09:38,760 --> 00:09:41,450
then they will not draw a lot of attention.
195
00:09:41,450 --> 00:09:43,740
They will stay a little bit out of the way
196
00:09:43,740 --> 00:09:46,810
and let the user focus more on the text
197
00:09:46,810 --> 00:09:48,900
and simply be there to provide
198
00:09:48,900 --> 00:09:51,890
some visual assistance in the background.
199
00:09:51,890 --> 00:09:54,810
On the other hand, if you want to draw more attention,
200
00:09:54,810 --> 00:09:58,230
you can use different colors for your icons.
201
00:09:58,230 --> 00:10:01,870
So for example, you can make the icon your brand color,
202
00:10:01,870 --> 00:10:04,550
or if you want to draw even more attention,
203
00:10:04,550 --> 00:10:08,610
then you can also use different colors for different icons
204
00:10:08,610 --> 00:10:12,050
like these two examples here at the bottom.
205
00:10:12,050 --> 00:10:16,010
Next up do not confuse your users by using icons
206
00:10:16,010 --> 00:10:18,270
that don't really make sense.
207
00:10:18,270 --> 00:10:21,130
So the icons that you choose in your design
208
00:10:21,130 --> 00:10:22,740
should actually make sense
209
00:10:22,740 --> 00:10:27,090
and fit the text or the action that you want to convey.
210
00:10:27,090 --> 00:10:29,190
So in this design right here,
211
00:10:29,190 --> 00:10:31,370
I think there are a couple of examples
212
00:10:31,370 --> 00:10:34,740
where the icon doesn't really make a lot of sense.
213
00:10:34,740 --> 00:10:38,740
So the icon doesn't really fit the text that we see here,
214
00:10:38,740 --> 00:10:43,060
and so in cases like this, it's really just confusing.
215
00:10:43,060 --> 00:10:46,010
For example, what does enterprise software
216
00:10:46,010 --> 00:10:48,540
have to do with that pie chart?
217
00:10:48,540 --> 00:10:50,830
That's not really clear, right?
218
00:10:50,830 --> 00:10:53,750
And so this icon does not really provide
219
00:10:53,750 --> 00:10:56,160
any visual assistance to the text
220
00:10:56,160 --> 00:10:58,300
because just by looking at the icon,
221
00:10:58,300 --> 00:11:01,483
you will not know what this feature is all about.
222
00:11:02,550 --> 00:11:04,880
Now, if the icon pack that you chose
223
00:11:04,880 --> 00:11:08,220
does not have a fitting icon for your text,
224
00:11:08,220 --> 00:11:12,090
it might be time to look maybe for another icon pack,
225
00:11:12,090 --> 00:11:16,300
or you can also adjust your text maybe to something else,
226
00:11:16,300 --> 00:11:18,860
which is more fitting to one of the icons
227
00:11:18,860 --> 00:11:23,190
that is included in your icon pack okay?
228
00:11:23,190 --> 00:11:25,700
Now, finally the last guideline here
229
00:11:25,700 --> 00:11:28,800
is that you should not make icons larger
230
00:11:28,800 --> 00:11:31,060
than what they were designed for.
231
00:11:31,060 --> 00:11:33,780
Now, this can actually be a little bit subjective
232
00:11:33,780 --> 00:11:35,900
and it might be hard to perceive,
233
00:11:35,900 --> 00:11:39,090
but if you take a look at this example here with me,
234
00:11:39,090 --> 00:11:42,490
then you might agree that the icons that are on the right
235
00:11:42,490 --> 00:11:45,030
look kind of off, right?
236
00:11:45,030 --> 00:11:48,460
So for example, the lines look way too large,
237
00:11:48,460 --> 00:11:52,010
even though the icon itself actually has a nice size,
238
00:11:52,010 --> 00:11:54,090
which is not oversized.
239
00:11:54,090 --> 00:11:57,080
But again, the lines are too thick
240
00:11:57,080 --> 00:12:01,050
and therefore it looks very weird and unnatural.
241
00:12:01,050 --> 00:12:03,600
Now, one of the possible solutions for this
242
00:12:03,600 --> 00:12:05,620
is to keep the icon smaller,
243
00:12:05,620 --> 00:12:08,140
but enclose them in a bigger shape.
244
00:12:08,140 --> 00:12:10,450
And so therefore the overall icon
245
00:12:10,450 --> 00:12:14,500
will basically be the shape plus the icon itself,
246
00:12:14,500 --> 00:12:18,140
and they are now just as big as in the right example,
247
00:12:18,140 --> 00:12:20,780
but without looking unnatural.
248
00:12:20,780 --> 00:12:24,680
Now, on the other hand, some icons were clearly designed
249
00:12:24,680 --> 00:12:28,820
to being used in a big way, like these ones here.
250
00:12:28,820 --> 00:12:32,010
And we can identify icons like that
251
00:12:32,010 --> 00:12:34,980
so icons that we can make really large,
252
00:12:34,980 --> 00:12:37,530
by a lot of detail that they contain.
253
00:12:37,530 --> 00:12:42,050
And usually icons like these also use very thin lines,
254
00:12:42,050 --> 00:12:46,120
which keeps the icon light as we scale it up.
255
00:12:46,120 --> 00:12:51,120
All right, so these are my 11 guidelines for using icons.
256
00:12:51,630 --> 00:12:54,950
And so now let's use some of them in the real world,
257
00:12:54,950 --> 00:12:56,453
right in the next lecture.
19523
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.