Examples of flat design. Basic principles of flat design. "The best design is as little design as possible."

Flat design is a key design direction for the coming years, so we invite you to get to know it better and learn the 5 fundamental principles that underlie it.

Introducing flat design

In Russian, flat design translates as "flat design", and it became an absolute favorite after the presentation of Apple's iOS OS. A minimalist approach to design for usability was at the forefront. The bet is made on user comfort. This is a pronounced protest against "squerforming" (visualization of objects, as in reality). The choice fell on more simplified and at the same time simple aesthetic solutions. Users who are tired of realistic visualizations have greeted this direction with enthusiasm, and more and more web projects are switching to this format.

I would like to note that “flat” does not mean “boring”. Flat design solutions can be beautiful, they are more refined, clean, free from redundancy, transforming into an "island of tranquility". They finally make the content understandable. It remains to learn the basic principles in order to apply them in practice.

"Flat" design does not seek to convey volumes, so it is based on two-dimensional visualization. This means that you will not see any shadows, no reflexes, or highlights with textures (with the exception of long shadows). Only the transfer of contours, and nothing more.

It is recommended to use monosyllabic figures in design, as well as to follow the clarity of the contours, which is designed to emphasize lightness and weightlessness. In addition, such laconic elements imitate the sensor well, generating a desire to interact with the object (a call to press, touch). However, the simplicity of the elements is not equal to the simplicity of the design as a whole - this only applies to the outline. As a result, everything that the user sees is clear to him, and he can easily use it.

Flat design encourages extreme caution when working with fonts. That is, their character is obliged to complement the design scheme, without contradicting it. Moreover, in flat design, font is also a key navigation element.

Not only type, but also color is an essential part of flat design. The vast majority of palettes are based on 2-3 colors, although, of course, there are exceptions. Usually juicy and bright, but pure colors are chosen. As noted, there are no gradients or unnecessary transitions.

Flat design is a vivid example of such a worldwide trend as minimalism. Designers abandon unnecessary "bells and whistles", move away from complex and implicit approaches to visualization, which yields results in the form of user activity.

Flat or nearly flat? We are looking for a compromise!

In conclusion, I would like to note that today there is a synergy between flat and non-planar design. It's about a "nearly flat" design. This is the most common application of the described concept, when, together with simple and concise elements and two-dimensional space, designers use 1-2 techniques for depth and perspective.

Also the trend of 2017 was Semi Flat Design - semi-flat design. Influenced by Material Design, it has become a little more spatial. Light shadows appear that make the design semi-flat. Flat design is still relevant today, due to shadows it has become deeper and more complex, but the basic concept is not violated.

Recently, such design direction as FLAT - design or flat design - has become popular.

Users of Windows 8 and later are already familiar with the FLAT design, since the first thing they encounter when the system boots is this screen.

The very appearance of FLAT - design is due to the spread of mobile applications. And I think this is due to the fact that FLAT design objects are created using vector objects, and accordingly they are easier to adapt to various gadget platforms.

FLAT - the design has the following features:

Full or partial rejection of gradients, complex textures and shadows , which I am personally very happy about. I have no complaints about shadows and I like to use them myself, but let the age-old problems with displaying the gradient go away.

Typography, geometry comes to the fore. Especially when it comes to web design.

Harmony and. The design uses a limited number of colors. Here is an example of the popular FLAT design palette.

Use of creative informative icons.

As I said, FLAT design has become very popular in mobile applications, as its main feature is ease of layout and adaptability. FLAT design is also widely used in infographics, as it is based on the harmonious perception of information through the use of constructive techniques of typography and color.

At one time, the most popular trend in web design was Web 2.0. Now FLAT design has taken its place. Fashion tends to return to the well-forgotten old in order to make the new out of it. Who knows when FLAT - design will go out of fashion, but for now enjoy the simplicity, harmony and information content of the current trend. By the way, flat design was already popular in the 80s, but then this was due to technical features, the inability to display shadows and gradients. And now most of the leading IT companies have switched to Flat design.

Well, well, we will adapt to the changing world. In the next article, I'll show you how you can create FLAT style icons using simple shapes in Photoshop.

If you are interested in my publications, then I suggest keeping abreast of the latest updates on the site.

(Visited 2,333 times, 1 visits today)

