Flat design in red and blue style. Poor choice of fonts. Characteristics of flat style

IN Lately A specific style in the design of websites and user interfaces, which, due to the stylization of its elements, was called Flat, has gained enormous popularity.

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. Basic distinctive features- these are the things that you can focus on - bright unusual colors, non-standard typography, graphic primitives.

Today, more and more designers are 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 fully adhere to it.

Our company already has experience in creating websites in the Flat style, and we will be happy to help you create a flat website!

In this article, we will highlight the basic principles of flat design that you should follow if you want to use flat as the main style of your project.

Below we will analyze and give examples of some sites that use flat style.

1. Remove all effects

The basic principle of flat design is the creation of a two-dimensional image that is already flat in itself. In this case, 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 picture have hard edges and also do not stand out or have depth relative to other elements of the image.

In flat design you will not find elements that try to look realistic (skeuomorphism), 3D animation, realistic icons, etc. However, 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 rate.

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 previous principle While 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 must be readable and, of course, match the design, since when simple design extremely ornate fonts will look out of place. However, you should not use regular fonts, it’s better to experiment and choose the one that will attract the user’s attention.

A combination might be considered simple font sans serif 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. So if you want to add visual effects, you need to choose simple photos. Some sites offering the sale of retail goods use flat design to place your 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

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 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 years. recent years, covering more and more areas of graphic design that 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 forms, bold 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 an amazing 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 developed widely in products in 2010, in particular in the development of mobile interfaces for Windows Phone 7. Key features of flat design such as intuitive simple shapes, bold, clear typography, vibrant contrasting colors, long shadows, lack of complex details and textures, took root 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. It can also be said that some of the key principles of flat design are expressed in Material Design from Google.

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;
• a combination of contrasting colors that provides 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

Nowadays, brand design also successfully applies the principles of flat design due to its flexibility, since 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

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
Complementing sparse visuals is easy with 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 adaptive 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.

On Web base design book of trends.

In this article I will tell you about flat design. You've probably already heard something about this, since flat has become one of the leading trends on the web over the past few years.

Today we'll look at what flat design is, how it came about, and what you need to create a clean, bright, and responsive design.

you can find good examples flat design on the website http://market.envato.com/. There are tons of layouts, icons and templates that will give you a clear understanding of what modern design looks like .

1. What is flat design?

Flat design - modern style user interface, as well as graphic design, characterized by minimalism. Flat design is characterized by the use of a minimum of elements and the absence of various effects of texture, shadow and light, for example: mixed colors, gradients, highlights, and so on.

Flat is opposed to skeuomorphism( Skeuomorphism is a design principle when one product is given the appearance of another, i.e. when various interface elements are copied from real objects - approx. translation.) , as well as rich design. However, it is worth saying that flat design is not at all as simple as it seems at first glance. It includes some features of skeuomorphism, but we will talk about this a little later.

In general, flat helps the user focus on the content, without being distracted by visuals. Flat design emphasizes the simplicity of elements, while at the same time making the interface more responsive, pleasant and easy to use.

2. A little history

Flat design, as you know, existed long before it became a global trend on the web. Flat design was quite popular in the 80s due to the fact that the technology at that time was not yet developed enough to support complex effects, textures and shadows. However, even then the design was striving for skeuphomorphism, trying to make the interface elements as realistic as possible.

Flat design, in the form in which we see it now, began to gain popularity after Microsoft began producing products in the so-called metro style. Metro is a UI design from Microsoft that is striking in its style and simplicity.

In 2010 Microsoft released Windows Phone 7, which used a flat design with sharp edges and simple graphics inherited from one of its earlier products. Microsoft (Zune). Later, inspired by the success, Microsoft released the operating system Windows system 8, based on the same flat Metro style.

After all, flat design reached its peak in popularity in 2013 when Apple released iOS 7 demonstrating fundamentally new design with completely redesigned user interface elements, including icons and fonts. Apple company created visual principles of UI and icon design .

