Banner-Text Description-Introduce the design skills of APPBanner in detail

Counting banner's design elements/types/styles/design steps. Banner is definitely not a strange word for a designer. At present, banner's demand basically involves various industries. Whether it's a web page or a mobile terminal, we can see the shadow of banner everywhere, so mastering the design of banner is an essential skill for every designer!

Banner (and banner advertising) is the earliest form of online advertising, and it is also the most common form at present. Banner advertising, also known as banner advertising, is a rectangular bulletin board across the web page. When users click on these banners, they can usually link to the advertiser's web page. It is a picture showing the content of a merchant's advertisement, which is placed on the advertiser's page. It is the most basic advertising form in Internet advertising!

Below we will explain the banner from these aspects:

One: the components of the banner

Two: the type of banner

Three: the style choice of banners

Four: Banner design steps

One: the components of the banner

The main components of banner I briefly summarize the following points here:

The main elements of banner are: copywriting+elements+background.

Elements can be subdivided into: elements = merchandise+model +logo+ embellishment (the elements here need to be selected according to the actual situation of banner, optional).

As shown in the figure:

(from petals)

Two: the type of banner

The banner types I summarized here are mainly divided into:

0 1: product promotion banner (new products, hot-selling products)

02: Activity Banner (Festival Promotion, Product Promotion)

Here, banners are simply divided into two types, because different banners have different effects and purposes, so we need to design different styles of banners.

For the banner of product promotion, the most important thing is to highlight the characteristics of the product, so the elements we need most for banner design must be the product and a short copy introduction. As for the embellished elements, we can also choose the appropriate elements according to the characteristics of the actual products, or we can not embellish them. The background is definitely essential!

0 1: product promotion banner:

Product+copy+background

For example:

(from petals)

The above cases are all about the design style of product promotion banner. They all have a common feature, that is, to enlarge the product and then enlarge it to show the characteristics of the product. Concise copywriting introduction and a large number of blank spaces highlight the characteristics of the product, which makes users' eyes involuntarily attracted by the product itself.

Product promotion banner:

Product+copy+element+background

For example:

(from petals)

The feature of this banner is that in addition to the product itself, some other elements are added as the ornament effect of banner, which makes the picture more saturated or dynamic!

So here comes the question

When is it better to add elements to the product banner design? When is it good not to add elements?

First, we'd better choose not to add elements that interfere with the product when it is extremely necessary to show the product characteristics.

Second: for simple products, we'd better not add decorative elements. A lot of blank space is more suitable for the style of simple products.

02: Activity Banner

Product+copy+element+background

For example:

(from petals)

For the banner design of the activity class, most of us will choose bright colors, saturated and impactful pictures to create a lively atmosphere, which is also essential for the addition of elements, because for the banner design of the activity class, the more lively the picture, the greater the activity, which will attract more users and highlight the title of the activity as much as possible!

Second, the style choice of banners

Banners have various styles, but the styles chosen by different banners are definitely different. Different styles of banner give people completely different visual effects, and proper collocation can make banner better express its own characteristics and goals.

For example:

0 1: The propaganda banner of simple product home banner is more suitable for simple and clean style.

(from petals)

02: banner, a high-end technology product, chooses a style with a sense of technology.

(through the graphics and colors of technology)

(from petals)

03: Fashion clothes banner is suitable for choosing the style of fashion pictures.

(reflected in the unique shape and style, graphics and colors, etc. )

(from petals)

04: banner, a high-end luxury brand, is suitable for high-end atmosphere style collocation.

(Reflected by high-grade colors such as black red and black gold. )

(from petals)

05: Girls \ children's cute wind banner is suitable for the choice of cute wind elements.

Through lovely elements: illustrations, lines, balloons, love, rounded fonts, vibrant colors, etc. )

(from petals)

06: banner of national style/culture/festival is more suitable for choosing elements with cultural temperament.

Through China's brush strokes, China ancient elements: seals, China landscape paintings, ink and wash, fans, paper-cuts, garden panes, ancient patterns, auspicious clouds, Peking Opera, scrolls, etc. )

(from petals)

Two: Banner design steps

0 1: Understand and determine the design requirements of banners.

02: Defining the Purpose of Banner Design

03: According to the obtained banner design requirements, determine the banner design style.

04: Choose the appropriate banner design layout structure

05: Select matching elements to decorate the overall effect of banner (added according to actual needs)

06: Color Selection

0 1: Understand and determine the design requirements of banners.

This understanding of design requirements, no matter what the design premise is, is an essential step and the most critical step. If you don't even know the design requirements, the design results will definitely not meet the actual needs.

