UI design Trends: The gradual return to the mainstream of the gradient design style

Source: Internet
Author: User

At the very beginning of the flat design, the gradient was a design that designers avoided, but today it has officially returned. Almost overnight, countless sites began to use gradients.

From the background to the color overlay on the picture, including the color obscured by the UI elements, all of this indicates that the gradient has returned in a subtle way. However, unlike the gradients we have seen in the past, the re-regression of the gradient design has different skills and features, more in touch with the style and needs of the times. If you want to use it, learn about the "new" gradient design from today's design examples.

The leader of the trend

Earlier this year, Spotify began using a large number of double-toned designs on its own website to bring the two-tone trend together. If you look closely at Spotify's page you will find that the color is actually a light and shade, tonal gradient effect.

Other well-known brands are also beginning to gradually return to the design to incorporate the gradual color. and online e-magazine supplier texture simply used a full-screen gradient color design.

The re-popular "new" gradient design is not the only case. More Web sites with similar gradient designs have sprung up, and the types are no longer confined to feature pages, from product displays to e-commerce websites.

Now the popular gradient design does not have any special specifications, or rules, it can be a variety of different color brackets your add, can be from the central to the surrounding radiation, can be from the top to the bottom of the natural changes, but also from the corner radiation to other locations, it can be the main vision of the design exists, It can also be one of many features.

The most real point of the gradient is that designers can easily navigate, the use of categories do not adhere to the moment, the freedom to use the same can create a very good effect.

Flat color Matching and gradients

The regression of the gradient color match happens to be in the flattening of the road today, so it inevitably with a lot of flat elements together, and one of the most important factors to consider is color. Some of the most daring, span-wide, gradient-changing designs simply "borrow" the color from the flat color palette.

The use of these colors has made the color gradient more consistent with today's Web site's modern wind, and appears more in line with the trend. Blending the design of the gradient with the aesthetic features of the flat design, or adding some soft color combinations to the material style interface, can bring good results.

The use of gradients is a good addition to other design trends, and the buffering effect of the gradient itself makes it unnecessary to re-design even if you want to redesign it.

The addition of two tones

A two-color gradient is an important part of a gradient design. The combination of the two-color gradient with other design trends is tension pile, which is worth emphasizing.

The only disadvantage of the duotone gradient is ... It's too much to be used. If you pay attention, you will find that there are a lot of Web sites using a two-color gradient as the background or the main visual module, there seems to be no two-color collocation no one used. Blue-green and orange are the most used.

Use caution when using this trend, as it is really easy to "hit the shirt" with other websites.

Gradient background image

The regression of the gradient allows us to see many background images with depth of field or depth again. The popularity of virtual reality allows more and more designers to try more realistic, more stereoscopic web design, no doubt, you will see more such design in the future.

Flat design is really fashionable and easier to accept, but it lacks the realistic texture of the elements is also an indisputable test. Imagine the nature of the elements that give people the feeling and experience. The use of gradients is a good way to ease this situation, after all, in nature there are very few special purely unique colors.

It is not difficult to imagine that the concepts and rules behind the gradient and shadows are interlinked. They create depth and level of design.

Gradient overlay on a picture

As a design trend, the overlay of colors on the picture has been popular for quite some time. And from the picture of the monochrome color overlay, to the gradient of the overlay, is a fairly natural "derivation" process.

Adding a gradient color overlay to the background and head of the page can make them feel more integrated, allowing the user to notice other more important, critical elements that enhance the readability of the page. This design is especially important for large graphs.

The trick to overlay the gradient on the picture is to balance the relationship between the color and the picture. Does the hue match the meaning of the picture? Can I see the details in the picture after overlay? The results of different color combinations may be diametrically opposed.

Subtle gradients with UI elements

Unlike the popular practice of gradient colors, some designers choose to use subtle gradients in UI elements. In smaller UI elements, color changes are more subtle and are usually used in single tones.

This design is quite common in the early iOS systems, but it's rare to see it now.

It is undeniable that the gradient is better suited to the larger elements. When used on smaller elements such as small icons, small buttons, and other controls, the color gradient is not so easy to see or even distracting to the user.

However, no matter under what circumstances the use of the gradient design, do not let users stop to feel the "wow good gradient" effect, so it is distracting. Gradients are used to enhance the user experience, rather than seduce users to focus on design aesthetics.

Conclusion
Frankly speaking, when the gradient was dismiss "outdated design", I was quite sad. That's why it's so exciting to see the gradient design return today.

As one of the most common and basic techniques in design, the gradient design should persist. Go

You can also take a look at this design style: http://www.uipower.com/index.php?m=content&c=index&a=lists&catid=11

UI design Trends: The gradual return to the mainstream of the gradient design style

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.