At the dawn of a new era in flat design, a technology that designers shunned is making a comeback. Almost overnight, gradients are popping up in every web design.
From background images to image tagging to even the nuances of user interface elements, two-tone effects are making a big comeback. Of course, it’s a little different, but here’s what you need to know before you start using gradients again (and lots of examples to get your creativity going).
A swimmer leading the way
Earlier this year, Spotify pioneered the two-tone design trend, with two-tone masks almost becoming the visual symbol of its brand. If you look at it, Spotify uses two-tone tones with a distinct gradient, which balances out bright pop colors and sometimes shades by using monochrome.
Many other big brands are also going back to gradients to get their message across. Texture, the online magazine provider, uses full-screen gradients in its design.
But these are not all examples of the return of gradients to design. They are popping up in everything from retail to collections.
There are no hard and fast rules for using gradients. They may include multicolor gradients, center gradients, diagonal gradients, or vertical gradients. In a presentation or a simple project, gradients can be the main visual element.
What’s really cool is that designers use gradients in different ways, and they look really cool.
Gradient flat color matching
While gradient was applied in the era of flat design, its return combines a lot of flat elements, especially color. In some of the most iconic and daring design cases, color gradients are “borrowed” directly from graphic design color schemes.
The use of these colors gives the gradient a modern feel and looks in line with other web design trends. You can also mix and match this color style with a graphic art style gradient, add a gradient to the user interface of material design, or even try adding a soft color combo scene in the background of a small project.
The beauty of color choice is that it really complements other trends, making it easier to rework parts of the design without completely abandoning the existing aesthetic.
Two-tone is very trendy
A two-color gradient is a good idea. This is a gradient that blends in with current trends, and it works very well.
The downside of the two-tone concept is that it’s kind of… It’s used up. It feels as if all design schools are playing with the same gradient pattern with different colors. (And most of the colors are blues and greens)
There is a need to pay attention to the fashion trend, that is: let him for your use, make your characteristics. Don’t copy what others have already used.
Use a gradient background image
Thanks to the popularity of gradient design, deep backgrounds are back and likely to stay popular, thanks to VR, as more websites and designers try to incorporate more realism and 3d into their designs.
Nowadays, beautiful flat designs are becoming more and more popular. These designs give a feeling of simplicity and comfort, but their main drawback is the lack of authenticity. In your spare time, look around, get close to nature, and look at the sky. You’re likely to see gradients — blues, reds, yellows, and purples.
In fact, gradient and projection are concepts that add depth and authenticity to the design. (So if you want this effect, use it simply and subtly.)
Use gradient overlay images
Image designs with color overlay have been popular for some time now, so the switch from monochrome overlay to gradient overlay is no surprise.
This is a great choice for large graphics, such as key headers that help the user focus on important design elements and allow space for text input or behavior guidance to make it more readable.
The method of superimposing gradients on an image creates a certain balance between the image and the color. Does the hue match the meaning of the picture? Can you always see and understand the story clearly? These elements need to be combined in a very clever way in order to preserve the integrity and overall information of the image.
Small gradients in UI elements
Some designers add gradients to user interface elements that are different from some of the other popular gradients. These gradients tend to be small gradients with a single color.
In the early days of Apple’s IOS, it was a mainstream style, but not much loved by the public. Without a doubt, using this gradient looks better for larger elements. For some designs like small ICONS, such small gradients can be hard to recognize and can even distract the user. However, in a large space, such small gradients can catch the reader’s eye and direct attention to the action or a few oversized buttons.
With every gradient, the user should not look at a gradient and stop and think, “Wow, that’s a cool gradient.” Gradients should be ignored to some extent. Gradients are used to enhance the user experience, not to keep the user’s attention on aesthetic form, unless you are a designer who is looking for them.
I must admit I was a bit sorry when gradients fell out of fashion, so it’s exciting to see them coming back. It’s a funny cycle.
Gradients with vibrant colors are a way to make your image more attractive in the least amount of time. Simple but not simple is both exciting and interesting. The technique’s return to the mainstream has been driven by all the designers.
— — — — — — — — — — — — — — — — — — — — — — — — –
We are DATS translation team, we love design and love English, through the translation of design articles to learn and progress together, although we still have many shortcomings, but as long as we gather the tiny power of everyone, one day will shine
Translated by MOMO, Nierkou, NoNo “, Daguoji, Most Time, Yizheng, Bear, Suyan266, DATS translation team members.
Haku, sea in a cup
Visual design: Meow
The original reference: designshack.net/articles/gr…