Delete-menu and Merge-menu Icons
Open, LowPublic

Description

Delete-menu Icons

These are the first sketches of the Delete-menu Icons. Since these uploads are first drafts, they are all raster images not vector files -- hand crafted pixel-by-pixel :) If they have a positive feedback, I will create the SVG versions of them as well.

The main idea was to show the before and after states of the delete actions. These small pictograms are more like illustrations, rather then symbols, so they can teach as well, what will happen after I select one of them. They are using the classic orange color to show the selected objects which will be deleted.


Icons are used in "Edit Mode Tabs -> Tools -> Remove -> Delete":

Icons are used in pop-up menu pressing X or Del keys:

Icons are placed on a dark gradient background:

Icons are placed on a light gradient background:

Details

Type
Design
Peter Varo (petervaro) edited this Maniphest Task.Feb 16 2014, 1:35 AM
Peter Varo (petervaro) renamed this task from delete-menu Icons to Delete-menu and Merge-menu Icons.Feb 16 2014, 4:51 AM

Merge-menu Icons

These icons are also raster sketches. These are using blue colors like the Pivot Point selector icons.


Icons are used in "Edit Mode Tabs -> Tools -> Remove -> Merge":

Icons are used in pop-up menu pressing Alt + M key:

Icons are placed on a dark gradient background:

Icons are placed on a light gradient background:

Hey, these look great! I actually learned how Merge>Collapse works thanks to this. I'm waiting for the SVG.

I would maybe desaturate the colors just a bit - existing icons are not that much saturated.

@Paweł Łyczkowski (plyczkowski) As a matter of fact, creating these icons is a super learning experience for me too: reading the wiki, testing it in blender, try to catch the smallest/minimal possible example, etc. I also learned how the Limited Dissolve works.

Well, this color question is a tricky one. I have a weekly calibrated wide-gamut monitor, however even on OS X not all programs are using the color profile I set up as default (like Google Chrome or surprisingly the Dock of the system doesn't). I draw these icons in Pixen and they were much more desaturated, but I imported these images to Illustrator, to make theme a linked object so anytime I change one of them, it will be updated in Illustrator and I can see the changes in all the above image compositions. Anyway, Illustrator has a slightly different RGB profile than the one I use.. it's insane, really.

So probably, I will ask for your (on any other volunteers) help, to desaturate and place the SVG into the final SVG-table, because, on OS X the Inkscape, thanks to the X11 dependency is just a useless shite. (Although I have an Ubuntu installed in one of my virtual machines, I don't know how the colors will work there.. But atm I'm more interested in the design process and the creation of the almost 150 new icons :) )

Hey @Peter Varo (petervaro), these are looking quite nice! They're all clearly illustrated and easily indicate the tool use I think. My main qualm with them is they all feel quite visually busy. In particular, the delete icons have a lot going on in them. I can't really think of specific changes I'd make (I'm no good at icon design) but perhaps compare them against the icons in Pixelmator. These are very simple and clear, but not busy.

@Jonathan Williamson (carter2422) Thanks!

I can't deny I love Pixelmator and its UI and I use it almost every day, but I also have to admit that bringing that kind of icons here is actually very difficult thing to do, if I may, I will say it is almost impossible. As I mentioned in the first place, these are illustrations. The other way you can create an icon is to make it as a symbol. For example: a "love" icon when illustrated it will be a kissing couple or a hugging couple or something similar. When we draw it using a symbol it will be a big red heart.

Now the problem with symbols is that you need a solid abstraction layer, and it is preferable to based on some sort of conventions. In the "love" example, we have this layer, because it is a very old tradition to think about the "heart" as the place where the emotions are living in our body (even if we know now, that those are living in our brain, or if we have a soul, maybe there -- this is philosophy anyway:)). When we are talking about Delete function in general, we can draw a symbol, like I did in the other thread:

it is a trash can. It is a very old, almost 40 years old symbol of deleting something in computer interfaces. We can use a big red "X" or nowdays it also can be a grayscale one. However if I want to symbolise Delete Only Edges & Faces -- then I have to admit, there is no symbol I can think of and connected to real-world or as a matter of fact connected to anywhere else then this specific software. In 2D, like in Pixelmator, we almost have everything as an analog tool (it is easy to draw those icons) in 3D we have these icons only if we talking about sculpting. In real life there are no control points and curve degrees, or vertices and edges and polyfaces.

