Instructor: Our next topic
is on how to use ICONS in web design.
So, ICONS can add a lot of detail
and can completely change the look and feel
of an entire page or application
and that's why it's so important to know
how to use them properly.
And probably the most important rule
of using ICONS is to use a very good icon pack
and not simply some random icons that you find online.
And there are a lot of icon packs available online
both free and paid options
but free icon packs such as Phosphor icons,
IonIcons, and ICONS8 can actually take you a long way.
For example, the Phosphor icons
which look like this are actually a very,
very good source of high quality ICONS.
And if you want to make your life really easy
when designing,
you don't even need to add an external icon pack.
You can simply use emojis as well.
And in many situations, emojis actually work really well.
So that's definitely an option to consider.
Now what's important here
is that you use only one icon pack.
So never mix icons from different icon packs
because otherwise you might end up with a result like this.
So here you have six ICONS
and one of them looks completely off.
Can you guess which one that is?
So of course it's this one.
It has a completely different style.
So all these other ICONS are a line ICONS
and they are very round,
while this other icon is kind of like squared
or boxy and it's also filled.
So this icon style really is completely different
from the rest and that can be quite distracting
and take the user's attention away
from your content because they might then only look
at this weird and strange looking icon.
And of course, that's not what you want.
Now, next up, you should only use ICONS
that are in the SVG format or something called icon font.
And that's important because these type of ICONS
are so-called vector based,
which means that we can scale them indefinitely
without they getting pixelated.
So they will not get unsharp no matter
how big we make the ICONS.
On the other hand
we have more regular images like JPGs or PNGs.
And so we should never use these formats
for ICONS because we cannot scale them.
So they become unsharp as we make them bigger.
And this is mainly a problem on high definition screens
where there is a scale factor of 2x.
So just like we talked about
in the previous lecture on images, remember that?
So when you're searching for ICONS,
it might be tempting to simply Google some images
and then use the results for your design.
However, these results will always be images
like JPGs or PNGs.
And so therefore, as I just mentioned, this will not scale.
So they are not good candidates for using in your design.
Also using images from Google directly is many times
in violation of copyright laws.
And so that is never a good idea anyway, right?
So always go for professional icon packs
which are usually always in SVG or even in icon fonts.
Okay, but now you need to know how to actually choose
between different icon packs.
So how do you do that?
Well, what matters most is that these ICONS need to adjust
to your website personality once again.
And the easiest way of doing that is to use an icon pack
which has a similar roundness and weight to your typography
which is important
because ICONS are many times placed along with text.
So let's see some examples here.
And the first one has a very round typography
especially in the heading stare.
And so therefore the ICONS are also very, very round, right?
Even the shapes that they are in are not even just round,
they're also a bit irregular.
And so all of that will contribute
to the overall roundness of the design.
Now on the other hand, on the right side
we have a very squared or boxy type face.
So it's not round at all, right?
It's completely different
than the type face on the left side.
And so therefore the ICONS are also completely different.
They are quite squared and so not round at all here.
And so they combine perfect with all the text here.
Now some website personalities might actually
not need ICONS at all
like the minimalist or bold personality, but again
more about personalities a bit later.
So, but then we will have a big overview of what to do
for each of the personalities, for each of the ingredients.
But now moving on
let's actually learn when we can use ICONS in our design.
So one very common use case is to use ICONS
in order to provide visual assistance to text such
like in all of these examples.
So you have some piece of text
and then you have a small icon somewhere close to that text
which basically makes it easier to scan
and understand the text
and also provides some interesting visual detail and again
visual assistance to the text itself.
So again, this is a very, very common thing to do
and I'm sure you have seen it on all kinds
of websites that you visit on your day to day basis.
Now, probably the most common use case of all for ICONS
is to build feature blocks.
So feature blocks are something like this
where you usually have an icon at the top
then some smaller heading and then a description.
So the goal of these feature blocks is to basically describe
the features of a certain product or service.
And so ICONS in that are extremely helpful
because if they're well chosen
then the user might not even have to read the text.
For example, in this first feature blocks
we can see immediately
without even reading the text that there is some bedrooms,
that there is some furniture, some cleaning going on.
And also that there are some wifi involved.
So these days in modern web design
basically all websites have some kind of feature blocks
like this where they use some ICONS to provide
a visual information about each of their features.
Now, another situations where ICONS are used all the time
is together with actions.
So for example, on buttons or on menus
in web applications like Twitter or Spotify
or many other applications that I'm sure you have seen.
And once more
the goal of using ICONS in the situation
is to provide visual assistance to the text.
So basically to make it easier and faster
for the user to understand what each action is doing,
sometimes maybe even without reading the text at all.
So we all use the web every single day,
and by doing that,
we have learned the meaning of many of these ICONS.
And so for example, here in this Twitter example,
the notification, or the messages,
or the bookmarks, or even the profile
we don't even need to text for those ICONS, right?
We would immediately know what each of these option does.
However, we should still label the ICONS with text
and not just simply use ICONS and call it a day.
So many users might not know the meaning of these ICONS
and also some of the ICONS are not always that clear.
And so therefore it is a good practice to always
use ICONS together with the actual action text.
The only exceptions is if there is really no space
or if all the ICONS are 100% clear.
Also, when you're building some navigation
you should be consistent and not used only ICONS
for some of the elements
and then use only text for the other ones.
So that looks a bit strange,
and so you should avoid a situation like this.
Now finally, another pretty common use case for ICONS
is to use them as bullet points.
So just like we have here in these examples,
and most of the times we're just talking about
some small check marks and they are included
by default basically in all icon packs.
So this can be once again a nice way
of adding some more visual detail to your designs.
All right, so we learned what ICONS to use,
when to use ICONS, and now let's quickly talk about
how to actually use ICONS well.
So as a first guideline, if you want to keep ICONS neutral
you can set them as the same color as your text.
So just like in this example,
the text is basically black or white.
And so if you set the ICONS to a similar color
then they will not draw a lot of attention.
They will stay a little bit out of the way
and let the user focus more on the text
and simply be there to provide some visual assistance
in the background.
On the other hand, if you want to draw more attention
you can use different colors for your ICONS.
So for example, you can make the icon your brand color
or if you want to draw even more attention,
then you can also use different colors for different ICONS
like these two examples here at the bottom.
Next up, do not confuse your users
by using ICONS that don't really make sense.
So the ICONS that you choose
in your design should actually make sense
and fit the text or the action that you want to convey.
So in this design right here,
I think there are a couple of examples
where the icon doesn't really make a lot of sense.
So the icon doesn't really fit the text that we see here.
And so in cases like this, it's really just confusing.
For example, what does enterprise software
have to do with that pie chart?
That's not really clear, right?
And so this icon does not really provide
any visual assistance to the text
because just by looking at the icon,
you will not know what this feature is all about.
Now, if the icon pack
that you chose does not have a fitting icon for your text
it might be time to look maybe for another icon pack
or you can also adjust your text maybe to something else
which is more fitting to one of the ICONS
that is included in your icon pack, okay?
Now finally, the last guideline here
is that you should not make ICONS larger
than what they were designed for.
Now, this can actually be a little bit subjective
and it might be hard to perceive,
but if you take a look at this example here with me
then you might agree that the ICONS
that are on the right look kind of off, right?
So for example, the lines look way too large even though
the icon itself actually has a nice size
which is not oversized, but again, the lines are too thick
and therefore it looks very weird and unnatural.
Now, one of the possible solutions for this
is to keep the icon smaller
but enclose them in a bigger shape.
And so therefore,
the overall icon will basically be the shape
plus the icon itself, and they are now just as big
as in the right example, but without looking unnatural.
Now, on the other hand,
some ICONS were clearly designed to be used in a big way
like these ones here, and we can identify ICONS like that.
So ICONS that we can make really large
quite a lot of detail that they contain.
And usually ICONS like these also use very thin lines,
which keeps the icon light as we scale it up.
All right, so these are my 11 guidelines for using ICONS.
And so now let's use some of them in the real world,
right in the next lecture.