the basics of effective icon design are clear icons need to be consistent legible and clear
so that users can easily understand and recognize them. hi my name is Niki and welcome to this video
where we're going to talk about how to design better icons iconography is an important part
of user interface design it's a visual language that represents content and actions as well as it
shows the meaning behind functionality so here are some tips to help you design better icons
grade icons are made using grids so first what you want to do is you need to define your bounding box
and you got to define a save zone within your bounding box and set a few key lines so you got
to use the grid as a template to make your icons proportion uniform don't mix the size
rather stick to the same size for example stick to 24 pixel or 16 pixel i like to use these two
also if an icon is narrow don't be afraid of rotating the icon so it fills the container
or the grid and try to use the whole container your icon will look more balanced that way use
consistent design a few things to keep in mind when it comes to consistency you gotta use the
same line width or stroke width corner radius and fill style to make your icons unified so that they
look like they come from the same icon family for example thickness i like to use 2 pixel and corner
radius i like to use an odd number either 3 pixel or 5 pixel it's up to you but try to use the same
corner radius and you might wonder should you mix filled and outlined style and the answer is
it depends usually you shouldn't however if you want to represent a different state of an icon
then feel free to mix them but be aware of all of your icons need to have a nice filled match as well
part of becoming a great designer is learning and knowing when to break the rules and when to follow
them it comes with time and practice trust me on this the next one is use a minimalistic style
less is usually more when it comes to icons so try to avoid intrinsic icon design on the web
use only details that are important to make the icon easy to recognize and be understood also
all of your icons in your icon set should use the same color combinations so choose your colors and
stick to them sure sometimes you need to make an exception here and there but try to stick to your
colors i would never use more than three colors for my icons i really like monochrome icons but
this is just a personal preference usually for an action icon or an icon button i like to use only
one color i represent the state with a different color if that makes sense but if your icon is
more of like a graphic on a website you have more wiggle room there so feel free to use more colors
there but i wouldn't go over five colors that should be your maximum number of colors that
you use on an icon. so the next one is spacing you gotta use the same spacing between icon elements
for example 3 pixel it will unify and harmonize your icons next one is using optical correction
sometimes when you have different shapes nested in each other your icon can look off balance visually
if that's the case align the elements based on the optical center to balance them the youtube logo
mark is a perfect example of it where the triangle is not exactly in the center just take a look
when it comes to icon design we need to prioritize recognition over cohesiveness because recognition
and clarity distinguish a great icon set from an okay icon set so never sacrifice on clarity
of course icons should be aesthetic as well however icons should convey the message first
and then they should look attractive creating unified icon set is actually
far more difficult than it appears because you need to pay attention to the smallest details
and you probably need to go back and redesign your icons multiple times i remember i spent
so much time with icon design when i started out as a designer but that was long time ago
so if you're looking for handy resources then make sure you check out the description box because i
linked a few of them there also if you would like to learn about how to design the perfect icons
and icon says because maybe this is something that really interests you then i would recommend
the icon handbook it's definitely worth the money i really hope you got something out
of this video as always thank you so much for hanging out with me and i see you next time bye