f3d icon indicating copy to clipboard operation
f3d copied to clipboard
verified publisher icon f3d-app

Rework UI/UX using designer inputs

Open mwestphal opened this issue 10 months ago • 5 comments

Context F3D switced UI framework for ImGui in F3D 3.0 However, the new UI is merely a recreation of the old UI.

So lets:

  • [ ] Add HDRI information on the top left similar to the file information
  • [ ] Use the color palette shared below
  • [ ] Improve dropzone as shared below

mwestphal avatar Feb 11 '25 07:02 mwestphal

More context and disucussions here: https://github.com/f3d-app/f3d/issues/1245

A figma file containing a prototype can be seen here: https://www.figma.com/design/nybhdVFw1fYJUQ8oqoU309/F3D-UI-Design-Rework?node-id=0-1&t=hiPSmuwkJHs3J9cj-1

Please ask access for it if needed.

Color theme for F3D has been designed here: https://github.com/f3d-app/f3d/issues/1439

Image

mwestphal avatar Feb 11 '25 07:02 mwestphal

Hello !

I'm interested in this issue, nevertheless it could be good to list features that we want to redesign directly here. Idk may be drop zone, cheatsheet, command console, etc... with the actual state of the GUI. I think It can help people to get involved in the discussion.

I asked right on figma file to see proposals and I will try to make a mockup this week.

Ni-g-3l avatar Feb 13 '25 02:02 Ni-g-3l

Hello !

I'm interested in this issue, nevertheless it could be good to list features that we want to redesign directly here. Idk may be drop zone, cheatsheet, command console, etc... with the actual state of the GUI. I think It can help people to get involved in the discussion.

I asked right on figma file to see proposals and I will try to make a mockup this week.

Nice! Please note most of the discussions happens on discord though :)

mwestphal avatar Feb 13 '25 06:02 mwestphal

Here are the feedbacks:

  1. Add HDRI information top left
  2. Use color palette shared above
  3. Improve dropzone

mwestphal avatar Feb 27 '25 07:02 mwestphal

Image

mwestphal avatar Mar 25 '25 19:03 mwestphal

I split that issue in multiple part, this one stays on the color change and I created:

  • https://github.com/f3d-app/f3d/issues/2345
  • https://github.com/f3d-app/f3d/issues/2346
  • https://github.com/f3d-app/f3d/issues/2347

mwestphal avatar Jun 29 '25 20:06 mwestphal

Will use the following for ImGui style:

  • #F94306 , red with the same saturation (95%) and luminance (50%) as F3D yellow
  • #F9B208 aka F3D yellow
  • #788BFF aka F3D blue
  • #7AFF7A , green with the same saturation (100%) and luminance (74%) as F3D yellow

mwestphal avatar Jul 04 '25 06:07 mwestphal

Fixed by #2359

mwestphal avatar Jul 07 '25 17:07 mwestphal