Modernize, revise FreeCAD Art Guidelines and Icons (Fixed-Goal Grant Proposal)

[obelisk79]

Proposal description

I am proposing to draft/rewrite new FreeCAD Art Guidelines along with providing replacement icons which follow this. The current art guidelines are well thought-out and provide for reproducible style, however fall short of following current design trends for visual communication and relies heavily on bold and brash color combinations. This effort will be intended to replace the guidelines, document them, work with the FreeCAD community across several platforms to find both style and form that have a general widespread acceptance, and replace them in their entirety.

Clear, effective icons are an integral form of visual communication to the user. They also relate to subtle psychological impacts on users. FreeCAD relies on this form of communication heavily as seen in this approximate analysis:

Count - Source

291 - Gui/Icons 022 - Mod/Assembly 158 - Mod/BIM 085 - Mod/CAM 107 - Mod/Draft 092 - Mod/FEM 002 - Mod/Inspection 008 - Mod/Material 011 - Mod/Measure 044 - Mod/Mesh 006 - Mod/MeshPart 017 - Mod/OpenSCAD 074 - Mod/Part 055 - Mod/PartDesign 006 - Mod/Points 014 - Mod/Robot 282 - Mod/Sketcher 019 - Mod/Spreadsheet 002 - Mod/Start 012 - Mod/Surface 189 - Mod/TechDraw 053 - Mod/Tux

Approximately 1,475 icons.

Psychological/UX Principles involved: Aesthetic-Usability Effect Cognitive Loading Law of Prägnanz Law of Uniform Connectedness

Deliverables

• Art Guidelines with easy to reproduce steps for creating/modifying icons with a consistent appearance.
• Update Wiki with guidelines.
• Provide Color palette and icon template for Inkscape design software
• Submit and support PR updating FreeCAD's Design Guide with new Art information
• Review, Design, and Replace all icons found in-use through every menu or toolbar.

Timeline

Stage 1 - Draft Guidelines (2 weeks) Stage 2 - Draft initial icons (2 weeks) Stage 3 - Engage community and Design Working Group for feedback (one week) Stage 4 - Submit PR to Design Guide, Update Wiki, Provide Template, Provide new Color Palette (1-3 days) Stage 5 - Review, update, or replace icons for all visual items in the Tree, Menus, and Toolbars in accordance to new style (2 months)

Total expected duration - 3 months (or until complete)

Risks and mitigation

Risk - updated style and resulting icons are broadly rejected by the community Mitigation - community engagement, and small-medium scope user testing before merging into the code base

Risk - Unable to personally complete ~1400 icons in the estimated timeframe Mitigation - completing, testing, and publishing effective art guidelines first so others can contribute

Compensation

I have already initiated stages 1, 2 and 3 Compensation requested $1750

Here is a sample of the (currently evolving) artistic style being explored:

About you

• Joe Sardos
• Obelisk
• User Experience Design certification
• Member of Design Working Group
• Previously completed significant body of custom themed icons for FreeCAD

[obelisk79]

An update in the evolution and direction of the icon style. Moving into experiments with 2D oriented icons. The focus so far has been to avoid using gradients to define form or shape as much as possible, making visually and aesthetically compatible icons simpler.

[chennes]

Thanks for your grant application, @obelisk79. I have forwarded it to the Grant Review Committee for their consideration. That process usually takes 1-2 weeks, after which they will make a non-binding recommendation to the FPA members, who will then vote on your proposal (a process that typically takes another two weeks). I will keep you updated as the grant progresses through these steps.

[shaise]

@obelisk79 , you are a magician of art...

[yorikvanhavre]

Totally in favour of this one. The style you chose so far is pretty cool :)

I'd love it if you would agree to consider the following:

• There is currently a try at using colours meaningfully: yellow to create, blue to modify, red to constrain, etc... It would be really cool if that concept wasn't entirely lost, if we could somehow come up with some colour chart that means something contextually
• Following that line, it might be interesting to explore ways to change the colours of icons programmatically. Ex, you could have the same icon in blue or yellow, by just doing a regex change in the svg file. That might be easy or hard, and maybe even not really useful, I have no idea, but might be worth looking at the question

[obelisk79]

Hi Yorik, thanks for the comments. My intent is to look at still using color as a means of conveying information or purpose. What that will look like is still under review and likely won't be solidified until I start grouping and categorizing types of functions. I've already engaged the DWG on this matter regarding additive/subtractive findings (ie blue =additive vs red=subtractive) I want to effectively minimize reliance on color to convey intent as much as is practicable. Use of color draws the eye and should be minimal and intentional. Wherever possible, icons should be designed in such a way that they do not require the color to convey their intent. So, my vision is not a 2 color icon set, but I expect the end result to be generally less colorful overall.

Regarding programmatically changing icon color, @kadet is exploring this functionality and has expressed intent to add ability of dynamic recoloring of icons. This would expand the scope of work involved as I'll likely need to implement some kind of css coloring in Inkscape with the icons which I am aware is possible. For the near term, icons will be designed in such a way to look good across a broad range of background colors and contrast without dynamic color. I think such a feature would be good for theme developers though.

[yorikvanhavre]

Yes, most of that could be considered "post targets". It's indeed maybe wiser to start with designing a good base set, and we think about further uses in a later stage.

And indeed maybe relying less on colours is a good way to improve readability. Okay, I'm convinced :)

[maxwxyz]

To convince FPA, here different icons in a similar style. We evolved this on Discord, if anyone is interested and wants to contribute: https://discord.com/channels/870877411049357352/1298130304351080520