How to start your flat design portfolio. Flat design: past, present and future. What is not flat design?

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 this style can take many different forms depending on the design requirements. To better understand what flat design is, it’s better to go backwards and define what it definitely isn’t.

This is not 3D. 3D graphics itself allows you to get very realistic, but at the same time two-dimensional images. Unlike 3D, flat design doesn't pay much attention to details that create depth and dimension, such as shadows, highlights, and textures.

This is not skeuomorphism. Flat design emerged as an alternative to pseudo-volumetric design elements that imitated real objects or processes. Skeuomorphism involves the active use of various effects: shadows, reflections, reflexes and realistic textures. There is none of this in flat design and cannot be.

People first started talking about flat design in 2012-2013, when this style first appeared. The trend was very noticeable and caused a lot of noise, since Microsoft was one of the first to develop this direction. The release of Windows 8 with a new interface forever changed the design and largely predetermined the vector of development of the web, at least its visual component.

Apple did not stand aside either, which also abandoned pseudo-volumetric elements in the design of the interfaces of its devices. Microsoft and Apple created a new reality in which sites with outdated designs 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 good nor bad, it’s web designers who make it convenient or inconvenient. But let's be honest, in its extreme forms, flat design doesn't look very aesthetically pleasing. Probably, the zone of best perception in this case is somewhere in the middle between flat and pseudo-volumetric elements.

It is quite possible that the trend toward extreme simplification that has been dominant over the past few years will be replaced by something else. There are some prerequisites for this - for example, the Material Design direction, created by Google designers.

COMPATIBLE WITH ADAPTIVE DESIGN

Microsoft and Apple's move away from skeuomorphism in interface design has had big consequences. The new style was almost immediately adopted as a new approach to UX. Since then, flat design has become a dominant trend that continues to be relevant. Today, flat elements are ubiquitous, we see them on websites, in applications and on the displays of various devices.

The principles of flat design apply to a wide range of design categories, but its strict grids and simplified graphics are best displayed on devices with small screen sizes.

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-volumetric elements, everything was not so - sometimes the interface, which looked amazing on the desktop screen, turned into something incomprehensible on a mobile device.

One of the main advantages of flat design is its scalability. Flat elements look good regardless of size and, unlike pixel-perfect design, they are much easier to work with.

FLEXIBLE PLATFORM

Flat design, in its pursuit of simplicity, is characterized by good flexibility: all elements, as a rule, are created from homogeneous geometric shapes, which simplifies the creation of a balanced layout, where each module or block has its place. All elements are easily distinguishable and, importantly, during operation they can be quickly swapped without violating the original settings.

The grids also have a flexible structure that can be provided in a variety of configurations. This allows designers to create the most optimal approaches that best showcase the content at hand. The absence of restrictions and the need to adjust the grid if new elements are changed or added significantly speeds up the workflow.

READABLE TYPOGRAPHY

Flat design has significantly changed the way designers think about typography. The new style required a different approach to the choice of fonts and the quality of layout. As a result, the absence of shadows and various effects made the texts easier to read.

Flat design is characterized by the extensive use of sans-serif fonts, however, this is not akisoma and serifs can also look good in combination with flat elements. Serif fonts will be quite appropriate as a heading, and they can also be used in the main text, if the typography does not violate the compositional unity.

MINUSES

It may seem that flat design has no disadvantages, but this is not so. In their quest to emphasize clean lines and shapes, some designers fall into the trap of focusing on aesthetics while neglecting 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 determine 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 pursuit of simplicity, designers may inadvertently hide or unwittingly disguise important features or actions, and the user, not seeing the usual prompts, may lose 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 at random, but these are unnecessary movements, which is undesirable.

LOSS OF INDIVIDUALITY

For any brand, business or design project, uniqueness is of 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 can often result in two completely different designs appearing very similar to each other. Designers who use flat elements are limited in their options because they don't have a large selection of acceptable options at their disposal. Recently, 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 funny. Looking at these pictures, you might think that we are looking at different sections of the same application. But no, designers Marco La Mantia and Simone Lippolis worked independently of each other. Basic geometric shapes and a white sans-serif font are used as the main design elements - a more than logical decision. But the result is disastrous - the same color scheme completely deprived the design of its uniqueness. And there are a lot of such cases.

CHASING FASHION

Flat design will remain one of the hottest trends for a long time, simply because it looks good on mobile device displays. But many designers choose flat not only because it allows them to quickly solve most problems, but also because of their desire to create something modern and fashionable.

However, in pursuit of fashion, you can make a serious mistake: if you mindlessly follow all the trends, it is quite possible to forget about the usefulness of design. A flat can be very beautiful, elegant and even graceful, but still the designer’s choice should be determined by functionality, and not by the desire for beauty. Sometimes the desire to “shove” something fashionable into a design only harms it, for example, long shadows, one of the most recognizable features of flat design.

Before us are the works of designers Alexander Lototsky and Erik Malmskeld. These are typical examples of using long shadows in design. Now this won’t surprise anyone, 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, so many similar icons appeared that today the use of shadows is a formulaic and uninteresting solution. It was once fashionable, but not anymore. Shadows are like shadows. There is no meaning in them, they do not perform any useful function.

BAD CHOICE OF FONT

Every designer dreams of creating something beautiful and at the same time functional. But in pursuit of aesthetics, you can make poor choices that affect usability. An example is the craze for thin and light fonts. This type of typography looks clean and light, but it is also difficult 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 – the small screen size sharply 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 its strict visual simplicity; there was no hint of shadows or structures. Even gradients were not held in high esteem, although they in no way contradict the principles of flat design.

But gradually designers began to move away from too simple solutions, trying to find some kind of compromise solution between flat and skeuomorphism. The result is a new style that some designers call Flat 2.0. Shadows, gradients, and even light, almost invisible 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 at 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 illustrations, but also photographs.

Google has done a lot to promote Flat 2.0. The Material Design Guideline is an attempt to create a new visual language that combines flat and three-dimensional design elements. 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, creating their own original projects, which can combine a variety of elements.

CONCLUSION

Today Flat 2.0 is at the formation stage, but the direction in which this style will develop is already quite clear. No significant changes are expected - trendsetters Google, Apple and Microsoft are not going to give up flat. If there are changes, they will be insignificant - new approaches will appear, someone will come up with an interesting “trick”, attempts will continue to take the best from skeuomorphism. But in a global sense, there is no need to expect something truly new - flat design is a long-term trend and only a style that best suits new technologies that do not yet exist can displace it from its conquered positions.

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,384 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 designer’s delicate nature.

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 problems was that the company considered it necessary to pay more attention to the typography than to 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 a 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 - we will list the strengths and weaknesses of flat design.

• Minimalism and style
• Intuition. 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 understandable 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). 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.

Summarize

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 be different 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 some inspiration from the flat and material design gurus and get to work!

If you find a typo, highlight it and press Ctrl + Enter! To contact us you can use .

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 minimalist 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 in general 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

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

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.