Voiceover: In this lecture, we will talk about 2 2
how you should use icons in web design. 3 3
Icons can be a very important part of a web designer's work. 4 4
Icons improve the aesthetic of a web site 5 5
and can provide a better user experience, if well used. 6 6
It is actually pretty incredible how much power icons have 7 7
in determining the look and feel of an entire web site. 8 8
But icons can also cause user confusion when poorly used. 9 9
This is why where are 10 10
some very simple, basic guidelines 11 11
you should follow. 12 12
First, you can use icons to show features of your web site 13 13
or a product that you're selling, or steps 14 14
that a user should follow to achieve some goal. 15 15
This is a powerful, modern, and beautiful way 16 16
of showing what your site has to offer. 17 17
Icons actually help the user to quickly browse through 18 18
a page and get an idea what the web site is all about. 19 19
So I strongly recommend you to use icons 20 20
in your design in these situations. 21 21
And here you have some inspiration for how to use icons 22 22
to show features of a web site. 23 23
The possibilities are endless, 24 24
as you can see from all these examples. 25 25
Or instead of showing features, 26 26
you can use icons for actions and links. 27 27
Popular web sites like Facebook or YouTube do exactly this, 28 28
and I'm sure you see this all the time. 29 29
In the case you use icons for doing this, 30 30
there are two rules to follow: 31 31
First, your icons should be instantaneously recognizable 32 32
and remove open interpretation. 33 33
And secondly, label your icons if you have enough space 34 34
to do so, because otherwise, you may confuse your users. 35 35
And whatever you do with icons, they should not take 36 36
a center stage in your design. 37 37
Instead, they should play a supporting role. 38 38
For example, take this beautiful web site. 39 39
I know it's very small, 40 40
and you can't read the text actually, 41 41
but what matters here is that 42 42
it's not covered with icons everywhere. 43 43
There are just these three icons 44 44
that have a supporting role. 45 45
In this case, to list the features of the product. 46 46
Now, there are two types of icon formats: 47 47
Icons in form of images and icon fonts. 48 48
Icon fonts use smooth, vector images instead 49 49
of common roster images to display icons on your web site. 50 50
I strongly recommend you to use icon fonts 51 51
for web design whenever possible. 52 52
And that's because vectors scale endlessly 53 53
up or down for any resolution. 54 54
This is especially important 55 55
for today's high-resolution displays found 56 56
in most smartphones and some computers 57 57
such as the Retina Macs. 58 58
And don't worry. 59 59
You don't have to design any icons by yourself, of course. 60 60
As with images, there are tons of online resources 61 61
where you can get free icon sets. 62 62
And as before, I share some of them 63 63
in the course ebook with you.