The gradient—one of the techniques shunned by flat design—is making a comeback. (And it’s even being used in mostly flat design patterns.)
Gradients work because they do something that many people thought flat design lacked, which is to help create and establish depth. What’s new about gradients this time around is that they are not used to mimic textures or without purpose. Today’s trend focuses on bright-colored gradients that emphasize the content. From full-screen gradient overlays to backgrounds, almost anything goes when it comes to the technique… as long as it is bold.
Designers are making the most of the gradient comeback in a few distinct ways:
- Gradient-“flat color” pairs mix both design ideas for a bold look, such as the website for WPcrew.
- Two-tone gradients are a fun color overlay to add interest to a photo that might be somewhat lacking or to add depth to a background.
- While many of these gradients seem to be on a more grand scale, they are being used for smaller elements as well, such as buttons or to bring attention to specific content.
There are still a few gradient don’ts to consider as well. (Since you don’t want that design to looking like it jumped right out of 2012!)
- Be wary of small gradients. Use in icons is still not recommended.
- Don’t overwhelm the content. A gradient overlay on a photo can be nice (just think of some of the cool effects that Spotify features regularly), but the photo still needs to be discernable.
- Bold color gradients tend to have a light, cheery feel. Make sure this meshes with your content.
- Pay attention to color combinations and contrast when it comes to readability. Some gradients can get light and white text can present a problem. Make sure to test readability against color, different responsive breakpoint and on multiple size devices. (With gradients, readability issues can sometimes pop up in places you wouldn’t expect.)
[Source: Webdesignerdepot]
