Menu
homeFiles and folders

Examples of flat design. Flat design: past, present and future. Using 2D Objects

We don't know whether you 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 lightening of what we as users interact with every day. Simply put, the design has become “flat”: in contrast to the convex icons of the times of rapid growth social networks and web 2.0, now we are increasingly greeted by 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 company finally confirmed the rapid growth of popularity of this trend, traditionally delighting some of its fans, but also encountering significant discontent 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 apogee of realism and the pendulum is flying towards reverse side- 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 experience 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". Majority graphic design have been “flat” for centuries. 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've never seen an article about the benefits of flat design in user interfaces and still am not convinced of this. 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 bad copy of several interesting designs, which have been popping up on sites like Dribbble and Behance over the past year. I didn't see anything new - except that it's far from the same " old Apple» Steve Jobs. The company showed that it is not at the forefront of design mobile interfaces. 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.

Concerning ordinary users, then they like bright colors.

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

IN to a large extent I approach this situation with my passion for flat styles a little philosophically. 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.

Rigid contrast of shapes and minimalist graphics have always expressed accumulation 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 the designers were greatly influenced a 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, which correctly take into account illumination, etc. They began to think more in the direction of “how to make it more convenient for the user”, and not “how to draw beautifully”. Content is the main thing, and in our work it is important to present it the best way.

It seems to me that for external changes(flat UI, icons) we especially didn’t notice any serious changes in ease of use, and how people 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 home screen 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 items that for a long time they 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 guys on LinkedIn profiles who today say UX, UI Designer, nervously copied the white shadow effect of the letters. Like Apple. Then light and light sites. Like Apple. Then interfaces rich in textures and realism. Like Apple. All their work consisted of copying, since there was no original, unified and convenient development concept for everyone. This is exactly the problem that flat design solves today. Although it seems wrong to me to call it that way. It’s good that Microsoft didn’t invent it, and it was formed over 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 easier to technical implementation, more clickable (hello underlined links), and multi-platform - combining web, mobile and desktop into one unified 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.

Flat design has become popular recently for apps and websites. This is not to say that everyone absolutely loves this style, but it is definitely not suitable for all applications and sites. If there are many advantages of a flat design, such as simplicity and minimalism, making it easier to use. For some applications, flat design may be too simple. That is, it’s worth adding some shadows or gradients to make it look better.

Many people claim that flat web design is efficient design. They say this is a way to make the project as user-friendly as possible. Here are some inspiring examples of flat design projects. This selection from various portfolios is great for understanding flat designs that actually work.


The ISSLand

January Creative

Minimal Monkey

What is flat design?

  • Flat design focuses on the user
  • Flat design is simple
  • Flat design - less gradients
  • Flat design includes straight lines and square corners
  • Typically use strong color contrast
  • Flat design has no shadows, bevels, textures or anything that looks 3D
  • Flat design only exists in 2 dimensions
  • Flat design - a trend towards simplicity and minimalism
  • Flat design - do not use additional effects
  • There are no extras
  • Flat design - fewer buttons and bells and whistles
  • Flat design means focus on fonts
  • Color combinations, contrasting colors, and interesting color variations are important components of flat design.
  • Flat design is one of many designs. It is suitable for some projects, but not for others.

What is not flat design?

  • Flat design is not skeuomorphism or design that emulates the shape and contours of “reality.”
  • Flat design does not include shiny buttons
  • Flat design does not include decorations
  • In flat design you won’t find traditional ideas about “depth”
  • Flat design doesn't suit all projects

Is flat design just an efficient design?

Some people consider flat design to be an efficient design in itself. That is, it simplifies the use of sites and applications, allows you to find necessary information without being distracted. Of course, flat design is not the only one that makes information easier to find. If everything is done well, then users will not have any problems. The project should be simple and easy for those who are able to use it. Some people prefer to use flat design, while others prefer a different design style.

Elements for flat design

Do you like flat design? Here are a few elements that can be used for a "flat" design

Flat Icon Pack

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 the most different shapes depending on 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 suggests active use various effects: shadows, reflections, reflections and realistic textures. There is and cannot be any of this in flat design.

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 one of the first who began to develop this direction was Microsoft company. Exit Windows 8 with its new interface forever changed the design and largely predetermined the vector of web development, 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 formed new reality, in which there was no place for sites with outdated designs. 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 dominant one for several recent years the trend towards extreme simplification will be replaced by something else. There are some prerequisites for this - for example, the direction Material Design, 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 the most different categories design, but its strict grids and simplified graphics are perfectly 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.

