Flat Design Sites (Flat Design): history, principles, examples for inspiration
What do you think is the reason for such a frenzied popularity of flat design? I will answer you in a nutshell: it really works! In this article, I will explain to you what kind of style this is, tell you about its pros and cons, show you some great examples of flat site design that will surely inspire you to exploits. So let’s go!
It all started with skeuomorphism
For those who are not in the know, skeuomorphism is not an abusive word, but another web design style. Flat design is often presented as the opposite of skeuomorphism, which, in my opinion, is not entirely correct. It is, rather, its simplification than antagonism.
Until 2010, skeuomorphism was the dominant style in interface design. He displayed elements the way they looked in reality, actively using textures, shadows, reflections and other attributes of a three-dimensional image. Apple was especially trying in this regard, which carefully copied most of the software objects from real objects.
Soon, pseudo-convex icons ceased to attract most users and web developers, which ushered in the era of flat site design. The world came to the conclusion that all the decorative elements need to be removed, and only what is convenient for the end user to interact with is left.
Find out more
“The best design is as little design as possible”
How Dieter Rams – a well-known industrial designer who opposed obsessive design, animation effects, etc., looked into the water In June 2013, Apple Inc. introduced the revolutionary iOS 7, which received all the attributes in the style of flat web design. However, the plane did not immediately “win” realism and volume.
Users for a long time could not forget the magic of Steve Jobs and the icons, “which I want to lick.” Many even said goodbye to the “wretched seven” and switched to “radiant Android.” It added fuel to the fire and a large number of bugs that were present in iOS 7, and a whitish, translucent design with parallax and animation in the form of “snot” when opening applications.
Those who reconciled with the inevitable reality and stayed with the “apple” OS, in the end, realized that flat web design not only looks interesting, but also brings order and a single 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 means. Responsive interface in the style of “nothing more”, so users quickly realize what they wanted to convey to them;
emphasis on good typography. Content comes first, which is extremely important in today’s wealth of information;
smaller web pages and faster website performance due to the minimum number of visual effects. This is especially useful when creating adaptive versions, because the simpler the forms, the easier it is to display them on small screens of mobile devices.
Flat web design has its drawbacks:
restriction of the web designer’s imagination by simplified colors, typography, iconography. Therefore, the risk of creating a boring and expressionless site is higher;
the absence of three-dimensionality and shadows sometimes does not allow us to understand whether a clickable element or not;
lack of specific fixed rules.
Website Flat Tips
If you have decided to use this style on your site, congratulations – this indicates that you care about the convenience of users and keep up to date. If you are just starting your career as a web designer and don’t know how to use flat design in order to make your site look relevant, but not primitive, use the following tips:
Forget about “brick walls” and vibrant backgrounds. In flat web design, it is customary to use simple, smooth, dim images for the background.
Find out more
No gradients, volumetric icons, animated transitions and other special effects. All this will make your site more weighty and add fuss – do you need it?
Use flat icons with clear contours that add convenience and functionality.
Use a bright, vibrant color palette. Now the trend is the tones of the solar spectrum: light yellow, pink and green. 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 convenient navigation on the site. It is also important not to overdo it. Forget about “handwritten” and other artsy fonts. You can use capital letters to highlight headings.
Feel free to use a variety of geometric shapes. Squares, circles, lines and other shapes will help not only improve the structure of the website, but also create a clear hierarchy and also divide the content. Users will appreciate it, believe me.