7

I've been questioning myself for a while now how UI designers choose the exact colors that they end up using. I think that the Windows 7 user interface is a good example of this (in Windows 10+ everything is just white). Windows 7 file dialog

If you look at the file dialog, we see different shades of blue for the window frame, tool bar, navigation buttons and also for the hovered button. But also the icons use colors that integrate very harmoniously with the rest of the interface.

Is there any concept or pattern behind it (like working with specific HSL ranges) or how did the designers choose the colors there? Somehow I can't imagine that it's all just practice and intuition, and yet in the end someone said "Yes, the colors that make up the button's gradient are fine. We'll use those and no others".

I hope you guys can enlighten me a bit there.

1
  • Consistency of palette (shades of the same blue). Complementary palette (yellow folders vs blue). Contrast (the more contrast, the more focus, hence the actual focused element here -- the selected text -- is the darkest blue in the window. Oct 30 '21 at 5:27
2

I'd say that Brand has the greatest impact there.

Another one is Accessibility.

Well, honestly, for most of the places "Yes, the colors that make up the button's gradient are fine. We'll use those and no others" this is the case. There are some tools to create those schemes and experiments, but in the end, the designers are creating the palette that matches the tone & feel of the brand, follows the accessibility best practices, and looks better. And that's what we're good at as humans. There might be some subjective objections, but in the end someone from the team, the real people are making the choice. Creating the palettes through tools and even AI is great because it helps you get bigger options and filtered results. But in the end, it's all humans!

Continuous iteration and testing play the biggest game here. Windows or Mac has a long history of continuous iteration and testing on their products or interfaces. If you look at the first-time icons in the windows, I hope you wouldn't like it in 2021. So, it evolved over time and it will, forever. That's the power of iteration & tests.

0

Every color has its own characteristics.The color mainly blue,black and other cool color ,it gives people a sence of toughness,spance,speed and power;The decorations mostly use small cartoon elements,mainly hand-drawn and vector graphics,such as stars,clouds,short lines ,etc.Use warm color to crate a soft and cute feeling. we use some tools to improve our working in palette,such as color hunt. When I start a program, I usually check some information :who will use ? how old they are? the using enviroment. All of those thingking to make a exact clolr,it's very useful.

0

It varies according to which tasks you want your design to accomplish. In your example, there are neutral colors and the main color is blue. The shades of blue vary to perform tasks such as highlight, animate button interaction, and so on.

Nowadays there are many websites that can be used to suggest and edit color palettes for marketing. One example is www.paletton.com, but there are many other different approaches, some are paid, some are free. Another example, to design data visualization elements, is www.colorbrewer2.org . Color brewer allows you to choose different palettes which are developed to represent different types of data.

In summary, there are many different techniques-based websites to support your designs. The one you are going to pick varies with what you are designing.

0

I typically go monochromatic for buttons. For example:

Primary button = white text against a solid blue background

Secondary button = blue text against a white background with a blue stroke

I've found that using values instead of different colors still conveys primary/secondary while not introducing additional colors that might interfere with the colors you use for icons to denote success, error, warning etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.