2.8 Outlined/Coloured Icon Adaptation

@Jendrzych fixed a lot, and did a lot of work to bring us a new icon set for 2.8. However myself and many others believe the design goals behind them, namely their being mono-colour, are flawed and detract from the user experience in a desire to simplify things, and make the icons easier to create.

In an effort to give us an alternative to the mono-coloured icons Jendrzych made for 2.8, I’ve been adapting his icons to include a splash of colour, and an outline.

Update: Now complete and up to date (as of 09-04-2019)

For the sheet, please see the devtalk forum thread

Design guidelines:

  • Icons get a black outline, if the interior is bright, or a light outline if the interior is dark. Sometimes both (a ‘shadow’ can be substituted if the shape/size can’t support an outline). This means all icons will work with any theme regardless of colour. It also slightly shrinks the icons, which overall adds more negative space between icon lists, but can make maintaining shape slightly difficult.
  • In order to keep new icons relatively easy to create, these icons should match the look and style of icons that are purely white with a black outline.
  • Colour should be added to aid in understanding icons, and distinguishing neighbouring icons. As such, not every icon needs colour.
  • Colour-coding (that is, picking colours in an effort to organise and categorise related icons together) is secondary, as most places it adds little that the shape or context does not already handle. This also prevents us getting bogged down trying to over-categorise everything.
  • Colours should be bright and not overly saturated, appearing more like a tinted white, this aids in matching coloured icons and non-coloured ones into a cohesive set. It also should keep icons reasonably theme-able.

29 Likes

Did you try to build blender with the colored icons.

I think only a couple of icons per editor should have colour or it gets very distracting and childish.??

I did, I suppose I’ll move the in-blender preview out of the collapsible arrow.

The ‘rainbow effect’ which makes things look childish with lots of colour is addressed in the design guidelines. Essentially by not colouring everything, and keeping the colours mostly bright and desaturated, it shouldn’t be an issue.

1 Like

Like the effort, Antaoiz. Have bookmarked this thread for use in custom icon loading patch. Have you thought about the idea by @Harley regarding using only three colours so the icons can be “themed” at a later date?

1 Like

It hard to judge without trying things out. looks like windows 95

in my opinion only icon which have color in viewport should have colored icons for example: vertecies, edges, faces have a orange colour also should the vertex,edge,face select have orange colourd icons.

Another example 3D cursor have color but the pivitpoint option has no color.

3 Likes

I had remembered it, but it just never seemed practical to do right now.
It is technically possible to do, but it’s hard to design for without a ruleset in place.

For instance, Does that then limit me to 3 colours for the entire icon sheet?
Or 3 for each ‘area’, which seemingly gives more freedom, but you still have to be careful to correctly colour code things the same colour across areas if they’re supposed to end up similarly coloured, and you’ll likely end up in another situation wher you have 1 colour you want to use, and 3 which make sense because they’re used for something similar elsewhere.
Or could I just do all of those red, and there’d be a theme setting for every icon? that seems excessive though.
And what about the outlines, what if a theme wants dark icons with a white outline? Should they take up a colour channel, limiting it to only 2 colours?

Then there’s the difficulty of it being annoying to preview it in it’s actual colour, rather then the colour channel it just so happens to be in. Maybe there’s a way to make that easier with layers and blend modes though, I haven’t dived into those in inkscape.

So, I’d want to know the rules before I can build anything for that system.

In the end, I’m building it for what we have at the moment. However, it is a lot less difficult to simply change the hue of the existing icons, than to pick colour spots and add outlines, in addition, I’m trying not to use a ton of different colours, and definitely keeping them to 2 or less hue’s per icon (so far, we’ll see if one ever calls for it, the 3d axis probably will). So adapting this set to that type of system in the future should be relatively easy, easier even than the original set. The main difference is you’ll have outlines to contend with.

1 Like

I’m not particularly concerned with which decade the icons look to be from. The ‘modern’ trend can sod off. If they look decent and more importantly function well I’ll have achieved my goal.

