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

[chennes]

The Grant Review Committee has reviewed this proposal and recommends that the FPA fund it. This is a non-binding recommendation, and the proposal is now being forwarded to the FPA for a final vote. This process takes up to two weeks: I will let you know here as soon as we have a final result.

[WandererFan]

"bold and brash" colours are helpful for those of us whose eyesight is not as good as it once was. :)

[obelisk79]

Hi Wandererfan, I firmly believe that good contrast can still be achieved without so much strong color. The idea here is to be less reliant on color in-general to convey the purpose and meaning of icons. Not everyone can differentiate the colors anyway so reducing their use should be a benefit.

[chennes]

Thank you again for submitting this proposal, @obelisk79 -- the FPA has voted to approve funding for this project. Please reach out to fpa@freecad.org to set up payment terms and/or a contract, if required.

[obelisk79]

Awesome to hear. I'll get on it right away.