How to quickly design a good banner?

The world looks at the face, the website looks banner, the façade certainly wants to be beautiful, but many schoolmates thought that does banner is the door technical work, oneself apprentice is not fine to do. If you read this article today, you will understand that technology in banner, like the knife in people, although there are moves, but no internal strength support, long war will fail. And this good article, is the banner of internal strength cultivation, according to 6 steps, crash can be treated.

@Heidixie (Alibaba Senior Interactive designer): The team of small partners to ask this question, sent an e-mail to share their ideas, by the way posted over.

Applicable prerequisites:

Non-Professional visual designer

Don't have much free time to do it.

Why do you want to do banner?

Banner is used to convey information. All banner that do not convey effective information and convey information effectively are YY.

Baner is used to motivate the user to act, also called to action. It is not valid for the user to produce the banner you expect.

So, let's get rid of the wrong idea: banner is just for decorating, just for the sake of attracting attention.

Therefore, since we are not professional designers, we must return to do the origin of banner, in order to achieve the above results, at the same time take into account the beautiful, generous, good-looking.

Generous and good-looking banner do not necessarily require advanced visual skills, and cumbersome PS functions, but to take into account the visual principles of several, I will be listed later.

The first step: define what message to convey

This step, and the visual, aesthetic and anything is okay.

For example, half a month, the message we want to convey is:

Brand logo, so that users know where to produce the next time, the formation of conditioned reflex, the so-called visual cognition is to need a certain repetition, only repeated to deepen the user impression.

Sub-brand logo, let users know what we have, and a series of feelings.

The above is the core message we want to convey. You can also think of it as a banner, just--it doesn't look that good.

However, we find that the information is not enough, we also want to convey:

Our content is probably what, so that the user to form a look

Since it is a series, we want users to be able to know that this is the first few installments, so that when they want to be interested in a certain period, click to all, there is a place to go.

So, we release the information again. Now we have 4 types of information.

Step two: Define the priority of the information

Although we have 4 kinds of information, but the priority is certainly not the same, so corresponding to the design, we put the size of the plate, the color of the prominent is not the same.

Step three: Consider the user Vision path

That is, you want to guide users to see where, and then look at, and then do what.

Usually, the user reads from top to bottom, from left to right, so the most important content is placed in the upper left corner.

However, this rule can be easily broken with eye-catching pictures, dazzling colors, but I suggest you not to do so easily, all the pictures and colors have to be meaningful, why use this picture why use this color.

Make sure the user has a visual center at first, and if the user doesn't know what to look at at first glance, then this banner is a failure.

With visual focus, you can extend the visual focus, using the visual intimacy principle (close proximity to a few, contrasting principles, and so on), directing the user from visual focus to other details or prompting action.

Fourth step: Consider the standard recognition color

Since we want to convey the brand image, please make sure to use the color from our standard VI color plate to choose, not to use casually.

I am the color is weak how to do? There are 3 axe dozen all over the world: "Second change color master!" 6 Web page Design color principles

Remember, branding is important to be repetitive. Like we see red, yellow, white color will think of McDonald's, see Green and black think of Starbucks like.

Fifth step: Make the visual typesetting

(Don't think too much about design skills, or fall into: I'm not a professional, so I won't do design on)

Typesetting, the information has been complete, priority has come out, nothing more than to make it look better.

A few tips to make banner look good:

1. Alignment

Very good to do it, so that the content portrait, landscape, there is a line, you can align. Either centered or at the bottom. Try to make sure that there is no element on the page, that there is no element and that it can form a aligned relationship.

2. Intimate

Don't let all the content get piled together, so that the more intimate content of the relationship is aggregated into one area, and don't allow more than 4 areas on a banner.

3. Simple texture:

Do not add any PS filter, shadow, can not gradient on the gradient, because it is not popular, do not blindly use a variety of styles.

4. If you want to use the icon, try to choose a uniform style, and can maintain your priority order chart. For example, we guide users to look to the left, and then to the right, the results of the icon on the right to choose a blood-red, perhaps the user's line of sight was immediately attracted to come.

5. Do not let the font exceed 3 kinds. As far as possible with the song body, Bold, founder bold, do not use what Weibei body, Xingkai and so on, a look at the comparison cottage.

The sixth step: do more landscaping

If you don't want to do it, it's okay.

If you want to do it, we can:

For example, take the time to make a popular flat background decoration--or to emphasize, do not decorate for decoration, all the decorations have meaning ~

Make the background more textured. For example, add some grit feeling.

For example, you can also change the appropriate layout, such as: centered layout, easier to guide users from the top to the next reading perspective, but also a lot of people lazy more like the layout style.

To sum up, do banner have half energy is carding information, set priority, set user browsing order, and PS skills not too much relationship, so, everyone can try to do a look very design, but actually did not spend any energy banner.