RU EN

Flat design

A new style solution which is customary to call “flat design” appeared at the last time. Its main goal is to simplify recognition of different objects and visual reading. One doesn’t use here “fat” and heavy graphics, for example, gradients, textures, specks, shadows. Homogeneous content prevails in flat design and all important elements are marked out by color. Special attention is given to module net and typographics. They are used to accentuate elements and to divide the modules visually. Thus, everything goes out of brand-guides, logo design, identics etc.

Principles of flat design

If you want easy and without efforts to work out your own flat design you have to know its five main characteristics.

flat-03.jpg

1st principle – simplicity in details
All elements of user interface have to be clickable and easy for perception. Every user must interact with these elements easy and simply, i.e. they have to be understandable. To simplify the usage one can use color solutions as addition to simple style. However in this case one cannot confuse simple design with simple elements, these are different things. Flat conceptions of design can be complicated and simple as in other types of design.

For creation of interfaces in flat design one use icons and buttons which are simple elements. Besides, designers got inclined to use all kind of figures (simple) such as squares, rhombuses, circles, rectangles etc. Thanks to that each figure turns into separate and independent block. In some cases the edges are a little bit curved, but mostly they are even.

flat-04.jpg

2nd principle – minimum of effects
This design has got such a name thanks to the forms which are used in its creation. Its basis is two-dimensional style which is flat. Your main task is to get rid of the elements which are useless and complicate the design. For example, these can be gradients, reliefs, slants, shadows and other elements giving the deep to a picture. Any block or element is hard and doesn’t have additional effects on edges, for example, of shadows. This concerns all elements: from pictures to navigation elements. As one doesn’t use any techniques in flat design, the elements turn out more clear and realistic. They are widely used in design with 3D effect. Last on the stage are navigation instruments, texts, buttons but not background and textures. The question is: what makes flat design working? It has bright and impressive image even without additions. This is achieved thanks to the right placement of elements, which facilitates users’ interaction. Besides, flat design is based on all elements’ accurate hierarchy. Every day the number of sites using this design is rising steady. Though this is not the reason to underestimate its role in all sorts of mobile applications. In many cases the usage of flat design will be advantageous with small number of options, buttons and small screens.

flat-02.jpg

3nd principle – accent on typographycs
Typographics is very important in flat design as all elements here have simple character. Designs’ general scheme has to coincide with prints. If you will decorate them fanatically, they will look ridiculous near simple design. It is best of all to use readable, simple and elegant prints.

One can combine different types of spelling, for example, a simple print without marks with other print which will look like art-element. One has to be attentive and careful while using special prints. Buttons and other elements are used to increase interactivity, but to make design clear and simple – prints.

flat-01_02.png

4nd principle – accent on color
Color is very significant for flat design. Here more bright and saturated color palette combining different tint is being used. As a rule, two or three colors prevail here, but in some cases it can be six or eight colors at once. Each is used in equal parts. Bright colors are more often used without tints and nuances. As a rule these are 4 colors of the color circle. Primary and secondary colors are especially popular today. Besides, retro colors, such as dark blue, green, violet and salmon are widely used in flat design.

5nd principle – minimalism in everything
Flat design perfectly combines with minimalism as it is simple by itself. While working out design one shouldn’t use too many complicated details. If the text and simple colors will not be enough, one can use visual effects. Choose simple photos for that. There are sites selling goods by retail, which especially use flat design placing goods on the simple background, not distracting attention of potential clients. By the way, such simple photos have a certain natural deep and as a whole join flat design surface beautifully.

For easy comparison of these designs we take new iOS7 and old stylistics iOS, where glance design is used.


Old stylistics iOS New iOS7
Typographics Stylish print Helvetica Accurate and fine prints Helvetica Neue Ultra Light
Colors More dark with prevailing Bright pastel nuances
Effects Skevomorfism (three-dimensionalism, realistic icons) Minimalism and simplicity
Elements Voluminous interface Схематичность, размер иконок увеличился по диагонали

“Almost flat” design

This is one of the styles of flat design which is used today by some designers. They use flat design technique, but some elements have their effects. For example, buttons can have light shadows and gradients. Most of all designers use one effect for different elements. “Almost flat” design is preference of creators, as it has additional deep and texture. As to users, they also like such design style. It can promote interaction and is not rough. But this design has its shortcomings. Usage of two different styles prevents to find one own style.