Banner Detail design: Banner style, typography and color design case

Article Description: Banner Design can be said to be my daily work of the most important piece of demand, banner than large projects, from the design cost can not give too much time to the designers, so this also caused me to how to achieve a more efficient banner thinking. I think there are three main points that make up the banner, that is, style, typography and color matching. My personal habit is to set the style first,

Banner design can be said to be my daily work of the most important piece of demand, banner than large projects, from the design cost can not give too much time to the designers, so this also caused me to how to achieve a more efficient banner thinking. I think there are three main points that make up the banner, that is, style, typography and color matching. My personal habit is to set the style first, then do the general layout and color, and then adjust according to the whole, and finally optimize the details.

Now I will start from these 3 aspects according to some of my own experience (visual Daniel please tap):

The first is the style , in general, the style in the communication with the demand side has set the approximate direction, at the same time we can ask him to some reference, further confirm the style, there is a situation is the demand side without any requirements, said to let you grasp the good, then I think it is also divided into two situations, One kind is the demand side really trusts you, lets go to do, also has the kind of actually he also does not know to want what, just wants to wait for you to make out later to see again, if this kind of situation does not say clearly the words very likely will face redo the tragedy. The first type basically does not need to worry too much, oneself according to the content what to grasp is good. The second type of words need to be noticed, we can find some of the appropriate reference to let the demand side to choose, and then according to his choice and demand side to confirm the style, to prevent what he said behind the style, redo a version to see and so on. So what are the different types of difference? I think it's a lot of cooperation, is completely based on the experience of the past to determine what type of he is, if it is the first cooperation I will first directly determine the second type, that is, he did not know what to do, and then according to his performance again classified well.

Below I will follow our style vane to give some examples:

❶ Fashion Wind:

Can see above these 2 banner all have the common characteristic, the big title, the model, the newspaper Trend magazine Wind.

❷ Retro Wind:

Retro style is the focus of traditional elements and retro patterns, like the first use of calligraphy and ink feeling of the pattern, the second is included in the traditional paper-cut elements.

❸ Fresh Wind:

Clear fresh air is the focus is refreshing, beautiful, light color and natural system, such as above this banner let people feel very beautiful and translucent.

❹ Cool Wind:

This style is usually more of a dark background, there are some more textured elements and lighting effects. Above this is actually I gave an activity to do header, usually this kind of style does less point, write to share time also did not find the appropriate banner, took this, I think can classify to this style.

❺ Simple Wind:

Simple wind is characterized by minimalism, large space, just like this banner without any excessive decorative elements, the overall feeling is very breathable

then is the typesetting , the so-called typesetting, will be text, pictures, graphics and other visual information elements in the layout of the adjustment position, size, so that the layout to achieve a beautiful visual effect. I've seen an article on the internet about PPT typesetting six principles (aligning, gathering, repeating, contrasting, emphasizing, leaving white), which I think is also true in the design of banner. Here I have modified these principles slightly, more suitable for the design of banner.

First, the principle of alignment

Relevant content to be aligned to facilitate the rapid movement of the user's eyes, a glance to the most important information.

Second, the principle of gather together

The content is grouped into areas, and the relevant content is clustered in one area.

Iii. Principles of white keeping

Do not put banner, to set aside a certain space, so as to reduce the pressure of the banner, but also to guide the reader's attention, highlighting the key content.

Four, the principle of noise reduction

Too many colors, too many fonts, too much graphics, are the "noise" that distracts readers ' attention.

V. The principle of repetition

When typesetting, we should pay attention to the consistency and coherence of the whole design and avoid different types of visual elements.

Vi. the principle of contrast

Increase the visual difference of different elements, this not only increases the banner lively, but also highlights the visual focus, so that users can easily browse to important information.

　 　Below I talk about more conventional layout, mainly the general direction, time is tight when you can choose a direct apply, here I based on the past experience roughly divided into 6 categories:

Again, the composition of the text , the typesetting of the text requires emphasis, size and thickness of patchwork, the font is maintained in 2 or so, like the following large size of the banner text can be properly done under the deformation, add some with the content of the elements or graphics, can better express the mood of the whole design.

　 　finally , color, color is by hue, lightness and purity composition. Hue is the color of the appearance, used to distinguish between various colors, such as red, yellow, green, blue, etc., lightness is the color of the light and shade, or the color content of the amount of white, the purity is the saturation of color. Each color will be because of hue, lightness, purity of the different, showing a different color sense, color is emotional, different color will bring people completely different feelings. So when you are doing banner you have to consider what kind of emotion you want to express, want to let users see what kind of feelings, you expressed emotion is not in line with the theme content, based on these starting point to do banner color is more purposeful.

Here are a few sets of banner, I extracted some of the colors made color group, and with some text description:

Attached: Design Reference website

Oleke Design Network: http://web.2008php.com/

Korea 68:http://gdweb.co.kr/

Color site: http://www.design-seeds.com/