Shulou(Shulou.com)11/24 Report--

Hello, everyone. Welcome to Slidecent.

Meet the words like face to face, I am Lin Limeng.

It's time for the favorite revision session, and this case is still a full-text font:

The manuscript is about Tencent Medipedia's product introduction page.

If it were you, how would you design it? Think about it for a few seconds

Okay, time's up. I guess you're probably thinking about how to make it more beautiful. For example, where to find medical pictures, icons, what kind of colors to use, fonts and so on.

If I'm right, congratulations on finding the treasure. This article will certainly enlighten you.

In fact, in my opinion, the design of large text can be done in three steps: analysis of copywriting, structural design, and visual expression. (if you often read articles, you must be no stranger to these three.)

01 the first step in analyzing copywriting design is not beauty, but understanding the content

After reading through, the copy can be logically divided into two parts:

Definition and function. Of course, sometimes the text is long, and it is not easy for beginners to understand the logic of copywriting.

Share a tip: delete the copy and keep only the subject, predicate and object:

Then observe the sentence pattern:

Definition: what is XXX

Function: XXX provides XXX for XXX

Is it clearer? Of course, this degree of disassembly is far from enough, and it needs to be further refined:

The definition part divides the copy according to the level of information to improve the identifiability:

With regard to the definition, it is recommended to keep the original copy and not to disassemble it. Because most of the definitions are relatively concise, each word contains information.

Function part function 1:

It is not easy to understand the function of large text quickly. Try to find out the key information and use a diagram to show the relationship between the information.

The meaning of the picture: most of the medical information is professional and obscure, but Tencent Medipedia can be presented in a vivid form (Q & A, video, consultation, cartoon, etc.) to make the audience better understand.

Function 2:

When there are a large number of juxtaposed words in the copywriting, you can see the essence of the content by pinching the beginning to the end:

In a word, Tencent Medipedia can provide XXXXX services for users.

At the end of the integrated version, we put the above parts together to form a complete first draft of the design:

Compared with the full text of the original, the information in this edition is more intuitive (not to mention beautification). But there is a new problem: the parts are independent and scattered.

Although there is no problem with typesetting in the form of juxtaposition, it is too common and lacks challenges.

02. The reason why the structural design feels scattered is due to the lack of a clear logical thread to connect the information.

Here, I found such a "line":

It can string all the information together. Of course, you can also dig others yourself, as long as it is reasonable.

Then refine the structure and make up the rest of the copy:

You get a logical page of the film.

03. Visual expression promotes the sense of beauty on the basis of ensuring the correctness of logic.

The design draft V1 goes directly to my first edition:

I wonder what your reaction will be after reading it. (welcome to the message area to exchange views)

I believe that there is no problem to use it directly, the logic is clear and the design is online. However, it still became an aircraft draft.

The reason is simple: the layout is not used, and most of the information is in the center of the picture, which is cluttered and crowded.

Design draft V2 so I enlarged the circle and pulled away the information in the center:

It looks much better, but there are still vacancies on the upper left and upper right. So simply remove the ring:

I can feel my breath. However, due to the lack of ring connection, the ball is scattered. If so, how would you optimize it?

Yes, that is to find a "line" to string the rings back together:

At the same time, add illustration material to fill the vacancy below, the overall sense is much stronger.

At this time, there is a new problem: because the ball is scattered, the information is scattered, which is not good for reading.

Design draft V3, so I found a compromise, using hexagons to lock services in a grid:

The copywriting is relatively concentrated, the hexagonal also echoes the molecular structure in medicine, and the extra graphics also symbolize that there are many services and many benefits with one stone.

At this point, the general style design is completed, and begin to inject the soul of detail into the picture.

First of all, the illustration material is sublimated to unify its color matching, proportion, complexity and so on.

Will be more in line with the page style.

At the same time, you can also add "crying face" and "smiley face" memes to set off emotions:

Because memes can be more contagious than simple icons.

Finally, make a few more detailed adjustments to complete:

Final draft

Take a look at the comparison of the results before and after:

How many points do you think you can score?

In fact, compared with beautification, what is more important is design thinking.

Each step of the design needs to be tried through trial and error. Here are all kinds of aircraft drafts:

This article comes from the official account of Wechat: Slidecent (ID:Slidecent), by Lin Limeng.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.