Flat design: history, advantages and practical application. Flat design: past, present and future History of flat design

We don't know if you've noticed or not, but lately (especially in the last year) there has been a clear trend in web design around the world towards simplification, rugged minimalism and visual simplification of what we as users interact with every day. Simply put, the design has become “flat”: unlike the convex icons of the times of the rapid growth of social networks and web 2.0, now we are increasingly greeted 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 popularity of this trend, traditionally delighting some of its fans, but also encountering significant dissatisfaction 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 turn to experts from Ukraine and abroad.

We asked them to answer three main questions:

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

Denis Sudilkovsky, Kyiv
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 on some issue, humanity will swing from one side to the other. This is no doubt true for the design of interactive systems. The flat and uninterestingly primitive web at one time changed to voluminous web-based buttons. Interface visualizations have reached their peak of realism and the pendulum is flying 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 is becoming very similar to Android.

Designers will have to evolve (and don’t joke about when flat design will come to mechanical engineering and give us flat cars :). When there is no decoration, all the work consists of creating a mood with 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 contrary, receive new experiences and new impressions. Personally, I was an iPhone adherent for 4 years, but this spring I changed my phone to Android for the only reason - I was tired of the monotonous ideality of the Apple interface.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

First off, I'd like to point out that I don't like the term "flat design". Most graphic design for centuries has been "flat". I also think it limits your ability to make a design stand out when the choice is between flat and something else. Design can be much more than this. Cheerful, bright, dark, positive, minimalistic - you can call it whatever you want. But today I rarely hear anyone consider design to be anything more than flat or scleromorphic. It's a little sad.

Why are web and mobile slow to move towards flat design? The way I see it is that it's just a trend. I have never seen articles about the benefits of flat design in user interfaces and am still not convinced of it. Simple and clear design - yes, but this is not the same as “flat”. 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 certain distances and never interact with small screens with a significant number of elements. They look nice, but do they have good usability?

What I saw from Apple last night was just a poor copy of several interesting designs that have been popping up on sites like Dribbble and Behance over the past year. I didn't see anything 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 adopting all these white designs and creative gradients over the next few months, but I don't think that aspect will be as impactful as Google's recent shutdowns. But on the other hand, be that as it may, Apple has always been a trendsetter and an inspiration for many people, including me.

As for ordinary users, they like bright colors.

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

To a large extent, I'm a little philosophical about this flat styling fascination situation. This is not the first time that designers have become interested in minimalism and artificial materials. Everything passes.

The Bauhaus era of the 20-30s brought a huge contribution to design, but still, the 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 was a new hope for humanity, but again no - people very quickly returned to natural forms or copies of natural materials.

The harsh contrast of forms and minimalist graphics have always expressed the accumulation of internal conflicts within society. Design is just a mirror that shows our inner world. There's too much going on. Life speeds up very much, and we simply don’t have time to think and consider anything. We often don't have time to just live.

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

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

I think that designers have been greatly influenced by the large number of gadgets with different screen sizes and resolutions - for all this diversity it is easier to create a design 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,” rather than “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), they especially did not notice serious changes in ease of use, and how they swear about this topic. When they check that it’s working, it will start to say, “Ohhh, how convenient, and why didn’t they do this before?” I hope this will influence designers 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 flat design will not particularly affect users - if it is convenient for them to create and consume content, there will be a lot of satisfied people. But the icons on the home screen are still acidic :)

Pavel Grozyan, Kyiv
Product Designer at MacPaw, grozyan

"Apple! A-ha-ha, stop it! - The designers are shouting. - Hurray, it became easier. - users are chanting." I understand both points of view. Today, after the presentation from WWDC2013, many of my colleagues stood up and said, “Screw this profession! Anyone can draw such stupidity now. And these icons for $30?!” And at first glance, they are right. But if you dig deeper, you realize 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 their LinkedIn profiles today say UX, UI Designer, nervously copied the white shadow effect of the letters. Then light and light websites like Apple. Then interfaces rich in textures and realism. All their work was. copying, since there was no original, unified and convenient development concept for everyone. It is precisely this task that flat design solves today. Although it seems wrong to me to call it that way, it’s good that Microsoft did not invent it, and it was formed ten years before the digital era. , in the field of publishing.

