Suggestions for Game Studio UI

[Tonedus]

Unfortunately, this topic no attention is paid, I want to try to present convincing facts - what we must change in that direction. As you know, the engine received a new dark user interface and this is excellent, but comparing the color scheme with the old version, I realized that the new color scheme is very unpleasant in harmony, all the elements (panels and menu sections) not having color differences and merge into each other, the places where they are bordered by ribs visible weakly. The old version of the interface in this regard is much better, its interface is clearly divided into blocks with different gradients that are visually well different from each other and look like separate blocks. For clarity, I made a comparison of several engines, you need to understand what I mean.

Basis of the foregoing, I can suggest the following steps:

• Improve the current color scheme by delimiting individual elements with other gradients plus ... I would still make it a little lighter in general
• It makes a lot of sense to leave the old version of the light interface version, but with new icons
• It would be nice to systematize new icons by color, that is, to make them in a uniform color scheme, it doesn’t matter what tint they should be, blue as in Unreal or gray as in Unity, just now there is too much variety of icon colors in the engine, it looks a bit chaotically ... yellow, red, green blue, black, etc.

I would welcome any suggestions and comments.

[Aggror]

Very nice comparison. Looking at the comparison picture I have to say that I find Unity's layout the best. Unreals icon set is far too big in my opinion. I personally haven't checked it but is it possible to switch to another theme or define a custom one?

[Tonedus]

As far as I know in Unity it is possible

[avestura]

I think this solved long ago but in case you made an issue about it, let me explain again.

Xenko's new design is influenced by Visual Studio Blend, which is built for designers and designed by designers. Also, the icons are coming from the geometric paths of Visual Studio Image Gallery, and changing the colors of them (which is fairly easy to do, as they are paths) makes them inconsistent, prolly incompatible with Luminosity Converter, and makes it hard to build multi-theming features in future. The only way to have a uni-color consistent set of icon, is to hire some icon designers to design icons dedicated for Xenko (which I'm not sure if you/anyone is currently volunteer to spend money for it); That's why I think we need to stick with multi-color icons of VS for now (they are very well designed tho, but I understand this is subjective).

Also, the solution is not "Let's remove the entire black theme which people done tones of work for it, and which is actually based on a design philosophy", the solution is to "Implement multi-theming features, so people can add their own themes based on some config files". Thus, trying to change the colors is useless. Next guy comes, creates an issue and changes the theme to what he/she likes.

There is already a color converter, try to implement a theme config file and load color resources from it, then people can even make light themes for the editor, and we will all live happy ever after.

[avestura]

by the way, #000 masterrace :D

[fdrobidoux]

I'm more of a fan of #111 but a #000 is fine too.

[tebjan]

influenced by Visual Studio Blend, which is built for designers and designed by designers.

@0xaryan you have a lot to learn, young man. :) taking microsoft applications as a design reference guide made me laugh a bit. I am working in the creative coding and design field since 20 years and micosoft is never a good design reference. so I agree with the author of this thread, the color contrast is a bit too harsh and not so pleasant to work with for long hours.

brightening the dark backgound would indeed release some strain to the eye. especially with new high quality screens it's not necessary to have such a high contrast.

is there a central place to change the background color? or do we have to go thru all xaml files separately?

[avestura]

@tebjan

taking microsoft applications as a design reference guide made me laugh a bit.

I don't see this anything more than a "microsoft bad" meme. "Microsoft Application Design" makes 0 sense. MS got tones of designers that you can't even count. Different apps have different designs based on context and platform, and for a popular product like VS, MS actually has a dedicated team of UI/UX designers, and some other people who bring customers to MS camp to get live feedback from them. One should already know these if he/she isn't even working in the design field.

micosoft is never a good design reference. so I agree with the author

Wait what? You agree with the author because Microsoft is not a good design reference? Maybe your idols in the design field are not referring VS as a product with a bad design but arguing about some other app (assuming the people who you're talking about are actually good designers). Don't agree with people because some other people have some opinions. Think for yourself.

brightening the dark backgound would indeed release some strain to the eye.

This is true for some people, but also there are other people who prefer to have it darker. All these subjective opinions are fine. As I already mentioned in the comments above, if you really care about contributing in this area, just implement a theming feature and then there would be themes available for everyone, even who disagree with both me and you, like those who use everything with Light theme. That's the correct way of doing this.

is there a central place to change the background color? or do we have to go thru all xaml files separately?

There is no need to go through all Xaml files, but there should be multiple files which hold primary and secondary colors if I recall correctly.

you have a lot to learn, young man. :)

