“Generous and uncornered” – 58 revised design icon

58 Guided by the philosophy of “generosity without corners”, the city has completed the visual upgrade of products from the five dimensions of form, meaning, color, environment and regulation, reflecting respect for rules and order and harmony with users.

In 2024, 58.com ushered in a far-reaching corporate culture renewal, and with this east wind, we took advantage of the trend to complete the comprehensive upgrade of product vision. The design concept of simplicity and effectiveness, beauty and happiness, diversified integration and natural growth was determined as the main principles. This concept is not only a guide for the visual upgrade of products, but also a spiritual bond for us to establish a deep connection with users.

At the beginning of the icon design, the word “generous and boundless” in Lao Tzu’s “Tao Te Ching” flashed in my mind, and its philosophical views such as openness, tolerance, harmony, and nature coincided with our design principles. It pointed out the direction for this icon design.

Next, I will share this icon design journey with you from the five dimensions of shape, meaning, color, context, and regulation.

“Shape” – blending all things between the square and the circle

1. Determination of form

Shapes are the foundation of icon design, and different shapes can give users completely different sensory experiences.

How can product managers do a good job in B-end digitalization?
All walks of life have taken advantage of the ride-hail of digital transformation and achieved the rapid development of the industry. Since B-end products are products that provide services for enterprises, how should enterprises ride the digital ride?

View details >

We start from the most basic square and circle, the square symbolizes rules, laws and stability, like a solid cornerstone, representing the rules and order of the product; The circle symbolizes harmony, tolerance and flow, just like gurgling water, showing an attitude of harmonious coexistence with users.

Based on the design principle, we cleverly integrate the square and the circle to design a basic form of the circle in the square, the combination of square and circle. It not only reflects respect for product rules, but also conveys a harmonious and unified attitude between products and users.

2. Combination with symbols

58.com has a wide variety of business lines, each with its own unique attributes and characteristics. For this reason, we have carefully crafted exclusive symbols. So in the design of the icon, we incorporate symbols into it. Let the icon convey more business attributes and activate the user’s perception.

3. The use of lines

In the selection of lines, we always focus on the shape setting of the combination of square and circle, abandoning the rigid straight lines and pursuing smooth arcs and curves instead. Strive to embody the principles and experiences of harmony, naturalness and comfort.

“Meaning” – function and emotional expression

As the most eye-catching visual element on a page, whether icons can intuitively express functions or information directly affects the user experience.

Therefore, creating an icon design that users can understand and resonate with is the core goal of this design.

1. Choose an image with universal cognition

We adhere to the concept of “user-centric” and only use universally recognized images in the icon design. For example, work corresponds to briefcase cards, second-hand cars correspond to cars, life services correspond to rags and brushes, etc.

These images are simple and easy to understand, and users can quickly understand the meaning of the icons without much explanation.

2. Presentation of details

In order to make the flat icons more realistic and three-dimensional, we cleverly add the right amount of light and shadow and detail to the icons. It not only makes the icon more vivid, but also makes the meaning clearer and more accurate, so that users can see it at a glance during use.

3. Emotional resonance

We understand that excellent design should not only meet functional needs, but also touch the emotions of users.

Through the establishment of form, color matching and detail polishing, we are committed to bringing sensory pleasure to users, arousing emotional resonance, and making users feel warm and cared for in the process of using 58.com.

“Color” – the clever use of color

Color plays a pivotal role in icon design by giving it a unique visual appeal.

1. Establishment of color system

We have re-expanded the color system based on the 58 brand colors, incorporating the original 4 58 brand colors into it. Expanded from a single standard color to 5 standard colors and linked them to the business. It fully demonstrates the openness and inclusiveness of the 58 color system, injecting new vitality into the brand image.

2. Matching of icon colors

We incorporate a new color system into the icon design to breathe soul into the icons of each line of business.

In the icon, through the combination of color graphics and virtual reality, it not only highlights the design style, but also adds interest, making the icon stand out among many visual elements and attract the attention of users.

“Environment” – Create an immersive experience

1. The construction of visual hierarchy

As a large platform-based product, the visual hierarchy of icons is crucial. Reasonable hierarchical design can not only clearly sort out the hierarchical relationship between the platform and each business line, but also effectively mobilize the user’s sensory experience and avoid visual fatigue.

We roughly divide the icons into three levels: the first level is applicable to the main diamond area of the platform homepage, where the icons are the first focus of attention after entering the platform, and need to highlight the importance and guidance; The second level is applicable to the sub-diamond area of the platform homepage and the diamond area of the business category page, which is in contrast to the first level while ensuring identifiability; The third level is suitable for functional entrance areas such as personal centers, meeting functional needs with a clean design.

2. Scenario applicability

Of course, the applicability of the scenario is also in our consideration.

We have added more details of light, shadow and texture to the icon design of the main diamond area on the homepage of the platform to highlight its importance and guidance.

The secondary icon is designed to be flatter and relatively smaller in size, which does not affect its identity while being prominent.

The three-level icons use linear icons, which are more in line with the scene attributes of the functional entrance.

“Rules” – rules determine the square and circle

“No rules do not form a square circle”, excellent icon design is inseparable from perfect design specifications. The formulation of specifications can ensure the consistency of different designers in the subsequent design process and improve the overall design quality.

1. Standardized construction

We have accumulated a comprehensive set of visual specification documents for icon design, covering various aspects such as concept introduction, basic deletion, magnification, shape symbols, graphic characteristics, and usage scenarios. Used to guide designers in their design work.

At the same time, we summarize and organize all the output icons, which is convenient for designers to quickly find and use, and improve design efficiency.

2. Scientific verification

The quality of design cannot be judged based solely on personal preferences, but needs to be scientifically verified. Throughout the design process, we always insist on guiding each design output through quantitative evaluation. By collecting user feedback and analyzing data, the design is continuously optimized to ensure that every improvement can effectively improve the user experience and make the design truly serve the user.

Written at the end

In the process of exploring icon design. We deeply understand that although the icon is small, it carries the immense energy that connects users with products and stimulates emotional resonance.

In practice, we achieve the final design output through form design, functional expression, color matching, hierarchical construction, etc. And guide the subsequent design through the formulation of specifications and scientific verification.

In the future, we will continue to uphold this design concept, continue to explore and innovate, and bring users a better and warmer design experience.