Author: Hebei Hua Xinzhi original
2018-04-13 09:52:18
Today, gradient colors are almost synonymous with fashion. From subtle and elegant gradients to colorful and distorted retro effects, the visual appeal brought by gradients has been improved from visual to interaction.
If you are indifferent to gradients, today’s article will give you 10 reasons to use gradients that you can’t refuse.
1. Make the background visually attractive
The gradient background can help users better perceive and understand the design. When the eyes perceive the changes in color tone and brightness on the screen, they will consciously notice the specific color and visual focus.
Gradient is a very useful and attractive visual tool, which adds color to many design projects. Although there are many ways to use gradients, the most popular is still to place pictures and text on a gradient background.
The following example does just that. The soft colors make it easier for the line of sight to find the place to be placed. The empty background is full of advanced sense due to the gradient, the foreground elements have good readability, and the "discover more" at the bottom is easier to be noticed.
2. Create focus in the text font
Gradients can be used in the background, and foreground elements can also use gradients. If you superimpose high-saturation gradient colors in the font, you can create a design that is quite eye-catching. However, it is worth noting that in the selection of colors, the contrast must be consciously controlled to ensure readability.
3. Gradient color overlay can make plain pictures more colorful
Color is emotional, and adding color to the picture can give the picture emotion and emotion. When the gradient color is superimposed on the picture, even if the quality and sense of form of the picture itself are not strong, the blessing of colors can also make the whole scene more fashionable.
The gradual color addition can strengthen the brand and give the website personality. The effects of bright colors and soft colors are completely different.
However, considering that the frequency of use of gradients and color overlays is already very high, we must pay attention to adding some unique and individual elements when designing.
4. Guide the line of sight
A good gradient design can play a role in guiding the line of sight. When most users obtain information, they look from top to bottom and from left to right. This is what we often call the F-style reading method.
You can use the light and dark changes of gradient colors to strengthen this reading habit. For example, from the user's reading starting point (the LOGO in the upper left corner or the navigation at the top), the color gradually fades to the CTA button at the bottom, and the eyes will first notice the bright part. , And then gradually move to the darker part.
5. Unforgettable color matching
Although gradients are becoming more and more popular, the experience brought by each different color scheme is actually completely different. Some killer color schemes are worthy of long-term use, and branded color schemes can also make it easier for users to remember the visual characteristics of the brand.
Gradient can make the colors related, and even gradient can make the gradient composed of these several colors be used like a brand new color. Especially when these colors and your color scheme match each other, this visual association becomes very powerful.
6. Strengthen the brand
If your brand color scheme is suitable for making gradients, be sure to try it. Using such gradient colors in your website and graphic design works can better connect with users.
Think about how to make the same gradient work on different occasions. In the website, in the advertisement, in the poster, in the decoration of the store, and on the social media, when this kind of gradual change appears in various places, the user's awareness of the brand will become stronger and stronger.
The following example is a bank website. Their gradient is quite interesting. They not only designed this way on the website, but also used similar color schemes in other places, which strengthened the concept of the brand from the color scheme.
7. Gradients are still very easy to create
Creating gradient colors is still very simple, you only need to select 2 to 3 different colors, and then select the shape of the color change, the starting position of the color, and the position of the superimposition.
As far as the shape is concerned, the color gradient is directional, from left to right, from top to bottom, or diverging based on one point, which is ever-changing. When designing gradients, one or more types of gradients can be included.
Choosing a gradient color may be the most troublesome step. You can choose a contrasting color or similar color on the color wheel to make a gradient. Of course, many times you don't have to design the color matching yourself, but you can use the following ready-made tools to make it:
WebGradients: Built-in 180 kinds of pre-designed gradients, which can generate CSS, PNG, Sketch, and PS versions.
Gradient Buttons: CSS buttons with different hovering states can be generated
Gradient Wave Generator: You can use your custom colors to create cool gradient effects, and you can also control the starting position.
8. The color gradient will feel more natural
Although gradients will not be your primary idea, gradients usually give people a more natural feel, especially when the gradient colors match the natural characteristics. Most objects in nature are not a single color.
Gradient itself is a natural choice, so when you don't know what color to choose, you can choose the right color from natural photos. The following illustration is a typical example. The color of the evening sky will naturally transition from orange to blue.
9. Help you build a unique main vision
When your entire design is not so personalized, a good gradient effect can help you create an effective and interesting vision. Jumping bright colors or brand colors can make your website design very distinctive.
The color change itself is very interesting. Even if they are used as a design element alone, they can create a sufficiently good design to make the page full of emotional appeal and help users find the right feeling.
10. Gradient is a design trend
Gradient is a simple and highly available element, it can create some stylish atmosphere, but there is no worry about information overload. This makes the gradient a very appealing and very practical design solution.
The reason why gradients become a design trend every few years is largely due to its natural characteristics and universal appeal.