1 00:00:01,373 --> 00:00:03,230 In this lecture, we will talk about 2 00:00:03,230 --> 00:00:06,945 how you should use icons in web design. 3 00:00:06,945 --> 00:00:11,822 Icons can be a very important part of a web designer's work. 4 00:00:11,822 --> 00:00:14,701 Icons improve the aesthetic of a web site 5 00:00:14,701 --> 00:00:19,368 and can provide a better user experience, if well used. 6 00:00:19,368 --> 00:00:23,246 It is actually pretty incredible how much power icons have 7 00:00:23,246 --> 00:00:27,820 in determining the look and feel of an entire web site. 8 00:00:27,820 --> 00:00:32,673 But icons can also cause user confusion when poorly used. 9 00:00:32,673 --> 00:00:33,506 This is why where are 10 00:00:33,506 --> 00:00:35,622 some very simple, basic guidelines 11 00:00:35,622 --> 00:00:37,122 you should follow. 12 00:00:37,967 --> 00:00:42,356 First, you can use icons to show features of your web site 13 00:00:42,356 --> 00:00:44,933 or a product that you're selling, or steps 14 00:00:44,933 --> 00:00:48,950 that a user should follow to achieve some goal. 15 00:00:48,950 --> 00:00:51,830 This is a powerful, modern, and beautiful way 16 00:00:51,830 --> 00:00:55,150 of showing what your site has to offer. 17 00:00:55,150 --> 00:00:58,401 Icons actually help the user to quickly browse through 18 00:00:58,401 --> 00:01:02,766 a page and get an idea what the web site is all about. 19 00:01:02,766 --> 00:01:05,390 So I strongly recommend you to use icons 20 00:01:05,390 --> 00:01:08,307 in your design in these situations. 21 00:01:09,941 --> 00:01:13,262 And here you have some inspiration for how to use icons 22 00:01:13,262 --> 00:01:16,303 to show features of a web site. 23 00:01:16,303 --> 00:01:18,370 The possibilities are endless, 24 00:01:18,370 --> 00:01:21,620 as you can see from all these examples. 25 00:01:22,898 --> 00:01:24,732 Or instead of showing features, 26 00:01:24,732 --> 00:01:28,424 you can use icons for actions and links. 27 00:01:28,424 --> 00:01:33,254 Popular web sites like Facebook or YouTube do exactly this, 28 00:01:33,254 --> 00:01:36,458 and I'm sure you see this all the time. 29 00:01:36,458 --> 00:01:39,709 In the case you use icons for doing this, 30 00:01:39,709 --> 00:01:42,943 there are two rules to follow: 31 00:01:42,943 --> 00:01:47,216 First, your icons should be instantaneously recognizable 32 00:01:47,216 --> 00:01:50,187 and remove open interpretation. 33 00:01:50,187 --> 00:01:53,949 And secondly, label your icons if you have enough space 34 00:01:53,949 --> 00:01:58,116 to do so, because otherwise, you may confuse your users. 35 00:01:59,638 --> 00:02:02,656 And whatever you do with icons, they should not take 36 00:02:02,656 --> 00:02:05,095 a center stage in your design. 37 00:02:05,095 --> 00:02:07,927 Instead, they should play a supporting role. 38 00:02:07,927 --> 00:02:10,992 For example, take this beautiful web site. 39 00:02:10,992 --> 00:02:11,825 I know it's very small, 40 00:02:11,825 --> 00:02:14,429 and you can't read the text actually, 41 00:02:14,429 --> 00:02:16,527 but what matters here is that 42 00:02:16,527 --> 00:02:19,987 it's not covered with icons everywhere. 43 00:02:19,987 --> 00:02:22,169 There are just these three icons 44 00:02:22,169 --> 00:02:24,236 that have a supporting role. 45 00:02:24,236 --> 00:02:28,403 In this case, to list the features of the product. 46 00:02:29,971 --> 00:02:33,245 Now, there are two types of icon formats: 47 00:02:33,245 --> 00:02:36,495 Icons in form of images and icon fonts. 48 00:02:37,415 --> 00:02:40,132 Icon fonts use smooth, vector images instead 49 00:02:40,132 --> 00:02:44,916 of common roster images to display icons on your web site. 50 00:02:44,916 --> 00:02:47,586 I strongly recommend you to use icon fonts 51 00:02:47,586 --> 00:02:51,022 for web design whenever possible. 52 00:02:51,022 --> 00:02:53,414 And that's because vectors scale endlessly 53 00:02:53,414 --> 00:02:56,525 up or down for any resolution. 54 00:02:56,525 --> 00:02:58,244 This is especially important 55 00:02:58,244 --> 00:03:00,775 for today's high-resolution displays found 56 00:03:00,775 --> 00:03:03,306 in most smartphones and some computers 57 00:03:03,306 --> 00:03:05,306 such as the Retina Macs. 58 00:03:07,669 --> 00:03:08,837 And don't worry. 59 00:03:08,837 --> 00:03:12,714 You don't have to design any icons by yourself, of course. 60 00:03:12,714 --> 00:03:16,801 As with images, there are tons of online resources 61 00:03:16,801 --> 00:03:19,587 where you can get free icon sets. 62 00:03:19,587 --> 00:03:21,770 And as before, I share some of them 63 00:03:21,770 --> 00:03:24,187 in the course ebook with you.