Do a flat design-visual Chapter

Flat design is undoubtedly the most discussed at present, the most fire design form, since the IOS7 has been published more flat design to the forefront of the discussion.

Here I do not want to analyze the design and flat design of the pros and cons, not to say who better! In the form of the content of today, I can only say which design style is more suitable for your products, as you ask me the water and wine which is good to drink, I have no way to answer, can only see what you need at this time.

First of all, let's see why the flat design, some people say that the aesthetic fatigue of the design, some people say is a group of senior designers to seek breakthroughs to do out of the design trend, it is said, is from the graphic design evolved to ⋯

I think these are all right, flat design is the inevitable law of design development.

For example: Take a look at our text development:

Originally, people use pictorial text (ideographic) to record, this is a kind of the most primitive method of formation, the object to express the appearance of the characteristics of the description, slowly evolved to traditional, to the present simplified

(Source of material: Baidu Encyclopedia)

Perhaps the design is in accordance with such a development from complex to simple, from realistic to abstract flat.

Of course, luckily we are witnessing the evolution of this process!

&http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;

So we don't have to like or particularly dislike this design, it should be recognized that flat design is a current trend, but also a trend of development.

As a designer, it is also very important to adapt to the current trend and grasp the trend, so I collected some about the flat design of the practice, where the main biased visual side, welcome everyone to discuss

1. Remove special effects

Let's look at a set of contrasting pictures.

(Source of material: dribble)

Also is the lens design, in the flattening to dispel the gradual change, the shadow, the texture, and so on each kind of modification method, only uses the simple form to express, obvious neat.

To do subtraction, this first step should be the easiest.

2. Simplified extraction

First, let's look at a typical example of simplification and extraction.

The ox painted by Picasso

(Source of material: Baidu Encyclopedia)

A cow from the original realism to the last only a few lines to express, the whole simplification process also went through several steps, of course, there is a high demand for the designers to observe and refine their abilities, to fully understand the nature of objects, to understand the ingenious trade-offs, with minimalist elements, in the absence of more special effects decoration in the case of the expression of clear content, It shows the beauty of the object in the contrast of the line and contour.

Let's see if some of Picasso's masterpieces can find a flat feature. Picasso is called the main generals of Cubism.

Painters used to look at people or things from a point of view, only the three-dimensional side of the painting.

Cubism is a new way of showing things, they observe from several angles, from a few angles that are not likely to be seen from the front, and the faces that are impossible to see are shown in a juxtaposition or overlapping manner.

(Source of material: Baidu Encyclopedia)

"Avignon Maiden"

In "Awenon girl", five nude women in the tone of the blue background to set off, the background also made arbitrary segmentation, there is no sense of proximity, the characters are composed of geometric form.

(Source of material: Baidu Encyclopedia)
"Three musicians" is the masterpiece of Picasso's Cubism with geometric shape. Here, the geometric structure is concentrated to the central line of the picture, while outward to the edge of the painting is more loose and open, so that the character will appear clearly. Picasso can combine line structure with very elegant short strokes.

(Source of material: Baidu Encyclopedia)

The bottle, the glass and the violin

In this picture, you can tell a few images based on ordinary reality: a bottle, a glass and a violin. They're all in a scrapbook of newspapers.

Simplification and extraction is really not a matter of overnight, the requirements of the designer is very high. Here at ordinary times can practice observation, suggest can look at traditional painting-drawing and traditional paper-cut art, as well as traditional patterns. In ancient and modern times in many artistic performance and flat design have similar to the wonderful.

Drawing: (with ink line grabbed image without applying color)

(Source of material: the picture net)

Paper-Cut (put objects of different space-time and different space on the same plane.) Using a combination of dot-line surfaces to help with static flatness

Patterns (only with shapes and lines can show the different characteristics of plum varieties)

Anything can be shown in a minimalist way as long as you observe carefully and refine it.

Practice Example:

If you want to draw the following two kinds of plum blossom, it should be very easy.

But can you observe and find their differences and draw them with simple lines? (interested students can try to draw)

3. Use color

skillfully

In the flat design, the use of color is in place, is undoubtedly a very important aspect of this design style, see a lot of works, in the color more emphasis on brighter, more vivid.

In the past design, the design of a work in most cases more focused on the two or three colors, and the flat design of the color is often between 6 to 8 kinds.

The following collection of a number of colors to use a relatively high frequency of works, such as the figure

Blue/green:

Naked Color (pink):

Apricot color:

Grey：

Purple：

(Source of above material: dribbble)

In addition to the color of the match there is a lot of time in the flat of the visual design, is very few lines appear, more is the use of color blocks to express various relationships. (How to use color block performance, there should also be a special share)

Of course, some are retro-style, with color, and low saturation ...