We don't know if you noticed or not, but lately (especially in the last year) in web design around the world there has been a clear trend towards simplification, rigid minimalism and visual relief of what we, as users, interact with every day. Simply put, the design has become "flat": unlike the bulging icons of the times of the rapid growth of social networks and web 2.0, now we are increasingly met with simple icons of new services. All this got its name - flat design. Not apartment, but flat.

With its yesterday's presentation of the new mobile OS, iOS 7, Apple finally confirmed the rapid growth in the popularity of this area, traditionally delighting some of its fans, but also meeting significant discontent among experienced users and designers. What's the matter? What is the use of this flat design and does the world really need it? We decided to contact experts from Ukraine and abroad.

We asked them to answer three main questions:

• why the world started to move towards flat design on the web and mobile and what it is;
• what will it give Apple and iOS 7;
• how it will affect designers on the one hand and users on the other.

Denis Sudilkovsky, Kiev
Interaction Design specialist, producer Prodesign.in.ua

The "pendulum effect" in predicting the future is manifested in the fact that if there are two extremes in some issue, humanity will rush from one side to the other. Without a doubt, this is also true for the design of interactive systems. The flat and uninteresting primitive web at one time has changed to voluminous web-side buttons. Interface visualizations have reached their apogee of realism and the pendulum flies in the opposite direction - flat & simple.

What will Apple get from this? It will retain its place in the trend and hundreds of thousands of comments that their iOS becomes very similar to Android.

Designers will have to evolve (and not joke about when flat design will come to mechanical engineering and give us flat cars :). When there are no decorations, all the work consists in creating the mood with the content for a specific scenario with the user. This profession will have more and more in common with the Director than with the Artist. Users, on the other hand, get new experiences and new experiences. Personally, I was an adherent of the iPhone for 4 years, but this spring I changed my phone to Android for the only reason - I'm tired of the monotonous perfection of the apple interface.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

To begin with, I would like to point out that I don't like the term flat design. Most graphic design over the centuries has been flat. I also find that this limits your ability to make outstanding designs when choosing between flat and something else. Design can be much more than that. Cheerful, bright, dark, positive, minimalistic - you can call it whatever you like. But today I rarely hear that someone considers a design not only flat or scleromorphic. It's a little sad.

Why is the web and mobile slowly moving towards flat design? I see it this way - it's just a trend. I have never seen an article on the benefits of flat design in user interfaces and still am not convinced of it. Simple and clear design - yes, but it is not the same as "flat". Take a look at Google for example. They don't do completely flat designs, they - and I share this point - still see the need for some depth and variation.

I was very surprised when Microsoft chose this direction for themselves a few years ago, presenting the famous Metro style. In fact, they used graphic design for large signs that people look at from a certain distance and never interact with small screens with a significant amount of elements. It looks nice, but do they have good usability?

What I saw last night from Apple was just a poor copy of several interesting designs that have been popping up on sites like Dribbble i Behance over the past year. I saw nothing new - except that this is far from the same "old Apple" of Steve Jobs. The company has shown that it is not at the forefront of mobile interface design. Of course, we'll see fans inheriting all those crisp white designs and creative gradients over the next few months, but I don't think this aspect will be as influential as Google's recent discontinuance. But on the other hand, whatever it was, Apple has always been a trendsetter and inspiration for many people, including me.

For general users, they like bright colors.

Ivan Klimenko, Kiev
mobile interface designer, 5tak.com

To a large extent, I take this situation with a fascination with flat styles a bit philosophically. This is not the first time that designers are fond of minimalism and artificial materials. Everything passes.

The Bauhaus era of the 1920s and 1930s made a huge contribution to design, but still, tonal tightness and artificiality could not withstand the desire and inner urge of people to exist surrounded by more natural things.

Then in the 60s, everyone started to admire plastic.

Furniture, dishes and even clothes are all made of plastic. It seemed that this is the new hope of mankind, but again not - people very quickly returned to natural forms or to copies of natural materials.

The sharp contrast of forms and minimalistic graphics have always expressed the accumulation of internal conflicts within society. Design is just a mirror that shows our inner world. Too many things around. Life is very fast, and we just do not have time to think and consider anything. We often don't have time to just live.

Minimalism and all these electronic pieces of iron are just a step on the road to something more natural and human. More than just another computer. I’m even sorry that Apple, which knew how to look deeply, no longer exists.

Olesya Grichina, Kiev
UI designer at Componentix, twitter: elendiel