Grids also have flexible structure, which can be presented in many 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 wide use sans serif fonts, however, are 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, 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. The use of simple geometric shapes often results in two completely different designs may turn out to be very similar to each other. Designers who use flat elements are limited in their options because they don't have much at their disposal. big choice acceptable options. 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 design elements are used as geometric figures and a white sans-serif font is a more than logical solution. But the result is deplorable - the same color scheme completely deprived the design of its uniqueness. And there are a lot of such cases.


CHASING FASHION

Flat design will remain one of the most... current trends, 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. This typical examples use 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, no useful function they don't comply.

BAD CHOICE OF FONT

Every designer dreams of creating something beautiful and at the same time functional. But in pursuit of aesthetics, you can do bad choice, which will 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 in mobile devices – small size screen 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 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 was a new style, which 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 on different levels, experiment with shades and shadows. Another commonly used example hybrid approach is to use in flat not only icons and flat “vector” illustrations, but also photographs.

She did a lot to promote Flat 2.0 Google company. The Material Design Guideline is an attempt to create a new visual language, combining flat and volumetric 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 guidelines - designers can experiment by creating their own original projects, where a variety of elements can be combined.

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.

The “flat design” revolution continues to gain momentum since it was introduced at Windows platform Phone in 2010. It's not hard to understand why: an interface with this design seems more intuitive and is well suited for adaptive elements, modern frameworks and when executed correctly it looks attractive.
Flat design began as a counterweight to the ubiquitous skeuomorphic style, but has since become much more than just “Option B.”

Initially, flat was exclusively two-dimensional with a total focus on minimalism. Modern flat 2.o uses shadows, gradients and other elements to make it look "almost flat".

5 Characteristic Components of Modern Flat Design:

1. Long shadows
Long shadows add depth and dimension to images without having to sacrifice the minimalistic icon details that make an interface attractive.

2. Dynamic colors
Supplement rare visual effects simply by using energetic colors, especially light shades.
Different color background in contrast to base color elements make a page with a tiled menu more lively.
The Flat UI Colors website contains the most effective color patterns for flat.

3. Simple typography
The choice of font in flat is based on one criterion: readability. Sans serif fonts with a constant stroke width are typically used.

4. Transparent button
One of the trending elements in modern web design. The reason is that it doesn't attract too much attention, but is clearly recognizable as a button.

5. Minimalism
Flat and minimalism go hand in hand, using the same principles: simplicity and content focus.
It may seem that using flat design is a universal solution, but minimalism is difficult to implement: the fewer working elements, the more attention they require.

No matter how great flat design may seem, there is no guarantee that it will work for your site. Check out its main advantages to see if it's worth planning a global redesign.

Advantages:
used in a responsive interface;
simplifies navigation for the user;
clear structure and schematic visuals emphasize the internal logic of the page;
fast loading pages, due to the simplicity of graphics;
Familiar typography improves readability.

Flat design is all about simplicity and minimalism, which on the other hand makes it difficult to convey visually complex messages. Therefore, before you rush headlong into simplifying the interface, you should carefully consider the interaction between the site and the user.

Based on Web design book of trends.

Today we will focus our attention on one of the most popular areas of modern graphic design, which is called flat design.

The famous artist Edgar Degas once said: “Art is not what you see, but what you let others see.” This also applies to graphic design, which can also be defined as an art that decides specific task. Graphic design has the ability to change mood and message through the slightest changes in shapes and shades, letters and spacing. Trends in this area that have become an integral part Everyday life, since they influence the decision-making process and solve problems of presenting a modern product, and also shape the tastes of users.

Today, the term “flat design” is used in graphics for many purposes and tasks that have common stylistic features. Flat design is a trend that has found many manifestations in the field of digital products, thanks to the laconic use of visual expressive means.

Nowadays, the term is widely used as the opposite of "rich design" due to the harmonious simplicity taken as the basis of this approach. The most notable feature that gives this movement its name is the use of flat, two-dimensional visual details, as opposed to highly realistic and detailed skeuomorphic images. Flat design has been actively developing over the past years, covering more and more areas of graphic design, which are finding wide and varied applications in the field of digital design for web and mobile interfaces. This approach can be seen as a style that promotes usability and visual harmony in user interfaces.


