[UI] Meetlat Icons topic

M by Meetlat on 21 Nov 2020, edited 5 Dec 2020 # +10 votes

Hi there! I really appreciate the progress you guys making with OSArch/Blender. That is why I decided to give something back. Since I’m an architect and can’t code I decided to focus my time on design.

Recently I started working on an icon set that can be used for the OSArch community. I am planning to make an icon for each IfcBuildingElement and the corresponding edit modes. I researched the icon style of multiple programs and decided to use the oblique cabinet projection style. That way the front of the icon is always good readable. When 3D is less readable I will use top/front view. In my opinion the default Blender icons are to minimalistic. Some more colors will help with the readability. I decided to use 3 main colors. Grey for basic shape, blue for additions and orange for the action. The faces have some subtle gradients like most program icons have these days.

Result so far

Whats next?

After I finish the first batch of icons I’m planning to make multiple UI concepts. Right now I’m planning to make:

BlenderBIM Pie menu UI Concept
Visual improved asset editor mode UI Concept for Home Builder
Editor UI Concept based on the Grid Modeler add-on

Feedback?

I would like to know if these icons can be useful for you add-on creation. If so, I would like the know the best way to export the icons. I can export them to SVG without the shadows or to a PNG file with the shadows. Should I make a Github page and place them there? What would be the best license? I don’t want the Icons to be used in commercial add-on/programs without my permission. What do you think about colors/style?

Request?

I can make icons in this style on request. Please describe the icon you want to have and give me some examples.

S by stephen_l on 21 Nov 2020, edited 22 Nov 2020 # +2 votes

Blender's icon are 32x32 pixels based, found it realy hard to design so they remains ~~"lisible"~~ legible at such low resolution.

D by duncan on 22 Nov 2020 # +1 votes

Great project @Meetlat and now I've learnt some french from @stephen_l ( "lisible" is legible ). Important to keep the icons small, now software should/must have a good hover over tooltip system with more info - mayeb a larger icon is part of that tooltip. The way Revit does it is great with small animations and graphics. Sverchok must be in need of tons of icons for their nodes, at least for the most important nodes.

S by stephen_l on 22 Nov 2020 #

Blender source provide a parser for .svg file to batch convert icons to png files.

As sample i attach archipack's parsable icons .svg file, based on blender's icons .svg

Keep in mind that i'm "un faux graphiste".

M by Meetlat on 22 Nov 2020, edited 22 Nov 2020 # +2 votes

Hi @stephen_l thanks for the sample and pointing me on the dimensions. I will make both a big detailed and small simple icons. Right now I don't want to limit myself to much, I think the bigger icons can be used at other places. For example:

Icon in left toolbar

They can be used like the add primitives buttons Blender 2.91 will get. @stephen_l These buttons are SVG based right? If I scale the Blender UI they stay very sharp. I know there is a blender file containing the default icons here: https://svn.blender.org/svnroot/bf-blender/trunk/lib/resources/

How cool would it be if we had for example an add 'Structural element' button.If you click that one it show the 'Add Beam', 'Add Column', 'Add Beam plate' etc. I can imagine we make the same for other categories like window, wall, door etc.

This is different than your Archipack add-on 'create' pallet menu. Right know if switch a tab, for example to the BlenderBIM tab, they are gone. I personally like to see the icons all the time. This also helps beginners. For example most of my coworkers use only the buttons at Revit/Vectorworks/Sketchup. I know advanced users will use the shift+A menu or a dedicated shortcut. That's why those Icons should be optional I guess? Visible by default and advanced users turn them off?

Alternative they can be added to the asset menu, comming with Blender 2.92 or Pyclone:

Custom Pie menu

A different approach than mentioned above is using a custom pie. The default pie show very small icons. But perhaps we can make something similar like the Sculpt Wheel add-on made by jfmatheu:

Vectorworks already has something similar:

Context based (Pie?) menu

Home builder already has a context menu to quickly edit the selected object parameters. Perhaps we can add the option like 'select all IFC.....' 'filter selection on IFC atributes' 'Select similar', 'Copy/paste element propeties', 'Edit object materials', 'Edit Railing Path', 'Edit Floor sketch''Join Walls', 'Edit Wall Join' etc. This is how it looks now with Home Builder Add-on:

This can also be a Pie like menu, like Bricscad Quad menu:

Top menu

Right know both Archipack and Home Builder don't use the top menu. If I use the Sculp tools I can easily see and change all settings. This would also help in the architecture workflow. For example if I create a wall I can quickly select the walltype, height, start level, top level, offset top, offset bottom etc. Wall line location (left/right/center), If automatic join is allowed etc. etc. Menu when using Sculp tools:

How revit does this:

When I have created the first batch of icons I will make concept of the above talked UI/Workflow elements for inspiration.

S by stephen_l on 22 Nov 2020, edited 22 Nov 2020 #

In blender, the left panel is "tool" based, meaning it does trigger a "mode", at this time those modes make it pretty hard if no impossible to handle further actions like preset chooser, as every click does trigger the main tool instead of further action.

The icons here are mesh based converted to .dat using a script (available in sources).

Top bar usually are "tools settings", may make sense to modify operator defaults like a brush size. In archipack context however, as most dimensions are editable on-screen it does not make much sense, and the top bar available space is pretty limited.

M by Moult on 22 Nov 2020 #

Thank you so much for your work @Meetlat ! I have to admit that when I started coding the BlenderBIM Add-on it was the first time I had really coded with Blender and there are still many things I do not know. I know how to create the simple UI that you've seen so far - the UI text input boxes in the panels, dropdowns and so on. However, creating custom pie menus, or editing the bigger toolbox icons is something I need to learn. So I'm afraid to ask for icons that I don't know how to use :)

Using the add-ons, and then creating UI mockups in addition to the icons on how to make it much more user friendly would really be appreciated!

C by chunchk on 23 Nov 2020 #

@Meetlat

Your icon package looks amazing.

I think it is great time to talk about the UI & UX.

I tried to pursue my friends to use open source program but they don't like it because they don't really feel comfortable about the workflow and the interface. They found the behavior "weird".

Blender has good UI & UX already, if BlenderBIM Add-on could take advantage of it then BlenderBIM might has a chance to challenge commercial software.

D by duncan on 26 Nov 2020 #

@Moult I can't really see from the https://wiki.osarch.org/index.php?title=BlenderBIM_Add-on_Roadmap when you think there should be serious work on the UI/UX. I'm guessing that the functionality and scope should first be fully sketched out and then one thinks about how to groups functionality into workflows and then design user interfaces relevant to those workflows. Is something like the way it goes? But there are surely aspects of BlenderBIM Add-on like collisions control, where interface design could start relatively soon if someone was ready to do that.

M by Moult on 26 Nov 2020 # +1 votes

@duncan my initial plan was to leave it for the 0.X.X series, under "improving usability". However, like everything else in FOSS, if somebody has an awesome mockup / idea and we can go for it, we go for it! :)

C by chunchk on 5 Dec 2020 # +4 votes

Before I swarm by academic examination and projects in the coming future. I'd to contribute some ideas about the UI.

Here are some icons that based on the design language initialed by @Meetlat

Import / Export IFC File

IFC Inspector

and an explorational mockup UI for BlenderBIM Add-on based on the icon pack

M by Meetlat on 5 Dec 2020 #

Looks great @chunchk I will work a bit more on the icons/UI ideas at the end of this month. Right now I'm bit strested out due to work (end of year deadlines...)