Colouring things based on the default theme is troublesome and you have to be careful with it, but is something that I’m doing when I have nothing else to go off, but feel like something could use some signposting. That said the entirety of the colour design shouldn’t be focoused around that, we’d miss a ton of icons and would just be back to 90% white.

When I get to the 3d view icons I’ll probably add those colours you’ve pointed out, but less saturated and brighter, following the design. I’ll also likely add the orange dot, subtlely, to the pivot point options, to give you the centers to lock onto when viewing the list - at the moment it’s a bit of a jumble of grey.

6 Likes

Yes. Yes, it can. If I ever see another crappy UI that looks like a barebones website from the 90s, it will be too soon.

5 Likes

While you are at it, could you get rid of those icons image and bring back the previous ones?

It is good that you are working to back up your points on icons by making a set to present as an alternative to the mono icons.

The two major camps in this forum when it comes to icons are those wanting colors vs. those wanting greyscale. Having the set choice in the first-time splash screen should be able to satisfy in the same vein of 2.8 having both a RMB and LMB workflow.

5 Likes

I am very glad that you started this task! One of my very few gripes with Blender 2.8 are the grey icons. And I never got the time or motivation to start redoing them myself.

It is also good that you are not going down the overcomplication route, with colour coding and themeable three channels and whatnot. Most important are adding back the outlines and having different (!) colours.
The approach with the decent, pastel colours is also good. I don’t find it garish at all.

What program are you using?

3 Likes

Answering here…

Yeah IMO a darker color inside the material ball could maybe look better… It’s worth a shot I think.

And sorry, I thought the Textures icon had a gray but I guess it was an optical illusion :smile::smile:

A feedback I could give, is to maybe experiment with changing some of the colors away from the 2.79, in an attempt to categorize them better, based on Harley’s suggestion here:

For example:
1- Render and Output = black and white (OK)
2- ViewLayer/Scene/World = green and blue (OK)
2- Object + ObjectData = Orange (would require the vertices of the triangle -ObjectData- being orange)
3- Material + Textures = Red (OK)
4- Particles + Physics = Yellow (would require the “sun” of the icon being yellow)

I would agree, but the goal isn’t hard-line categorisation, rather it is to make the icons distinguishable, and the icons already generally follow that categorisation anyway. Making all the icons that sit next to each other the same colour eliminates part of the purpose of colouring them in the first place.

For instance the view layers icon right now helps break up a segment of 5 icons partly because it is green and black. If it were to be blue, you’d have a chunk of three icons in a row which at a glance are basically the same.

The mesh icon colour is up in the air though, whether to use green to match the outliner or orange to match the view, I’m not sure. I made it yellow because it was close to orange, but still different, but it’s lack of proximity to the object tab means that probably isn’t an issue. I’ll probably go orange, so it fits in line with planned vert/edge/face select colours.

2 Likes

Quick update before bed.
Finished a line, includes more obdata types for properties panel tabs (lattice, metaball, armature, camera…), misc icons and viewport modes.
Added new light & dark view of the sheet under ‘progress previews’

13 Likes

looks awesome !
i have to say that me, my students and my coworkers are not really satisfied by the new set of 2.8 icons, they are beautiful, but my students repproted me that it is difficult to read… and they prefer the old one.
I am happy to discover that we can use the old ones, easy to read as we are used of them during the last years.
thank you

uriel

3 Likes

Hi. The ocean in the world icon looks green (at least in small size). We are used to seeing that kind of earth globes with a remarkable blue in the ocean. This would make it much easier to distinguish World tab.

2 Likes

Hm, odd. It is definitely blue, but I guess the green from the continent is causing an optical illusion of some sort.

How’s this?
image

And something like this?

blender_world

blender_world_bright

Unfortunately that style has issues, which is why the design guidelines I setup for this prohibit it.

  • It uses darker, saturated colours. This Reduces themeability and would also make the icon stick out from the rest of the set like it doesn’t belong.
  • It loses definition on a white background.