Six new flat design styles this year

Nowadays, flattening is no longer a fad for fashion design, but an aesthetic style. Flattened bold use of color, simple and crisp interface style once let everyone refreshing, when it to the effect of the elements abandoned so thoroughly, it will be the effect of picking up, modified to another appearance, making flat evolution for flat 2.0.

　　The characteristics of flat design

There is still no fixed paradigm for flat definitions, but the following four features are summed up:

1 no extra effects, such as projection, bump or gradient, etc.

2 use simple style elements and icons

3 bold, rich and bright color style

4 Minimize the decorative minimalist design

The details followed by flattening remain unchanged, but these "norms" are beginning to slacken. As the flattening evolved into the 2.0 era, let's take a look at 2016 years and what flat designs never existed before.

　New details of flattened 2.0

In order to avoid pure flat design, some subtle effects are gradually used.

Flattening has always been criticized by the aspect that the interaction is not obvious, buttons are difficult to find. Now these problems can be solved by adding some small effects. But the use of these effects is also in line with the simple aesthetic of flat.

　　First, the micro-shadow

The tiny shadow, which is a very faint projection, is a projection that is almost invisible to the person, and it can increase the depth of the element and make it stand out from the background, causing the user's attention. But in the use of this effect need to pay attention to, let it maintain a soft feeling and concealment.

Use the shape of the element to make it independent from the background. Even though the elements have the same color as the background, they can be distinguished by the shadow, and the simplicity of the tonal uniformity can be maintained visually.

Some people will mention the long shadow, but the long shadow is usually used only in the logo, icon and other elements of the interior, it is flattened a design style extension.

　Two, Ghost button

This does not refer to a phantom-shaped button. On the contrary, the shape of such a button is very simple, just a rectangle or a rounded rectangle border, the interior is transparent. It looks like a ghost's way of haunt.

Maybe you've seen them in a lot of flat design styles. They are usually designed to be slightly larger than normal buttons, floating over the background of a larger image and above the video. You can see the whole picture or the whole video at the same time that it exists, in order to get it focused, usually it is in a more prominent position, such as the middle of the screen.

The Phantom button's color is usually black or white, because it needs to be coordinated with the surrounding environment. If you can, try other colors also may not be. For example, a colorless black-and-white picture with a colored ghost button.

At the same time, also need to note that with the Ghost button is also most of the sans serif font, Chinese is fine black and other similar fonts. This allows the button and its fonts to be visually consistent.

　Third, low-key gradient

When it comes to avoiding extreme flattening, the use of gradients has a tendency to rebound. And the new gradient is different from the past, it is often in a more low-key posture, such as only for the background color or atmosphere, no longer the master, and only between the two colors gradient transition. The following is an instance of a two-color gradient.

As you can see in this case, the page has made the gradient a design element. Occupy the entire screen of the picture is full of shock, and let it also participate in the excessive gradient, let the picture emit the same effect of neon lights, with the Phantom button, this is almost an excellent idea.

　Four, round

There is no doubt that the flat design is the predecessor of Google's material design, which can be seen in the designs of material, flat shadow, but the latter not only inherit its concise advantages, but also further in the user experience to play.

The most obvious is that, in addition to simulating the reality of the paper overlap in the micro-projection, it will be a few rounds of use. In the flattening of the rounded elements more and more, it can be said that the edge of the circle at the mobile end is particularly obvious. Because the circle has a good imitation of the finger print, the presence of a circle appears to be a palpable place. This plays a great role in arousing the user's operation.

Because of the specificity of the circle itself, it is easy to separate from the background, so the important elements of the design of the circle is full. For example, the following web design of the restaurant, the circle itself has a sense of affinity, very fit the restaurant such a warm and casual brand atmosphere.

　Five, two color collocation

The early flat color is very bright and bold, it can choose from six to seven colors in the high saturation to match. Today, the flat design of the color selection although still Zhaomingliang bold direction, but only limited to the choice of color, two-color leveling color is now gradually popular another color direction.

We all know to emphasize color matching with graphs. The original flat design, only very limited material resources, so the choice of color is relatively limited. Recently, the Flat project contains a large number of images. Because of this change, you can choose color from many bright or bright colors.

　Vi. Dynamic Elements

The use of more video and animation effects makes flattening more lively. However, these tools that make Web pages look more vivid are independent of the overall style of the page. They are still concise, in line with the overall aesthetic direction of the site.

Rather than seeing the new trend as a direction, consider it a process. The flat future also needs to develop new ideas on this basis.