History of flat design

Obviously, flat design did not appear out of thin air. Its origin is usually considered to be the Swiss style. Swiss Style, also known as International Typographic Style or international style for short, is a movement that originated in the 1920s but was met with great criticism and then had a dramatic rebirth in graphic design in Switzerland in the 1940s and 50s. years, which became a strong foundation of mid-20th century graphic design throughout the world. The founders of this creative movement were Joseph Müller-Brockmann and Armin Hofmann.


According to the Design Is History website, short description key features of this style is as follows: “... the style focused on simplicity, readability and objectivity. The legacy of this style is the use of sans-serif fonts, grids, and asymmetrical layouts. Photographs also stand out as a means of visual communication. The main influential works were designed as posters, which were considered the most effective means providing information."


The posters presented as examples show that adherents of this style liked simple shapes, brave and strict fonts with a high degree of readability, geometric combinations of details, flat illustrations and a clear visual hierarchy. Swiss design quickly became increasingly popular in different countries and received new life in the art of the early 21st century.

Although this style has received many expressions in the field of visual design for print: posters, stamps, cards, book covers, magazines, etc., it has greatly expanded its horizons in the digital design era, especially in the field of user interface design.

Websites and mobile applications, have opened up a surprising and fruitful perspective for this minimalist and functional approach to design solutions. The style was called “flat design”, which immediately became popular and began a new direction in graphic design.

The first step towards increasing the popularity of flat UI in digital products was made by Microsoft, this movement began in the early 2000s and has expanded widely in products of 2010, in particular in the development of mobile interfaces for Windows Phone 7. The basic features of flat design, such as intuitive simple shapes, bold, clear typography, bright contrasting colors, long shadows, and the absence of complex details and textures, have caught on well. The next leap in popularity of flat design occurred in 2013, when Apple released iOS 7 based on the principles of flat graphics as the basis for intuitive clear interfaces. You could also say that some of the key principles of flat design found their way into Google's Material Design.


So the main features of flat design are:

  • simplicity of forms and elements;
  • minimalism;
  • functionality;
  • bold and easy to read typography;
  • clear and strict visual hierarchy;
  • combination contrasting colors, providing quick visual perception;
  • avoiding textures, gradients and complex shapes;
  • application of grid principles, geometric approach and visual balance.

Benefits of Flat Design

Fdat design has a number of advantages that determine its popularity and diversity in digital design. Among the most significant:

  • readability;
  • clear visual hierarchy using shapes, colors and fonts;
  • effective organization of fast and intuitive navigation in web and mobile interfaces;
  • easy scalability for responsive design;
  • negligible load for a digital system.

With all that said, flat design provides a wide field for creative exploration and stylistic concepts.


Flat design - application in practice

The variety of design styles available and evolving these days lends itself well to flat design due to its flexibility and artistic freedom.

Even at the initial stage of planning the overall layout, logic and transitions, the principles of flat design can be applied. Tools and software digital design tools used at this crucial stage allow designers to present clients and teams with a consistent layout of all app screens or web pages, and even this basic diagram already has key visualization features typical of flat design. At this stage it is ideal for fast and efficient display design solutions, shown in a simple monochrome diagram.


User Interface Design

User interfaces have definitely become a wide and favorable field for flat design. It has found its development both in abstract concepts of user interaction and in a variety of original interfaces, icons, interface elements and illustrations.


These types of illustrations provide additional support for digital products and tend to be more intricate in terms of detail and satisfy the aesthetic needs of users, while at the same time instantly establishing a connection to a specific topic.


Printed illustrations

The variety of purposes of modern flat design and its growing popularity in digital products have also influenced other areas of design, particularly the design for printed products such as posters and book covers, from which the approach originated.

Branding

Brand design these days also successfully applies the principles of flat design due to its flexibility as many products are presented on devices or receive digital support in the Internet. Flat design in branding is often represented in logos and application icons.


All the facts and benefits mentioned about flat design definitely do not mean that this style has won over other design approaches. Any style and direction of design has its advantages and disadvantages. However, flat design has opened up new perspectives, especially in the field of custom solutions that present a harmonious balance of beauty and functionality.

Wrote:

Expert in design, development, web analytics