Flat design and color scheme Flat UI and flatui

Flat design and color scheme Flat UI and flatui

This article will show many cool examples and even provide a free user interface toolkit for you to download and use. But if you are yourself, what are you going to do? Color is the most important part of the flat trend.

Flat design training

A flat design can be understood as a design scheme created with simple effects or without special effects. It does not contain 3d attributes. Special effects such as projection, slope, relief, and gradient should not be used in design.

The flat design is usually very simple, even if it can be very complicated. Simple, direct, and friendly features make it widely favored by mobile interfaces and fashion website designs.

For more information about flat design trends, see the previous article. Share the best UI front-end framework!

Define a palette

When it comes to color, flat design will use a lot, but designers usually choose bold and bright to use. How to Use colors to make the design different? Designers open the color palette. In most cases, they choose bright and high saturation, and occasionally use gray or black. Many traditional color schemes, including the rainbow palette, are thrown out of the window.

In the final analysis, it is the matching of tone and saturation. Although designers can have a lot of options in terms of tone, they usually start to choose the image color depth. It is either a combination of primary or secondary colors, or another part of the color disk, including more black and white blends.

People will think of high saturation, bright, retro, or monochrome blocks as soon as a flat design scheme is proposed. This is not to say that this is the only choice, but the development trend makes them more popular.

Bright colors

The bright colors make a difference for the flat design. Because it can obtain a good contrast in both bright background and dark background to attract users' attention. This is why it becomes the trend of flat design colors. Share the best UI front-end framework!

Where to start?

The FlatUIColors.com website has many popular flat designs and is a good choice for the project. Whether it's bright blue, green, yellow, or orange, you can find the epitome of POP colors. The most important thing about this website is that you can select and download the color value locally for free. (Personally, I have a special liking for the gray tone .)

Designmodo has further integrated the highlighted design outline into the recently released Flat UI Free kit, including Flat design, popular icons, and color palette (which is awesome for new color lovers ), in addition, the interface is easier to use.

The use of strict primary colors in the design is not common, such as pure red, pure blue, pure yellow, generally used in mixed colors. If you want to make your own color scheme, please note that it is concise. Remember to choose a similar tone and saturation. Of course, we can also adopt our suggestions.

Bright color:You can try to combine or mix these colors. They are good at both white and black backgrounds.

Popular ones include:Blue, green, and purple.

Compound colors

Compound colors are also a popular scheme in flat design.

These unsaturated colors based on bright colors, coupled with the contrast of white content, look softer. Is there a sense of old campus. The retro color scheme usually contains a lot of orange and yellow colors, occasionally red and blue.

Compound colors are commonly used in primary and secondary colors because they are soothing. Share the best UI front-end framework!

Retro colors:This type of color is suitable for appear as the main color element, with a pattern or soft color, the best effect.

Popular ones include:Orange, peach, plum and dark blue.

Single Color

The single-color solution is becoming increasingly popular. It relies on a single color of black and white to create a new color.

Most single-color schemes use one basic color with two or three other colors. The most popular color is blue, but some designers use black (or gray) as the base color, with red representing the button or action. Another approach is to use different colors. For example, you can add a green button to create a blue-green solution.

At the same time, the single color scheme is also very popular in mobile and App design. Share the best UI front-end framework!

Single Color:Like other color schemes, you can adjust the contrast to obtain many different colors based on the parent color. For example, if the original color contrast is 100%, you can see what it looks like after being adjusted to 50%, 20%, and 8%.

Popular ones include:Blue, gray, and green.

Conclusion

In fact, the reason why the flat design is on fire is: this concept is new and interesting. You can understand this in the project.

A color solution that matches the project can help users better use the website. This is a cool thing. Now, go beyond the limitations of traditional color schemes to create a more comfortable and flat color solution.

Download Flat UI Free or use the existing color scheme to start your project.

Flat design flat ui design

Flat icon design: huaban.com/boards/3454374/
Download flat ICON resources: www.bluesdesign.cn/

What is Flat Design )? Is flat design a trend in the future?

I have carefully explored this question recently and think that my original answer has a relatively large problem. @ Zixun's opinion in the comment area is correct. This is a visual style issue. Please do not agree with this answer. ---- The embossed effect is exactly the common means of quasi-materialized design (Skeuomorphism UI. The essence of the Flat UI is to try not to use metaphor. The essence of the Skeuomorphism UI is to use metaphor as much as possible, and the two are opposite from the starting point. The representative of Flat UI: Metro, represented by Skeuomorphism UI with as few as possible but sufficient graphical and color metaphor as possible: apple's official app design uses as few text information as possible, coupled with a wide range of visual metaphor. This contradiction stems from the design of the electric display interface itself: in very limited use and observation scenarios, complete the most complex Functional Significance transfer in history. Therefore, in order to achieve a "accessibility awareness", early Designers used the "metaphor" method in a large amount. For example, the "Relief Effect" mentioned by digoal is an example. This type of technique is not frequently used in industrial design and graphic design. However, "metaphor" has its limitations. After all, it is a ing set. When the connotation of a function is rich enough to feel the built-in meaning with the help of reality, metaphor becomes a hindrance to design. In this regard, the professional icon designers will feel deeply. For example, a display size of 64*64 has a total of 4096 pixels. In the four thousand-plus-point array, we can use gears to represent "Settings", and use a clock silhouette to add gears to represent "Set Time". When the functions are complex, to set a get up time, you need to add an additional ZZZzzz... to express the metaphor, the function continues to be complicated. How about adding a humanoid portrait when you want to set a time to get up for someone? You will find that in such a small dot matrix array, loading the four design elements "Settings, time, ZZZ, and humanoid portraits" will look so bloated that lines are staggered, the characteristics of each element cannot be understood at all, so such a design is not a good design. Under a certain display size, the superposition of design elements and the use of design metaphor are limited. Of course, the necessary functional keywords and metaphor can be reduced through function dismantling and Information Architecture restructuring, but these efforts cannot avoid the upper limit. Now, as the app continues to innovate, the use of design metaphor is gradually approaching this upper limit. So what Flat UI does now, apart from streamlining some flashy surface decorations, is at the core of streamlining design metaphor. Reference several graph descriptions. Figure 1 is a typical Skeuomorphism UI with a crystal feel ...... (IOS comes with a calculator) Figure 2 shows the Skeuomorphism UI that looks like the Flat UI, but it only looks Flat and removes most of the crystal sensation, there are still a lot of metaphors (pages of Calcbot appannie.com). (There are different comments in the comments area. You can see the comments of @ zi .) Figure 3 can be seen as an extreme and true Flat UI. There are only a few essential metaphors. Apart from the input keyboard, the rest of the interfaces are Flatten from appearance to Bones ...... (Soulver appannie.com's page) removing the "stereoscopy" brought about by highlights, shadows, and relief is a preliminary Flatten. Higher Flatten has not been widely used in the public field, however, it has been accumulated for a long time in industries that emphasize practicality in the military and finance sectors. In addition, although iron Xia's operation UI belongs to fake UI, it will be another form of Flatten. I believe that with the complex evolution of various electronic device functions, sooner or later, UI design will no longer be limited to Skeuomorphism UI and Flat UI competition, the final essence of S-UI will suck into the F-UI. This is unrelated to the Design Trend and only related to functions and practicality. -- In addition, it is too controversial to translate Flat UI into "Flat", because those who look at it easily correspond to the pure "scissors... the rest of the article>