Colour coded icons

hey guys

I follow the icon topic for months now and when we talked about color I always thought white plus a secondary color. If I remember correctly Pitiwazou wrote about the same thing then. 1+1 color everywhere.

So I’m super surprised that I haven’t ever seen that as a solution here. If I missed it sorry, but I can’t wait more and I still would like to propose it:

This is it. More fills - mostly with the secondary color, easy theming, and - oh God - so much easier readability.
Instead of searching for line-line-line-line-line with this I could search for the blue sphere or the blue diagonal line etc.

I changed 3 icons (back) - I don’t like the details of the current world icon (and in blue I don’t miss it) and I think the texture icon’s squares are too small. Also I simplified the tool properties icon a bit. Oh, and removed the shutter of the camera icon.

(as an additional note: particle and physics icons look a million times better and fun with this little color splash)

If it’s doable I’m gladly contributing with editing the original svg to include a colorable layer.

12 Likes

Those bi-colour icons look awesome. They should be (colour)grouped by category though, otherwise they are discoverable just as much as the monocolour ones are.
Something more like this (quick photoshop hue and saturation job):

anyway these solutions should be tested on light background too

9 Likes

I do agree with the other designers here in that I wouldn’t like to have a carnival of colors there.

If you compare the monocolor with the bi-color though you’ll see that your eyes do have an easier way to stop at certain landmark icons.
The World, the Object and the Modifiers being the key ones.
The way I always navigated in 2.79 properties is searching for these landmarks unconsciously. I reeeally didn’t need any additional color. Just good discoverability of a few key ones. With my proposal you got that back with the added benefit of a theme-able coherent look.

I understand the sub-categories you colored - as with the line beside the icon proposal - but I think it’s too much. It doesn’t help enough to justify the rainbowness.
If anything I’d only color-differentiate the big different categories - but I don’t see the need for that either.

13 Likes

I know you are of a different opinion but bi-coloring with same color helps really just a tiny tiny bit. When everything has the same new information it’s not really relevant information. While I agree that since some shapes are colored fully and some are not which makes a slight difference it’s really not much better than mono-color.

It’s not a carnival of colors anymore if the groups share the same colors they have in the Outliner for example.

There’s a difference between having Scene and World both blue as opposed to coloring the Scene blue red yellow and coloring the World green blue as the earth for example… The first is color coded the second is rainbow encoded.

2 Likes

Bi-color icons with the same color only help them stand out against the UI but not among other icons. You can achieve the same thing by making them other color than white.

I have to disagree with this wholeheartedly. The whole point of this is that you don’t choose from lineart-lineart-lineart but different 2 colored shapes which have different proportions compared to each other.
Your brain can remember those shapes better because of the bigger flat surfaces. There are actual surfaces to remember.

Recoloring them to one color gives no advantage - only the disadvantage of lessening contrast against the BG color

44 Likes

I’m all for your proposal!

2 Likes

I like this a lot. Would enhance themability a great deal.

1 Like

2 colors is the way to go for me too.

3 Likes

if enough people like it and the devs feel the same I can update jendrzych’s svg in the Christmas break to have 2 colorable layers in it. Just tell me the proper way to set it up.

6 Likes

I’m quite with you on this. Maybe two colors are enough. But for the sake of a more immediate categorization I’d take into consideration @Harleya idea which is a simple thin line dividing, so grouping, tabs:

3 Likes

i don’t like it , why should we group it to the tabs? for what?

I meant "for the sake of spotting them faster, which is one big point of not wanting monochromatic icons

1 Like

Well, different strokes for different folks I guess. This type of coloring doesn’t do much for me and I tried it a while back:
icons_3

I would much prefer coloring individual icons and no, I don’t care if it looks like “christmas lights”


So I’m patiently waiting for the patch.

Well if you put them in a box like that then sure. But if your UI i monochrome and the text is white, making the icons different color can help them to stand out:

11 Likes

Well I think both options can be integrated and the ribbon one fairly easily I presume.

As for the icons you could also have 3 different areas of the icon mappable to different color all through Themes in User Preferences.

So you can map 2 of those to white and one to orange for example. Or 1 to white and 2 to orange for different icon or you can map one entirely in one color with setting all 3 to orange.

There needs to be careful thought put into this approach though to make it useful. I presume the icons would be saved as multiple svgs each containing one layer or maybe somehow in RGB bitmap mask format? Not sure about the technical standpoint here.

But for me the ribbon approach will always be useful enough with pinpointing the location of the correct icon and also looks more classy when compared to extensive coloring of the icons themselves. It could simply be turned on with a checkbox in Theme settings that moves icons 1px to the left + adds 2px vertical ribbon on the right with color set according to the user in Themes. For me it would follow the coloring I would choose in the Outliner.

Dark Theme:
Colored Ribbons


Colored Icons

Light Theme:
Colored Ribbons


Colored Icons

12 Likes

Those ribbons are ingenious - clean and informative. Multicoloured icons look messy - one colour per icon colour coding is the way to go. Still, stripes look better.

11 Likes

I agree - multicoloured icons dont work at all.

(on a side note: very nice work with these. they look gorgeous in the icon viewer addon too!)

2 Likes

Also agreed. Adam’s ribbon proposal is the best solution IMO.

Also, everyone should note, regarding colors, that not all hues are equal.
This becomes especially apparent with colored icons. Different hues are perceived differently. Hue, Saturation, and Brightness is not a good way to measure how people perceive colors.
If a yellow color and a blue color have the same “brightness” (as measured in a HSB paradigm), the blue will look darker. Please take a look at this:

http://www.artofscholes.com/checkingvalues/

Value is more important for differentiating shapes than color. For that reason, it’s important to check the perceived values of your colors, and you can use the Proof Colors feature mentioned in the above link to do that.

As a demonstration, I’ve done this on Adam’s dark colored icons: (second picture in his latest post here)

image

While simply turning saturation to 0 shows equally-contrasting icons, using the more perceptually-accurate Proof Colors shows that some icons have a great deal more visual contrast than others. Look at the Modifiers wrench especially, compare it to the contrast of the particles and physics icons. If you blur your eyes, the wrench seems barely visible in comparison.
On top of this, some icons have much more colored space than others. Again, the Modifiers wrench is just an outline, whereas other icons, such as Material, are allowed big blocks of color.
For this reason, too, I think the ribbons are a better idea, as each ribbon has the same visual prominence with regard to its size and shape.

(Also, I like the way Adam has reordered the properties, it makes more sense to me.)

2 Likes

I don’t agree…
(Edit: Jendrych explained that this was not a broad statement from him)

For the other people who are not on Blender Artists, we are discussing a color adaptation made by Antaioz

On this thread:

11 Likes

Divide the icon into two elements: accent color and outline. And, we can change only outline from user setting.


small

20 Likes