Let the great God teach you the "evil Spirit Sword Spectrum" in banner design

Former Taobao Beijing ued senior visual designer. From childhood like painting, clay sculpture, computer games. Graduated from the Beijing Film Academy (Animation Academy) 15 years old assembled his first computer (after becoming a hardware enthusiast, proficient in hardware and software) 16 years old began to learn traditional animation, CG painting and so on. 17 years old Contact the Internet, and set up personal website sixdogsnet (99 Internet Spring a good, did GUI outsourcing also did information channel edit) 18-Year-old originally wanted to go out to work, test a Adobe Graphic designer certification (ACCD) 19 years old but later still admitted to the school of their dreams ... ... 99 set up a personal website Sixdogs ' home,00 year registered the international domain name sixdogs. NET later with Sixdogs this network name to blend to date.

During the works, the site was "diffuse friends", "popular Software", "HOPE", "Computer newspaper", "the Computer Application Digest" and other magazines published and recommended. Maybe a bunch of old nets have an impression of my name.

05 years later, because of full time work on the noise.

2005-Tragedy so far (as you all know) focus on the GUI, the Web and other visual, interactive design.

Successively served: Sina UC, MOP, China Yahoo, Taobao.

Next, go to the topic.

Banner design is actually our contact with the Internet after work, the most common one of the most popular work.

It is like a staple food, supporting the operation of a project, a company, a website.

is also the majority of new products, things, various promotional activities presented to users and consumers the main first way.

What is banner?

Banner's core mission is to attract users ' attention and then be clicked.

So it's a kind of ad that is subject-specific, highlighting key content and effectively capturing users ' eyeballs.

Usually interspersed in the page. Of course, in order to effectively attract users under the premise of being able to merge with different pages is the best realm.

You can see the first Coke banner in the picture above.

A rough look I know is selling clothing, 39 of bags of mail T-shirts.

Looking carefully, they focus on doing T-shirts for 17, but when I see the left T-shirt, I really don't think they've been doing it for 17 years (laughter) and it seems to be the new listing ... or the domestic (information is good) in fact, users do not need to know so much information, too much information can not let users focus on a key information.

This is also a common problem of demand side-cramming banner

Give a positive example.

This banner is actually very violent, hundred shadow ticket, star Prop 1 Yuan Pat.

This copy is very strong and straightforward. Another comment is the idea of possession of Jacky Cheung concerts.

The target group is clear. Simple and straightforward, this banner is more easily noticed and clicked by users in the carousel.

Conclusion: In fact, the original intention of banner design is still clicked.

So all the design and creativity revolves around attracting users.

Simple and effective copywriting, sometimes requires the designer to understand the needs of their own and refined.

But in the end we present the results, must have a focus, a core content, a few around the explanation will become a high success rate of the routine. In fact, many times. A designer can control the quality of a copy. But usually the copy we get is not ideal (or even bad).

So in the banner demand of Taobao, our process is roughly the same.

In fact, the process from the picture can be seen, the process of communication will consume part of the time, and then the first draft after the follow-up.

I didn't write back the repeated revisions. As designer experience accumulates, the number of deviations from core objectives and repeated revisions becomes less

Taobao's process does not necessarily apply to all companies or companies. But the equivalent level reaches a certain level. There will be more and more elements of this project process. Also for vertical management.

Font aspects

In Taobao, we are forbidden to use some unauthorized fonts (because the font company will come to jihad)

So in the premise of not using Microsoft Jas, we usually use "founder Orchid Pavilion Black" to achieve similar effect.

In a banner, try to avoid using more than 2 fonts.

It is better to identify the font clearly and well.

Deformation Shenla or something in order to ensure the quality of the premise can have, but to meet the needs of their own style.

The risk of font founder "Microsoft" all kinds of bankrupt fonts company "no copyright font

Picture material

The quality of the picture will affect a banner of the good and bad.

So in fact, there are 3 points that need to be noticed roughly:

1. The clarity of the picture identification (blurred image will give people a sense of not exquisite)

2. Use of cartoon material (cautious) usually the cartoon material is copyrighted, and the other is the style of banner content is consistent. For example, I have taken over the topic of insurance promotion, I strictly prohibit the use of cartoon characters to promote. The same is true for the banner of the financial line, as it involves money and guarantees. Cartoon image is easy to give people the feeling of not rigorous

3. There is the proportion of the picture content must be kept 1:1 telescopic. The subtle imbalance is easy to give users a sense of cottage production.

Heritage aspects

Usually behind the banner there will be a promotional activities, corporate sites, or hot products to support.

Then we need to keep in mind that banner needs and the promotion of the theme or the content that is clicked is inherited.

That is the point before the see is a beautiful woman, point in to sell shoes. This is not good.

The inconsistency of the banner and the subject will bring the user a sense of deception.

This is Taobao internal banner specification output

The label will be very fine, such benefits are similar to the assembly line.

The banner style of output with the same specification will be very uniform.

When the page is updated for a long time, it can effectively guarantee the banner quality.

When we have done in a business or project for about half a year, statistics the daily needs of the number of banner, you can draw time to complete a banner small specification. Write your own understanding and the things you have summed up. This will save you a lot of time when you are handing over your work or coming to a new helper.

Some examples of errors are compared with the correct examples. will make it easier for others to understand.

Taobao TMS This is the internal banner upload system Taobao.

It is probably the unified management of this part of the data, and then will strictly limit the number of KB in various sizes. Then save server space in this way. But usually designers have a common sense, such as how big the banner best not to exceed 100kb

Give an example ...

But it doesn't seem like a regular banner, but I feel pretty good about it.

First of all, my idea is, I hope in this promotion has the game point card kind of feeling.

Then I see their picture in a rectangular shape on the design specification of the poly. I try to add a black background, and then the point card picture area with rounded corners of the graphic circle, so that when the actual picture put up, there will be a bit of the real round corner of the feeling.

Then I chose a wow now version of "Cataclysm" more representative of the picture material.

Consider the surrounding environment where the actual banner is placed.

I decided to put the text information below to reduce the disturbance of the nearby content.

During the process of arranging the copywriting, I actually discussed the main information of the copy with the operation colleagues several times.

Finally after several optimizations, the final release of the content as shown.

and strongly request the accompanying partner to pay the Treasure logo (in fact, I do not want to add, add a bad look)

Combined with the above work, finally completed the design of this banner. Effect as shown

In addition to banner related to the picture format of some knowledge of the popularization

JPG is our most commonly used format, its advantage is in real people, landscape material compression ratio will be better, but the disadvantage is because of the problem of algorithm, will appear unique JPG noise point. Increase with the pressure loss ratio. This noise will become more and more serious. But it is because of the presence of noise. This is also our easiest way to judge deceitful Act photos on the web. To see if the noise is smooth. JPG of the mishap is K-number of small noise more. Less noise, you can only relax the number of KB.

The other is GIF.

Cyber violence incites the representation of advertisements. The advantage of this format is that the material is pixel-like, or the number of colors is relatively low. It's going to be a little KB. and is not affected by the size of the picture.

In addition, PNG, with the decline of IE6, now PNG's advertising form is gradually more.

The advantage of PNG is that it can be done transparently and a channel.

Finally, the flash format.

This is also now the main force of media advertising.