Voiceover: In this lecture, we will talk about
how you should use icons in web design.
Icons can be a very important part of a web designer's work.
Icons improve the aesthetic of a web site
and can provide a better user experience, if well used.
It is actually pretty incredible how much power icons have
in determining the look and feel of an entire web site.
But icons can also cause user confusion when poorly used.
This is why where are
some very simple, basic guidelines
you should follow.
First, you can use icons to show features of your web site
or a product that you're selling, or steps
that a user should follow to achieve some goal.
This is a powerful, modern, and beautiful way
of showing what your site has to offer.
Icons actually help the user to quickly browse through
a page and get an idea what the web site is all about.
So I strongly recommend you to use icons
in your design in these situations.
And here you have some inspiration for how to use icons
to show features of a web site.
The possibilities are endless,
as you can see from all these examples.
Or instead of showing features,
you can use icons for actions and links.
Popular web sites like Facebook or YouTube do exactly this,
and I'm sure you see this all the time.
In the case you use icons for doing this,
there are two rules to follow:
First, your icons should be instantaneously recognizable
and remove open interpretation.
And secondly, label your icons if you have enough space
to do so, because otherwise, you may confuse your users.
And whatever you do with icons, they should not take
a center stage in your design.
Instead, they should play a supporting role.
For example, take this beautiful web site.
I know it's very small,
and you can't read the text actually,
but what matters here is that
it's not covered with icons everywhere.
There are just these three icons
that have a supporting role.
In this case, to list the features of the product.
Now, there are two types of icon formats:
Icons in form of images and icon fonts.
Icon fonts use smooth, vector images instead
of common roster images to display icons on your web site.
I strongly recommend you to use icon fonts
for web design whenever possible.
And that's because vectors scale endlessly
up or down for any resolution.
This is especially important
for today's high-resolution displays found
in most smartphones and some computers
such as the Retina Macs.
And don't worry.
You don't have to design any icons by yourself, of course.
As with images, there are tons of online resources
where you can get free icon sets.
And as before, I share some of them
in the course ebook with you.