Ofc, I love symbols more than the actual illustrations, they are easier to understand, and easier to love, but here we are facing with two problems:

  • we don't have symbols for these actions
  • we want to help the user to understand which action will do what

So IMHO the best way here is to draw them as illustrations. What I did in this case is I brought a 2 frames comic strip structure here, a "before" and an "after", because those are easier to understand what is going on. Although putting "before" and "after" next to each other doesn't make any sense, that's why we need that tiny little arrow, to show where we are going from to which direction, when we "read the image". Unfortunately this small arrow makes the icons a little "busy", I know that.

My approach was to try to minimise the number of vertices, edges and faces drawn in one image. I tried to find what is the least amount of elements in a pictogram that makes sense and also different from the other Delete functions.

the merge icons look great! but I agree with @Jonathan Williamson (carter2422) about the complexity of the delete icons.

for one, we can use more symbolism without sacrificing clear meaning because the user usually accesses the icon within a limited context; ei. the delete menu or hotkey. Therefore the context of "deletion" is implied, if not explicit.
in other words, although important, indicating the action is less important than indicating the element to be deleted.

secondly, I think all the icons in blender ( selection type icons ) denoting specific mesh elements (vert,edge,face) would do well to be visually consistent, so that they would be immediately recognizable.

I don't know if the plan is to redesign all existing icons or not, but the current selection menu icons are very easy to read; they are all basically consistent in design, making the difference between them really pop out. this "difference comparison" of similar icons is faster and easier for the eye pick out than unique icons for each type. And makes it immediately recognizable what your selecting

something like this with a small "X" for delete, and a water drop for dissolve would sufficiently convey the task, while remaining simpler and more symbolic.I'm not a icon designer , so this is just my two cents, but hope this helps!

something like this with a small "X" for delete, and a water drop for dissolve would sufficiently convey the task, while remaining simpler and more symbolic.I'm not a icon designer , so this is just my two cents, but hope this helps!

This was exactly my first thought too before I designed the ones you can see now. This idea is quite great when we have:

  • delete vert
  • delete edge
  • delete face
  • other combinations of these three (eg. delete edge and face)

But what will you do with Limited Dissolve, Edge Collapse or Edge Loop? How will you communicate that Delete only Faces won't delete the edges as well? How will you make it consistent with the other delete-menu items?

On the other hand: I like the water drop analogy, I think it is a great symbol, since in 3D modellers we don't use Blur tools. In 2D softwares the water drop means blurring.

secondly, I think all the icons in blender ( selection type icons ) denoting specific mesh elements (vert,edge,face) would do well to be visually consistent, so that they would be immediately recognizable.

Atm I'm working on the icon interface guidelines in general, and I also have the same ideas/thoughts about reusing some elements. However I'm not sure, if that is the best idea, because our icons compared to almost any other modellers are way smaller (Most of the systems are using 32px icons, we use 16px ones). Using the same cube over and over again will make it almost impossible to recognise what is going on. Although these are my fears only. For now I'm supporting to use the same elements in more than one place, until we find out it is confusing.

But what will you do with Limited Dissolve, Edge Collapse or Edge Loop? How will you communicate that Delete only >Faces won't delete the edges as well? How will you make it consistent with the other delete-menu items?"

good point, that could be a challenge; but I think the concept is still valid. for example,if in the future there is a Loop Cut tool icon, then the Delete loop icon should be visually similar, so that its quickly identifiable.

Icons are first and foremost a visual symbol, then an illustration , ie. fast distinction between icons in the end is what makes them useful, not what they depict.

for example, when I recently installed Maya, I was dismayed and confused by the huge "wall" of icons presented in the toolbar, with no labels to identify them. so even though they are illustrative of their function, I still had to spend the first half hour reading tool-tips instead of icons.In the end though, a user of maya stores those icons in his memory and then its a matter of quick visual sorting, not illustration. this is made easy by consistency in design and color across related functions.

