Original subtitles

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 fonts.

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 hands, we have more regular images

like JPEGs 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 JPEGs or PNGs.

And so therefore, as I just mentioned, these will not scale

so they're 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 topography.

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 their,

and so therefore the icons are also very, very round, right?

Even the shapes that they're 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 typeface on the left side.

And so therefore the icons are also completely different,

they're quite squared and so not round at all here

and so they combined perfect with all the texts 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'll 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 the 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 use only icons

for some of the elements,

and then you 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 being used in a big way, like these ones here.

And we can identify icons like that

so icons that we can make really large,

by 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.