My former internship company is a fresh B2B e-commerce company with a lot of operational needs, especially the banner design of APP. In this article, I combined my common methods of making e-commerce banner with the representative banner designed before to make a periodic thinking summary.
First, before design
Why banners? Because of the demand, of course. The demand for banner often comes from the operation students, who make a display picture for users in order to cooperate with a certain operation activity. The banner is usually an entry point to an event page. If the banner clearly expresses the theme of the event and attracts users to click on it, our design will be more than half successful.
So, when I receive a request, can I immediately open up Photoshop and start working? Of course not, generally we need to ask the following specific content:
1. Function of banner.
Each operation activity has the corresponding business needs, we only know the purpose of operation activities, in order to know what is the role of the design banner, rather than hi like “self” and design.
2. PC or mobile?
Needless to say, there’s a big difference in size, at least.
3. Drop position.
Different positions can also affect the design of the banner.
4. Required paperwork.
Banner copy should be refined to express the theme of the activity. After receiving the copy from the operation students, the designer can review and even modify the copy according to the theme of the activity, which is also the ability of the designer.
5. There is no product material.
According to the category of operation demand, the operation students are generally required to provide the corresponding product material map for advertising of the new online products. When it comes to notifications for a new campaign, designers often have to find material or make their own.
6. Launch time.
Time is the enemy that inhibits designers from giving full play to their imagination. Creative ideas are beautiful and generally fall into place. Only by focusing on deadline can we achieve a win-win situation with time.
As we all know, in fact, no matter what the demand is, it must be communicated clearly with the demand side before starting work, or even reverse to promote the demand side to think about problems, which not only reduces the rework rate, but also enables the banner to achieve the predetermined business effect after it goes online. Communicate, communicate, communicate! Why not?
Two, design
It’s exciting time to open Photoshop and start work. There are some rules to follow in the design process. The following will be shared with my production and key points to be followed.
1. Banner size (set width and height).
The application generally has a special position to place the banner, and the width and height is set, the width and height reserved for different positions is not the same. I designed according to the set width and height.
Figure 1 is the banner at the head of the commodity list page. The width and height are set at 750*328 during design.
Figure 2 shows the “My” page for advertising activities. Due to the limited space, the width and height are 750*200;
Of course, the size of the above banner is only what I have encountered. The specific size setting depends on the importance level of the activity, as well as the page space, etc., and there is also a proportion guide, common 16:9, 5:3, etc.
2. Graphic format.
The most common banner format is around text typesetting, text center typesetting. What I contact most is the left and right typesetting, so I would like to share these two design ideas this time.
We know that the choice of typography depends on the main content of the banner. Figure left text right or text left picture right, generally considering that this conforms to people’s reading habits from left to right, can let the user quickly receive information.
If the product advertisement focuses on the product picture, the picture is usually on the left, with the main label or subtitle of the document on the right, to explain the role of the product (see Figure 1).
The picture on the left and the picture on the right of the text is usually used to publicize a certain operation activity. The text is the main content to be conveyed, while the picture on the right is to decorate and beautify the whole banner. At the same time, there is a certain correlation with the text, so that users can understand the meaning conveyed by the banner more vividly (see Figure 2).
3. Font selection.
Font selection is also a knowledge, the following from the common font classification and font style for banner design requirements to share.
A. Common classification of Chinese fonts.
There are serif, non-serif, script. Here we do not say how to distinguish these types of fonts, Baidu certainly said better than ME. Typical serif bodies include Song typeface, non-serif bodies include boldface, handwriting bodies include handwriting, etc. Due to the differences in font shapes, people also pay attention to the intuitive feelings. Serif body decoration is strong, bring people a lively, relaxed feeling, used in the more lively jump banner is more appropriate (as shown in figure 1); The shape of non-serif body is simple, the visual effect is more direct, and it is easy to read, especially used in the banner of science and technology type (see Figure 2). Handwriting style is also called calligraphy style, because of its characteristics, it is often used in the banner of literary theme (see Figure 3).
B. Font style.
Here the main consideration is size, thickness, color. Copywriting can be divided into main content and auxiliary content, that is, there should be contrast, which is reflected in the difference between the size and thickness of the text (as shown in the following picture). The choice of font color will take into account the matching effect with the background color, the association between the banner theme, etc. Choosing the right color can highlight the effect of the text.
Note: font commercial premise is to obtain the relevant copyright, a very important point.
4. Selection of picture elements.
The image element is an important part of the banner, especially in the commodity advertisement picture, so the properly refined commodity picture is very important, which will present a sense of quality and trust to users and improve the click rate (as shown in Figure 1, the exquisite laundry detergent set makes people want to buy).
Protagonist in the operating activities publicity banner, though not image element, but looking for material relevant to the subject matter or design with activity is very necessary, also it can vividly convey the theme, let users easier to understand boring text (as shown in figure 2, this is the list of goods the header banner, full of rich sense of graphic elements well fit the theme).
5. Background color selection.
Each color has a specific psychological meaning, so the color of the banner background should be analyzed on a case-by-case basis. The following two banners designed by the author are used as examples to share the choice of background color.
Figure 1 banner is designed by the author for the company’s new online user service evaluation function. The background orange has two meanings: one is in line with the company’s brand VI color, which is the starting point for many design scenes. The other is that the warm orange color brings people a sense of trust, which is consistent with the theme of the banner; I also added a gradient here to make the image more layered and not too “flat”.
The theme of the banner in Figure 2 is the launching of a financial service function. The background color is black gold. Black gold represents nobility and wealth, giving users a sense of nobility, which is in line with the theme of the activity.
It can be seen that: 1. Color selection should take enterprise VI color into consideration; 2. Color psychology is of great help for guiding design; 3. Color saturation should not be too high, otherwise it will be “distracting”, the background is just the background; 4. Consider adding gradients to add layers.
6. Embellishment elements.
When it comes time to add embellishing elements, the banner body has been basically completed. Embellishing elements can play a role of enriching the details of the picture, increasing the beauty, and even putting the finishing touch. At the same time, it can also stimulate users to click and transform marketing. There are a variety of forms of ornament elements, only unexpected, can not do, the common types are geometric elements, physical objects, color blocks, texture, light elements and so on.
As shown in the figure, the stripe in the upper left corner of the banner and the English letter below are the embellishment elements. If there are no such embellishment elements, will the banner feel any shortcomings?
Here, a designed Banenr is ready to go! Finally, attach a mind map.
Third, after the design
So, after the banner is designed and launched, is our requirement completed? Not strictly. Design is not equal to art, it is essentially a business behavior, do design naturally to serve the business needs of the company, banner is the same. After the design online, we’d better to be able to communicate with the background and then trace and check the banner hits or quantity to have the desired effect of the business, which hits, which lower, know the relevant data is the purpose of “to the” data to guide the design, only really understand user needs, know the user “taste”, Talent is less designed for “me” and serves business needs.
Four,
This article is the author of the first period of internship for the contact of the work content of the thinking summary, divided into “design before”, “design”, “design after”, I believe that for the future design work has a general guiding role, banner design is just a typical example of the author most often encountered. This article from the tutorial, because also reach level tutorial, write more good articles to banner tutorial, this article is just a pure sharing, in this paper, a lot of design need to be aware of when the points are derived from the I worked as an intern in the company’s two boss, this is two excellent designers, thank you very much for their patience to guide for me. Of course, the master leads the way and cultivates himself personally. Continuous thinking, summary and effective guidance are the basis for a professional to form a sustainable fighting capacity.
The first time to write an article, not much good, thank you for your patience to read.