Briefly about the development of banners
Below we will talk only about Internet banners.
Banner development includes 4 stages:
This is the hardest part. I think that about 5% of specialists can come up with quality ideas. It’s good if we are engaged in a copywriter who understands all the possibilities and subtleties of production.
Many find it difficult to change from static printing ideas to ideas in an interactive environment. It is worth noting that for the printing industry it is also possible to develop and implement an idea, implying user interaction, an interactive idea.
')
A storyboard is a picture containing keyframes of an animation.
It is necessary for the presentation of ideas. Customers must clearly understand what they are paying for. Designing a banner without drawing or approving a storyboard is shooting at a target with eyes closed. This approach is possible when ordering banners per kilograms, when the appearance of the banner does not matter.
When designing a storyboard vertical banner (for example, 240x400), frames need to be built into a line. If there are more than 4 of them, then frame transfer to the second and subsequent lines is allowed. You can not show the storyboard of 6 frames in 2 columns and 3 lines, because it will be difficult to understand the sequence of frames.
Storyboards horizontal banners (for example, 728x90) need to be done in a column with any number of frames.
In the case of non-standard banners (flyscreens, screening, etc.), the storyboard must be shown on the background of the site where it will be placed. Each keyframe will contain a substrate-screenshot of the site.
The designer who draws the storyboard banner must have knowledge of the composition, working with color, typography. The latter is a sore spot 99% of banner advertising in Russia. When designing a storyboard, a designer should initially take into account restrictions on the weight of the banner - the size in KB. You can draw a beautiful storyboard with a large amount of high-quality graphics. But it will not pass by weight, the graphics will be shrunk to disgrace, and as a result we will get quiet horror instead of a good banner. In this case, the designer cannot say that he drew a good storyboard, and the site with its strict requirements is to blame for everything. The work of a storyboard designer is the solution to the task of translating an idea into a previously known framework by the weight of the banner, taking into account the design requirements.
Having a media plan with the technical requirements of the sites, it is necessary to choose in advance the way of storyboard implementation. If the banner script is long enough and the weight limit is 25 KB, it may be worthwhile to use only vector graphics, discarding the raster.
If the media plan contains many different sizes of banners, then you can draw one storyboard for vertical formats, one for horizontal ones.
This work should be performed by a motion designer with knowledge of the action script. If deep programming is required, a flash programmer should participate in the development, along with the flash designer. In no case can one consider an animation of a banner as technical work and trust its flash technologists (programmers). Banner animation is a creative work.
An example . Imagine that, according to the banner scenario, a point should move from point “A” to point “B” along a straight path. An intelligent motion designer, unlike a technical specialist (programmer, technologist), understands that this can be done in an infinite number of ways. And the choice of the way the realization of the movement of a point depends on the context.
5 types of animations as an example.
Now we know that the rectilinear movement of a point from point “A” to point “B” can be done in many ways. It is important to always choose exactly the way of animation that fits the context, that is, to make high-quality animation. What does it mean?
High-quality animation refers to animation, which is pleasant to the eye in the case of objects that have no analogues in the real world. Animation styling is possible: stop-motion and other effects in the necessary context.
If we animate realistic graphics from the real world (auto, teapot, tree) and we do not need styling, then the animation should repeat their movements in the same way as it actually happens in the real world. We know how cars get under way, how they stop, because we see it every day. We know how the foliage of trees sways with a small wind, how the leaves come off and fly with a strong wind, etc. The task of a good motion designer is to save the user from viewing the animation. The user must see the essence, not paying attention to the implementation technique: a car is going, a grand piano is falling, an airplane takes off, etc. It is almost impossible to meet absolutely uniform motion in life, there is always some degree of acceleration or deceleration. This should not be forgotten when working on the animation.
The above is true for realistic graphics and does not apply to animation. For the latter, stylization of animation is more characteristic, it adds bright emotions to the video.
In some cases, it is convenient to use special scripts:
The scripts have all the documentation on the sites, it makes no sense to describe it here. Do not understand just lazy.
The first banner, which is obtained as a result of the above steps (idea, storyboard, animation and programming) is usually called a unique banner. Subsequent adaptations of this banner according to the size and technical requirements of the sites are called resizing.
A unique banner is the most beautiful banner with the least restrictive weight restrictions. If the media plan contains the following items:
200x300, yandex.ru, 25 KB
240x400, mail.ru, 35 KB
240x400, sports.ru, 40 KB
then a unique banner should be made for sports.ru, up to 40 KB. Adapt a bit for mail.ru and simplify for yandex.ru. With this approach on large advertising campaigns, we get all the banners of the highest quality.
Unscrupulous developers use a different system: they make the simplest banner for the toughest weight restrictions (in our case, yandex.ru, up to 25 KB), saving themselves from the difficult work of optimizing subsequent resizes and the client from high-quality banners. While a banner up to 40 KB could look spectacular, they would make it as “simplified” as the version up to 25 KB. Such an approach, of course, is unacceptable.
PS If the article arouses interest, then in the next we will talk about the golden rule of banner advertising and some obvious things that, unfortunately, many developers and sites neglect.
Banner development includes 4 stages:
- Idea
- Storyboard
- Animation and programming
- Preparation of a banner for placement on the advertising platform
Idea
This is the hardest part. I think that about 5% of specialists can come up with quality ideas. It’s good if we are engaged in a copywriter who understands all the possibilities and subtleties of production.
Many find it difficult to change from static printing ideas to ideas in an interactive environment. It is worth noting that for the printing industry it is also possible to develop and implement an idea, implying user interaction, an interactive idea.
What is a good advertising idea?
- Selling . There can be no compromise. It does not matter whether the task is to sell a product or service in a week or a brand builds a stratum 50 years ahead. The ultimate goal is always sales.
- Image . Such an idea ultimately helps to sell, but in the long run. Well-known car brands, banks, companies with a long history have constantly been engaged in increasing consumer loyalty to their brand.
- Emotional . The banner may not have a deep meaning, but the brand may be shown in a very suitable strong emotional atmosphere. This well contributes to brand awareness, development of communication of the desired emotion with the brand.
- Informational . In some cases, it is quite clear to convey information without an excess of “creative”.
If this block with scary links causes uncontrollable seizures in respected habras users, then I will delete it.
- Marketing emotional information idea
- Selling image,
- Image emotional (emotion due to non-standard) banners ,
- Pure emotion
- Image emotional banner
')
Storyboard
A storyboard is a picture containing keyframes of an animation.
It is necessary for the presentation of ideas. Customers must clearly understand what they are paying for. Designing a banner without drawing or approving a storyboard is shooting at a target with eyes closed. This approach is possible when ordering banners per kilograms, when the appearance of the banner does not matter.
When designing a storyboard vertical banner (for example, 240x400), frames need to be built into a line. If there are more than 4 of them, then frame transfer to the second and subsequent lines is allowed. You can not show the storyboard of 6 frames in 2 columns and 3 lines, because it will be difficult to understand the sequence of frames.
Storyboards horizontal banners (for example, 728x90) need to be done in a column with any number of frames.
In the case of non-standard banners (flyscreens, screening, etc.), the storyboard must be shown on the background of the site where it will be placed. Each keyframe will contain a substrate-screenshot of the site.
The designer who draws the storyboard banner must have knowledge of the composition, working with color, typography. The latter is a sore spot 99% of banner advertising in Russia. When designing a storyboard, a designer should initially take into account restrictions on the weight of the banner - the size in KB. You can draw a beautiful storyboard with a large amount of high-quality graphics. But it will not pass by weight, the graphics will be shrunk to disgrace, and as a result we will get quiet horror instead of a good banner. In this case, the designer cannot say that he drew a good storyboard, and the site with its strict requirements is to blame for everything. The work of a storyboard designer is the solution to the task of translating an idea into a previously known framework by the weight of the banner, taking into account the design requirements.
Having a media plan with the technical requirements of the sites, it is necessary to choose in advance the way of storyboard implementation. If the banner script is long enough and the weight limit is 25 KB, it may be worthwhile to use only vector graphics, discarding the raster.
If the media plan contains many different sizes of banners, then you can draw one storyboard for vertical formats, one for horizontal ones.
Animation and programming
This work should be performed by a motion designer with knowledge of the action script. If deep programming is required, a flash programmer should participate in the development, along with the flash designer. In no case can one consider an animation of a banner as technical work and trust its flash technologists (programmers). Banner animation is a creative work.
An example . Imagine that, according to the banner scenario, a point should move from point “A” to point “B” along a straight path. An intelligent motion designer, unlike a technical specialist (programmer, technologist), understands that this can be done in an infinite number of ways. And the choice of the way the realization of the movement of a point depends on the context.
5 types of animations as an example.
Animation quality
Now we know that the rectilinear movement of a point from point “A” to point “B” can be done in many ways. It is important to always choose exactly the way of animation that fits the context, that is, to make high-quality animation. What does it mean?
High-quality animation refers to animation, which is pleasant to the eye in the case of objects that have no analogues in the real world. Animation styling is possible: stop-motion and other effects in the necessary context.
If we animate realistic graphics from the real world (auto, teapot, tree) and we do not need styling, then the animation should repeat their movements in the same way as it actually happens in the real world. We know how cars get under way, how they stop, because we see it every day. We know how the foliage of trees sways with a small wind, how the leaves come off and fly with a strong wind, etc. The task of a good motion designer is to save the user from viewing the animation. The user must see the essence, not paying attention to the implementation technique: a car is going, a grand piano is falling, an airplane takes off, etc. It is almost impossible to meet absolutely uniform motion in life, there is always some degree of acceleration or deceleration. This should not be forgotten when working on the animation.
The above is true for realistic graphics and does not apply to animation. For the latter, stylization of animation is more characteristic, it adds bright emotions to the video.
In some cases, it is convenient to use special scripts:
- MC Tween: hosted.zeh.com.br/mctween/documentation.html
- GreenSock: www.greensock.com/v11
The scripts have all the documentation on the sites, it makes no sense to describe it here. Do not understand just lazy.
Preparation of a banner for placement on the advertising platform
The first banner, which is obtained as a result of the above steps (idea, storyboard, animation and programming) is usually called a unique banner. Subsequent adaptations of this banner according to the size and technical requirements of the sites are called resizing.
A unique banner is the most beautiful banner with the least restrictive weight restrictions. If the media plan contains the following items:
200x300, yandex.ru, 25 KB
240x400, mail.ru, 35 KB
240x400, sports.ru, 40 KB
then a unique banner should be made for sports.ru, up to 40 KB. Adapt a bit for mail.ru and simplify for yandex.ru. With this approach on large advertising campaigns, we get all the banners of the highest quality.
Unscrupulous developers use a different system: they make the simplest banner for the toughest weight restrictions (in our case, yandex.ru, up to 25 KB), saving themselves from the difficult work of optimizing subsequent resizes and the client from high-quality banners. While a banner up to 40 KB could look spectacular, they would make it as “simplified” as the version up to 25 KB. Such an approach, of course, is unacceptable.
PS If the article arouses interest, then in the next we will talk about the golden rule of banner advertising and some obvious things that, unfortunately, many developers and sites neglect.
Source: https://habr.com/ru/post/119501/
All Articles