The evolution of flat design: a dim color palette. Flat design and color palette - SkillsUp - convenient catalog of lessons on design, computer graphics, Photoshop lessons, Photoshop lessons Selection of flat colors

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

“While finding good palettes is easy these days, finding good color combinations for data visualization is still difficult,” Zheng writes. When looking for 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

Firstly, not all palettes are designed for visualization. For example, colors from interface design guidelines (such as Google's Material Design) may not be perceived well by colorblind people and simply differ slightly from each other.

Palettes of four colors from the Color Hunt website

Secondly, many existing palettes don't have enough colors. As an example, she cites the website Color Hunt, where you can find successful combinations four colors. But for infographics you usually need from 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 vary slightly in brightness, so it will be difficult to distinguish them from each other, especially if they are next to each other.

To choose good color combination For infographics, Zheng advises using three rules.

From left to right: the blue palette from material design, it is also in protaponium, 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 whether 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 adapt the palette for colorblind people. You can see how it will be perceived by people with protaponia (reduced sensitivity of red), deuteranopia (reduced sensitivity of green or other colors), and also if it is translated 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 approximately the same,” she writes, noting that the first combination looks more natural than the second. The designer attributes this to the fact that people are accustomed to seeing combinations from the first palette in nature, for example, during sunset.

Mesh for working with gradients

Thirdly, when creating a palette, it is better to use a gradient to better feel the difference in color. To make things easier, Zheng recommends making a grid of flowers in Photoshop, like the one in the screenshot above. Gradients, she says, are effective when choosing two or 12 colors.

Successful palettes for infographics
Successful palettes for infographics

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

Practical tips and tools.

Colors, like everything else, are best used in moderation. You will achieve better results if you use a maximum of three primary colors in your color scheme. The effectiveness of color selection in design is largely based on balance, and the more colors, the more difficult it is to achieve.

Color does not determine the quality of design - it enhances it.

Pierre Bonnard

If you need additional colors beyond what you initially chose for your palette, use tints and shadows. Act within the chosen range.

Rule 60-30-10

This design rule helps you quickly create a color scheme. The proportion 60% + 30% + 10% reflects the balance of colors. This formula works because it creates a sense of balance and allows the eyes to move comfortably from one point to another. Moreover, this technique is extremely easy to use.

60% is your dominant color, 30% is your secondary color and 10% is your accent color.

Meaning of colors

Scientists have studied the psychological effects of certain colors for centuries. Beyond aesthetics, colors create emotions and associations. Depending on the culture and circumstances, the meanings of colors can vary. That's why you see fashion boutiques in black and white. They want to look elegant and noble.

• Red: passion, love, danger
• Blue: calm, responsibility, safety
• Black: mystery, elegance, evil
• White: cleanliness, silence, neatness
• Green: novelty, freshness, nature

You can learn more about the meaning of flowers from Color Culture.

Grayscale first

We like to play with colors and tones in the early stages of design development, but this behavior can quickly let you down - you can spend 3 hours choosing a main color, and then change your mind anyway... It's certainly tempting, but not particularly effective.

Instead, force yourself to work on structure—the spacing and placement of elements in your layout. This will save a lot of time. This work is very productive. On the other hand, it doesn't have to be boring. Test different shades if you want to achieve something pleasing appearance.

Avoid pure gray and black

One of the most important color tricks I've ever seen is to avoid gray colors without saturation. IN real life There are no pure shades of gray. The same goes for blacks.

Remember, you always need to add a little saturation to the color. Subconsciously it will be perceived more naturally and close to users.

Believe in nature

The best color combinations have already been invented by nature. They always look natural. The best thing is to simply observe the surrounding nature and extract palettes from there for your designs; in nature they always change.

To get inspired, you just need to look around

Maintain Contrast

Some colors go well together, and some don't at all. There are defining rules for the interaction of shades that are best demonstrated color circle. You should be aware of these methods, but you don't have to use them manually.

Get inspired

When it comes to finding UI examples, dribbble is one of the best best places for this. It has a tool to search by color. So if you need to conduct a visual research on the use of a specific color by other designers, go to

Video, printed design, interior design, fashion... there are simply tons of places to get inspiration from. Save interesting finds for future ideas.

I often like to steal colors from KPOP music videos. They are luxurious.

Tools

To make things easier for myself, I will give a few the best tools to select color palettes. They will save a lot of your time.

Hands down my favorite tool for choosing colors. You can simply select one color and generate a palette by pressing the space bar. Coolors allows you to upload an image and create a palette from it. You are not limited to one result - the selector allows you to change the original reference point.

Cooler

This tool from Adobe is already for a long time helps designers out. It works in the browser, and there is also a desktop version. If you are using the desktop version, you can export the color scheme to Photoshop.

It is similar to Kuler, the difference is that you are not limited to 5 shades. Great if you have your primary colors and want to play around with additional shades.

Designspiration.net

Imagine you have an idea for a color palette, but need to visually compare different variants. Designispiration is ideal for these purposes. You choose up to 5 colors, look for images that match your shades. The service not only successfully searches for images in a given palette, but also helps you select the right graphics for integration into the design.

You may ask - what if I want to search for a photo in the selected color? Shutterstock has a tool called Spectrum where you can find photos of a specific shade. You don't even need a subscription for this, because preview images with a watermark will be quite enough to generate the palette.

Tineye Multicolr

But if you need to find a photo based on several specified colors, or even set a specific amount of each shade, then use Tineye. This site uses a database of 10 million Creative Commons images from Flickr.

Final thoughts

Color is a very difficult resource to master, especially in the era of digital design. The tips I've shared in this post will make it easier to find the right shades. The best way to learn how to create stunning color schemes is through practice, so play around with colors a lot.

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 elements interface 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 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 operating system Windows 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 has 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 instructions for creating various design objects: 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 are based on pixels.

As for the Adobe Illustrator program, it uses vector graphics consisting of curves and lines called vectors, which are specified 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, 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 the 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're a UI designer and have a good understanding of color palettes, you're experimenting with color panel in Photoshop 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 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, many free space- that’s why flat 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, making 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 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 feedback\ from designers and web designers, and it doesn’t seem at all like it’s losing its position. 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 large 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 and 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 absence 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 feel comfortable with flat because it can be difficult to find elements on a web page that you need to click 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 that you gained 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 as with any 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!

Flat design is one of the trends in web design that remains relevant for a surprisingly long time. Over the past few years, this design has been actively used in the development of interfaces for desktop, web and mobile applications. Flat design is also actively used when creating printed graphic materials. You can learn more facts about flat design in this online guide. Today, the topic of our conversation will not be flat design as a whole, but its specific part - flat colors.

Flat design got its name for a reason: its concept excludes the use of three-dimensional elements, deep shadows and bright gradients (in English “flat” means “flat”). Buttons, icons and other graphical elements look simplified and clear, but still attractive.

Developing a flat website design is not so easy. The main difficulties arise with interactive elements, because the design must emphasize the difference between static and dynamic content. The only way to tell users which elements are interactive is to use subtle shadows and borders. Therefore, to create a “balanced” flat layout, you need to think through every element to the smallest detail, and this is not an easy task.

Selecting flat colors for the color scheme

The importance of colors in web design cannot be overestimated. For example, a successful one can attract more readers. It’s worth saying right away that flat design is unique in all matters relating to color. The bright colors of the flat design immediately capture the attention of users. Unlike traditional color schemes, consisting of two or three shades, flat layout designs are made in four or more colors. Very often these are rich shades combined with gray or black.

Traditional rules of color combinations can hardly be applied to flat design. In flat design, it is not the combination of the colors themselves that is important, but their tone and saturation. Despite the fact that in the design of one layout you can use several absolutely different colors, they must be combined in depth. Flat colors themselves can be either primary or secondary. It could even be a contrasting combination of white and black.

Moving from theory to practice, I would like to tell you about a set of flat colors from W3.CSS. This collection contains various color schemes for creating websites. Here you will find colors for material design, flat colors, Windows metro colors and Windows phone 8. This collection is accompanied by code examples in HTML and CSS so that you can quickly apply the selected combination.

If you are a complete beginner and don't know where to start, visit Flat UI Colors. On this site you can copy the color you like, and then find it in the graphic editor by inserting the appropriate value. As you can see, the selection is dominated by bright shades- from green and blue to yellow and orange.

However, even with flat design there are limitations to the colors you can choose from. For example, you are unlikely to see a combination of red, yellow and blue flowers in one layout. Designers prefer richer and more mixed shades.

Do you want to develop a flat website design? Pay attention to the MotoCMS 3.0 templates, created taking into account the principles of flat design. We compared the templates with various examples of flat color schemes to show how they affect the properties of the user interface.

Bright colors. Vibrant blues, greens and purples stand out against white or black backgrounds. These colors are often used in flat website design.

MotoCMS 3.0 template for printing services website

MotoCMS 3.0 template for printing services website - perfect solution for a project related to printing and printing. However, the theme of the template can be easily changed. The template design is developed taking into account the principles of flat design. Users are offered 8 options for sliders and galleries, along with 20 widgets and modules. All this will help you create a popular and original online project.

Retro colors. These are often pastel oranges and yellows combined with bright reds and blues. Most often the primary flat colors are retro style combined with secondary ones - this makes it easier to achieve a mixing effect.

A trend such as flat design is in constant development - new sites are appearing where flat elements are actively used. Flat design was recently associated with bright colors, but Lately You may notice that many designers have begun to give preference to calmer shades, using a lightened or muted color palette. 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 the main elements.

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

Bright colors attract attention, they catch the eye, but they must be used carefully in 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 create a new shade, you can add white to the original color. The lightened shade is perceived as lighter; such colors are sometimes called pastel. The saturation of shades can vary from almost white to a shade that is only slightly lighter than the original color. Websites with a design that uses 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 not always necessary to use bright colors - there are a huge number of topics where a lightened palette is more than appropriate. Light shades go well with photographs, as they do not distract the user’s attention from viewing the main content.

If you look at the Jack Horner fast food restaurant's website, you'll notice that the subtle pale yellow hue contrasts sharply with the black design elements. This is how the designer tries to convey to users the main feature of the restaurant, which offers visitors traditional dishes prepared according to old recipes. The slight retro reference here fits well with the eco-theme that the company promotes.

Light shades are also available on the website www.caketeacher.com, where you can find many useful tips for making cakes at home. The shades here are a little brighter than on the Jack Horner site, but they do not prevent the user from focusing on the photos located in the center. The contrast of muted tones with bright elements helps the user focus on viewing the main content - recipes, tips and tricks. In addition, the subtle color scheme helps remove some of the negative perception that may arise from a visitor who at some point discovers that in order to access all the content on the site, he will have to sign up for an $18.90 per month subscription.

DARK SHADES

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

Dark shades give the design solidity without distracting attention. On the site you can purchase 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 Mexican artist Frida Kahlo. These are muted yellow, ocher and green shades. The designer was faced with the task of expressing main idea cafe owners - a return to simple and affordable cuisine. At Café Frida, visitors can taste freshly brewed coffee with a very rich taste, which is emphasized by the soft shades used in the design.

CONCLUSION

Whether or not to use soft shades in 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 that you can’t do without such shades when creating a flat style design. There is always room for experimentation and if bright colors work better, then use them. But if you need to create a certain atmosphere on the site, then you can’t do without halftones. Dim colors fit perfectly with a wide variety of content, allowing you to more accurately place accents and focus the user’s attention on the most important thing.