This is one of the major trends of webdesign in 2019, the gradients are installed permanently. They can be found on sliders, logos, billboards and even action buttons.
However, when it comes to mixing colors, it is quickly possible to make a misstep. And all the dynamic effect will turn a little Christmas tree ...
To avoid this, carefully follow our guide of 8 mistakes not to commit for your color gradients.
1. Marry the hot and the cold: complementary colors
Avoid complex gradients and most importantly, do not marry two complementary colors.
The color circle of colors is like a rainbow. We must therefore look for:
> to marry secondary colors: yellow + green + blue / yellow + orange + red / red + purple + blue / blue + green
> but especially not opposite or complementary: yellow + purple / orange + blue / red + green.
2. Use more than three colors
Formal prohibition to use more than 3 colors!
The principle of the gradient is precisely to express all the color nuances between a tone A and a tone B. You will therefore already have a complete panel of colors. Adding extra colors would "break" the gradient effect.
We recommend the use of two tones. Three colors are possible if they are close shades. No need to combine a purple + an orange + a blue that will create an asymmetry of colors and perhaps dangerous for the retina!
3. Overload your home
Who says gradient, necessarily says white spaces.
Your gradient brings color and relief, but your site still needs to breathe and stay airy. Several elements can remain neutral:
- call-to-action on a degraded slider
- a header if you use the gradient for your logo
- components on a gradient background
Find the right mix of clean and colorful spaces to enhance the gradients.
4. Start with the dark
To find out what color to put on each end of your gradient, do not choose randomly.
Indeed, the gradient is a thread for the eyes of the user. He will first be attracted by the clearest and brightest tone. If you give it the darkest tone first, it obscures its reading and does not guide it.
On the other hand, when you start with the lightest color, it will help your reading and accompany it as a way to go to the right or the bottom of your page.
5. Leave a greyish zone
You will see, sometimes choosing two colors a little distant, there is a greyish or brown zone in the center. Do not leave her.
This indicates that you need to add an additional "stop", what means, an intermediate tone of your color palette.
6. Use gradients for illustrations
We do not close the way to logos and illustrations, but there are some mistakes to avoid.
For example, if you create line art, the gradients do not provide relief, the colors may not stand out and do not serve your visual. In addition, when you resize, they can quickly distort.
Warning
Do not use gradients on too small areas.
On the other hand, on isometric and solid illustrations, it is an excellent idea to give relief and a 3D effect.
7. Use gradients for impressions
As the gradients create beautiful effects on a screen, they can be catastrophic in print.
Indeed, the nuances and subtleties of the passage from one color to another require a high pixel density. When you print, tapes may appear and create offsets in your gradient. All the effect of the gradient is then deteriorated.
If your brand uses a lot of paper, we do not recommend the use of gradients on the logo. You can still use the effect on the site in background.
8. hindering readability
In UI, the motto is to facilitate the use and readability of your site or application. The visual must serve the user instead of handicapping him. If you place gradients under paragraphs of text or even in a footer, you can hinder the readability of the text.
Regarding the header, there are several schools. Purists will say that the menu must be on a flat bottom for better navigation. For an event site or if your menu is relatively simple, you can afford to include your header in the gradient.
Color gradients still have a bright future ahead of them, but to spare your visitors' eyes, try to follow some good practices when using them in graphics and webdesign.