UI training How to design a minimalist tri-color icon

In the UI training session, I learned that in UI design, the markers design is a different kind of minimalist style, which is more subtle and interesting. Color matching is the eternal topic in the design, in my opinion, simplicity is the essence of design.

Banana Bird

When the UI training is just received, the general will be from monochrome, or two-color structure to teach, such as the banana bird icon, so simple, but also clearly embodies the content of the icon.

KZ

However, many designers believe that the color of three colors is the most balanced and the most beautiful, multi-color appears too much, less color and too simple, which is why many of the composition of colour schemes for more than 3 kinds of color. such as millet packaging design, are based on simple and generous. What would happen if this color aesthetics were applied to the smallest UI design elements? This is the case that is often explored in UI training: three-color icon design.

Random Icons by Nick Slater

Three colors can make the web has a luxurious visual effect, but also allows the minimalist icon with delicate and delicate features, warm and dense texture, the best embodiment of the advantages of color itself. Next to the color of the outstanding and famous icon design scheme by the Fun UI training recommended reference learning;

WP Cafédel Museo icons by Israel Ortiz

Light yellow is used as the background, red is used as the main color of the icon design, while the green color with the red together, play the role of auxiliary and embellishment. Designed as a food-themed icon, Red is an appetizing, green eye-catching and natural, perfect match.

Material: Http://pan.baidu.com/s/1bn9bIqF

Four-pack by Sebastian Abboud

White outlines the outline of the icon, while the deep brown and black combine with a different aesthetic, rich in detail and temperature.

Small business Club Icons by Andrew Ronaldson

The design of this set of icons makes full use of the rounded curve, black form the outline, red light the entire design, while white creates negative space, design complementary and pleasing.

Nationwide Illustrations by Tomomi Sohn

The highlight of this set of icons is the selection of shades of blue, which are not only used as a foil and create a sense of space for the icons, but the black lines are used to outline the contours without distracting them.

freebies–42 Flat IOS Icon Set by Hevngrafix Design

In view of the need to present complex content, this set of icon design, some use three colors, some use four colors, but the use of color is very uniform, mainly orange, white and green. Each icon has smooth edges and shadows, and the simple design creates a 3D texture with unlimited potential.

Icons by Meg Lewis

The design of this group of icons is also more attractive, yellow black is a classic color, the use of this set of icon design is also very good, the flexible use of geometric outlines to make the icon glow with a delicate texture.

Rockstar Onesie by Alyssa Welch

The design of this set of icons is also professional enough, the black part outlines the outline, white fills the space, the orange complements the detail to brighten the color.

Night Mode Icon Set by Jinglu Li

The design of this night mode icon is unique, dark blue and yellow is not only the color wheel of the classic color, and here yellow is also very occasional as a highlight, applied to the visual elements of the icon, a very exciting design.

Food allergens Icons by Tunde Szentes

This set of food-related icons designed to create a natural atmosphere, the color of the selection is clearly considered after the results of the round, the color depth adjustment in place.

Conclusion

The three-color icon design is very interesting, do good icons have not only stuck in the role of icons, many can already play a more important role in the page illustration. The combination of three colors makes the entire UI design three-dimensional, with a solid structure beyond monochrome and wonderful effects, giving the page a more powerful force.

More UI training articles-mobile app design foreign resources

Every day a little bit of UI training, a little bit more experience every day.

Find an online UI design training facility and find the Fun UI training academy.

Original from: Excellent set

UI Design

UI training How to design a minimalist tri-color icon