ObjectMode -> Tools and Origin-menu
Open, LowPublic

Description

ObjectMode -> Tools and Origin-menu

These are the first raster sketches for "ObjectMode -> Tools".

In the Transform icons I wanted to use the RGB colors, to connect the operations logically to the 3D Manipulator and the XYZ axes.

I made at least twelve variants for Undo/Redo icons/arrow-icons, but I found these are the easiest to recognize and understand without thinking. (Similar to the "Floppy" image when saving something, however arrows are abstract enough to not disappear after time). The Origin-menu uses the small orange dot as an illustration and makes it easier to imagine and understand what will happen.

Proposals / Bugs / Questions:

  • Change "Set Origin" button -> "Set Origin" drop-down menu
  • Change button name "History..." -> "Repeat History"
  • Change "Undo History" button -> "Undo History" drop-down menu
  • Change "Repeat History" button -> "Repeat History" drop-down menu
  • The heights of the buttons and the distance between them are varying
  • Does the drop-down menus need icons?

Icons are used on the tools-sidebar:

Icon is used in pop-up menu pressing X or Del keys:

Icons are used in pop-up menu pressing Shift Ctrl Alt C keys:

Icons are placed on a dark gradient background:

Icons are placed on a light gradient background:

Details

Type
Design

There is a lot of problems with this set. Remember that there are a lot of icons displayed in the toolbar at the same time, and potentially we could have an icon-only toolbar, and currently this set is very colorful, has a lot of contrast, and is generally distracting. A colorful iconset (or other types of distracting elements in the GUI) also makes it harder to objectively look at the artwork being created in the program, and makes the GUI look less modern/professional/mature. For example toolbars look at Photoshop, Krita, or 3ds max - which developers noticed this and at one point desaturated all of their existing icons.

Also notice that currently categories of icons are represented by a usage of one dominant color - this improves readability by signifying a common denominator for a set. In my Edit mode icons, I additionally used this color to represent action, while using grays to represent the objects acted upon - a similar approach is used in Modo, you can check it out. This also improves readability - the distinction of action vs acted upon is recognized instantly by the eye this way.

Origin Icons look great, very readable. History also, though too much contrast, or their aggressiveness is just the aliasing's fault.

Change button name "History..." -> "Repeat History"

Good one, added to my doc.

Change "Set Origin" button -> "Set Origin" drop-down menu
Change "Undo History" button -> "Undo History" drop-down menu

Toolbar button rearranging will be handled later, you can suggest that then, although I'm not a fan of this dropdown menu solution, because it signifies an option more than a list of actions - it is easily read as "Is Extrude an option for Extrude Regions? Can it be changed for Inset? Is Merge an option for Remove Doubles? Can it be changes to Delete?". Dropdown menus are not usually used like that, so it's confusing.

@Paweł Łyczkowski (plyczkowski) Fair enough. My previous icon set I designed for my own 3D CAD software at my last startup company were 13px by 13px vector glyph icons without any color (the soft gray gradient was added programatically to each of them on startup) -- so I know what you are talking about. However, in blender we can find icons using the same or even more colors than the first half of my set:

Does this mean, they need to redesigned as well?

About the antialias and contrast: I totally agree with you, but as I mentioned in all of my posts: these are raster sketches drew pixel-by-pixel, just to make sure, that the story I'm trying to tell with one them can fit into a 16px by 16px. So for me, these are more like tests: is the small arrow big enough to be recognised even without anti-aliasing? or If I choose some kind of element to illustrate a group of actions upon it, will all the actions be recognisable? (like I did in the Delete-menu set before.) So they will be less aggressive and will have less contrast after I draw them in SVG.

One more suggestion: what is the reason we are using a single SVG image file instead of a folder full of SVGs and a JSON file telling which icons are used and where?

Something like this:

{
    "ObjectMode":
    {
        "Tools.Transform.Translate" : "translate.svg",
        "Tools.Transform.Rotate"    : "rotate.svg",
        "Tools.Transform.Scale"     : "scale.svg",
        "Tools.Transform.Mirror"    : "mirror.svg",
    },
    "EditMode":
    {
        "Tools.Transform.Translate" : "translate.svg"
    }
}

Or with even more subgrouping, something like: {"ObjectMode": {"Tools": {"Transform":{"Translate": "translate.svg"}}}}.

However, in blender we can find icons using the same or even more colors than the first half of my set.

They are not used in a toolbar - so thy appear sporadically throughout the GUI, with the Properties tabs being the most crowded place - but the icons there are not really that saturated, and the inactive ones are even more desaturated, so it looks ok. Color used like that is actually beneficial for locating things quickly - as an example, here is a mockup (also with icon sketches) I did for the Edit mode toolbar some time ago:

I intentionally added colorful icons for sections there for this reason. I would like the tab icons done this way.

what is the reason we are using a single SVG image file instead of a folder full of SVGs and a JSON file telling which icons are used and where?

A dev would have to answer that.

I cannot speak to the way icons are loaded either.

As to the actual icons, I think you've made a great start and thank you for jumping in and tackling these. I agree 100% with @Paweł Łyczkowski (plyczkowski)'s comments about saturation and color schemes, though.

Our current colorful icons are primarily used in the Properties editor, away from the active canvas (3D View, Compositor, Image Editor, VSE) and so are less distracting than they would be in the toolbar. I'd also like to see a more monochromatic set for the toolbar.

@Paweł Łyczkowski (plyczkowski) @Jonathan Williamson (carter2422) Can we make a proposal about this loading thingy? IMO it will help us to resolve the "Loading Custom Icons" problem as well, because before you compile or even better, before you run blender, you can change the location of a specific file in JSON. Further more: we will have a list of all icons with their names and locations as a result!

I only used these colors, because I'm always thinking of a software as one unit, not as a collection of separated window frames. So if I use an icon style and colors in one place then I can use them anywhere else.

Even though I will redesign these icons to use preferably one color only beside the grayscale tones, I will also suggest to redesign the old ones using more than one specific color, to make them consistent by using the same style system-wide.