I think that designers were greatly influenced by a large number of gadgets with different screen sizes and resolutions - for all this diversity, it is easier to create designs without textures, complex shadows that correctly take into account lighting, etc. They began to think more in the direction of “how to make it more convenient for the user”, and not “how to draw beautifully”. Content is the main thing, and in our work it is important to present it in the best possible way.

It seems to me that behind the external changes (flat UI, icons), we especially did not notice any serious changes in the usability, and how they swear on this topic. When they check it in work, it will start "ohh, how convenient, and why didn't they do it before." For designers, I hope this will affect in such a way that they will pay more attention to the usability of the interface, rather than textures and shadows. In the end, it will be possible to explain to customers that this is a trend :)

I think that flat design will not particularly affect users - if it is convenient for them to create and consume content, there will be many satisfied. But the icons on the home screen are still acidic :)

Pavel Grozyan, Kiev
Product Designer at MacPaw, grozyan

“Apple! Ha ha ha, stop it! - Designers shout. - Hurray, it became easier. - the users are chanting. "I understand both points of view. Today, after the presentation from WWDC2013, many of my colleagues stood up and said," Oh, her, this profession! Anyone can draw such stupidity now. And these icons for $ 30 ?! " at first glance, they are right. But if you dig deeper, you understand that there are thousands of objects that for a long time differed from one another only in the scenario of use, then in shape, then in color, and only then - in artistic details. I remember the times when all these The guys on LinkedIn whose profiles today say UX, UI Designer, nervously copied the white shadow effect on the letters. Like Apple. Then light and light sites. Like Apple. Then rich textures and realism. Interfaces. Like Apple. All their work was copying, since there was no original, unified and convenient for all development concept. This is exactly the problem today flat design solves. Although it seems to me wrong to call it that. It's good that Microsoft did not come up with it , and it was formed during the ten years before the digital age, in the publishing industry.

Flat - it's not for clicks, it's for clicks, taps, taps. You can't call it flat - the absence of "thick" textures and shadows on the buttons makes it rather simplified, and without visual aggression. And you can't do without buttons gradients. I support this trend. If it doesn't interfere with the quality of the user experience, but it will be easier for everyone to live with. First of all to the user. Secondly, for the creator: it will be easier in technical implementation, more convenient to click (underline links - hello), and multiplatform - combining web, mobile and desktop into one single experience. Without a doubt, this is a bold move for Apple. And only they can decide on it. Their story has dozens of confirmations, so they are more likely to succeed than vice versa.

The flat design revolution has continued to gain traction since it was introduced to the Windows Phone platform in 2010. It's not hard to understand why: an interface with such a design seems more intuitive, is well suited for adaptive elements, modern frameworks, and looks attractive if executed correctly.
Flat design began as a counterpoint to the ubiquitous skeuomorphic style, but has since become much more than just "Option B".

Flat was originally exclusively two-dimensional with a total focus on minimalism. Modern flat 2.o uses shadows, gradients and other elements that make it "almost flat".

5 typical components of modern flat design:

1. Long shadows
Long shadows add depth and dimension to images without sacrificing minimalistic icon details that make the interface attractive.

2. Dynamic colors
Complementing rare visuals is easy with energetic colors, especially lighter shades.
The different background colors in contrast to the base color of the elements make the tiled menu page livelier.
The Flat UI Colors website contains the most effective color patterns for flat.

3. Simple typography
The choice of a flat font is driven by one criterion: readability. Typically sans serif fonts with a constant stroke width are used.

4. Transparent button
One of the trending elements in modern web design. The reason is that it doesn't attract too much attention, but it is clearly recognizable as a button.

5. Minimalism
Flat and minimalism go hand in hand, using the same principles: simplicity and content orientation.
It may seem that using flat design is a universal solution, but minimalism is difficult to implement: the fewer work items, the more attention they require.

As great as flat design may seem, there is no guarantee that it will work for your site. Check out its key benefits to see if a global redesign is worth planning.

Benefits:
used in an adaptive interface;
makes navigation easier for the user;
clear structure and schematic visuals emphasize the internal logic of the page;
fast loading of pages due to the simplicity of graphics;
familiar typography increases readability.

Flat design is all about simplicity and minimalism, which, on the other hand, make it difficult to convey visually complex messages. Therefore, before rushing headlong into simplifying the interface, you should carefully consider the scheme of interaction between the site and the user.

