The evolution of flat design: a soft color palette. The designer gave advice on choosing a palette for infographics Flat design - preparation

Such a trend as flat design is in constant development - new sites are appearing where flat elements are actively used. Flat design has recently been associated with bright colors, but recently you can see that many designers have begun to prefer calmer shades, using brightened or muted color palettes. Experimenting with a combination of different shades allows you to make the design more fashionable and modern and stand out from other sites with a similar arrangement of basic elements.

Using a muted color palette can also help if bright colours clash with the main gamut of the site. In some cases, too flashy shades can irritate users, which is not good for the site. A calm color scheme, on the contrary, fits very well with the flat design aesthetic, as it allows you to create a visual hierarchy, highlighting the most important elements.

Bright colors attract attention, they catch the eye, but you need to use them carefully in the design, otherwise there is a risk of confusing the user, whose attention will jump from one element to another. By lightening some of the original colors, you can push some parts of the design into the background, while maintaining the main color scheme site.

LIGHT SHADES

To instruct new shade, you can add white to the original color. A lightened shade is perceived as lighter, such colors are sometimes also called pastels. Saturation of shades can vary from almost white to a shade that is only slightly lighter than the original color. Sites with designs that use a lighter palette are perceived as lighter and "softer" and very often allow the designer's intent to be fully realized. After all, it is far from always necessary to use bright colors - there are great amount those where the clarified gamma is more than appropriate. Light shades go well with photos, as they do not distract the user's attention from viewing the main content.

If you look at the Jack Horner fast food restaurant website, the subtle pale yellow hue contrasts sharply with the black design elements. So the designer is trying to convey to users the main "trick" of the restaurant, which offers visitors traditional dishes prepared according to old recipes. A slight retro reference here fits well with the eco-theme that the company is promoting.

Light shades are also present on the site www.caketeacher.com, where you can find many useful tips for making cakes at home. The hues here are slightly brighter than on Jack Horner's website, but they don't interfere with the user's focus on the centered photos. The contrast of muted tones with bright elements helps the user to focus on viewing the main content - recipes, tips and tricks. In addition, the light color scheme helps to remove some of the negative perception that a visitor may have, who at some point will find that in order to access all the content on the site, he will have to subscribe to $ 18.90 per month.

DARK SHADES

Dark shades are obtained by adding black to the base color. The color scheme becomes more strict and heavy. dirty, dark shades work well if you need to create the right atmosphere on the site. Looks good muted color palette on commercial websites, such as the Ann Taylor website.

Dark shades give the design solidity and at the same time do not distract attention. On the site you can buy clothes and various accessories that allow a woman to feel comfortable throughout the day. Things from Ann Taylor are casual clothes, comfortable and cozy, which is emphasized by the color scheme. But if the company were a pretentious glamorous brand, it would hardly be possible to do without the use of bright flashy tones.

The design of the Frida Cafe website uses a color scheme that was often used by the Mexican artist Frida Kahlo. These are muted yellow, ocher and green shades. The designer was tasked with expressing main idea cafe owners – a return to simple and affordable kitchen. At the Frida Cafe, visitors can taste freshly brewed coffee with a very rich taste, which is emphasized by the soft colors used in the design.

CONCLUSION

Whether or not to use soft shades in the design depends on the situation. In some cases they will be more than appropriate, in others they will not. The fact that soft color palettes are in fashion today does not mean at all that you can’t do without such shades when creating a design in the flat style. There is always room for experimentation and if bright colors work better then use them. But if you want to create a certain atmosphere on the site, then you can’t do without halftones. Soft colors go well with a wide variety of content, allowing you to more accurately place accents and focus the user's attention on the most important thing.

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

Today we will understand what flat design is, how it comes about and what you need to create a clean, bright and responsive design.

you can find good examples flat design at http://market.envato.com/. There are plenty of layouts, icons and templates to give you a clear idea of ​​what modern design looks like. .

1. What is flat design?

