Introduction
When it comes to designing, whether it be graphics design, or interface design. There is one rule that stands out from all of them. The colour theme must match, and it’s not hard to come up with a design that is soothing to the eye, and it’s new trend when it comes to designing user interfaces, which is what this tutorial is prioritised for, however you can use this in other aspects of design.
The theory.
Understanding gradients; let’s use a common colour theory to explain how gradients should be applied.
To get a good colour scheme, you’d want to have a light theme and a dark theme of the same colour combined within a gradient. Let’s look at an example of a few cards using this theory.
The top row of gradients portray an appealing view, and ease to the eye. They obey the rule of transitioning from lighter colours to darker colours, and as you can see, it works very well. The theory is correct.
On the other hand, the bottom row of gradients do not compliment eachother whatsoever, and do not lead to a good UX at all, there are limits to the combinations of colours, anything along the lines of those colours are not good.
Offsite Design
Now I’ve made a Spotify cover, as they are a good example of a company which uses gradients often in their playlist covers, so I made my own.
As you can see it works pretty nicely, now let’s try a really bad gradient (I hate to do it, but it’s for the sake of this tutorial). Also, when you have a specific translucent gradient, it really plays well, but it depends on the image, you can basically do whatever colour you please.
An example of gradients being used in Roblox.
This is an example of a great usage of gradients in Roblox, this is for my game "Ocean
The colour of the gradient on the button here is not the greatest.
However using the practise I’ve addressed in the tutorial, we can turn it into this
This gives a much more ease to the eye when viewing and interacting with an interface. Also, I have not seen any usage of gradients within Roblox; and if we are going to start using gradients within our designs, please use them correctly.
DO NOT USE GRADIENTS WHEN YOU NEED TO PRINT SOMETHING.
When using gradients, the first colour transforms to the next, and when you print them, you can progressively see the colour changing in some very harsh and ugly “bands”, if you need to create a product which’ll be in someone’s hand; use flat colours.
If you also have some contributions to colours, feel free to comment on the thread and I’ll append it onto the OP. Thanks!
