How do Tencent designers optimize designs? This case study is so vivid!

Usually the designs I make are relatively simple and cute, such as the following:

Why do you choose the simple and cute style? Don’t you like the layered and cool style?

Of course not, it’s just too difficult for me to do and it’s out of my comfort zone.

But I also wanted to make a breakthrough and make what I made more rich and full, so I just did it.

Let’s first look at the effect comparison.

Before optimization:

After optimization:

The optimization process took me about a weekend, and I optimized almost all the details I could see. During the process, I also asked Manre and Xiaozhi how to draw clouds and fluids, and learned a lot of knowledge.

Today, let’s analyze the optimization content. There are roughly the following points:

• Tips for drawing clouds and fluids
• Font optimization
• Optimizing typography
• Relevance of screen elements
• Optimized texture of elements

Tips for drawing clouds and fluids

Elements such as clouds and fluids are very troublesome to draw, so here are a few tips for you.

1. The cloud must have a big momentum, and then the overall structure must follow the big momentum. For example, the big momentum here comes out from the circle, and then spreads out in a circle:

If there is no big momentum, it is easy to make the drawing messy.

2. Make sure to make a rough draft before drawing with a pen. If you start drawing with a pen, it will be difficult to draw good structural details. So you must draw the general structure to your satisfaction during the rough draft, and then use a pen to trace it directly:

3. The clouds must have layers. If your clouds have only one layer of color, they will be very thin, so generally there must be at least three layers, one inherent color, one dark part, and one bright part:

This will look a lot richer.

4. Make sure to show the shapes on both sides of the cloud. Don't show only one side, otherwise it will be easy to draw the version in the middle:

It becomes a normal stack.

These four points are some of my insights in the process of drawing clouds. Now I am not proficient enough in drawing, and I need to practice more to feel the details.

Font optimization

If I want to make a picture more optimized, I have to change the default font to a more designed font, otherwise it will look dull. It took me about 3 or 4 hours to edit the font, and I tried a more exaggerated form in the middle, such as:

But it is not good enough, and it does not match the main screen very well. Because the main screen is already rich, if the fonts are still so messy, the overall picture will be unreadable. So I chose a more conservative font design. The optimization process is as follows:

This version seems to be relatively stable.

Optimizing typography

The previous layout was really lacking in details:

Because the font is modified, as long as a little detail is added, the overall look will be much richer. For example, the entire copy is in an italic way, and a row of small English is added under the subtitle:

This will make the overall layout much richer and more refined.

Relevance of screen elements

My initial modifier had two vertical bars coming out of it, and the rest were spheres:

This will result in a weaker correlation between the elements and the overall theme, so can we add some elements related to members?

So I added two membership privileges, such as 1080HD and fast viewing, etc.:

This will make the element fit in better with the overall theme.

Optimized texture of elements

The first version of the element was not modified at all, so it looks relatively thin:

During the optimization process, the colors were enriched, such as ambient light:

It also enriches the color hue. For example, I added yellow and plum red to the orange in the icon on the left, which makes the color look more transparent.

Summarize

The above is the knowledge point of this optimization case. The process is painful because I have to get out of my comfort zone and do something I am not good at, but the result is positive and I am quite satisfied with it. This is a start. I hope I can do better and better in the future!