Flat design - modern style user interface, and 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 versus skeuomorphism( Skeuomorphism is a design principle when one product is given the appearance of another, i.e. when various elements interfaces 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 keep the user focused on the content without being distracted by the visuals. The flat design emphasizes the simplicity of the elements while making the interface more responsive, pleasant and easy to use.

2. A bit of history

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

Flat-design, in the form in which we see it now, began to gain popularity after Microsoft began to produce products in the so-called metro-style. Metro is a UI design from Microsoft that impresses with 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 early products. Microsoft (Zune). Later, inspired by the success, Microsoft released the operating system Windows system 8, based on the same Metro flat style.

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

Shortly thereafter, Google also began using the flat style in their apps 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 instructions for creating various design objects: icons, layouts, and so on.

Since that time, 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 flat design from firms, without which it is difficult to imagine modern world technologies:

Microsoft's Metro design

Apple iOS 7 design

Google's Material Design

3. Remember cleanliness

Flat design is apparently labeled as “flat” due to the lack of 3D elements and realistic effects such as: gradients, textures, highlights, midtones, 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 a silhouette or contours of an object is used, i.e. just enough to make the object recognizable, but not to overload it with minor details.

Minimalism has become a global trend these days: the simplicity of shapes and the use of sharp edges create a clean and pleasing design. simple shapes more understandable and easier to understand. This keeps the design minimalistic, clean, and prevents it from getting a busy, messy look.

4. Perfect

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 are based on pixels.

Concerning Adobe software Illustrator, it uses vector graphics made up of curves and lines called vectors, which are defined by mathematical formulas.

Once upon a time, Adobe Illustrator was not a particularly convenient program for creating pixel-perfect graphics. The good news is that latest versions Illustrator has become a great tool for creating good graphics.

I must say that vector graphics mostly involve working with simple, flat shapes, solid colors and grids. Adobe Illustrator is very flexible and allows you to adapt the grid to your needs, align objects and use Various types snapping. As a result, the process of creating perfect design, which will look clean and stylish on any display, has become lighter. If you want to learn how to create perfect graphics, then you should read the article: How to create pixel perfect artwork using Adobe Illustrator .

5. Color

One of the more specific features of flat design, aside from shadows, is the use of color. Most of the colors that flat design uses in their elements consist of just a few basic colors.

Color in flat design is distinguished by brightness, saturation, juiciness.The flat color scheme is not limited to a few special colors. They contain many shades, and their choice depends only on what you are depicting, whether they are icons of sweets or retro-style objects in a sophisticated retro palette.

Let's say you're a UI designer and you're good with color palettes, you're experimenting with color panel in Photoshop and Illustrator, mixing colors as you please. However, this process is quite complicated 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 kinds of designs and illustrations, not just flat designs. For example, Adobe Color CC, better known as Cooler. Today there is access to it, both through the website and directly through Adobe products. The cooler is a very flexible tool that allows you to either create your own color palette or choose from custom palettes from the library.

Another simple and handy 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 can be useful. However, there is one tool made specifically for flat design. FlatUIColors.com by Designmodo is a service with a set of “flat” colors, very convenient to work with. This site has become very popular among designers looking for good color solutions for the perfect design. Try it!

And you can find more variety of colors and palettes in Google's Material Design Guide.

6. Long shadows

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

We are now talking about long shadows. They have some typical characteristics that make this effect recognizable, namely: 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 effect of depth.

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

7. Working with fonts

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

Flat usually uses simple font styles that make the whole design clean and readable. You can find many free fonts in Adobe Typekit if you use Adobe products. You can also find many good free fonts on Font Squirrel. But don't forget to read the license if you're going to use the font for commercial purposes.

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

Use fonts with care, remembering that it should emphasize and fit the design, and not look like a separate element. This does not mean that you cannot use serif fonts or cursive complex fonts. Just remember to be minimalistic and keep everything in balance. However, flat still uses sans-serif fonts more often, 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, collecting more and more positive feedback\ from designers and web designers, and it does not seem at all that he is losing ground. On the contrary, it is spreading more and more, acquiring some new forms and features, becoming more and more creative.

Simplicity

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

Brightness

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

disadvantages

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

Unresponsiveness

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

Problems with typography

As mentioned earlier, not every font can suit flat design. Sometimes such a rich font with sharp edges looks really balanced and stylish. However, in the event that the font is chosen incorrectly, this can destroy the entire design. You have to 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 may look too simple and cold. Its minimalism can also be its main drawback - other flat designs end up looking exactly like 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 is fully formed and stopped in its own way. Maybe it is because of its shortcomings mentioned above, flat tends to develop and change, acquire new features and enhance visual expressiveness.

If you look carefully at the last example of flat design, you can see that it really isgradually from his rigorous tools and begins to add subtle effects such as gradients, shadows, lighting and other visual effects.

These little touches give flat designs some depth without being overly detailed like skeuomorphic designs do. These minor improvements make flat more responsive and comfortable, as well as a fresh look, making flat more flexible and versatile.

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

findings

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, dwelled on the advantages and disadvantages of flat, and learned some of the main principles for creating good design.

I hope you have learned something new from this article, or at least found it interesting. You should try flat design if you haven't done it before.

After all, what else should be mentioned about flat design?

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

It's on trend, but as with any other graphic style, don't limit yourself to one technique. If flat is in trend, this does not mean that you cannot use other styles in your project. Skeuomorphism with its tiny details and textures can also become good decision. Most importantly, remember that the design is different for each project, it must express its spirit, purpose, essence, while remaining convenient and functional. Forward!

A post with some tips and principles for choosing the best palettes for infographics.

"If you find nice palettes It's easy these days, finding the right combination of colors to visualize data is still difficult,” writes Zheng. In finding colors for infographics, she identifies three main challenges.

Flat UI Colors Palette
Flat UI Colors palette in protaponia
Flat UI Colors palette in black and white

First, not all palettes are meant to be rendered. For example, colors from interface design guidelines (such as Google's Material Design) may not be perceived well by colorblind people and simply look slightly different from each other.

Four color palettes from Color Hunt

Secondly, there are not enough colors in many existing palettes. As an example, she cites the Color Hunt website, where you can find successful combinations four colors. But infographics usually need 6 to 12 colors.

Gradient palettes from the Color Hunt site, the colors of which will be difficult to distinguish on infographics
The difference between a gradient palette of four colors and 12

Thirdly, the colors of some palettes differ slightly in brightness, so it will be difficult to distinguish them from each other, especially if they are side by side.

To choose good color combination for infographics, Zheng recommends using three rules.

From left to right: a palette of blue from material design, it is also in protaponia, it is also in black and white
The ratio of brightness and color for colorblind people and people with normal vision

First, you need to check if the colors from the palette have a sufficiently strong difference in brightness. “The difference in brightness will be universal,” writes the designer. Also, a large difference in brightness will help to adapt the palette for color blind people. You can see how it will be perceived by people with protaponia (reduced sensitivity to red), deuteranopia (reduced sensitivity to green or other colors), and also if you translate it into black and white.

Secondly, it is better to use natural combinations for the palette. As an example, Zheng cites the transition from light yellow to dark purple and from light purple to dark yellow. “From a purely mathematical point of view, they should look about the same,” she writes, noting that the first combination looks more natural than the second. The designer attributes this to the fact that a person is used to seeing combinations from the first palette in nature, for example, during sunset.

Mesh for working with gradients

Thirdly, when forming a palette, it is better to use a gradient in order to better feel the difference in color. To make things easier, Zheng suggests making a grid of colors in Photoshop like the one in the screenshot above. Gradients, she assures, are effective when choosing both two and 12 colors.

Lucky palettes for infographics
Lucky palettes for infographics

The designer also advised 12 useful resources to work with color and palettes. You can see their list