I guess my point is; in blender we have text to identify the icon in most places, thus the illustrative aspect is less important than the consistent symbolism, if, in the future, blender moves to icon only menus, the consistent style is what makes for fast identification.

I guess my point is; in blender we have text to identify the icon in most places, thus the illustrative aspect is less important than the consistent symbolism, if, in the future, blender moves to icon only menus, the consistent style is what makes for fast identification.

@Warren Bahler (russcript) I guess I now understand what you are trying to say and I think it is a very good point. So basically what you are saying is this:

NOTE: It is more important to connect a previously understood action to an easily recognisable visual symbol, then creating an illustrative representation of this action to make it easily understandable in the first place.

Do you know what this means? It means a whole different approach, a whole different philosophy -- and IMHO probably a better one than I tried to achieve until now.

My philosophy and all the icons I designed so far are supporting the newcomers and the intermediate blender-students. The software and it's UI will help them to learn how things are working. In contrast your philosophy is supporting the advanced and professional users who are using this software for a while and learnt most of the actions and logical steps blender is doing and can do.

But/so this means:

NOTE: Blender always has a steep learning curve for newbies, which is the price to pay to be easier, simpler and faster to use for professionals. So our design's focus is on efficiency rather then the easiness of learning.

Actually I like this idea a lot. I think this is exactly why I'm here in the first place: I BELIEVE BLENDER IS A SUPER AWESOME PROFESSIONAL TOOLKIT! I also do believe that after a given complexity you can't make things "simpler/easier" you can make it less "complicated" but not less "complex". We are designing a 3D modeller here, not another Instagram or Flappy Bird! :)

@Jonathan Williamson (carter2422) and @Paweł Łyczkowski (plyczkowski) -- do you guys all agree with this two really important notes above?

Because if you do, and all of us do, I have to rethink and redesign my icons in a very different way!

@Peter Varo (petervaro)

It is more important to connect a previously understood action to an easily recognisable visual symbol, then creating an illustrative representation of this action to make it easily understandable in the first place.

I would rather say that:

NOTE: The clearer you can convey the nature of the action with the icon, the better, and the cleaner and more aesthetic the icon is, the better.

The two does not necessarily exclude each other, but sometimes it is hard to have both - then a compromise is inevitable.

It is a fact that your delete icons are cluttered, but in the end I value functionality of the program more - that's because the GUI is meant to be a means for using the program effectively, not to be admired.

For instance image a super effective, icon-only toolbar, or a favorites bar - in such a a scenario these icons would shine. Or adding floating icon-only buttons of your favorite operations to the 3d View, and modeling full-screen without any toolbars. I would like to keep such options, that's why I prefer illustrative icons. And because even a long time Blender user would struggle a bit more to remember non-illustrative vs illustrative icons.

Of course, we should strive to make it as aesthetic as we can at the same time. So, in this case, I would prefer recognizability, since you already achieved it nicely, but maybe try to make the icons a bit less visually aggressive - you can do that with anti-aliasing, reducing contrast and saturation, and removing or toning down elements that are secondary in importance.

try to make the icons a bit less visually aggressive - you can do that with anti-aliasing, reducing contrast and saturation, and removing or toning down elements that are secondary in importance.

I'm working on a super dynamic global solution for that, I will post it today!

NOTE: It is more important to connect a previously understood action to an easily recognisable visual symbol, then creating an illustrative representation of this action to make it easily understandable in the first place.
NOTE: The clearer you can convey the nature of the action with the icon, the better, and the cleaner and more aesthetic the icon is, the better.

yes, that pretty much sums it up; I guess it's like everything else, a blend of somewhat opposing interest\approaches, ei. pro user vs new user.

my example with opening Maya for the first time illustrates the fact though, that no matter if the icons attempt illustration of everything, there is still a fairly steep learning curve. simply because of the complex nature of 3d tools and functions it will never be unmistakably clear to the user what is illustrated, unless provided with text (as blender is ATM) or tooltips.

the super dynamic global solution sounds interesting!

the super dynamic global solution sounds interesting!

@Paweł Łyczkowski (plyczkowski) @Jonathan Williamson (carter2422) @Warren Bahler (russcript) It took me a long time to get ready, but here is my proposal: https://developer.blender.org/T38757?workflow=38093