What Is Affective Flattening?

flat design

The core meaning of the flat concept is to remove redundant, heavy and complicated decorative effects . The specific performance is that the unnecessary perspective, texture, gradient, and elements that can make 3D effects are removed, so that the " information " itself can be highlighted as the core again. At the same time, on the design elements, it emphasizes abstraction, minimalism and symbolization. ^[1]

We found that in the Win8 Metro interface, a completely flat design was used; in Apple products and iOS systems, we saw some flat design shadows; in Google, we also saw the quasi-flat design pattern, and in Google We have a good experience, and the comments received in Win8 metro are not so optimistic, so no matter what design it belongs to, the beauty of design lies in its suitability. I dare not say that flat design is better than anyone. The theory does not fit.

More and more

For designers, if you look at Microsoft's Windows Phone platform, you may find a special phenomenon: there are not many unsightly applications, but not many impressive applications. Apps have a sense of unity, but it's hard to express their personality, so that some developers lament that they all look the same. Designer Johnny Holland compared the Metro language to the Bauhaus style, and pointed out that "because the decoration is removed, the space for personalization is very small", which may give people the feeling of "lack of vitality". A good flat design also requires skills.

Simple design elements

Flattening is completely a two-dimensional world. A simple shape plus a plane without depth of field is not a waste of the word flattening. The core of this concept is to abandon all decorative effects, such as shadows, perspectives, textures, gradients and other elements that can make 3D effects. The borders of all the elements are clean and clear, without any feathering, gradients or shadows. Especially on mobile phones, because of the limitations of the screen, this style has more advantages in user experience. Fewer buttons and options make the interface clean and tidy, and it is extremely simple to use.

Emphasize the use of fonts

Font is an important part of typography. It needs to be complementary to other elements. Think about how obtrusive a swash typeface is in a flat interface. The pictures above show some examples of flat web sites using sans-serif fonts. The sans-serif font family has a large number of branches. Some of these fonts will have unexpected results in special situations. But be careful, do nt use it, do nt use those extremely rare fonts, because it will take you into the pit.

Focus on color

In flat design, color matching seems to be the most important part. Flat design usually uses brighter and more dazzling colors than other styles. At the same time, the color matching in the flat design also means more hue. For example, other designs only include at most two or three main colors, but flat designs use an average of six to eight colors. There are also some popular colors, such as retro light orange, purple, green, blue and so on.

Simplified interaction design

Designers should try to simplify their design schemes and avoid unnecessary elements from appearing in the design. Simple colors and fonts are enough. If you want to add something, try to choose a simple pattern. Flat design is especially helpful for some retail websites. It can effectively organize products and arrange them in a simple but reasonable way.

Pseudo-flat design

Don't think that flattening just squashes the effect of three-dimensional design. In fact, flattening is a functional simplification and reorganization. For example, some weather applications will use a thermometer to display the temperature, or calculation applications will still use the two-dimensional form of the calculator. In the application software, the image of the thermometer is purely decorative, and the calculation method of the calculator is not the most straightforward. One advantage of flat style compared to quasi-materialization is that it can more simply and directly show the way information and things work.