Introduction

The visual image in each operation position actually represents the visual quality of the entire platform. Whether it is in every corner, or our opening screen, home page broadcast.

catalog

1. discover problems
2. Deep exploration
3. Practical demonstration

1、 Find problems

The importance of the home page head carousel map determines that its visual quality cannot be neglected, and its complexity is even more inexplicable. Not only is there work promotion, but also various channels of cooperation, internal designer output, and a large number of CP support, then unified high-quality visual output is even more difficult.

After eliminating the problems one by one, we spent nearly a year optimizing all BANNERS on the app home page and making them very beautiful.

But as time goes by, some new problems are constantly emerging:

1. Homogeneity of visual design;
2. Aesthetic fatigue of users:
3. Low conversion rate of works:
4. There are too few Chinese posters to express the essence of a work

2、 Deep exploration

I began to conduct in-depth research on several types of operation and promotion maps of the market. The well-known "e-commerce operation and promotion", "game operation and promotion", together with our animation, e-commerce promotion maps, and product promotion maps, mainly started from the commodity attributes, and then extended the brand tonality based on the product use, color, packaging, and so on, to our implementation level, It can be roughly divided into:

Product+copywriting+background (mainly commodities, supplemented by copywriting)

In the process of design, we can make a variety of plates. The products can be exposed from different angles and arranged in different order according to needs. On the basis of the big background color, we can continue to make appropriate adjustments according to the flow of products. In this series of operations, what has always been conservative is the copy, Pay attention to the typesetting style of the text.

Later, the control of color and details are all additional items. Apart from luxury, there is nothing more fundamental than the above points.

The game operation promotion map and the game opening service can be summarized as the promotion map in the form of scene sense layout, and the operation map can be summarized as follows according to the priority:

Background+copywriting+characters (mainly atmosphere)

The background is expressed in the form of scenes, and more use is made in the game theme, because the game has scene support and uses high-resolution large pictures, which brings visual impact to users. The overall design style matches the game art style, and has a strong atmosphere.

The game emphasizes the immersive experience, and still maintains a situational experience in the design of promotional images.

After a rough analysis of the animation operation and promotion map and several categories, it is implemented in our animation market. The operation and promotion map can be summarized as:

Background+copywriting+characters (mainly content)

At present, most designers basically follow the routine of e-commerce and games in the design of animation promotion maps, which can not be integrated by themselves, and can be summarized as follows:

The promotion map is naturally inseparable from the promotion materials. It can be seen that the promotion materials of games have reached the peak; The e-commerce category mostly depends on the photography of photographers, and can also rely on later refinement to make up for the shortcomings of previous photography.

However, we animation, it can be said that the ruins. The start of Guoman is not high. Most of the domestic methodical characters can not reach a high level in character modeling and classification. To a certain extent, it has also brought great obstacles to our business map design, which is also the current situation of the comic industry.

However, cartoon materials also have their own advantages. There are a lot of character expression features, story scene descriptions, and character Q materials in the materials, which can actually create a story situation.

In order to create the story, I have made a clear difference in the selection of materials.

I will pay more attention to the four aspects of character expression, classic chapters, cartoon plot and strong attractive copy, which can be used as my selection materials. I try to open a new way to re-examine our selection standards.

Let's assume a concept of this expression method: "Content embedded operation design"

This visual style integrates the content to build the scene. The design of characters and characters serves the meaning given by the content itself. They are linked to each other and no longer exist alone, so as to achieve the imperceptible publicity effect.

Moreover, our promotion map is not only limited to the level of good looking or not, but also shows the core content of the cartoon.

Take the operation and promotion picture of the comic "Hidden Man" as an example to understand the general plot of the comic: the incomplete face is hidden in the doll, the tragic past is hidden under the skin, mixed with the cruelty of memories and reality, and human nature finally erupts - it seems that the killer behind the perfect crime is genius, devil or "he" hidden beside us Featuring boys and girls over 15 years old, it is a mystery, romance, terror, and brain burning.

After understanding the background, we will go back to the comics and screen the production materials around my four selection ranges: 1. character expressions, 2. classic chapters, 3. comic plot, 4. attractive copy background.

Apply and combine the selected materials into the banner, and add font design. It is combined into this picture with rich plot.

Then we designed the BANNER visual image in the past:

It is mainly composed of three points: 1. Background 2. Characters 3. One sentence copywriting

