Original subtitles

1 1

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.