Web Design #5 - Icons

hjbaek91·2021년 9월 15일

[Learn] HTML/CSS

목록 보기

Using Good Icons

Although icons are one of the supporting features of a website, they are one of the first things the users look at when they look through any website. As such using a good icon is just as much important as using good texts or images.

Thankfully, we do not need to create new icons to use in our website. All the icons that we can use are stored in icon packs that can be found on the internet for free. We just need to make sure that the icons we choose matches our websites personality. When choosing an icon pack, it is recommended to use only one instead of a mix of different icon packs. Using too much icon packs in a website may cause confusion for actual users.

Instead of using bitmap image formats (.jpg and .png), we need to use either SVG icons or icon fonts. This is because bitmap image formats do not scale and will look very blurry on the actual website. On the other hamd, SVG images are vector-based which means they can scale indefinitely on any platform.

Again, we always need to choose icons based on website personality. To do this easily, we can compare our icon with our typography. For example, if the text has a roundness feeling, we can choose icons that express this roundness. If the weight of the text is light, we may choose icons with light colored features.

When to Use Icons

  • To provide visual assistance to text.

  • For product feature blocks.

  • To associate with actions while labeling them at the same time.

  • As bullet points

Using Icons Well

  • Keep icons neutral by using the same color as the text. On the other hand, use different colors for more attention.

  • Don't confuse your user with icons. Icons need to make sense and fit the text or action.

  • Don't make icons larger than what they were designed for. If needed, enclose them in a shape.

Useful Tools

Improving Everyday

2개의 댓글

2022년 2월 6일

Web design is essential now, so I decided to become a part of it and chose this direction. For me, the main thing in creating designs is harmony in all details. And unique fonts are simply necessary in this matter. Recently, I found Master Bundlles which turned out helpful for me. I can pick script tattoo fonts that are great to complement any design.

답글 달기
2022년 12월 19일

ABT PRO Marker Floral Illustration 5 is a marker drawing tool that can help you achieve stunning flower illustrations and shapes in seconds. I prefer to get gutter cleaning, and learn more new tips for roof washing. With ABT PRO Marker, you can quickly draw beautiful flowers and even more. Created by the world-famous manufacturer, the new ABT PRO Marker is equipped with two nibs for your convenience. You can even use one of them to create fine lines such as underlines, etc.

답글 달기