Compared with our previous design drawings, the user's first impression is that this is a cartoon about women.

In the picture on the right, at a glance, you can see the hidden characters combined with the text, the man's expression of fear and trembling, and various pictures in the scene. This picture visualizes the climax of the cartoon and pushes it to users.

It can be seen that in the previous drawing techniques, we focus on delicacy, while in the current practice, we focus on story situations. It can be seen here that delicacy is not the only measure of banner. I began to focus on creating stories.

The new version of visual image design mainly consists of four points:

1. Character expression
2. Classic chapter
3. Cartoon plot
4. Strong attractive copy, which can be in the form of two sentences or several sentences

Let users get more emotional colors in just a few seconds.

The content in the above figure is more harmonious with our functional module (navigation), and the story atmosphere of the content is more strong. Here, the so-called "content embedded operation design" not only includes the information in our banner, but also contains the structural information in our UI framework.

3、 Practical demonstration

Case 1:

This is the new design drawing for small module trial operation on the second screen of the APP home page.

Original visual image design: mainly composed of the main character of the work plus a simple background, as well as one sentence copywriting.

Take "Heiliang" as an example to understand the general plot of the cartoon: there is a secret art in the world that can help people support their families and become rich. It can make people power the world over, and it can also make people die. It is called "finance"...... Featuring boys and girls over the age of 15, it is an efficient, struggling and cosmopolitan film.

After understanding the background, we will go back to the comics and screen the production materials around my four selection ranges.

Then combine them into the picture, and add some simple font design to form the following propaganda picture with rich plot.

New visual image design:

With the dramatic increase of copywriting, we pay more attention to the preciseness of typesetting, and integrate more copywriting information into the small horizontal bar, including the work name, classic copywriting or well-known author information, and add characters and plots related to the copywriting to create a stronger drama emotion.

The surge of content information does not create pressure on designers, but relies on high-quality typesetting to create a harmonious new order. On the right is the new version of the visual image with the application of "content embedded operation design".

Case 2:

Next is a special square module, which needs to be big enough!!! And different for different!!!

The purpose of such demand in the subconscious is nothing more than to put a beautiful big picture. But we are really different.

First, let's analyze the prototype map. Squint your eyes, and the plates are fragmented. In addition to large sliding modules, the fragmentation is more obvious. (Unless the top column is achieved, it will be slightly compensated)

On the premise that the technology cannot be implemented, the first thing to think about is how to break the picture into parts. At the UI level, unnecessary levels are reduced, and at the content level, copy and character materials are combined with pictures and texts, which is no longer a lonely existence.

Here's the display effect in the entire UI framework

Here I once again apply "content embedded operation design" to the design of this module, and integrate more information elements with different design methods. Before designing it, in addition to the consideration of pictures, more and more flexible applications were also considered.

In the case of Women's Ninth Paragraph, the triangle stable composition is mainly used. At first, the complex picture is quiet, balanced, and does not fail to be active (see Figure 2); The combination of the work name and the characters. The characters are placed in the copy, and the pictures and texts are connected and interactive (see Figure 2).

With the introduction of the characters on the right side, it is miscellaneous but not disorderly. The whole picture is clearly adjusted to highlight the key points without losing focus.

The composition of this picture is also completely different from the previous one.

The main body is only the female owner, and it is full of pictures. The layout of the characters here slants the picture in two. The adoption of "diagonal composition" can make the originally rigid and monotonous subject feel moving.

At the same time, the center of interest is also in the face, which makes us easily attracted by this pair of beautiful eyes. In addition, the introduction of the characters is integrated into the screen to supplement the layout and complement the characters.

In the different cases of the above three modules, let's upgrade the visual module again. In fact, it is not difficult to see that some of the layout tips have also been used by many small partners. It can be said that these tips can be used in many places. There is no right or wrong with the design itself, but there are only suitable ones.

There are also a lot of tips that are worth exploring. With more attempts, we may be able to find small routines and methods that are suitable for our current work.

summary

The exploration and mining process of the above set of "content embedded operation design", as well as the implementation and landing of this set of scheme, we also learned a lot of other mapping methods throughout the process. Finally, we showed through background data that only our "content embedded operation design" has the most significant effect, and the operation module data used has been greatly improved, At least at this stage, it is a set of visual programs that are more suitable for Tencent Animation. In the future development, we also continue to make more attempts to seek more and better programs.