Website Design Analysis: Discussing the font structure in banner

　　

For the Website banner we usually see, its own shape determines its fixed structure is generally rectangular, banner, left and right structure and center, its text is characterized by theme, generally, it is divided into the main title and subtitle, and there are many texts. During the design, you also need to consider the readability extension of the promotion map applied to various sizes of the website. In addition, its image-assisted themes, to increase the rendering power of text, banner's transmission behavior can be understood as: taking computer screens as the carrier, the banner is in the first screen position of IE browser, and the user's eye focus remains for more than 3 seconds.

 

　　

 

[Because banner is generally used for special-topic websites, before a user comes in on the second-level page of a portal website, he has a certain understanding of the topic on the homepage, therefore, the role of banner is to add interesting content and content direction guidance while packing the page on the second-level page; this is also different from conventional advertisements that require the first sensory visual impact to rape the eye.]

　Importance of text in banner

For words, we often hear the demand side say: "The word is big !"

"Ah? Bigger? It's already big! "Then we can pull a little bigger. In fact, we all know that the big pixels are meaningless;

But think about it, is the demand side really just a little bit of pursuit? After all, they are not designers and do not know how to express their own ideas. The only way to make people feel conspicuous is only the difference in size. Maybe it is because the words are not conspicuous enough, the processing of words is too common, and the background is too eye-catching. Perhaps, we should understand that there are many ways to make words stand out.

　Banner = text + image [secondary]

The text on the Banner usually occupies 70% of the banner's area, and the actual image only accounts for less than 30%. Many designers tend to focus more on the 30% image design, I ignored the most important 70% text area and finally pieced it together with only the system text. Could I ask if such a banner's design is reasonable?

Especially when the topic is extended to the small-size promotion chart and only the text area is left, the promotion chart is completely finished.

　　

 

　　Attribute Differences between Chinese characters and English letters

The difference between Chinese characters and English letters: A letter is a pure pronunciation symbol. Each letter itself does not make sense. The meaning of a word comes from the horizontal string combination between these letters, the Chinese character group mode is based on hieroglyphics, that is, each word has a special significance. A simple word represents a complex life scene in ancient times, therefore, it is also the most vivid word in the world. There are essential differences between the two reading and interpretation methods. Therefore, the arrangement of Chinese characters cannot be based on the arrangement of English letters. There are some objective differences between the two.

　　

 

　　Structure Analysis of Chinese and English Fonts

A. the actual size of the same font size is different. Because English letters are used, the structure of letters is very simple. The minimum visual pixel on the screen is 6px [representing the font: 04 font], and the structure of Chinese characters is complex. The minimum visual pixels of the screen are 10px [MS Ming/ms ui Gothic] And 11px [New fine body/PMingLiU]

B. The overall English orchestration is easy to segment and write, and the visual effect is relatively free and lively. It has a stronger sense of disconsecutive lines and is easy to produce rhythm and rhythm.

The overall Chinese orchestration is easy to make sentences and lines, and the visual effect is closer to the geometric points and bars of rules. The main reason is that the entire structure is closed, the sum of stroke tension tends to be zero.

　　

 

C. the length of English is generally more than the length of Chinese characters of the same meaning. in design, English itself is more likely to be a design subject, and because the numbers of English words are different, during orchestration, if alignment is on the left, the right side will produce natural irregular la s, which is unlikely to occur during Chinese orchestration. Each segment of the Chinese orchestration is a complete "Block ", it is difficult to produce this sense of error.

　　

 

D. the English structure has different shapes and sizes, and the font design cannot be arranged in the same line, such as the settlement line below the gjpqy letter, while the bdfhkl letter is on the top line, other letters are in the upper and lower line. However, the mistakes that come with English orchestration are not what Western designers expect, they spent a lot of time on the alignment of the text to adjust the padding, word spacing, line spacing, paragraph spacing, paragraph spacing, and paragraph spacing, so that the paragraph tends to be more geometric.

　　

 

　How to deal with the composition of banner text

Keywords: Understanding-decomposition-refactoring

Understanding.

Before you orchestrate a text, you must first understand the text content. I have seen many designers who only pay attention to the beauty of the layout but not the text content. They start to orchestrate the text as soon as they get it. They never consider what the text is saying. Their principle is that the text must be subject to the needs of the layout. This is an incorrect design method. For a title, if we do not understand the content stated in the title, it is easy to put it upside down. This is also the question that designers need to communicate with the demand side and obtain the keywords of the demand side.

　　Break down.

Analyze the character attributes of the font Based on the emotions conveyed by the topic keywords, combine the screen, and break it down. The relationship between the stroke width and structure, the left White, and the center of gravity, this is a comprehensive problem in the design of movable words. It cannot be mastered overnight. It must not only have a deep understanding of the personality of words, but also have a very keen observation. Especially for an image set by the font itself, or where does the font usually appear? What do you think of when you see this font? This is a long-term accumulation of visual communication.

　　Reconstruction

The font design should take into account the balanced combination of titles on the screen, and re-design without damaging the basic identification of fonts to make the text graphic, when combining serif vs sans-serif in the font category, we do not recommend that you directly combine the silent font and serif in the font category.

　　

 

From the psychological model, we can see that in the conventional combination arrangement, the unlined font is better than the regular combination of the lined font, but it will be stiff if it is not well handled.

Calligraphy font, because the calligraphy font has passed the pursuit of font by calligraphers of the past, making its structure more solid. A little more will affect its own font aesthetic, and it has a strong aura, it is not suitable for the use of too small la S and too long sentences. students who have studied Calligraphy may have deep experiences. In Chinese calligraphy, they are very careful about "excellent", "gas", and "God ", when words are unable to express emotions, the words in calligraphy can be revealed between lines, that is, the character of the so-called word.

　　

 

The above are some of the Processing Methods of Calligraphy fonts on the emotional expression of specific themes. The text is not subject to special deformation, but to the theme.

I still remember my interview with my current company. HR asked: What do you think of a designer as a visual designer? What can you do? A: Here, designers usually assume the role of a translator to quickly and accurately interpret the information to all audiences. This is what I said. In my later design career, I also encouraged myself and hoped that my colleagues would do the same.

This article is reprinted from Netease UEDC link http://uedc.163.com/2006.html