UI vs. Logo Gradient
As the gradient trend prevails in the logo design, the UI starts to use the gradient. But how should we design with gradients? Do we just put the same spectrum to the text, buttons, or boxes? First, let’s have a look at how the existing brands are dealing with it.
Spectral color
At first glance, the gradient UI reflects the logo color, but if we look closer and compare the extracted color.
Commonly, UI gradient has only part of the full spectrum that the logo has. Visually, the logo and UI look the same, but they are technically different.
Why the nuance?
One answer can be usability since UI needs to consider readability and information hierarchy. If a gradient element is overly dominant or makes content illegible, tweaking the gradient for a better user experience is not a bad idea. Since the primary task of a logo is to catch the user’s eyes from the desktop and differentiate from the rest of the brands, the essential duty of a UI is efficiency and accessibility. Take Messenger’s text background as an example:
The first chat bubble, which is also the official landing page’s choice, has a gradient with a partially logo spectrum — purple and blue. The second chat bubble has the full logo’s color spectrum — blue, purple, and orange. The third chat bubble is a pride-theme shade — orange, yellow, green, blue, and purple. In terms of legibility, the first one is the easiest to read; The second one is less comfortable to read; The third one is hard to read.
Gradient angles
In addition to color, the angle is one of the gradient components that makes a huge difference. There are four types of angles — linear, radial, angular, diamond.
It is common to use different angles for logo, and UIs and linear is the most universal option for the components gradient.
Color stops
In addition to angle and color spectrum, transition points are also part of the gradient component. It determines the dominant color and potentially differents one logo from the other if two have the same spectrum of color.
For example, in Messenger’s logo, purple and blue are the dominant color, and orange only occupies a small edge. Thus, the Messenger app’s first impression is a cold purple-blue base instead of a warm orange one. (My first impression of the Messenger logo is a purple dichroic stone)
Compare to the variety of color’s percentage in gradient logos, UI’s gradient is a more straightforward “equally divided” distribution. Considering the final delivery’s format, engineering can be a big reason for the UI gradient’s simplicity.
Key takeaway
- It is common to have nuance in between the logo and UI
- Having UI’s color falls within the logo’s spectrum is crucial to maintain the brand coherence.
- Logos have more flexibility on gradient angle and color stops.
- Saturation is one factor that affects the readability, and the amount of color is the other.
- The color choices in a single spectrum have the same saturation.
- There are always exceptions, but a designer needs to have a good reason to break the convention.
