From the author: I greet you, friends! Today we will talk about what is flat design, or flat website design. This term has long conquered the hearts of web designers and is still confidently trending. Major companies(Google, YouTube, Microsoft, Apple Inc., etc.) use it to design their websites and apps. Are you still not in the sect of supporters of flat website design? Then we go to you!
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 this style is, tell you about its pros and cons, and show you some great examples of flat website design that will surely inspire you to exploits. So let's go!
It all started with skeuomorphism
For those not in the know, skeuomorphism is not swear word and yet another style of web design. Flat design is often presented as the opposite of skeuomorphism, which, in my opinion, is not entirely correct. This is more of a simplification than an antagonism.
Until 2010, skeuomorphism was the dominant style in interface design. He displayed elements as they looked in reality, actively using textures, shadows, reflections and other attributes of a three-dimensional image. Particularly trying in this regard was Apple, which carefully copied most of the software objects from real-life objects.
Soon, pseudo-raised icons ceased to appeal to most users and web developers, which ushered in the era of flat website design. The world has come to the conclusion that everything decorative elements you need to remove, and leave only what is convenient for the end user to interact with.
"The best design is as little design as possible"
How Dieter Rams looked into the water - a well-known industrial designer who opposes intrusive design, animation effects, etc. 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 "defeat" realism and volume.
Users for a long time could not forget the magic of Steve Jobs and the icons "that you want to lick." Many even said goodbye to the "wretched seven" and switched to "radiant Android". 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 resigned themselves to the inevitable reality and stayed with the "apple" operating system, 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 benefits of using this style include:
clarity of composition and conciseness of visual means. Responsive interface in the style of "nothing more, so that users quickly realize what they wanted to convey to them;
focus 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 the minimum number of visual effects. This is especially useful when creating adaptive versions, because what simpler form, the easier it is to display them on small screens of mobile devices.
Flat web design also has disadvantages:
limiting the web designer's imagination to simplified colors, typography, iconography. Therefore, the risk of creating a boring and inexpressive site is higher;
the lack of three-dimensionality and shadows sometimes does not allow you to understand whether the element is clickable or not;
lack of specific fixed rules.
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 with the times. If you're just starting out as a web designer and don't know how to use flat design the right way to make your site look relevant but not primitive, here are some tips:
Forget about "brick walls" and bright backgrounds. In flat web design, it is common to use simple, smooth, soft background images.
Modern tendencies and approaches to web development
Learn the algorithm for rapid growth from scratch in website building
No gradients, 3D icons, animated transitions or other special effects. All this will make your site heavy and fussy - do you need it?
Use flat icons with clear outlines that add convenience and functionality.
Use bright, juicy 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. Flat design favors bright, original labels that create a call to action and provide easy site navigation. Here, too, it is important not to overdo it. Forget about "handwritten" and other fancy fonts. You can use to highlight headers. capital letters.
Feel free to use a variety of geometric shapes. Squares, circles, lines and other shapes will not only help improve the structure of the website, but also create a clear hierarchy and separate content. Users will appreciate it, believe me.
Simplify the navigation menu and other site elements as much as possible. As buttons, use regular rectangles without shadows and highlights.
Thus, over the years, flat design websites have become the standard accepted by absolutely everyone. Look at most modern sites - they are flat "to the bone."
Finally, I will give the promised examples of successful flat design that can serve as inspiration for you to create your own masterpieces.
1. Site http://dunked.com.
A popular platform for publishing portfolios, aimed at representatives of various creative professions. Minimalistic flat web design evokes a sense 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 - the iPod competitor that Microsoft released in the mid-2000s? So, the design of this product was very different from most applications of that time, largely due to large typography, flat icons, large and bright forms.
This interface, which was called Metro, later migrated to personal computers (OS Windows 8), 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, share our articles with friends in in social networks. High conversions for you!
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
What is flat design? This design direction is one of the most discussed on the Internet. In short, flat design is an extremely simplified style, the roots of which go back to minimalism. But this is not exactly minimalism, since given style can take the most different forms depending on design requirements. To better understand what flat design is, it's best to go backwards and define what it's not exactly.
This is not 3D. By itself, 3D graphics allows you to get very realistic, but at the same time two-dimensional images. Unlike 3D, flat design does not focus on great attention details that create depth and dimension, such as shadows, highlights, and textures.
This is not a skeuomorphism. Flat design appeared as an alternative to pseudo-dimensional design elements that imitated real objects or processes. Skeuomorphism involves the active use of various effects: shadows, reflections, reflections and realistic textures. There is nothing of this in flat design and cannot be.
For the first time, people started talking about flat design in 2012-2013, when this style first appeared. The trend was very noticeable and made a lot of noise, since one of the first to start developing this direction was Microsoft. The release of Windows 8 with a new interface forever changed the design and largely predetermined the development vector of the web, at least its visual component.
Apple did not stand aside, which also abandoned pseudo-volumetric elements in the design of the interfaces of its devices. Microsoft and Apple formed new reality, in which sites with an outdated design had no place. At the same time, Apple did not act as radically as its eternal competitor, and gradually got rid of elements of skeuomorphism.
Flat design itself is neither bad nor good, web designers make it convenient or inconvenient. But to be honest, in their extreme manifestations flat design does not look very aesthetically pleasing. Probably, the sweet spot in this case is somewhere in the middle between flat and pseudo-volumetric elements.
It is quite possible that the dominant one for several recent years the trend towards extreme simplification will be replaced by something else. There are some prerequisites for this - for example, the Material Design direction, created by the designers of Google Corporation.
COMPATIBLE WITH ADAPTIVE DESIGN
Microsoft and Apple's move away from skeuomorphism in interface design has had big repercussions. The new style was almost immediately adopted as a new approach to UX. Since then, flat design has become a dominant trend that is still relevant. Today, flat elements are ubiquitous, we see them on websites, in applications and on the displays of various devices.
Flat design principles apply to a wide variety of design categories, but its strict grids and simplistic graphics display best on small screen devices.
The trend towards minimalism has greatly simplified the work of designers - it has become easier for them to design interfaces that display correctly on any type of device. In the case of pseudo-3D elements, this was not the case - sometimes an interface that looked amazing on a desktop screen turned into a pumpkin of something indistinct on a mobile device.
One of the main advantages of flat design is its scalability. Flat elements look good no matter the size and are much easier to work with than pixel-perfect designs.
FLEXIBLE PLATFORM
Flat design in its pursuit of simplicity is characterized by good flexibility: all elements are usually created from uniform geometric shapes, which makes it easy to create a balanced layout where each module or block has its place. At the same time, all elements are easily distinguishable and, importantly, they can be quickly swapped during operation without violating the original settings.
Grids also have a flexible structure that can be presented in a variety of configurations. This allows designers to create the most optimal approaches that the best way show available content. The absence of restrictions and the need to adjust the grid in case of changes or additions of new elements significantly speeds up the workflow.
READABLE TYPOGRAPHY
Flat design has fundamentally changed how designers think about typography. The new style required a different approach to the choice of fonts and to the quality of layout. As a result, the absence of shadows and various effects made the texts more readable.
Flat design tends to make extensive use of sans-serifs, however, this is not akisome and serifs can also look good when paired with flat elements. Serif fonts will be quite appropriate as a heading, and they can also be used in the body text, if the typography does not violate the compositional unity.
MINUSES
It may seem that flat design has no flaws, but it is not. In their quest to emphasize clean lines and shapes, some designers fall into the trap of focusing on aesthetics while forgetting usability. A simple and beautiful design, in which there is nothing superfluous, is not always convenient, and such errors are especially pronounced when using mobile devices.
In flat design, it is often difficult to tell which element is interactive and which is not. Everything is the same, there are no obvious differences, all elements lie in the same plane. In the pursuit of simplicity, designers may inadvertently hide or unwittingly disguise important features or actions and the user, not seeing the usual prompts, may lose their orientation on the site.
Let's take this site as an example. What elements in it are interactive. All? Or just some? Unclear. This can only be found out by the “poke method”, but these are already extra movements, which is undesirable.
LOSS OF INDIVIDUALITY
For any brand, business or design project, uniqueness is of the utmost importance. Whether it's a website, an application, a booklet, a poster or a business card, the design must be original and well recognizable.
One of the disadvantages of flat design is its visual style. Using simple geometric shapes often leads to the fact that two completely different designs can be very similar friend on a friend. Designers who use flat elements are limited in what they can do because they don't have much big choice acceptable options. IN Lately On the Internet you can see many clone sites that are not actually clones. It's just a coincidence. Moreover, the coincidence is unpleasant, since the site loses its much-needed individuality, getting lost against the background of other resources with a similar design.
Sometimes it gets ridiculous. Looking at these pictures, you might think that we have different sections of the same application. But no, the designers Marco La Mantia and Simone Lippolis worked independently. The main elements of the design are the main geometric figures and a white sans-serif font is a more than logical solution. But the result is deplorable - the same color scheme completely deprived the design of uniqueness. And there are many such cases.
CHASING FASHION
Flat design will remain one of the hottest trends for a long time to come, simply because it looks good on mobile device displays. But many designers choose flat not only because it allows you to quickly solve most of the tasks, but also because of their desire to create something modern and fashionable.
However, in the pursuit of fashion, one can make a serious mistake: if you mindlessly follow all the trends, it is quite possible to forget about the usefulness of design. Flat can be very beautiful, elegant and even graceful, but still, the choice of a designer should be determined by functionality, and not by the desire for beauty. Sometimes the desire to “shove” something fashionable into the design only hurts, for example, long shadows, one of the most recognizable flat design chips.
Before us are the works of designers Alexander Lototsky and Erik Malmskeld. These are typical examples of the use of long shadows in design. Now you won’t surprise anyone with this, but at one time, and both works were created back in 2013, when flat design was just coming into fashion, the new visual style was very interesting and attractive. As a result, there are so many similar icons that today the use of shadows is a formulaic and uninteresting solution. It used to be fashionable, but not anymore. Shadows are like shadows. They have no meaning, no useful function they don't perform.
POOR FONT SELECTION
Every designer dreams of creating something beautiful and functional at the same time. But in the pursuit of aesthetics, you can make poor choices that will affect usability. An example is the craze for thin and light fonts. This type of typography looks clean and light, but it's hard to read.
Sometimes choosing a thin font is justified - for example, for use in headings. But when the main text is typed in the same font, it is often impossible to read it. Such errors are especially noticeable on mobile devices - small size screen dramatically reduces the readability of the content.
FLAT 2.0
Over the past few years, designers have experimented with flat elements and brought a lot of new things to flat design. The style is fully formed and like any other established style, it has its pros and cons.
At the dawn of its appearance, flat was distinguished by strict visual simplicity, there was no hint of shadows and structures in it. Even gradients were not held in high esteem, although they do not contradict the principles of flat design.
But gradually, designers began to move away from too simple solutions, trying to find some compromise solution between flat and skeuomorphism. As a result, there appeared a new style, which some designers call Flat 2.0. Shadows, gradients, and even light, almost imperceptible structures gradually began to appear in design elements. Flat design clearly lacks depth, and designers have begun to use hybrid approaches. For example, visually arrange elements on different levels, experiment with shades and shadows. Another frequently used example of a hybrid approach is the use of not only icons and flat vector-like illustrations in the flat, but also photographs.
Did a lot to promote Flat 2.0 Google. The Material Design Guideline is an attempt to create a new visual language that combines flat and volumetric elements design. Google's recommendations are very detailed and easy to follow. At the same time, Google does not insist on strict adherence to all the rules set out in the guideline - designers can experiment by creating their own original projects, where a variety of elements can be combined.
CONCLUSION
Today, Flat 2.0 is in its infancy, but the direction in which this style will develop is already quite discernible. Significant changes is not expected - trendsetters Google, Apple and Microsoft are not going to abandon the flat. If there are any changes, they will be minor - new approaches will appear, someone will come up with an interesting "chip", attempts will continue to take the best of skeuomorphism. But in a global sense, one should not expect anything really new - flat design is a long-term trend and only a style that best suits new technologies that do not yet exist can shift it from its won positions.
