Description: War Thunder is a next generation military MMO game dedicated to...
Relatively recently, such a design direction as FLAT has become popular - design or flat design.
Users of Windows 8 and later are already familiar with the FLAT design, as the first thing they see when they boot the system is this screen.
The very emergence of FLAT design is due to the spread mobile applications. And I think that 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 - design has the following features:
Full or partial rejection of gradients, complex textures and shadows which I personally am very pleased with. I have no complaints about the shadows and I myself like to use them, but let the eternal problems with the display of 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 harmony of perception of information through the use of constructive techniques of typography and coloring.
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 something new out of it. Who knows when FLAT design will go out of fashion, but for now, enjoy the simplicity, harmony and informativeness of the current trend. By the way, flat design was already popular in the 80s, but then it 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, we will also adapt to the changing world. In the next article, I'll show you how to create icons in the FLAT style using simple shapes in Photoshop.
If my publications have interested you, then I propose to keep abreast of the latest updates on the site.
(Visited 2 333 times, 1 visits today)
Flat design sites look like a simple geometric block space with color accents (icons, highlights in text, infographics) with a minimum of graphic details and no excess of textual information. As they say, "minimalism" and nothing more.
How not to draw flat icons
"Flat" website design came into vogue along with the interfaces of the new Windows. The growth in popularity of this style in Russia has been facilitated by an increase in the number of self-taught web designers who do not know that the interface of a website and the “finger” interface (smartphones) are not the same (it is easy to scroll down the page with your finger - and, on the contrary, it will take a lot of patience and real interest to turn the mouse wheel down 3-4 screens). On Russian flat sites, you can often find such icons:
The example is taken simply bright colors, mismatched + icons of poor quality (I took for example from a paid set, but almost always freelancers use free downloaded icons from different sets, which also do not combine with each other).
Behind the inability to draw high-quality graphics, novice designers easily grab the opportunity to simplify everything. At the same time, it is overlooked that the design in the style of "minimalism" implies a high-quality study of interface details, and not just the placement of icons downloaded from the Internet on colored squares in the style of Windows 8 (which can now be found on many supposedly "modern landing pages").
An example of good flat icons:
Colors and icons should be combined not only with each other, but also form a single whole.
Problems of low-quality flat design
1. Navigation and usability
The web is NOT a real space, so in order to create a sense of reality and understand your location, the sites use breadcrumbs, and icon pictures are close to real objects for quick understanding and ease of navigation. So, by the icon of the house it is immediately clear that this is “home”, by the icon of the handset - that this is a phone, by the basket - that this is a basket (as in a supermarket - everything is clear and simple), the icon with the image of a gift is a gift, etc. .
However, newbie flat designers often oversimplify pictograms. And the further designers are from intuitive images, the more difficult it is for the user to interpret them later. Oversimplification sometimes makes navigation difficult. As soon as everyone rushed to make fashionable flat website design, trying to imitate European designers, they forgot simple rules usability.
2. Long flat footcloth sites
The pages stretched down 3-4 screens, while the space is used not only not economically, but on the contrary, an excessive amount of “air” is added. At the same time, there is no visual motivation for scrolling - no chips, no animation. How the developers planned to interest visitors to scroll down the page is not clear. After all, compared to sites where everything is compact, footcloth sites require a lot of energy to move the mouse around the screen and scroll.
3. Incomprehensible buttons
On flat sites, active elements are no longer obvious. With the advent of flat design, buttons have also become flat. But the visual image of the button came from a real physical button, and the shadows and gradients just show that "you can definitely click here."
4. Poorly drawn icons
Due to the hacky work of designers, icons on websites (this is especially noticeable on websites in the flat style) have lost their predictable images. Either due to limited budgets for design, or because of the failure of the web designers themselves, but the navigation elements on the sites often do not correspond to the primary associations and are “far-fetched”.
I suppose that the work on the creation of icons goes something like this: according to the TOR, the icon “Individual approach to clients” is needed. Personally, I have an image of a manager and two clients, each of which has an arrow of its own color (a blue arrow to a blue client, a red arrow to a red client). If a designer doesn’t know how to draw, he will look for an icon in ready-made sets (at best, he will buy it from a photo bank, at worst, he will download it from the Internet) and use the one that most suits the meaning. Most likely, it will be an icon of a man with a tie or a suitcase. In general, he didn’t go very far, but still in the design of the site it will be clear that the suitcase for “Individual approach to everyone” and the Watch for “10 years on the market” (by the way, I really saw it!) - the designer cheated.
5. False content orientation
Flat website design is content-oriented. Well, obviously - if the emphasis is not on graphics - then on information. But if you carefully look at the “modern” flat-style landing pages offered by Russian web studios, then little attention is paid to the content. Namely:
- The text is presented in any way. It is not clear how the accents are placed in it, what to catch on, and what is secondary.
- There is no design as such. Tables, bulleted lists, headings, announcements - often not worked out at all.
- Often bare text. There are no pictures and icons that visually reinforce the text blocks. As a result, the emphasis is neither on graphics nor on text, but on the “style” itself. In this case, the company with its proposals are lost.
So do you really need flat design for websites?
With the design of interfaces for smartphones, everything is clear - light, unloaded, easy to use. But with the design of websites in the flat style, I personally have a fat question - is it effective at all?
Most of the Customers do not understand the quality of graphics and, when approving the design of the site, they are guided by their personal taste (like / dislike). And here fashion plays a role.
A flat website design can be cool. BUT! A cool design implies a really high-quality study of usability and graphic elements, as well as the presence of creative features and effects. And if they are absent in the design, if there is no originality in the sites, they look monotonous, empty and boring. In general, what is now in most Russian sites.
An example of a quality flat design:
The fashion for flat website design is temporary, like any other fashion. Someone creates original, creative designs, and someone copies them and imitates them in style, because they do not know how to invent themselves. And, like mushrooms, cheap “fashion” sites are growing ...
AT recent times A specific style in the design of websites and user interfaces has gained immense popularity, which, due to the styling of its elements, was called Flat.
If you look at a site designed according to the Flat rules, you will not see any gradient transitions, no shadows, not the slightest hint of volume and texture. The basic principles of the flat style are simplicity, conciseness and minimalism. Main distinctive features- these are the things that you can focus on - bright unusual colors, non-standard typography, graphic primitives.
Today, more and more designers are adopting this trend in their work, but the Flat style has become especially popular with the spread of modern mobile operating systems Windows Phone and iOS 7, as they are followers of this trend, although they do not fully adhere to it.
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 to create a two-dimensional image that is already flat. At the same time, you need to get rid of all the 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 picture have hard edges and also do not stand out and have no depth relative to other elements of the image.
In flat design, you will not find elements that try to look realistic (skeuomorphism), 3D animation, realistic icons, etc. However, at the same time, the design itself is trying to remain similar to the traditional one, but now lettering, buttons and navigation are coming to the fore.
At first glance, a site using Flat design may seem too simple, although in fact this style has a clear hierarchy of elements, convenient placement of all user interaction tools, and therefore has a high usability score.
2. Use simple elements
To achieve the set 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. Also, designers often use simple geometric shapes- rectangles, circles and squares, allowing each shape to be a separate object.
3. Focus on typography
Since, according to the previous principle, graphics in flat design are simple, it is 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, fit the design, as extremely frilly fonts will look out of place in a simple design. However, you should not use ordinary fonts, it is better to experiment and choose the one that will attract the user's attention.
Consider pairing a simple sans-serif typeface with some new typeface that feels like art. Fonts should help keep the design simple and clear, while buttons and other elements should only serve to increase interactivity.
4. Draw attention with color
Almost the main role in flat design is played by color. If you carefully study the sites created on the basis of this concept, the first thing that catches your eye is a bright color palette. It consists, as a rule, 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 on the basis of their mixing. Also, very often in the color scheme when creating a flat design, retro colors are used, such as salmon (salmon), purple (purple), etc.
5. Minimalism
Flat design is simple in nature and goes well with a minimalist approach.
In the overall design of the site, too much bells and whistles should be avoided. 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 sites use flat design to display their products against a plain, non-distracting background.
It should be noted that some photos have a natural depth, but in general it fits into the overall design plane.
The word "flat" in translation from English means "flat". Since its inception, the so-called Flat design has continued to hold its position for several years now, occupying a leading position in the market.
How it all started
Web design has changed a lot since its inception. It 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 develops in parallel with the development of technology. But her new trends indicate, rather, a return to minimalism and simplicity.
From skeuomorphism to flat design
The style that preceded flat was skeuomorphism. He is very for a long time was the main trend in design. Skeuomorphism is a pseudo-volumetric style, all elements of which imitate appearance real objects (notebook, alarm clock), using shadows, natural textures and more. Its striking examples were found in early smartphone interfaces. He began to lose ground after 2010, when designers large companies began to look in the direction of simplification and, when developing user interfaces, they began to get rid of the main feature of skeuomorphism - three-dimensionality.
An excellent visual example of the difference in styles can be the photo below. The image on the left is a flat design, while the one on the right is a skeuomorphism.
Characteristic features of the flat style
Flat is a 2D style. It absolutely lacks visual effects, such as smooth color transitions, shadows, volumetric textures. In a word, everything that makes an image three-dimensional.
Icons (Flat design icon) carry the main information content. They should be as clear as possible to the user if we are talking about smartphone applications. For sites, icons are the main elements that reflect its specificity and informational message. As a rule, they are presented in the form of simple geometric figures, a circle or a square, with a characteristic conditional image.
When developing a Flat design, attention is paid to color scheme. It should be monotonous, not intrusive and not distracting 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.
No less important is such a thing as typography (text). Due to the general simplification, the text component stands out in particular. This means that it should be readable and not contradict the general style. It will depend on the successful choice of the font and its color.
Flat design examples
Let's start with the fact that the icons of many well-known Internet resources and social networks. Not so long ago, the giants Google and YouTube also changed their design to flat. operating room Windows system, starting from the figure eight, completely abandoned all signs of volume in icons that pleased the eyes of some users in previous versions, and began to stick to Flat design. Developers of mobile applications for iOS and Android followed suit.
The advantages of Flat design are widely used by one-page sites (landing pages), for which the decisive role is played not by the pretentious appearance, but by the functionality and readability.
The evolution of flat design
At first, Flat design was really completely flat, which created some difficulties for users who were used 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 company released Windows 8, designed in a flat style, not all users were able to immediately understand the new interface and what icons they can click on. The appearance of the elements did not indicate a 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 in the direction of complexity. Today, it increasingly looks like a semi-flat design or, as it is also called, Flat 2.0. Depth effects, shadows, gradients began to appear in it. Depth in flat design is achieved by arranging elements at different levels or at an angle.
Be that as it may, the style is at the peak of popularity and is in great demand. So, if you plan 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 to download), such as icons, fonts, templates and other necessary user interface components.
Style pros and cons
Without a doubt, in the modern fast pace of life, such a discreet informative style is more convenient than its predecessor. Flat design has a number of undeniable advantages.
The most important thing, perhaps, is the fast loading of web pages. Websites 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 to the top.
The simplified appearance contributes to the readability of the text and allows you to focus on the main content.
The design looks harmonious and holistic, which creates an overall pleasant impression.
Nothing is perfect and Flat design is no exception. Despite its apparent simplicity, developing a really successful flat web design is not so easy. There is a chance to make it boring and unattractive. Or vice versa, overdo it with the design and forget about the functionality. The main task when developing a Flat design is to maintain the perfect balance between beauty and usability.
Flat (Flat) design, these days, has filled almost the entire expanse of the Internet. It can be found on all types of sites, completely different topics. This is not surprising, since it is modern stylish and of course simple. But the problem is that many people very often mistake flat design for minimalism. Thus, a kind of confusion arises.
As it turns out, these are completely 2 different concepts, and today we will try to understand this issue with you.
Flat design is not minimalism
The flat design of the site is only a visual ratio. This means that here the emphasis is only on the visual perception of a person. It's like a design style. Here's an example for you: there are sites that have a design built only on illustrations, and there are those that are built on blocks filled with one color. It's the same with flat design, it's like a type of design, its only difference is that it looks a bit simplified.
Minimalism, in turn, is a design philosophy for a website. In this case, the designer places maximum emphasis on the most convenient arrangement of elements on the page. Intuitive places are chosen so that it is easy for a person to navigate. Although some design elements may look silly and tasteless, they are very convenient.
Flat design and minimalism can be compared as one simple example from life. Let's take an ordinary book, it has elementary black letters on white paper - this is real minimalism that will never die. And the most modern e-book is a flat design. And many take this e-book because it is fashionable and modern. But you must admit that nothing can replace an ordinary book.
Is minimalism important in design?
It does depend on the specific project. For example, if you are a designer, then you certainly need to consider some Important Points. And so, in principle, everything depends on the customer, does he need such a design at all? I believe that such issues should be discussed individually.
Secondly, will minimalism help you in attracting visitors to the site? For some reason it seems to me that not always, but most of it depends on the type of content on your project. Moreover, there is such a thing as “too” minimalism. Such a site is unlikely to be user-friendly. But there are exceptions. If you are sure that users will like this design, then try and do it.
Will flat design stay?
Nobody can ever say for sure. It is possible that the iPhone and iPad revolutionized the design of all mobile devices and will remain so forever. Or it may be that some unique person will soon create something more interesting, and everyone will simply forget about flat design.
What makes trends is most likely not created immediately, but by many designers over several years. For example, if you are a chef, you can easily add some exotic product to your dish, thus getting a real masterpiece. But in any case, you cannot ignore all the elementary rules and principles of cooking. If the designer has a clear idea of what he is doing and adheres to all the principles, then soon it will be a masterpiece, and a little later - a trend.
What to choose?
Again, it all depends on what you want. How many people there are so many opinions and wishes. But in my opinion, these two types of design should not be neglected. On the one hand, minimalism will never die, but Flat design is now only very popular, but it is not known for how long it will remain so. And in general, you need to keep up with the times, and not dwell on the design of the 90s. Well, right, right?
What is your opinion?
Friends, what is your opinion on this? Do you think flat design will last long or will it take a firm place in the design world?
