

If a swatch of accent yellow looks lush when surrounded by whitespace in Sketch but clashes with a UI’s dominant color scheme, find a different solution. The big takeaway? Don’t coddle your color concepts. Testing colors against each other, especially for contrast, is a simple but crucial step in the UI design process. Why? Because that beautifully arranged selection of colors in your style guide may turn out to be problematic when applied to an interface.Ĭolors that look great as isolated swatches don’t always work together within a user interface. In UI design, color relativity isn’t always as obvious, so colors within a scheme should be tested against each other. However, the interior box on the left appears to be darker than the one on the right because its surrounding color is lighter. Here’s another example that shows how deceptive color can be:īoth of the interior boxes are the same hue, saturation, and brightness. Essentially, the light shining on the petal’s ridge and the color of the shadow work in tandem to trick the eye and intensify the highlight.

Observing shadows and highlights in nature is an easy way to see color relativity at work.Ī: The brain and eye work together to help us understand that the flower as a whole is actually bright red.ī & C: The dark brown of the flower’s shadow (B) makes the highlight on the petal’s ridge (C) appear much brighter than the dull maroon color it actually is. As the human eye and brain work together to see a color, they are always influenced by:
Blue color ui design how to#
The digital products we interact with on a daily basis rely on the strategic use of color to communicate important information, so it’s critical that UX and UI designers understand how to wield color wisely. However, when asked to identify a brand’s color palette, the number of correct replies shot up to 80%.Ĭolor also plays an influential role in the world of user interface design. When participants in a recent brand-focused study were challenged to draw the logos of 10 iconic corporations, only 16% were able to recall accurate shapes and design features.

From the enchanting scenic backdrops of set design to the intricate compositions of pixel art, a robust understanding of color is the master key to compelling communication. There’s no way around it: Color is the most impactful creative element in visual design.