Flat - it is not for clicks, it is 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 gradients for buttons. I support this trend. If it doesn't interfere with the quality of the user experience, it will be easier for everyone to live with. First of all to the user. Secondly, for the creator: it will be simpler in technical implementation, more convenient for clicking (underlining links - hello), and multi-platform - 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.

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 score.

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 overall it fits into the overall design plane

Flat - design (flat design) is a popular style in the design of websites and interfaces, as well as operating systems, the hallmarks of which are simplicity, sophistication and minimalism. Flat design began to gain popularity in 2010 as the opposite of skeuomorphism.

Skeuomorphism- a physical ornament or design element that is copied from the shape of another object, but made from different materials or using different methods. Examples include pottery decorated with imitation rivets to resemble similar pots made of metal, or a computer calendar that imitates the appearance of the stapled pages of a paper desk calendar (definition from Wikipedia).

The popularization of the flat style in design was facilitated by the release of the Windows 8 operating system from Microsoft in the Metro style, as well as iOS 7, in which Apple also chooses a flat style. It is after this that the real era of flat design begins. Soon, large search services and applications - Google, Youtube - are switching to Flat-design; many sites appear that use the principles of flat style in their design. In recent years, flat design has been a leader in global website design trends.

Benefits of Flat Design

Practicality- the use of flat design allows you to minimize the number of styles, scripts and animations, which allows the site to load faster.
Easy to adapt- flat design is easy enough to adapt to different screen resolutions.
Ease of use- thanks to the simplified style, it is easier for users to perceive information on the site.
beauty- external impartiality and simple designs allow you to focus on a design that really catches you.

5 principles of flat website design

Flat design is not at all boring, as it might seem at first glance. Thanks to their purity and sophistication, design solutions can be stylish and beautiful, without unnecessary noise, allowing you to concentrate on your product or service.

1 - Using 2D objects

Flat design excludes the use of elements that give depth and volume to an object: shadows, gradients, highlights, textures, reflections, animation. When an object is imaged, only its outlines are displayed.

2 - Icons and simple objects

Using flat icons and monosyllabic shapes with clear outlines and the same color allows you to simplify the design as much as possible and make it lighter. The controls become intuitive to the user and encourage interaction.

3 - Simple fonts in the design style

Much attention is paid to typography and fonts in flat design. Italics are not used here; the font fits harmoniously into the website design, not only in content, but also in navigation. Even in the font types for the site, the minimalist style is encouraged.

4 - Game of colors

Flat design contains several primary colors, which exclude the use of smooth transitions and gradients, but can be bright and contrasting with each other.

5 - Minimalism

Flat design involves the use of visualization of elements, using the entire width of the screen and at the same time minimizing information.

There is such a thing as almost flat design. This is one of the concepts of flat design, which is the use of simple elements and two-dimensional space. An example of this would be a high-quality photo that blurs the background or is darkened. This allows you to create depth and perspective of the object.

Flat Design Examples

On the Internet, including in the Belarusian segment, you can find many examples of the development of websites with flat design in various topics, including news resources, portals and even online stores.

Relatively recently, such a design direction as FLAT design or flat design has become popular.

Users of Windows 8 and later versions are already familiar with the FLAT design, since the first thing they encounter when loading the system 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 different gadget platforms.

FLAT – design has the following features:

Complete or partial rejection of gradients, complex textures and shadows , which I personally am very happy about. I have no complaints about shadows and I love using them myself, but let the eternal problems with gradient display go away.

Typography, geometry come 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 already said, FLAT design has become very popular in mobile applications, since its main feature is simplicity of layout and adaptability. FLAT design has also become widespread 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 its place has been taken by FLAT design. Fashion has a habit of returning 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 information content of the current trend. By the way, flat design was already popular in the 80s, but then it was due to technical features and the inability to display shadows and gradients. And now most leading IT companies have switched to Flat design.

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

If my publications interest you, then I suggest you keep abreast of the latest updates on the site.

(Visited 2,333 times, 1 visits today)