Based on Web design book of trends.

The word "flat" in translation from English means "flat". Since its inception, the so-called Flat design has maintained its position for several years now, occupying a leading position in the market.

How it all began

Web design has changed many times since its inception. He has come a long way from simple and boring elements to three-dimensional, convex and almost material. This can be easily seen in the example of changing the appearance of the Windows operating system. The visual component is developing in parallel with the development of technology. But its new trends indicate, rather, a return to minimalism and simplicity.

From skeuomorphism to flat design

The style preceding the flat was skeuomorphism. It has been the main design trend for a very long time. Skeuomorphism is a pseudo-volumetric style, all elements of which imitate the appearance of real objects (notebook, alarm clock), using shadows, natural textures, and more. Its prime examples were found in early smartphone interfaces. It began to lose its position after 2010, when designers of large companies began to look towards simplification and, when developing user interfaces, began to get rid of the main feature of skeuomorphism - three-dimensionality.

An excellent visual example of the difference in styles is the photo below. The image on the left is a flat design and the image on the right is skeuomorphic.

Characteristics of the flat style

Flat is a 2D style. It absolutely lacks visual effects such as smooth color transitions, shadows, volumetric textures. In short, everything that makes an image three-dimensional.

The main informational content are icons (Flat design icon). They should be as clear as possible to the user when it comes to applications for smartphones. For websites, the icons are the main elements that reflect its specificity and information message. As a rule, they are presented in the form of simple geometric figures, a circle or a square, with a characteristic conventional image.

When developing Flat-design, attention is paid to the color scheme. It should be monotonous, not intrusive or distracting to the user. Most often, one pure color and several contrasting shades are used. By the way, there are many Internet services with Flat design colors that you can use by copying the hex codes of the colors you like.

Equally important is typography (text). Due to the general simplicity, the textual component stands out especially. This means that it should be readable and not contradict the general style. This will depend on your choice of font and color.

Flat design examples

To begin with, the icons of many well-known Internet resources and social networks have changed to the flat side. Not so long ago, the giants Google and YouTube also changed their design to flat. The Windows operating system, starting with the eight, completely abandoned all signs of volume in the icons, which pleased the eye of some users in previous versions, and began to adhere to Flat design. Developers of mobile applications for iOS and Android followed suit.

One-page websites (landing pages) widely use the advantages of Flat design, for which the decisive role is played not by a pretentious appearance, but by functionality and readability.

Evolution of flat design

At first, the Flat design was indeed completely flat, which created certain difficulties for users accustomed to raised buttons. If in skeuomorphism the clickability of buttons was immediately noticeable, then in the first variations of flat design, it was not always possible to determine the interactivity of elements the first time.

After Microsoft released Windows 8, designed in a flat style, not all users were able to immediately understand the new interface and which icons they could click on. The appearance of the elements did not indicate any possible interaction with them. This design was more convenient for mobile applications, which picked up this idea. And Apple was the first to do this in the design of iOS 7.

However, Flat design does not stand still and develops towards complication. Today, it increasingly looks like a semi-flat design, or, as it is also called, Flat 2.0. Effects of depth, shadows, gradients began to appear in it. Depth in flat design is achieved by placing elements at different levels or at an angle.

Be that as it may, the style is at the peak of its popularity and is in great demand. So, if you are planning to design your site, you can safely opt for Flat design. And if you need some missing elements for your site, then on the Internet you can find a huge number of Free flat design UI-elements (free for download), for example, icons, fonts, templates and other necessary components of the user interface.

Pros and cons of style

Without a doubt, in today's fast paced life, such a discreet informative style is more convenient than its predecessor. Flat design has a number of undeniable advantages.

The most important, perhaps, is the fast loading of web pages. Sites that use flat design open much faster than those that are overloaded with animations and other heavy objects. Load time is especially important for SEO optimization and website promotion.

The simplified appearance makes the text easier to read and allows you to focus on the main content.

The design looks harmonious and holistic, which creates an overall pleasant impression.

Nothing can be perfect and Flat design is no exception. For all its seeming simplicity, it is not so easy to develop a truly successful flat web design. There is a chance of making it boring and unattractive. Or vice versa, to be too clever with the design and forget about functionality. The main task in the development of Flat-design is to strike the perfect balance between beauty and usability.