2.8 Outlined/Coloured Icon Adaptation


(Antaioz) #1

@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.

This is where I’ll post my progress, and ask for feedback.

blender_icons

Progress previews

If you open the svg in another tab, I will warn chrome doesn’t display them entirely correctly (not sure about other browsers), it seems it doesn’t like clipping masks so the outlines appear thicker than they should for some icons.

Design guidelines:

  • Icons get a black outline, if the interior is bright, or a light outline if the interior is dark. Sometimes both. 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 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.


New icons for Blender 2.8
#2

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.??


(Antaioz) #3

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.


(BTolputt) #4

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?


#5

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.


(Antaioz) #6

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.


(Antaioz) #7

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.


(Piotr Adamowicz) #8

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.


Ability to change icon set
(Thinking Polygons) #9

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


(Ace Dragon) #10

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.


(Zsolt) #11

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?


(Evandro Costa) #12

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:


(Evandro Costa) #13

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)


(Antaioz) #14

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.


(Antaioz) #15

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’


(uriel) #16

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


(English is not my native language) #17

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.


(Antaioz) #18

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


(魔大农) #19

And something like this?

blender_world

blender_world_bright


(Antaioz) #20

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.