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'll 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)
Who develops mobile applications and websites, wrote a column for us and put everything in its place regarding flat and material design.
By and large, the difference between Flat design and Material Design is subtle. To a person who does not have deep knowledge of graphic design, they may indeed seem very similar. In this article I will try to “shed light” on some of the differences between them. You will receive additional knowledge that is so necessary so as not to accidentally injure the delicate nature of the designer.
A little history
Before we start talking about the differences between the two most popular design trends, let's find out where they come from. There is an opinion that the material design is created on the basis of a flat one. Where did flat design come from, then?
Skeuomorphism
When it comes to user interface and web design, the concept of skeuomorphism refers to an approach whose main idea is imitation. Without going into too much detail, let's just remember Apple's pre-iOS 7 interfaces with their “realistic textures, lighting, and bombastic effects.”
The attempt to make digital objects resemble their real-world counterparts was motivated by the need to facilitate user interaction with the device. In fact, this is the reason why all interfaces with realistic textures have dominated the digital world for many years. Skeuomorphic design does a great job of helping users seamlessly transition from the real world to the digital one.
However, with the rise of mobile technology, there is gradually becoming a need to focus primarily on convenience and ease of use. Agree, in this area the need to create mobile solutions accessible from different devices is increasing significantly. And at this very moment, simplicity becomes the new design standard.
Note: Do not under any circumstances think that skeuomorphism has completely disappeared. It is widely used in games where it is necessary to create a realistic world and help players feel their character in order to deeply immerse themselves in the game process.
Flat design
This style is completely devoid of any three-dimensional objects. Roughly speaking, flat design lacks such stylistic elements as drop shadows, textures, gradients, but pays attention to the play of fonts and colors and icons. But why was all this necessary? The answer is simple.
Firstly, flat design significantly reduces page loading time. The absence of “heavy” skeuomorphic details (think: layers, serif fonts, gradients) makes flat design elements “lighter,” which in turn significantly speeds up loading times. Moreover, flat elements look equally attractive on both high and low resolution screens.
Secondly, simple images can convey your idea to users faster than detailed illustrations: they are sketchy and therefore quite easy to understand.
And, of course, flat icons with a relatively simple font can direct users' attention to truly important content.
Today, flat design has received well-deserved recognition, but it still has its problems. The most obvious example of such problems was the release of Windows 8 by Microsoft. This operating system is considered a pioneer of flat design and supports the concept of Metro design. What led to the problems was that the company considered it necessary to pay more attention to the typography than the graphics themselves.
Results from a Windows 8 usability test conducted by NN Group showed that users had difficulty distinguishing clickable objects from non-clickable ones. Users complained that objects that appeared static were actually clickable. As a result, the company's main mission - to help users correctly interpret the system - failed.
Another company that is often associated with flat design is Apple. They moved away from skeuomorphic design elements in the mobile operating system iOS 7, released in 2013. This time the transition was received a little better, mainly due to the fact that the company did not try to completely update the user interface concept, but simply added a few changes towards a flat design. This allowed users to use the product by relying on their previous experience with operating systems and websites.
Material design
Let's be clear right now: material design is more of a branded product than a spontaneous design trend that has gained widespread acceptance. This is what mainly distinguishes it from its flat design.
By calling design material “branded,” I mean that it has a whole set of clearly defined recommendations and principles that every self-respecting designer follows. It is quite obvious why Google introduced its Material Design: there was a need to unify the design so that applications looked the same on any of the many Android devices.
Although quite functional, flat design is still considered difficult to understand. The truth is that flat objects on the screen can confuse users (especially those who are not experienced in using mobile and web interfaces). Therefore, material design tries to bring back the elements of skeuomorphism, but in a greatly simplified form. Images look flat, especially when it comes to colors, but are still multi-dimensional thanks to the presence of the Z-axis.
In other words, material design can be called an improved version of flat design with elements of skeuomorphism - animation, shadows and layers. This way you can make the product more intuitive in terms of navigation, and avoid unnecessary complexity within the overall style.
Pros and cons of flat design
Let's leave behind the history of the evolution of styles and move on to something more significant - let's list the strengths and weaknesses of flat design.
- Minimalism and style
- Intuitiveness. It will be easier for you to convey your idea to users.
- Saving time and resources. Pages load much faster with less bandwidth consumption.
- Focus on content. The interface is free of unnecessary details that can distract from truly valuable information.
- Looks equally good on various devices, be it a PC browser or a smartphone.
- Speeds up the website or app design development process by eliminating unnecessary design touches.
- Minimalistic style.
- Quite intuitive on an intuitive level. The material design will be equally easy to perceive for both experienced users and beginners.
- Moderate skeuomorphism. Everything looks more realistic thanks to the use of the Z-axis (a unique Google concept).
- There is a set of manuals that are constantly updated. Therefore, any designer can always turn to them if difficulties arise during the work process.
- Animation for web solutions is encouraged. There is no need to remind you how much people love movement. In addition, animation allows you to make the interface more clear and intuitive.
- Has an owner (Google company). Therefore, any questions and suggestions for improvement should be addressed to the owner.
- Due to the Z axis, the design process may take longer to complete.
- Animated elements require more resources.
- Rigid adherence to guidelines can limit the originality of a design.
Let's sum it up
In fact, one of the design approaches under consideration should not be considered to have a clear advantage over the other, since flat and material styles go side by side. They are both incredibly popular and both are devoid of excessive realism. Material design is a successor to flat design, while flat design itself was a reaction to solutions that were too heavy and realistic. Material design added something that flat design has always tried to move away from - a little skeuomorphism. Although one thing will always differ between these approaches: material design is a proprietary product of Google, and flat design is the result of the fusion of several design practices that strives primarily for overall simplicity.
In truth, flat design has evolved a lot in recent years, from a completely “flat” style to a “semi-flat” style. It now allows for the use of layers and subtle shadows to allow objects to appear deeper than they previously appeared. So, you and I are happy contemporaries of flat design 2.0.
Lastly, nothing prevents you from trying to combine these two approaches to create a truly functional and user-friendly product. So, take inspiration from the gurus of flat and material design and get to work!
If you find a typo, highlight it and press Ctrl + Enter! To contact us you can use .
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 flat design concepts that involves using 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.
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 are coming 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 style of web design. 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.
Modern trends and approaches in 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 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!
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
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 fit with 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 fit 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” flat-style landing pages offered by Russian web studios, 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...
