This article summarizes the 7 core principles and shows how these principles are applied in practice through a large number of real-world examples.
Creating a high-quality icon collection requires a well-thought-out approach, a well-trained eye, iteration, and a lot of practice. Here are the seven core principles of icon design, with plenty of real-world examples to show how they can be applied in practice, with the aim of giving readers an in-depth look at the key attributes of great icon design.
1. Clarity
The primary goal of the icon is to convey the concept quickly. In your design, avoid using unfamiliar metaphors and ensure that icons are understood across cultures, ages, and backgrounds. Draw on success stories from automotive signaling standardization and consider using resonant metaphors and colors to make icons easier to understand.
When icons use unfamiliar metaphors, it's hard to understand. The seat belt "reminder light" (third from left) is more literal, and we will soon be able to grasp it. The "Electric Power Steering Warning Light" (far right) is even more blurry. Over time, abstract things can become familiar through reuse. That's why automotive signaling devices are standardized;
Here are some of the icons that have become familiar over time – symbols representing love/favorites, warnings, music, and upward/forward directions:
Icons are not only easy to understand for a group of people, but they are also common across different cultures, ages, and backgrounds. Consider your audience and use metaphors and colors that resonate with them.
2. Readability
Once the concept of the icon is understood, make sure the icon is readable. Avoid too much detail and keep enough space when using multiple shapes. Use clear, easy-to-read strokes to make sure your icons are legible at different sizes.
The following clipboard has a problem with poor readability, and the clipboard icon looks like a speck because the space between the clipboards is too small:
When using multiple shapes, leave enough space between them. Thinner strokes, as well as more strokes, can make icons more complex and harder to read.
Google Maps does an excellent job with their traffic icons – very small size yet very easy to read:
3. Simplicity
Simplicity is the golden rule of icon design. Avoid using too much detail and convey the desired message with the right amount of detail. In the user interface, a simplified style can highlight the focus and make way for the content.
Simplicity is suitable for icon design, as we often work on small canvases. Use the right amount of detail for your icons, and don't use more detail than you need. In a user interface, a simplified style conveys the point and makes way for the content.
Fourth, consistency
In order to maintain the harmony of the icon series, the icon elements need to be visually aligned. The visual weight of the icons is determined by parameters such as padding, stroke thickness, size, and shape, and keeping these parameters consistent throughout the collection helps build an overall sense of harmony.
Any given icon has a certain visual weight, determined by parameters such as padding, stroke thickness, size, and shape. Keeping these parameters the same across a set can establish consistency.
Consistency is not an easy task for large icon families, especially when multiple authors are involved. It is crucial to have clear principles and rules to follow (and follow).
5. Personality
Each icon set should have a unique style that reflects the brand's personality and creates a unique atmosphere. Add some unique details to make the icon stand out from the crowd and build the uniqueness of the collection.
6. Ease of use
A well-developed icon set requires further testing and preparation to ensure that it is easy for designers, contributors, and engineers to use. It is advisable to build tools to facilitate the creation, production, and use of icons, and to keep them organized and well-documented.
7. Learning and Xi
Continue to learn and Xi on icon design, consider ready-made metaphors, and use standardized rules and principles. In icon design, don't just trust numbers, check the work with your eyes to make sure the icons are in harmony in context.
8. Summary
Among the seven core principles of icon design, considerations such as clarity, readability, consistency, simplicity, personality, and ease of use are key to creating a high-quality icon collection. Clarity requires icons to convey concepts quickly, while readability ensures that icons are legible at different sizes.
Consistency is about maintaining a sense of harmony throughout the collection, while simplicity emphasizes conveying the message with the right amount of detail. Personality gives the icon its unique style and brand vibe.
Finally, ease of use requires not only a well-organized, well-documented icon design, but also a building tool to facilitate the creation, production, and use of icons.
This article was originally published by @唐小白 on Everyone is a Product Manager and is not allowed to be reproduced without permission
The title image is from Unsplash and is licensed under CC0.
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.