All great icons are equally great, and all failed icons are playing different dramas.
Like most good designs, the best and greatest icons are mostly… Stealth.
The most familiar search icon is perfect. It is simple and recognizable, and everyone knows what it represents.
If the design is wrong, we will notice.
It is hard to imagine that this quality icon came from a famous enterprise.
The design principles of good icons
So what made a good icon?
Briefly summarize the principles of designing good icons.
Keep it simple
A single icon should be contextual (APP and web site), and icons are different from each other.
It’s not easy to do this. For designers, there is a lot of temptation to make them complicated, confusing or even unrecognized. The 6 attraction I mentioned next is the main reason for designers to destroy the icons.
Seduction 1: want to use icons to perform all the functions
Recall that when we want to print a document, we will achieve the goal through the printing function in the software, and usually click the document printed icon. At this time, you usually have a problem. The printer settings, the printer, and the printer are the same, and even the exact same printer icons. This case is recorded in the classic UI interactive design book “About Face 3”. Until today, this case is still so classic that you can’t forget it.
Maybe you think this problem can be explained clearly, but no matter how to duplicate it, how to deduce it is still hard to explain clearly. Even the simplest function icon, when you see it, it is often difficult to explain its true function accurately.
Just like the menu in Office, this stack of envelop icons can not clearly and clearly indicate their functions (if they do not read the text labels next to them).
In fact, the explanation is not clear. There is no need to use an icon to clarify a complex function when designing.
Seduce 2: keep 3 or more visual objects in the icon.
It is a very troublesome thing to include more than 2 visual objects in an icon. Of course, even the small icons of 16 * 16 Px, including 2 simple objects, can also be available, but “can” only be a description of the bearing capacity, not that it is good to do so. In fact, reducing the number of objects can increase the readability and recognition of the icon itself.
As a designer, try to use icons to illustrate functions on the one hand. For example, the “network administrator” icon can be represented by a male role with glasses, which is more consistent with the public perception of the role, instead of adding an element like a wrench or a computer on the icon.
And the installation package icon is a typical object that contains too many objects. We already know clearly that software needs to be installed to compute, so there is no need to be so complicated. In view of the entire development history of the software package icon and the close association between CD CDs, the design of this icon can be abstracted to be clear enough for a CD placed on the CD box.
Seduction 3: the detail depiction is too specific
In essence, icons convey information only. As symbols, translation is the same as translation.
The design of this icon is really stylish, tonal, and it seems to express what it looks like, but the approximate meaning is not clear, the function is not available, as a personal expression, but in the commercial product is actually not available.
Seduction 4: the integration of too many brand elements
As a designer, if you want to use brand design to please Party A or boss, this is understandable. At this point, you may use the brand color to unify the icons in the product so that they can see the same thing. Don’t do that!
When brand color matching and elements are integrated into the design of icons, especially when the “formatting” icons are systematized, 99% may reduce the readability of icons. The design and use of icons should follow the design specifications of platform (iOS, Andrlid, Material Design or Windows) as far as possible.
The above icons are made according to the requirements and feelings of the marketing department. What do you think these are?
The above is another negative case. Actually, it is not clear what these icons mean. Is this a kind of game?
Seduction 5: use text on icons to explain the function
Do not use text on icons to illustrate its function. This function can be achieved with a text tag with an icon, and more icons are used for visual expression. Otherwise, their functions overlap. What is the meaning?
Looking at the abbreviation on the icon to guess its function, it is better to look at the text label beside it. The latter is clearer and more readable. The graphical information of the icon itself enables users to judge the functions, fields and attributes represented by the icon faster.
In fact, the collocation of icons + text is necessary in many cases, and it is not necessary for designers to get entangled in this matter, and it is not necessary to incorporate complex text information into the icons.
These monetary icons are more reasonable, using national and regional features and graphics and currency symbols to represent local financial units without direct use of the abbreviations of EUR, CAD and HKG.
Seduction 6: increase the details of the face
When designing icons with characters, try not to include too many details in the face, because it distracts the attention of the user.
An icon with a face in Delta iOS
An icon with a face in Delta Office
Why do you say that? Look at the following Bidstrup’s classic cartoons. How many emotions can a face convey? In many cases, icons are functional, but human innate is extremely sensitive to the details and unconsciously attracted by faces and expressions.
In short, the icon is a product of functionality. It is not a work of art. Its purpose is to serve users, and its simplicity is its proper attribute.
One more thing
The design of icons and LOGO is often carried out simultaneously, but there is no difference between them in terms of function and location. The icon itself is a functional priority, and LOGO carries the work of brand communication and image construction in many times. The differences between the two goals make the actual design needs and rules different.
In fact, the temptation of designers in icon design also indirectly reflects the principles to be followed in icon design. So, at the end of today’s article, I also attach the 7 principles of LOGO design of LOGO design master Paul Rand for your reference and comparison.
Simple design is not modern. Simple design is easier to remember, easier to understand and easier to apply. In modern design with information overload, concise design is also more suitable for everyone’s deep preferences.
Uniqueness reflects the brand’s temperament, uniqueness makes the brand image more prominent, and it is easier to stand out in the market competition. This is also the most challenging part of the LOGO design, and the icon design will not be harsh on uniqueness.
The design of LOGO should be recognized in the visual communication, and in a complex environment, it is important to catch people’s attention immediately.
The scope of application of brand LOGO is very wide, using simple and intuitive geometric figures as far as possible, with a cohesive color matching and more pure elements, to ensure that LOGO can be used in different environments.
There is a close relationship between brand awareness and memory, which is also why excellent LOGO design needs to be combined with continuous marketing and promotion.
Designers need to stand in a higher and more universal perspective to find elements that can be perceived and resonated by more people to design.
Classic is not out of date
The design of LOGO can not be limited by the aesthetics of the times, and has enduring vitality. With the passage of time, it can gradually highlight the unique brand value.