Soon after, Google also began using the flat style in its applications and web pages, calling it Material Design. Google even has an entire section dedicated to this style, including a description of the goals of web design, its principles and guidelines for creating various objects design: icons, layouts and so on.

Since then, flat has become a key trend in web design, making websites, applications and interface elements elegant, clean and stylish.

Thus, there are three global examples of flat design from companies, without which it is difficult to imagine modern world technologies:

Microsoft's Metro design

Apple iOS 7 design

Google's Material Design

3. Remember to be clean

Flat design is apparently called “flat” due to the lack of three-dimensional elements and realistic effects such as: gradients, textures, highlights, halftones, shadows. Remember, flat style is a two-dimensional (flat) way of depicting objects.

Moreover, in flat design, objects are depicted in a very simplified and stylized way.

And sometimes even just the silhouette or contours of the object are used, i.e. just enough to make the object recognizable, but not overload it with minor details.

Minimalism has become a global trend these days: simplicity of shapes and the use of sharp edges create a clean and pleasing design. Simple forms more understandable and easier to understand. This keeps the design minimalistic and clean without giving it a busy, cluttered look.

4. Bring it to perfection

Know that when it comes to creating flat icons and UI elements, you have to make them look crisp, neat and pixel perfect, i.e. as much as possible. Moreover, this applies to both raster and vector graphics.

With the program Adobe Photoshop everything is clear here: it works with raster graphics, which is pixel-based.

Regarding the program Adobe Illustrator, then it uses vector graphics, consisting of curves and lines called vectors, which are specified by mathematical formulas.

Once upon a time, Adobe Illustrator wasn't much of a convenient program to create pixel-perfect graphics. Good news is that latest versions Illustrator steel great tool to create good graphics.

I must say that Vector graphics mainly involves working with simple, flat shapes, pure colors and grids. Adobe Illustrator is very flexible in settings and allows you to adapt the grid to your needs, align objects and use Various types snapping. This makes it easier to create the perfect design that looks clean and stylish on any display. If you want to learn how to create perfect graphics, then you should read this article: How to create pixel-perfect artwork using Adobe Illustrator .

5. Color

One of the most specific features of flat design, besides shadows, is the use of color. Most of the colors that flat design uses in its elements consist of just a few basic colors.

Color in flat design is bright, rich, and rich.The flat color scheme is not limited to a few special colors. It contains many shades, and their choice depends only on what you are depicting, be it icons of sweets or retro-style objects in a sophisticated retro palette.

Let's say you are a UI designer and are well versed in color palettes, you are experimenting with the color panel in Photoshop programs and Illusstartor, mixing colors as you please. However, this process is quite complex and requires good intuition, experience and skills. Here you will find some tools that can help you create your own color palette.

Some of them are suitable for all types of design and illustration, not just flat design. For example, Adobe Color CC, better known as Cooler. Today there is access to it, both through the website and directly through Adobe products. Cooler is a very flexible tool that allows you to either create your own color palette or choose from a custom palette from a library.

Another simple and convenient color palette generator is Coolors. Just press the spacebar and the program will generate a color palette, you can adjust the colors, there is also an export function.

There are several other similar services with custom palettes that may be useful. However, there is one tool created specifically for flat design. FlatUIColors.com by Designmodo - a service with a set of “flat” colors, very convenient for work. This site has become very popular among designers looking for good color solutions for the perfect design. Try it!

And you can also find a greater variety of colors and palettes in Google's Material Design guide.

6. Long shadows

As mentioned above, flat design is characterized by simplicity and a lot of free space - which is why flat design rejects the use of any effects. However, there is one effect that is typical for flat design. This effect has become a trend and characteristic feature flata.

We're talking about long shadows now. They have some typical characteristics that make this effect recognizable, namely: a 45-degree tilt and big size(the shadow can be several times longer than the subject itself. As a result, long shadows give the flat some depth effect.

This effect makes the object more three-dimensional, but at the same time keeping it in the context of flat design.

7. Working with fonts

Typography plays a big role in flat design. Often the text becomes the main element of the composition.

