Website Design

In one of the sections of our blog you can find and download free icons grouped in dozens of different themes and styles. And today we decided to share with you some useful tips for creating your own content. Similarly to the article about the main types of UI buttons, we think it will be useful for you to look at the most important quality attributes and key characteristics of the icons design: brevity, readability, simplicity, alignment, etc. (a total of 7 pieces).

Icon design

Unlike the post with tutorials for beginners this post is more theoretical, but all principles and explanations are based on real existing examples. Overall, it takes a deliberate approach, a trained eye, step-by-step iteration and a lot of practice to accomplish this task successfully. This post is a translation of that note.

PURPOSE

The main purpose of an icon is to communicate information quickly.

Clarity of icons.

Prius Prime car dashboard

Do you understand all the icons in the picture above? Experienced drivers with experience, of course, remember them, but some options here are extremely illogical - to understand them you will have to read a manual to decipher the corresponding meanings.

Understanding the icons

It's hard to make sense of an icon that uses a meaning you're not familiar with. The signal light responsible for "seat belt" (3rd from the left) is quite obvious. But the "power control system" icon (far right) is more confusing.

The overly intricate images can be annoying at times. And if you're behind the wheel, this kind of misunderstanding of the indicators becomes dangerous at all.

Here are some good and accessible examples for everyone: the heart-shaped love symbol, the caution, the music key and the direction indicator.

Arrow navigation.

The most successful icons are not only understandable to a certain group of knowledgeable people, they become universal for different social strata, cultures and ages. Analyze your CA and choose images and colors that resonate specifically with it. For example, it makes sense that this site uses game imagery to refer to the types of games available on the sites.

Keep in mind that a single icon on its own can sometimes not be the best solution, especially if it represents too global/abstract an idea. In that case, back up the icon with a text description or find another solution.

READY

If you manage to come up with a simple understandable image, you need to make sure that this symbol will be as readable as possible.

Readability of icons

Many Amtrak users will find it difficult to decipher the application icon "station" (the very first), because it was made quite small. Transit has a similar problem - their "schedule" has too little distance between the folder and clip images:

Icons Readability.

A small edit greatly improves the situation (the indentation for the clip below has been increased).