The important thing is that all kinds of tunes together look like harmony.

(Source of above material: dribbble)

4. Typesetting is very important

Because in the flat design uses is the extremely simple element, therefore, the typesetting is particularly important.

It is said that the origin of flat design from the Swiss graphic design, then we first look at the Swiss graphic design.

After the Second World War, graphic design experienced a period of not long stagnation. By the 1950s, a new graphic design style was finally formed in federal Germany and Switzerland, known as the "Swiss Graphic Design Style" (Swiss). Because of its simplicity and accuracy, it soon became popular all over the world, becoming the most influential and internationally popular design style since the Second World War, and therefore known as the "Internationalist Graphic Design Style" (the Analysys typographic style)

(Source of material: design house)

Simple and clear, accurate communication function, is the main point of the Swiss graphic design, then we look at the flat design how to do, and can find some corresponding points?

First is the font: in the flat design style, the design of the font is very important, a novel font used as a design element will play a very important role, but be careful not because the font is too novel, and affect the transmission of information.

The use of fonts in Swiss graphic design

Fonts are more often used without serif (sans serif) font type

The use of fonts in Swiss graphic design

Excuse me: In the flat design of the use of high frequency is those fonts?

Fonts, especially Chinese, is also a place where people feel very headache, the same layout of the same background, many times the English look very comfortable, it is because the English language is concise and highly malleable. But Chinese is not so good to put up, I believe many designers have encountered this problem.

Here about the use of Chinese fonts can be dedicated to form a share, here first a brief introduction. The layout of Chinese can be more reference to the Japanese design, because the Japanese and Chinese in the text structure, such as the size of sparse density, there are many similar places.

Using good fonts plays a vital role in design.

Next is the big picture

A good picture can attract attention and click of the desire, in addition to the appropriate typesetting, and then with flat interface, instantaneous design sense doubled, the grade has wood:)!

(Source of material: dribble)

Again, translucent.

iOS7 used this design in many places.

The biggest advantage of using these design methods is to create contrast, you can let the designer through the color block, the picture of large fonts or a variety of color levels to create visual anxiety, the legendary atmosphere should have such an effect, haha:

This effect can be very shocking if applied properly, but use this effect with caution because it is difficult to handle properly and there are some principles to be mastered:

only pictures and text can be read, translucent effect makes sense, in determining the translucent position, you need to know what the occlusion of the content, these occlusion is reasonable transparency of the use of errors will affect the overall design effect and reading, For readability, do not place semitransparent elements (such as black-and-white contrast or complementary colors) on strongly contrasting pictures and do not use too many translucent effects at the same time

(Source of material dribbble)

(Source of material dribbble)

5. Other styles and details

Who said flat is monochrome flat coating, flattening can also have other styles and details, we take a look at

Decorative Painting Style

(Source of material dribbble)

2. Three-dimensional

Who said that flat design is the color block accumulation, to see the flat can also have the details

The change between the color blocks presents a sense of smoothness.

(Source of material dribbble)
Swiss Graphic Design

(Material source design house)

3. Light sense, long projection and shadow/highlight

(Source of material dribbble)

4. Dynamic

Look at the example below, when the clock is turning, the icon below the screen (Hamburg/beverage, etc.) also has a corresponding dynamic performance, the drink can also look like a shake in the glass.

(Source of material dribbble)

5. Texture (cross Stitch)

(Source of material dribbble)

Others (personally feel like paper-cut)

(Source of material dribbble)

In fact, there are many ...

Summary

Flattening is currently the most popular form of design, as a designer does not necessarily have to catch up with the trend, but must master this technique and know how to use it flexibly.

Do a flat design, not simply remove the various cosmetic design effects, need more designers to observe, refine. We can find common ground and use it from all kinds of artistic expression forms in ancient and modern times.

Flat design is also not a simple monochrome flat coating, it can have a lot of details, but also can make texture and dynamic, which requires designers to be patient to find.

In this change in the design trend, we are not only witnesses, but also should be participants, let flat design to more violent bar ~:

Follow-up:

One day, the development of GG half jokingly said "flat vision is easy, I can achieve the code ..."
Indeed flattened to a certain extent to reduce the design threshold, but used to hear a joke the day before yesterday that "typhoons can fly, this is the trend; The typhoon is gone, the eagle can still soar, this is the strength ..."
(Wood is malicious, please do not take the condemnation) so the designers are still very important to cultivate good internal strength.

Some people say that the future design trend is: Realistic design will not disappear, flat is the performance of the public, and realism will be like the existence of luxury goods, custom-made things tend to be very expensive ~ (Welcome to discuss)

If a product put hope on the visual, want to rely on the visual performance of the flat product, is clearly not reliable ~

(This article is from the Tencent CDC Blog, reprint, please indicate the source)