Flat design: why did design become flat? Flat design and Material design: What is their difference? Flat design and material design are different.
The “flat design” revolution has continued to gain momentum since it was introduced on the Windows Phone platform in 2010. It’s not difficult to understand why: an interface with this design seems more intuitive, is well suited for adaptive elements, modern frameworks, and looks attractive when executed correctly.
Flat design began as a counterweight to the ubiquitous skeuomorphic style, but has since become much more than just “Option B.”
Initially, flat was exclusively two-dimensional with a total focus on minimalism. Modern flat 2.o uses shadows, gradients and other elements to make it look "almost flat".
5 Characteristic Components of Modern Flat Design:
1. Long shadows
Long shadows add depth and dimension to images without having to sacrifice the minimalistic icon details that make an interface attractive. 
2. Dynamic colors
Complementing sparse visuals is easy with energetic colors, especially light shades.
Different background colors in contrast with the base color of the elements make the page with a tiled menu more lively.
The Flat UI Colors website contains the most effective color patterns for flat. 
3. Simple typography
The choice of font in flat is based on one criterion: readability. Sans serif fonts with a constant stroke width are typically 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 is clearly recognizable as a button. 
5. Minimalism
Flat and minimalism go hand in hand, using the same principles: simplicity and content focus.
It may seem that using flat design is a universal solution, but minimalism is difficult to implement: the fewer working elements, the more attention they require.
No matter how great flat design may seem, there is no guarantee that it will work for your site. Check out its main advantages to see if it's worth planning a global redesign.
Advantages:
used in a responsive interface;
simplifies navigation for the user;
a clear structure and schematic visuals emphasize the internal logic of the page;
fast loading of pages due to the simplicity of graphics;
Familiar typography improves readability.
Flat design is all about simplicity and minimalism, which on the other hand makes it difficult to convey visually complex messages. Therefore, before you rush headlong into simplifying the interface, you should carefully consider the interaction between the site and the user.
Based on Web design book of trends.
Recently, a specific style in the design of websites and user interfaces has gained enormous popularity, which, due to the stylization of its elements, is called Flat.
If you look at a website made according to Flat rules, you will not see any gradient transitions, no shadows, not the slightest hint of volume or texture. The basic principles of the flat style are simplicity, conciseness and minimalism. The main distinctive features are those things that you can focus on - bright unusual colors, non-standard typography, graphic primitives.
Today, more and more designers are using this trend in their work, but the Flat style has gained particular popularity with the spread of modern mobile operating systems Windows Phone and iOS 7, as they are followers of this trend, although they do not adhere to it completely.
Our company already has experience in creating websites in the Flat style, and we will be happy to help you create a flat website!
In this article, we will highlight the basic principles of flat design that you should follow if you want to use flat as the main style of your project.
Below we will analyze and give examples of some sites that use flat style.
1. Remove all effects
The basic principle of flat design is the creation of a two-dimensional image that is already flat in itself. At the same time, you need to get rid of all elements that can add at least some depth to the image: gradients, smooth transitions, shadows, bevels, volume, textures, and so on. All elements of the image have hard edges and also do not stand out or have depth relative to other elements of the image.
In flat design you won't find elements that try to look realistic (skeuomorphism), 3D animation, realistic icons, etc. However, the design itself tries to remain similar to the traditional one, but now labels, buttons and navigation come to the fore.
At first glance, a site using Flat design may seem too simple, although in fact this style is characterized by a clear hierarchy of elements, convenient placement of all user interaction tools, and therefore has a high usability rate.
2. Use simple elements
To achieve their goals in flat design, designers use buttons and icons. They should be as intuitive and clickable as possible. Like all other interface elements, they should be flat and simple, without additional effects. Designers also often use simple geometric shapes - rectangles, circles and squares, allowing each shape to be a separate object.
3. Let's focus on typography
Since, according to the previous principle, graphics in flat design are simple, an extremely important element is typography - the design of inscriptions. In flat design, typography comes to the fore along with buttons.
Fonts should be readable and, of course, consistent with the design, as with a simple design, extremely ornate fonts will look out of place. However, you should not use ordinary fonts; it is better to experiment and choose the one that will attract the user’s attention.
You could consider combining a simple sans-serif font with some new font that will be perceived as an art element. Fonts should help the design be simpler and clearer, while buttons and other elements should only serve to enhance interactivity.
4. Let's attract attention with color
Color plays almost the main role in flat design. If you carefully study the sites created on the basis of this concept, the first thing that catches your eye is the bright color palette. It usually consists of several contrasting pure (without shades) colors, two or three, although this number can reach up to eight. Moreover, all these colors are usually used equally.
The most popular colors are primary and secondary colors. That is, the primary colors (cyan, magenta, yellow, black) and those obtained based on their mixing. Also very often, retro colors are used in the color scheme when creating a flat design, such as salmon, purple, etc.
5. Minimalism
Flat design is simple in nature and fits well with a minimalistic approach.
In the overall design of the site, you need to avoid too many bells and whistles. Of course, simple colors and text may not be enough. Therefore, if you want to add visual effects, you need to choose simple photos. Some retail product sites use flat design to place their products on a simple, non-distracting background.
It should be noted that some photographs have natural depth, but in general it fits into the overall design plane
From the author: Greetings, friends! Today we will talk about what flat design is, or flat website design. This term has long won the hearts of web designers and is still confidently trending today. The largest companies (Google, YouTube, Microsoft, Apple Inc., etc.) use it to design their websites and applications. Are you still not in the sect of flat website design supporters? Then we go to you!
What do you think is the reason for such wild popularity of flat design? I’ll answer you in a nutshell: it really works! In this article, I will explain to you what this style is, tell you about its pros and cons, and show you some excellent examples of flat website design that will surely inspire you to do great things. So, let's go!
It all started with skeuomorphism
For those who don't know, skeuomorphism is not a dirty word, but another web design style. Flat design is often presented as the opposite of skeuomorphism, which, in my opinion, is not entirely correct. This is rather a simplification than an antagonism.
Until 2010, skeuomorphism was the dominant style in interface design. He displayed elements as they appeared in reality, actively using textures, shadows, reflections and other attributes of a three-dimensional image. Apple made particular efforts in this regard, carefully copying most software objects from real-life objects.
Soon, pseudo-convex icons ceased to attract the majority of users and web developers, which marked the beginning of the era of flat website design. The world has come to the conclusion that all decorative elements need to be removed, and only what is convenient for the end user to interact with should remain.
“The best design is as little design as possible”
How Dieter Rams looked into the water - a famous industrial designer who opposes intrusive design, animation effects, etc. In June 2013, Apple Inc. introduced the revolutionary iOS 7, which received all the attributes of a flat web design style. However, the plane did not immediately “defeat” realism and volume.
For a long time, users could not forget the magic of Steve Jobs and the icons “that you want to lick.” Many even said goodbye to the “poor Seven” and switched to “radiant Android”. Adding fuel to the fire was the large number of bugs present in iOS 7, and the whitish, translucent design with parallax and “snot” animation when opening applications.
Those who resigned themselves to the inevitable reality and stayed with the Apple operating system eventually realized that flat web design not only looks interesting, but also brings order and a unified visual style to all applications.
Pros and cons of flat design
The advantages of using this style include:
clarity of composition and conciseness of visual aids. Responsive interface in the “nothing superfluous” style, thanks to which users quickly realize what they wanted to convey to them;
emphasis on good typography. Content comes first, which is extremely important in today's abundance of information;
smaller size of web pages and faster site performance due to a minimum number of visual effects. This is especially useful when creating adaptive versions, because the simpler the forms, the easier they are to display on small screens of mobile devices.
Flat web design also has its disadvantages:
limiting the web designer’s imagination to simplified colors, typography, and iconography. Therefore, the risk of creating a boring and inexpressive website is higher;
the lack of three-dimensionality and shadows sometimes makes it difficult to understand whether an element is clickable or not;
lack of specific fixed rules.
If you've decided to use this style on your site, congratulations - it shows that you care about the user experience and keep up with the times. If you're just starting out as a web designer and don't know how to properly use flat design to make your site look relevant without being simplistic, try these tips:
Forget about “brick walls” and bright backgrounds. Flat web design tends to use simple, smooth, soft images for the background.
No gradients, 3D icons, animated transitions or other special effects. All this will make your site heavier and add fuss - do you need it?
Use flat icons with clear outlines to add convenience and functionality.
Use a bright, rich color palette. Now the trend is tones of the solar spectrum: light yellows, pinks and greens. The main thing is not to overdo it - there should be no more than 3 colors on the page.
Focus on typography. In flat design, preference is given to bright, original inscriptions that create a call to action and provide easy navigation around the site. Here, too, it is important not to overdo it. Forget about “handwritten” and other fancy fonts. Capital letters can be used to highlight headings.
Feel free to use a variety of geometric shapes. Squares, circles, lines and other shapes will not only improve the structure of a website, but also create a clear hierarchy and divide content. Users will appreciate this, believe me.
Simplify the navigation menu and other site elements as much as possible. For buttons, use regular rectangles without shadows or highlighting.
Thus, over the years, flat design websites have become the standard accepted by absolutely everyone. Look at most modern websites - they are flat to the core.
Finally, I will give the promised examples of successful flat design, which can serve as inspiration for you to create your own masterpieces.
1. Website http://dunked.com.
A popular platform for publishing portfolios, aimed at representatives of various creative professions. Minimalist flat web design evokes the feeling of a reliable and understandable service that does not distract with unnecessary special effects.
2. Microsoft interface.
Microsoft is one of the companies that made flat style so popular. Maybe you remember the Zune player, a competitor to the iPod, which Microsoft released in the mid-2000s? So, the design of this product was sharply different from most applications of that time, largely due to large typography, flat icons, large and bright shapes.
This interface, which was called Metro, later migrated to personal computers (Windows 8 OS), the Xbox 360 interface and other Mircosoft software products.
3. Website http://www.vox.com.
Well, are you inspired? Down with pseudo-realistic 3D aesthetics!
That's all. Subscribe and share our articles with friends on social networks. High conversions to you!
Flat design is a key direction in design for the coming years, so we invite you to get to know it better and learn the 5 fundamental principles that form its basis.
Introduction to flat design
In Russian, flat design is translated as “flat design,” and it became an absolute favorite after Apple presented the iOS OS. The focus was on a minimalist approach to usability design. The focus is on user comfort. This is a pronounced protest against “squeformism” (visualization of objects as in reality). The choice fell on more simplified and at the same time simpler aesthetic solutions. Users, tired of realistic visualizations, greeted this direction with delight, and more and more web projects are moving to this format.
I would like to note that “flat” does not mean “boring”. Flat design solutions can be beautiful, they are more sophisticated, clean, free of redundancy, transforming into an “island of calm.” They finally make the content understandable. All that remains is to learn the basic principles in order to apply them in practice.
Principle No. 1: No unnecessary effects“Flat” design does not strive to convey volumes, so it is based on two-dimensional visualization. This means that you will not see any shadows, reflections, 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 the design, as well as to monitor the clarity of the contours, which is intended to emphasize lightness and weightlessness. In addition, such laconic elements imitate a sensor well, generating a desire to interact with the object (an invitation to press, touch). However, the simplicity of the elements does not equal the simplicity of the design as a whole - this only applies to the outlines. As a result, everything that the user sees is clear to him, and he can use it with ease.
Flat design calls for extreme caution when working with fonts. That is, their character must complement the design scheme without contradicting it. Moreover, in flat design, the font is also a key navigation element.
Not only font, 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 rich and bright, but at the same time pure colors are chosen. As noted, there are no gradients or unnecessary transitions.
Flat design is a striking example of such a global trend as minimalism. Designers refuse unnecessary bells and whistles, move away from complex and implicit approaches to visualization, which bears fruit in the form of user activity.
Flat or almost flat? We are looking for a compromise!
In conclusion, I would like to note that today there is a synergy between flat and non-flat design. We are talking about an “almost 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 a trend in 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 appear 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.
Flat design- a relatively new trend that the entire design community keeps talking about.
Some people like it, others absolutely cannot get used to it and even hate it.
A good design must first of all solve the client’s business problem; by what means this will be achieved is a secondary question. If the designer has chosen “flat design” as a style or tool - so be it! But do not forget that this style is not suitable for all projects.
So let’s analyze what you need to remember if you decide to succumb to the fashion trend and work in the “flat design” style.
The basic principles of flat design are:
1. No effects
2. simple elements
3. Focus on typography
4. Focus on color
5. Minimalist approach
6. “Almost” flat design
Now let's look at each of the principles of flat design in more detail:
No effects
Flat design often does not use effects such as shadows, bevels, embossing, gradients or other techniques that add depth and volume. No 3D effects or transfer of materiality, unlike the stylistic opponent “Skemorphism”. Each element should remain clear, be it an icon, a navigation bar or a frame, a button, etc.
Flat style has a pronounced appearance without additional features and elements. It relies on a clear sense of compositional hierarchy and placement of elements. This structure makes the design easier to perceive and intuitive for every user.
Simple elements
Flat design often uses simple user interface elements such as buttons and icons, etc. When creating these interface elements, designers stick to simple shapes (rectangle, circle, square, etc.) - this allows each shape to stand on its own.
But simple elements should not be confused with simple design; a flat design concept can be as complex as any stylistically different type of design concept.
Focus on typography
Since flat design is based on elements of simple form without volume, typography is an extremely important element in flat composition.
The character of the font must correspond to the overall scheme and composition - an overly complex font may look strange and pretentious on an overly simplified design model. It is preferable to use a simple sans-serif font, bold or bold. The text should be in harmony with simple forms.
The font should be an auxiliary tool, helping users interact with our interface. Labels on buttons and other elements should not be intricate.
Emphasis on color
Color is an important part of design. The flat design palette is often much brighter and more colorful than other design styles. Compared to a regular design that focuses on 2-3 colors, a flat design can include 6 or even 8 color shades.