So what exactly do we need to know about banner's design requirements?

The first point: determine the banner design copy.

Copywriting is also very important for designers. Designers can find design inspiration from copywriting information and know the general design style.

The first point: determine the banner design size and launch platform.

After the copy is confirmed, we also need to know the platform and location, size and whether it needs to adapt to the display of each platform.

02: Defining the Purpose of Banner Design

For designing a banner, you must want to achieve some purpose before designing this banner, so you must know what the purpose of this banner design is, such as whether you want to promote products or products. They are completely different in nature.

03: According to the obtained banner design requirements, determine the banner design style.

Banner's design style We can find keywords from Banner's copywriting requirements for positioning, such as the car bracket A5 with full voice intelligent operation.

The key words we can put forward from this theme copy are: full language, full intelligence.

For the understanding of such keywords, we will definitely think of the picture of the era of intelligent technology, so let's choose the style here!

04: Choose the appropriate banner design layout structure

Banner's design layout structure can be roughly divided into:

Center structure, left alignment structure, right alignment structure

Banner structure with different requirements needs to be selected according to the actual situation!

05: Select matching elements to decorate the overall effect of banner (added according to actual needs)

We also need to choose suitable decorative elements for banners according to the actual situation and the characteristics of product banners. For example, banners with simple products do not need decorative elements, while banners with cute activities or girls and children need to choose decorative elements, and the choice of decorative elements for banners with different shapes is different (it has been briefly introduced before, so I won't repeat it here).

06: Color Selection

The choice of color is also very important. Different banner choose different colors. Proper color matching will make the product more prominent or the picture more conspicuous, giving people a different feeling.

For example:

* Black and gold collocation and black and red collocation will give people a sense of high quality.

* Blue, black, purple and other cool colors, the picture gives people a sense of toughness, space, speed and strength, which is more suitable for technology.

* Red, orange, yellow and purple will create a warm atmosphere, which is more suitable for fashion and activities.

* The combination of black, white and gray will give people a feeling of being too cold to approach, which is more suitable for the style choice of big brands.

* The combination of white and gray will give people a feeling of tranquility, literature, temperament and elegance, which is more suitable for choosing simple products.

Actual case:

Copywriting requirements:

Full-voice intelligent operation vehicle-mounted bracket A5

Waving a compliant voice bracket

With Iflytek AIUI human-computer interaction solution, intelligent driving can come at once.

Design size: 1920x650px

Design purpose: According to the demand, the purpose of banner design is to promote the new product A5.

Step 1: We put the copywriting information and the provided products on the canvas.

Step 2: Make clear our main title "Full Voice Intelligent Operation Vehicle Bracket A5"

So we enlarge the main title and highlight the main title.

Step 3: Choose banner's style, because what we need here is the intelligence of products, so our style can be defined as science and technology.

Step 4: Select the layout structure. Choose a simple left-right structure here!

Step 5: Select decorative elements. Decorative elements should also be selected according to scientific and technological effects and can be extracted from the copy. For example, here we can extract: technical lines and graphics, voice graphics and so on.

Step 6: Adjust the overall position and color matching. We also use different hierarchical structures to deal with text titles, making them more prominent. Subtitle copy is also slightly processed according to the overall style of the picture, so that the copy and the picture are more harmonious and unified, including the products that need to be processed due to the influence of light around.

Finally, you will get the banner effect above! Designed a simple banner with a sense of science and technology!

All right! Today's knowledge is a little more comprehensive! I hope you like it!

Good articles recommended in the past

—

Layout design -7 simple picture typesetting methods

10 creative line graphic poster design

Teach you color matching skills and get rid of the color matching dilemma!

Innovative poster design concept

What are the popular types of banner processing? Color block segmentation

The above Banner uses different proportions of color blocks to form the background of banner, plus text and copywriting, which is suitable for highlighting products, such as home, clothing, electronic products and so on. The interface is simple but not white, which can quickly extract valuable information. Pay attention to the overall color sense when choosing colors.

Geometric boundary

Simplicity often gives people a cold, clean and modern feeling. The shapes and elements used in the design are simple; The colors used are unified and integrated, and the colors are restrained. The texture is more delicate; Structurally, blank space, short/accurate/common use of core value and "temperament", border is the key point, geometry is the eternal decoration ~ ~

2.5D

The style of space geometry has a strong sense of space substitution by building a space body and using geometry to create an atmosphere. This kind of work can be studied a little. The key is the expression of creativity, which requires great efforts.

2.5D style is very popular in e-commerce design, which is novel and practical, can accommodate a lot of content, both dynamic and static, and can connect two screens and three screens well. Favored by some large-scale promotional activities, you can often see this style of first-screen posters.

Plane illustration

Concise but not simple, it removes the tedious decorative effect and shows the core expression of the theme. Use graphics or characters other than words to help banner bring a more intuitive feeling. Adding graphics or characters to text can make banner more energetic and feel. This type of banner is widely used in finance, education and tourism. Of course, if the illustration ability is ok, it is not a problem for all industries to use it.

Color superposition

More popular and changeable, the overall vision will be relatively young, and the elements used will be relatively more direct, clear and straightforward; The whole has a clean, clear and harmonious feeling. Highlight the text and decorate the atmosphere with simple graphics. You can use solid colors and gradients to superimpose background colors. Pay attention when choosing a big picture. The overall artistic conception depends on hue and light and shade. Of course, the simplest thing is to choose a clean and tidy basemap.

Colors are emotional, and different colors will bring people completely different feelings. Therefore, when making pictures, we need to match colors according to the theme, which is both reasonable and comfortable, and makes the banner picture harmonious as a whole. So we need to consider what kind of emotion we want to express, what kind of feeling we want users to feel when they watch it, and whether the expressed emotion is consistent with the theme. It is more purposeful to make color matching according to these points.

Gradual texture

Subtle gradients have returned to the design trend. Gradient background, even the superposition of gradients, can make your banner design stylized. With pictures, textures and words, gradient can give people a variety of experiences. Rich colors are its characteristics.

Different from UI design, in the design of e-commerce and advertising Banner, texture has always existed, even a very common element. Texture can improve the whole banner very well.

Information quantity and overall texture. Of course, when using textures, don't let them take the lead.

Explain the design skills of APPBanner and determine the style.

Typesetting/typesetting

colour

1- 1. We first expound the first aspect of text font processing:

Text cutting, this processing method is generally to cut a certain part/joint of the font, or add some elements at the cutting place; The advantage of this treatment is that the font is more artistic and the picture is more spatial, which adds a bit of literary or mysterious atmosphere to banner as a whole;

Distortion the font; Let's look at the picture 1-3, where the font is distorted. In figure 1-5, the designer handles the endpoint details of the font. Or change the font thickness and stroke shape, so I won't give an example here. This treatment makes the text "live" and more suitable for the semantics of the copy;

Blur/erase/transparency/color difference processing is generally used to blur or transparent the strokes of a font, or erase a part with a brush, or change the color of the strokes. In short, there are many ways to deal with it, but they are all similar. This processing method makes the font look more stereoscopic or more suitable for the background;

Add Highlight/Drop Shadow to the font. This processing method is to add some highlight elements to the font, or add some linear or planar "projection" elements behind the font to make the font look more stereoscopic and fit the background very well.

1-2. Above, we have completed several common font processing forms. Let's talk about several common typesetting styles of banner copywriting;

Horizontal layout is a common typesetting style. Generally, font size/thickness/type/color is used to distinguish the main content from the secondary content. This kind of typesetting has distinct layers and is clear at a glance.

Inclined typesetting is generally used for pages with strong impact, which is more dynamic and energetic.

Vertical layout, suitable for typesetting with less copywriting content, is mostly used for classic and fresh pages of literature and art;

Staggered typesetting, which looks more beautiful and imposing, is also limited to Banner with less copywriting content.

Wave typesetting, which is rare. Let's stop here. This kind of typesetting is mostly used in holiday activity pages, which is more lively and enhances the atmosphere.

2. The word processing and typesetting are mentioned above, so let's talk about graphic copy, common graphic copy.

Illustration with pictures, this kind of requirement for designers is relatively high, and you need to draw your own illustrations, and of course you can also find materials;

Physical picture matching generally uses a picture of a product/person/scene directly, but this kind of picture requires higher clarity and composition;

The picture is transformed into a hand-drawn picture. This way of matching pictures is to transform pictures into hand-painted styles, which solves the problems of unclear pictures and insufficient integration with background pictures, and is more design-oriented.

3. Let's briefly talk about banner's background. There are four common background types: solid color background, gradient background, texture background and picture background. The first two are easy to understand. Texture background is usually paper or stone/ground texture or variegated texture, and the picture background requires clear and beautiful picture.

4. Decorations are divided into background decoration and copywriting decoration.

4- 1 Common background decoration with a little line geometry and illuminator.

4-2 copywriting decoration, common copywriting decoration line geometry, brushes and graphics added according to copywriting semantic environment.