The making of Icons
A very subtle yet powerful tool to communicate with the users.
As the world of the Internet moves faster and faster, the number of websites and apps has also started to increase at a rapid pace. Searching for information online has never been easier. Users have started to grow from reading long paragraphs of texts to visualizing the content with illustrations, photos, and even with short videos. This has opened up a path for icons to shine, as it allows users to navigate through the products very easily otherwise would have gotten lost in the forest of texts.
The Icon design process
Some rules I follow to design a pixel-perfect icon are listed below.
Using Grid
A grid is a guideline that is precisely placed on an artboard. It is a set of rules that allows for consistency in the shapes of the icons. The use of grids usually shines the most, when creating an icon set. It allows all the icons to bind together and feel like they are all from the same family.
There are various grids that are available in the market, but I personally use a basic 24x24 grid.
This is a very simple grid compared to Material Icon’s grid. But this is the only grid that is ever needed to create unique looking icons of the same height and width.
Considering the audience
Icons have started to become an integral part of UI design. So, it is very necessary to consider end-users before designing icons. For example, if the product is meant to be used by adults or of older generations, they might not be able to understand abstract designs. They would require simple icons that they can relate to the real world.
Staying under the boundaries of the theme
Icons are meant to feel like they are supposed to be there. For example, a website including lots of illustrations should also have illustrative icons. Similarly, a minimal website should have simple icons. In this way, icons can make more sense and can maximize the visuals of the design.
Readability
The icons are useless if they are not readable. Usually, there are used in very small sizes. This means that they should not include much detail in it. For example, if you’re creating a home icon, including a lot of windows, curtains, and doors are not recommended.
A minimum amount of components that are required for the user to understand the icon should only be used. For example, in the below home icon, there is only a roof, walls, and a door which makes the icon easily readable.
Design on purpose
Icons, like all elements of good design, must have a clear purpose. Before you even think about what sort of icons you want, you need to ask yourself: why? If your answer is “because they’re pretty”, then you should think twice before steaming ahead. In a visually overcrowded digital world even the prettiest icons will soon lose their lustre without meaning or purpose.
