Website Design: Let the text tell the banner's story

I believe there have been many designers who have shared their experiences on banner design. It is a great deal of emotion and benefit from it. However, this does not prevent us from talking about this topic again. Every designer's working methods and design perspective are different. Today I want to share with you the text design in banner, how to Design the text in banner so that the text and other elements can complement each other to achieve a harmonious unity. Even if it is just a matter of discussion, it is very gratifying to make everyone feel a little resonance.

For the Banner Design, many people think it is a matter of confidence that it can be completed without too many design ideas. It is necessary to correct it. Designing a banner may not be difficult, But designing a qualified and visually appealing banner still requires experience. Designers should strive to make every banner they have designed can withstand the test of many aspects, and in this small square, they can truly be well-known. Maybe many people will say how much the design banner can improve. In fact, if you can design the banner well, you will gradually discover topics and even the introduction pages of many products will become more and more handy. Next, I will share with you some of my experience and methods on banner's text design. If you have any questions or different opinions, thank you for your correction.

　　I. Basic arrangement and mixing of Text

When designing a banner, do not just put a line of text without thinking, it will make your banner look dull. Many new designers often make such a mistake. Even if the font color style is well handled, it will look boring and stiff. At this time, we need to design some text arrangement and mashups:

① Mixing of size and color

② Mix and match of permutation and combination

③ Mix and match different fonts

④ Mix Chinese and English Fonts

These are some common processing methods. Of course, this is also the basis of banner's text design. Many other text processing methods are built on the basis of mashups. Therefore, the importance of mashups is self-evident.

　　

 

There is no mix or match between the text, and the text looks dull. The text size and arrangement are mixed to better reflect the atmosphere to be presented.

Next we can take a look at some simple text mashups designed by the designer:

　　

 

2. Text Skew and oblique cutting

Sometimes when we design banner, we can try to tilt the text or slice the text into the perspective if we want to show the text content with a more visual impact based on the background image, sometimes this will lead you to unexpected results. The normal text is arranged in a stable and stable manner. We can use a tilt or slice to break this "stable diagram" to make the picture more dynamic and appealing.

　　

 

The above two banner uses the text skew effect, and the following three banner uses the oblique effect at the same time. After the text is skewed and skewed, the text and the entire screen are more lively, which makes the user's desire to read.

3. Make the text form a relatively independent area

In banner's design, considering that sometimes the background color is complex, or the background may contain many products and other elements, we need to place the text in a relatively independent area or color block, if there is no relatively independent area, we need to design and create this independent area and color block by ourselves, so as to facilitate text reading and enhance the visual focus of the text. For example:

　　

 

4. Charm of text Deformation

When designing banner and topic headers, designers often use text deformation. Good text deformation can directly affect the increase in text interest, so that the banner and the page atmosphere can be outputted. Many designers feel that designing a banner is only a small job. It is not as complicated as text deformation. It is not as complicated as selecting a proper reference font for simple text deformation, however, it can improve the quality of banner design, so it has many benefits. The following is a small example:

　　

 

Similarly, the text deformation design extension:

　　

 

Next let's take a look at the works of other outstanding designers for text deformation design:

　　

 

5. 3D application of Text

3D text effects are also very common in banner Design. Good AI and PS tools can be used to produce satisfactory 3D text. If you are willing to spend a little more time, further improvements can be made to the material or light and shade. Let's take a look at the 3D font style banner designed by some outstanding designers:

　　

 

6. Font elements in life

When we design the banner of the history and culture channel, or when we design traditional Chinese festivals, we often need to use some Chinese style elements, such as calligraphy. In our life, we can also use the font elements, such as calligraphy, chalk, and copybooks In banner to work with the appropriate background and themes, so that your design can highlight the banner atmosphere.

　　

 

The above two banner uses the design effect of chalk to highlight the youth and vitality. The following three banner uses the Chinese Style font effects such as calligraphy and copybooks, reflecting the culture, taste and experience.

7. You have a half-covering face

In banner, the font design must be clear, so that users can read more smoothly. However, sometimes the text can be "semi-hidden and semi-existent", provided that, of course, there is no reading pressure. The "half-hidden and semi-present" text can make the banner you designed more vivid and interesting.

　　

 

The lower part of the text is hidden, but it does not prevent reading. Instead, it gives the text a sense of being integrated into the background.

　　

 

The left edge of the text is squashed by a word, and there is a layered feeling that makes the text arrangement more hierarchical.

At the end of the article, there are still a lot of knowledge about font design in banner. I just wrote a little bit about my experience here. In this example, some departments collect the works of other excellent designers online. I am not very grateful for the borrow in this article. If there is any infringement, please inform us in time. Thank you.

(For Original Weibo UDC blog posts, please indicate the source)