Flat designs typically use simple font styles, making the entire design overall clean and readable. You can find many free fonts in Adobe Typekit if you use Adobe products. You'll also find a lot of good free fonts on Font Squirrel. But don't forget to read the license if you intend to use the font for commercial purposes.

Most often in flat design it is customary to use upper case and contrasting colors, this makes the text more legible.

Use fonts sparingly, remembering that they should complement and complement the design rather than appear as a separate element. This doesn't mean you can't use serif or handwritten complex fonts. Just remember to be minimal and keep everything in balance. However, flat still often uses sans-serif fonts, as they look more strict and neat.

8. Pros and cons of Flat design

Even though flat design has become so popular due to its many advantages, there are still some disadvantages that designers face when using this style. Let's look at the pros and cons.

pros

Popularity

Flat design has become a trend, gaining more and more positive reviews from designers and web designers, and it doesn’t seem to be losing its position at all. On the contrary, it is spreading more and more, acquiring some new forms and features, becoming more and more creative.

Simplicity

Flat design is simple, minimalistic and clean. Flat on the web helps users focus on the content rather than being distracted by visuals. This also works for interfaces mobile applications: clean design with big buttons makes use mobile devices perfect.

Brightness

Color is another cool plus in flat design. Bright and rich colors look attractive and clean, and the lack of gradients makes the design stylish. Moreover, such pure colors make it more positive, presentable, flat design creates the right mood.

Flaws

Flat has many more advantages, but no design is perfect, and we cannot idealize it. Here are some disadvantages of flat design that we must mention:

Unresponsiveness

Sometimes the lack of important details or visual effects makes the process of creating a user-friendly interface difficult, and this generally makes the entire design unresponsive. Not all users find flat layout comfortable because it can be difficult to find elements on a web page that you should click on or tap on the screen mobile phone because they are not interactive.

Problems with typography

As mentioned earlier, not every font can be suitable for flat design. Sometimes such a rich font with sharp edges looks really balanced and stylish. However, if the font is chosen incorrectly, it can ruin the entire design. You should have a really good feel for which fonts are suitable for flat and which are not. Lack of experience makes choosing a font very difficult.

Weak visuals

Due to limitations in the use of effects, colors and fonts, flat designs can look too simple and cold. Its minimalism can also be its main drawback - other flat designs end up looking exactly the same as yours. So it's very difficult to make your icons or web pages look different from someone else's design because you're using the same simplified shapes, limited color palettes and similar fonts. As a result, flat design can become boring over time.

9. Future flat design trends

It cannot be said that flat design has fully formed and stopped in its tracks. Perhaps this is because of its shortcomings mentioned above; flat design strives for development and change, acquiring new features and enhancing visual expressiveness.

If you look closely at the last example of flat design, you may notice that it reallygradually away from its strict tools and begins to add subtle effects such as: gradients, shadows, lighting and other visual effects.

These little touches give the flat design some depth without being overly detailed like skeuomorphic designs. These subtle improvements make the flat more responsive and comfortable, and also bring a fresh look, making the flat more flexible and versatile.

Thus, flat does not lose its features, but becomes more interesting and flexible- he's really getting better.

conclusions

Thus, we discussed some facts from the history of flat design, and talked about colors, shapes and typography. We looked at different points of view, focused on the advantages and disadvantages of flat and learned some of the main principles of creating a good design.

I hope you learned for yourself new information from this article or at least found it interesting. You owe it to yourself to try creating a flat design if you haven't done it before.

After all, what else is there to mention about flat design?

If you really like flat with its sharp edges, rich colors and crisp fonts, its cleanliness and minimalism, then go for it!

It's trendy, but like with anything else graphic style, don't limit yourself to just one technique. Just because flat is trendy doesn’t mean you can’t use other styles in your project. Skeuomorphism, with its tiny details and textures, can also become good decision. The main thing is to remember that the design is different for each project, it must express its spirit, purpose, essence, while remaining convenient and functional. Forward!