Websites in the flat design style look like a simple geometric block space with colored accents (icons, text highlights, infographics) with a minimum of graphic details and without excess text information. As they say, “minimalism” and nothing superfluous.

How not to draw flat icons

“Flat” website design has become fashionable along with the new Windows interfaces. The growing 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 website interface and the “finger” interface (smartphones) are not the same thing (it’s easy to scroll down the page with your finger - and, on the contrary, you will need a lot of patience and real interest in turning the mouse wheel down 3-4 screens). On Russian flat sites you can often find the following icons:

The example is just bright colors that don’t match each other + icons of poor quality (I took the example from a paid set, but almost always freelancers use freely downloaded icons from different sets that also don’t match with each other).

Due to their inability to draw high-quality graphics, novice designers easily seize the opportunity to simplify everything. At the same time, it is overlooked that a design in the “minimalism” style presupposes precisely high-quality elaboration of interface details, and not simply placing icons downloaded from the Internet on colored squares in the Windows 8 style (which can now be found on many supposedly “modern landing pages”).

Example of good flat icons:

Colors and icons should not only be combined with each other, but also form a single whole.

Problems of low-quality flat design

1. Navigation and usability

The network is NOT a real space, therefore, in order to create a sense of reality and understand your location, 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 telephone, by the basket - that this is a basket (like in a supermarket - everything is clear and simple), an icon with a picture of a gift - a gift, etc. .

However, new flat designers often oversimplify icons. And the further designers are from intuitive images, the more difficult it is for the user to interpret them. Oversimplification sometimes makes navigation difficult. As soon as everyone rushed to create fashionable flat website design, trying to imitate European designers, the simple rules of usability were forgotten.

2. Long flat foot wraps

The pages stretch down 3-4 screens, while the space is not only used sparingly, 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 in scrolling 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 across the entire screen and scroll.

3. Confusing buttons

On flat sites, active elements are no longer obvious. With the advent of flat design, buttons also became flat. But the visual image of the button comes from a real physical button, and shadows and gradients just show that “you can definitely click here.”

4. Poorly drawn icons

Due to the shoddy work of designers, icons on websites (this is especially noticeable on flat-style websites) have lost their predictable images. Either because of limited design budgets, or because of the incompetence of the web designers themselves, navigation elements on sites often do not correspond to primary associations and are “far-fetched.”

I assume that the work on creating icons goes something like this: according to the technical specifications, an “Individual approach to clients” icon is needed. Personally, I have an image of a manager and two clients, each of whom is led by an arrow of a different color (a blue arrow leads to a blue client, a red arrow leads to a red client). If a designer does not know how to draw, he will look for an icon in ready-made sets (in the best case, he will buy it from a photo bank, in the worst case, he will download it from the Internet) and use the one that is most suitable in 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 site design 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 actually saw it!) – the designer cheated.

5. False Content Focus

Flat website design assumes a focus on content. Well, obviously - if the emphasis is not on graphics, then on information. But if you carefully look at the “modern” landing pages in the flat style that Russian web studios offer, then little attention is paid to the content. Namely:

The text is presented haphazardly. It is not clear how the accents are placed in it, what to cling to, and what is secondary.
There is no design as such. Tables, bulleted lists, headings, announcements are often not developed at all.
Often bare text. There are no pictures or icons to visually support the text blocks. As a result, the emphasis is neither on graphics nor on text, but on the “style” itself. At the same time, the company and its offers are lost.

So is flat design necessary for websites at all?

Everything is clear with the design of interfaces for smartphones - light, unloaded, easy to use. But with website design in the flat style, I personally have a big question: is it effective at all?

Most Customers do not understand the quality of graphics and, when approving a website design, are guided by their personal taste (like/dislike). And here fashion plays a role.

Flat website design can be cool. BUT! A cool design requires really high-quality design of usability and graphic elements and the presence of creative features and effects. And if they are absent from the design, if the sites lack originality, they look monotonous, empty and boring. In general, this is what is now available on most Russian sites.

An example of high-quality flat design:

The fashion for flat website design is temporary, like any other fashion. Some people create original, creative designs, while others copy them and imitate them in style because they don’t know how to come up with them themselves. And cheap “fashion” sites are growing like mushrooms...

It might be useful to read: