Topic 05 Web Designing - 7 Rules for Perfect Icon Design

PTI ACADEMY   |   Nov 01, 2019   |   667

The icon is a symbol of any short kind of information and we can ignore words. An icon designer should know about the perfect icon design. below, you can find the best steps to create an icon.

Explore before starting
  • Get inspired.
  • Collect ideas.
  • Discover new trends.
  • Discover styles that might fit you.

A home icon on a 20px grid will be used as an example, some icons I am using for inspiration.

Understand Icons

The type of icons you use depends on the design where they will be implemented:

Using the wrong type of icon on a design can deliver the wrong message about the product to the user.

Follow the same style

Before you start you need to determinate the style you want to choose, the color palette, perspective and rendering.

Start with a Grifd

Don't design on top of the grid, use the grid:

Keep it simple, just not too simple

Design at a certain level of detail, icons should be easily recognizable, but not too complex. Don't add more than 2-3 objects.

Test on Real Product Interfaces

Sometimes icons tend to look good but when we place them on the web they just don't look right Group testing is the easiest way to spot problematic icons. Just place all the icons together in the design and see what's wrong.

Optimize for Small Size

Remove extra details & normalize perspective. The smaller the icon, the more Simplified it should be.