That's true. Not only for young ones but everyone. Learning never ends. (:

[fdrobidoux]

@tebjan And you have a lot more to learn about tact. Not to mention Microsoft isn't the same company they were 10 years ago, they have invested a lot in making proper design decisions and learning from their mistakes. You should do that too.

[Tonedus]

Thus, trying to change the colors is useless. Next guy comes, creates an issue and changes the theme to what he/she likes.

I can’t agree with you, all world-renowned game engines adhere to the exact color philosophy that I mentioned above. In companies such as Unity or Unreal work certainly not fools, the color scheme that they have now appeared is not random, it didn't appear due to the subjective opinion of the developers, they did a huge titanic work for the optimal color ratio. But you stubbornly continue to defend your subjective opinion of the bliss of black ...

[Eideren]

Can we stay on the subject at hand please, let's not start a flame war in here, that's not what issues are for.

Implementing a way to swap themes seems like the better idea here as it would allow other people to have their own while we could also adopt one of those as the official theme if necessary, let's continue from there. What would be feasible given the current (xaml based) interface ? How could we swap colors, icons, layout and such of our ui elements ? How to load it when it isn't bundled with the engine ?

[Tonedus]

Can we stay on the subject at hand please, let's not start a flame war in here, that's not what issues are for.

Implementing a way to swap themes seems like the better idea here as it would allow other people to have their own while we could also adopt one of those as the official theme if necessary, let's continue from there. What would be feasible given the current (xaml based) interface ? How could we swap colors, icons, layout and such of our ui elements ? How to load it when it isn't bundled with the engine ?

Totally agree with you! I was waiting for constructive criticism and not a categorical protest and a complete rejection

[avestura]

you stubbornly continue to defend your subjective opinion of the bliss of black ...

Dude. You are asking the community to turn the theme to what you like. I am asking the community for a theme infrastructure so everyone work in the editor with the color they like, and you say I am the one who is defending a subjective opinion? Think before you talk...

In companies such as Unity or Unreal work certainly not fools

Of course they are not. Unity actually sells its dark theme. It's a source of income for them to force free licensed people buy the product to gain a darker theme... Also, just don't do whatever others do. Be initiative. A multi-theme feature for Xenko makes it better than other engines in case of personalization.

[avestura]

What would be feasible given the current (xaml based) interface ? How could we swap colors, icons, layout and such of our ui elements ? How to load it when it isn't bundled with the engine ?

I have implemented a Luminosity transform for the Icons, that should do it (of course If you want to use VS Icons). And for Xaml I'm thinking about FsXaml Type Provider. It is a generative type provider, that means it can create actuall .NET types from Xaml in compile time, so it can be used in another .NET assembly and will be easy to load and modify resources from code. I'm not 100% sure if it can help in this case tho, or if the maintainers are ok with using F#.

[avestura]

I'm also thinking about redesigning and rewriting the whole editor in Avalonia which is cross-platform. That would be a huge work tho. Sooner or later Xenko should move to a cross-platform editor, and I guess if community wants to put effort on the editor area, this should be a top priority.

[Eideren]

Changes have been made towards this issue, see #637 and #667.

We also had some discussion around the property grid on discord, the gist of it is that its layout could be better by chaning the size and spacing of its elements. @RayKoopa

the font size and expander glyph are too big aswell, given its already highlighted by color too ignore the colors and that the font size is still wrong in this quick mock. i just wanted to test small margins

A quick mockup I did

[RayKoopa]

I can also add that I'm currently working on a followup PR to #667 , updating the AvalonDock theme to the most recent official one being the core motivation. It provides some stronger contrasts and some style to aid in separating content. Partly also because blurry elements are fixed in #667 . I also add a VS2019 Dark-like theme (brighter than Blend Black), and an experimental VS2019 Blue-like theme for more colorful contrasts right now.

However, it is still hard to recognize which tool window is currently active in the Studio, as even inactive tool windows have all their list selections at the same bright blue. If you check VS2019, only the active tool window is allowed to also have blue selection highlights, selections in inactive tool windows are grayish. I wanted to try to fix it but currently cannot get the focus detection to work properly yet...