GRADIENT — making a comeback!
Journey of gradients in cycle of design trends
Trends are cycle, a constantly evolving cycle. Design trends are mostly driven by generation and thought leaders of that generation. Things changes constantly in design world. Sometimes we may feel like we are going in vicious circle. But actually it’s more like a cycle. Fashion for an example has style trends that constantly evolves in a cycle. 70’s was the time with bell bottoms, it came back in 90’s but with some twist and jazz to it. Design trends has same kind of evolving cycle. Gradients for example are back. A decade back it was sort of crime to use gradients in your design. Everything was flat, flat colors, flat UI, flat icons. Flat UI design was driven by our thought leaders in Google and Apple, and since then it became a commandment for designers to follow flat design. Google had introduced their ‘Material design’ and Windows had their ‘Metro’. . They were great for low-resolution mobile devices where the designs looked clean. Trends are changing now. If you look at lot of upcoming UI trends there is more and more usage of drop shadows, designers are now leaning towards adding some jazz and fun to design.
Gradients were royally abused in olden days. I remember sites designed with gradients in background, with gradients on button, text, titles, all over it. Those were the days when designers were called web designers, and were part of support team. They were only required for beautification of the website. And most websites were designed by developers.
Understanding Colors
To understand colors its best to understand color wheel. Most designers know about color wheel. There is a reason the wheel is setup in a specific way, which makes it uniquely consistent universally. I thought many times if I can rearrange it in different way, but couldn’t do it. Color wheel is used in all design tools and in same fashion.
What is Color Wheel?
The color wheel is a chart representing the relationships between colors. Based on a circle showing the colors of the spectrum originally fashioned by Sir Isaac Newton in 1666, the colour wheel he created serves many purposes today. Painters use it to identify colors to mix and designers use it to choose colors that go well together.
The classic color wheel shows hues arranged in a circle, connected by lines or shapes. The colors include primary colors (red, yellow, and blue), secondary colors (orange, green, and violet), and tertiary colors (yellow green, blue green, blue violet, red violet, red orange, and yellow orange).Secondary colors are created by mixing primary colors. For example, mixing red and yellow creates orange; mixing yellow and blue creates green.
Choosing the Right Colors Choosing the right colors for you requires a lot of creativity and experimentation. Bear in mind that color is very psychological, different color harmonies produce different effects. For example, analogous colors are similar in hue, creating a smooth transition from one color to the next. Complementary colors are opposite to each other on the color wheel, so they create a strong contrast. Monochromatic color schemes can be subtle and sophisticated.
Experiment with different harmonies to achieve the desired mood or effect.
Adjusting Color Value and Saturation Once you’ve selected your colors, you may wish to adjust the value of a specific color or colors — how light or dark the color is. Or you may wish to adjust its saturation, how rich it is. Each hue on the online color wheel has a different inherent value. Yellow, for example, is lighter than blue.
How to use gradients?
Some of these visual aesthetics about gradients depend on eyes of creator. Analyzing the right balance of color and gradient is kind of in-born talent. You need to have an artistic eye for it. But there are some basic rules around it.
Gradient with analogous colors:
In simple terms analogous colors are the color palettes adjacent to each other in color wheel. This is the latest trend for gradients in 2019. Beauty of this type of gradient selection is that its subtle, gives a personality to any visual element on page. Because color variation is not too drastic, it creates a soothing and bright effect. Analogous is the best gradient approach for modern design trend.
Some Examples:
Complementary color gradients:
Pick opposite colors from color wheel to create this gradient type. Because these are from opposite sides, the gradient generated from these colors will have a jarring effect. Most of these gradients are used to create a dramatic effect. These type of gradients are not often used in modern UI elements, but have been seen as part of packaging and physical products.
Monochromatic color gradients
Monochromatic gradients are generated by same color shade with variant of intensity. Its subtle and light. These gradients are used widely everywhere. It also creates an embossed effect.
Split complementary & Tetrad color gradients
These two gradient types are highly dramatic in nature and are mostly used to grab user’s attention. Modern design community hates using multi colored gradients, but on contrast these have been used in creating gradient animations. You don’t want these gradients to be a persistent part of your interface but it can be elegantly used as transitions, or animations. It can grab user attention quickly.
Some Examples:
Am I using the gradient in right place?
Sure, gradients look great, but they can’t be used just anywhere. I keep reminding myself that gradients have a pretty bold presence, and so, one should have a good sense of judgment in order to effectively create, and use them. For example, I don’t see a gradient working for the website of a hospital or that of a government. Basically, if the brand’s a serious one, I choose to leave out gradients.
Another important thing to always check is balancing gradients with loads of white space — the design needs to breathe, doesn’t it? When you’ve used a gradient in the background, you need to balance its overpowering effect, with the subtlety of white spaces around it.
Use gradients for:
Highlighting a subject in your design, it can be logo, brand object, illustration, or any design artifacts.
Making a modern & attractive background, multi-color gradient backgrounds.
Bringing focus to “Call to actions”, this can be buttons, links, banners. Smartly used gradient can help to bring focus on those call to actions while maintaining visual aesthetics.
Does gradient work in illustration or logo?
When using gradients in illustrations or logos, you’ve be extra careful, as they look best only in few cases. While creating line illustrations, avoid using gradients completely as they tend to look strange, and the illustration loses its charm. Besides this, they can also appear distorted while they’re being scaled to smaller dimensions. However, using them in isometric, or filled illustrations is a good idea, as they can help give a 3D effect to designs.
Make sure that the gradient embodies brand values and it flows across the whole digital presence .
Can you over use it?
In modern design pattern, gradients are used to either bring attention to certain elements or to create a visually pleasing visual artifacts. In both cases designers can abuse it or over use it.
Few basic rules are :
Do not use a gradient artifact on gradient background.
Try to limit to one gradient element on one page.
For “Call to actions”, use gradients only for one primary ones.
Try to keep it to “Analogous Or Monochromatic”, unless really needed.
Go unleash your creativity, Design Happiness!
Thanks for reading!
