As an efficient visual expression, illustration has been widely used in today's Internet design. It can effectively help products quickly reach and infect users, improve activity and activity conversion rate, and shape brand image. For trovo, a rapidly developing offshore platform, the importance of building a set of product illustration library is self-evident.
Background of illustration library design
1. Wide application of illustration in the industry
In many well-known overseas Internet companies, illustration is widely used and has brand recognition. Here we take airbnb, Google and discord as a simple reference. The three teams chose their own brand color as the main color. Although they took different routes, they all passed on the brand spirit and improved the product efficiency through the visual language in line with their users' habits.
2. Clarify their own product positioning
To build an illustration library suitable for ourselves, we must first clarify our positioning. Who are we? What are we going to do? Trovo, as a global pan gaming content and interactive community, aims to provide massive and high-quality live game content for the global younger generation of players.
At the same time, because the main users are from overseas and there are many differences in language, religion, culture and aesthetics, it inevitably brings great challenges to the design. Most of the domestic mainstream designs advocate exquisite, beautiful or lovely styles. However, on the most active game live broadcasting platform overseas, the painting style is like this:
The user's favorite expression is as follows:
At this time, we need to think about it. Users want to get more interesting content from the product illustrations, rather than gorgeous but boring things. This is also the most fundamental purpose of their coming to the game live broadcasting platform. This line surface combination of partial comic style, coupled with exaggerated emotions and some brain holes open visual expression, can just meet the user's desire for entertainment.
Direction of illustration library design
1. Understand the target users
Through the observation and analysis of the user behavior of the mainstream game platform and the questionnaire survey conducted in the early stage of the product, we can summarize some characteristics of the target group: it is mainly concentrated in North America and Europe, likes games and live broadcasting, and highly advocates young, funny and personal things. Therefore, we don't want trovo's illustrations, like some tools or universal products, to cater to the public's taste too much, resulting in regular visual expression and unclear characteristics, which makes users feel boring.
2. Extract keywords
Through the understanding of the target users, the characteristics of the product itself, and the information that the illustration hopes to convey, several keywords can be extracted as the concept and style guidance of the later creation. Among them, exaggeration, funny and Gamification are the three words most consistent with trovo's illustration style.
Creation and execution of illustration Library
1. Establish basic image
Trovo's existing IP image is a cool chameleon named Leon. Because we believe that every trovo user has different creativity. Like a magic chameleon, he insists on being himself, but also affects trovo in a different way, and creates more happiness and brilliance in the trovo community. We believe more: "why fit in when you were born to stand out!"
At present, we have a set of expression system based on Leon's creation, which is highly consistent with users' likes in visual expression and image temperament, and is also very popular in each live studio of the platform. You can use this set of expression line and surface illustration method and funny and interesting temperament characteristics to upgrade and create the illustration library on the basis of user recognition, which makes the style more unified and easier for users to accept.
The illustration library will continue to use the chameleon Leon as the basic IP image. After studying several classic funny images in Europe and America, it decided to use the body structure of two heads and the characteristics of large eyes to highlight the humorous temperament.
By further establishing the capture of body structure and key features, we get a cool and somewhat funny basic Leon image.
Finally, three views are drawn to enrich the character image from multiple angles as a reference for character proportion and subsequent extension actions.
2. Specify design rules and points for attention
At the same time, it is also necessary to list some design points that are easy to ignore to ensure that there will be no relevant errors in the subsequent design process. For example, five fingers will appear very bloated and affect beauty; The four fingers are more concise, improve efficiency, and more in line with the habits of European and American cartoon characters.
The drawing method of not using lines and only relying on shape and solid color to reflect the body outline is too stable and popular. It is suitable for the flat and fast Internet, but it is difficult to meet the pursuit of personality and entertainment of a specific group of game users. Therefore, in terms of basic expression methods, we finally chose the combination of line and surface which is closer to the form of comics.
Finally, add a little highlights and shadows to make the object fuller and more durable. Shadows can use black with transparency or the same color system with low lightness, so that the picture will not be too dirty; Highlight should try to choose a relatively bright color to increase the visual impact of the object.
Integration of illustration Library
1. Classification of illustration system
Through the analysis of business, firstly, the content of illustration system is summarized and divided into three categories: subject, background and elements. In the subsequent business requirements, designers can assemble and combine them according to specific situations to achieve the purpose of efficient output and reuse.
2. Main part
Subject refers to the content that occupies the visual dominant position in illustration, usually specific characters or objects. This part is used most frequently and has the richest content. In order to facilitate sorting and use, it can be further divided into four parts: "character", "object", "text" and "state".
The character part is based on the IP of our platform: the action image of chameleon Leon in different situations such as games, sports and work:
The existence of objects is to better help create the situation and make the picture more rich and full:
In addition, when watching the live broadcast, European and American game users have many languages they like to use to express their inner emotions, and the text part is to make the situation more emotional and infectious, so as to hit the user's heart more accurately and quickly:
The last kind of main content is various empty states that often appear in the product. Interesting illustrations can well alleviate users' feelings of loss and anxiety when encountering abnormal states:
3. Background
The background part is a group of grid graphics, which are usually large in size and low in transparency. They are used as shading at the bottom of the picture.
4. Element part
Elements are mainly a series of brand graphics derived from logo and product tonality, such as picture seasoning, which mainly plays an auxiliary and decorative role.
Application of illustration Library
1. In product UI
After the completion of illustration system drawing, it is also very important to componentize and standardize the naming of existing illustrations. In this way, when dealing with the needs of app or web, UI students can quickly find the illustration content according to the specified classification in sketch. For example, to do a gift delivery operation pop-up, want to wrap the concept of magic to attract clicks, only need to select the components needed to assemble, then adjust the size and location can be used.
Various empty pages are also an important application of illustration in the product UI. At the same time, the content and form of illustration can also be combined with the habits and actual scenes of overseas users to enhance interest and reduce the anxiety and loss of users when they encounter abnormal states.
2. Posters & emails
After the illustration library is sorted out, the above parts can be combined according to the product requirements for rapid creation in case of posters or emails that need illustration. For example, the main character selects Leon who is playing the game, matches objects such as screen and game console, and "hype" text to express his mood. Finally, with appropriate background and decorative elements, he can get the required illustration.
In the following subtitles and other places, illustration can also be used flexibly to make the overall picture more vivid and interesting.
Follow up thinking
The illustration system is established to help designers solve product problems faster and better. At the same time, building trovo's own illustration library is also more conducive to the establishment of brand image. In order to increase the identification and uniqueness of illustration and avoid homogenization, we not only use trovo's IP image Leon as the main character, extend a variety of actions and scenes, and add brand graphic elements such as "t" and "," etc; It also tries to be closer to the live game users in terms of expression and style, using a combination of more colorful colors and partial comics.
Of course, at present, the illustration library is still in the early stage of construction. There are still many places to be improved in the formulation of illustration contents and rules. We will regularly collect the problems and difficulties encountered by designers in product requirements, adjust and update the existing components, and optimize unreasonable rules, so that the illustration library can better serve the team.
We recommend that we should pay attention to the official account of Tencent design, and get the design methodology of Tencent for the first time.
