New Editor Theme

But the code is loading and thus forcing to use "Lucida Grande", and it works correctly in Unity 2018.3?

I did some further tests and it looks like Unity 2019.1.0a5 the font property of a GUI style is completely ignored (running on windows). I'm now loading Arial into the style.font and the font doesn't change at all (works in 2018.3):

Code (CSharp):

1. style.font = Font.CreateDynamicFontFromOSFont("Arial", 11);

Shall I report this as a bug?

 

Thank you very much for taking a closer look into this issue. I tried your script and it did indeed work correctly, so I started diffing with my script and found the issue:

Code (CSharp):

1. using System;
2. using UnityEngine;
3. using UnityEditor;
4. using UnityEditor.Experimental;
5. class PlaygroundEditor : EditorWindow
6. {
7.     private GUIStyle style = null;
8.  
9.     [MenuItem("Tools/Playground &d", false, 1000)]
10.     static void MenuInit() { GetWindow<PlaygroundEditor>().Show(); }
11.     static class Styles
12.     {
13.         public static GUIStyle labelLucidaFont = new GUIStyle("ControlLabel");
14.         static Styles()
15.         {
16.             labelLucidaFont.font = EditorResources.Load<Font>("Fonts/Lucida Grande.ttf", true);
17.         }
18.     }
19.     void OnGUI()
20.     {
21.         if (style == null)
22.         {
23.             style = new GUIStyle();
24.             style.font = EditorResources.Load<Font>("Fonts/Lucida Grande.ttf", true);
25.         }
26.  
27.         GUILayout.Label("Lucida", Styles.labelLucidaFont);
28.         GUILayout.Label("Lucida Runtime", style);
29.     }
30. }

Result:


Looks like calling the EditorResources.Load<Font>() method when OnGUI() is called the first time causes the issue... Not a big deal for me though now that I know that it works when placed in a static constructor but probably worth mentioning.

 

Would it be at all possible for you to somehow provide us with the new builtin theme style sheets so we can make tweaks and modifications and then test those changes in the preview build directly? This would be extremely helpful in enabling the community to rapidly test and propose improvements to the new theme. It would also allow us to easily share our modifications here for others to try, comment on, rate, and further modify. Essentially making this a truly collaborative effort with the community.

 

The first one is good enough. It's flat, but has border and click can be seen on it. I think the gradient is not necessary.

 

Yes I thought this was probably the end goal and thank you for all your hard work. I was mostly just wondering if we could experiment now with modifying this or a future preview build theme. So we can give you feedback before the theme is officially released in 2019.

 

Gradient might not be the answer, but a pixel thin highlight or shadow/drop shadow might be. Otherwise we're right back here again:

 

So I understand this is a very early alpha version, and there are readability issues and a lot of valid points made by people in this forum.

But with that said, I really love the new theme, it feels new, like that "finally!" feeling for the Unity editor, ahh...

The simplicity goes a long way for me. It seems a lot of people don't like it, but it's nice to look at for me haha xD. The monochromatic colors for a lot of the components (all Physics components are green, Mesh stuff is blue, Network stuff is pink/purplish, etc.) -- that really helps to see them and group them in my head quickly.

This honestly makes me want to buy Pro literally just for the dark theme.. it looks sooo good on 2019.1 so far.

Anyway, in a time of a lot of feedback and "do this", "do that", (when is it not that time though for game developers? XD) I wanna say good job to everyone working on this! It's a lot to get this to work, to plan the design, to keep it consistent, across the so-many icons that needed to be updated, and iterate over everything so much so that we forget about perfection being impossible. Awesome job Unity developers keep going, and I'm glad you take all this feedback from the community!

 

Stretching the gradient vertically over the whole button and decreasing contrast looks much better I think. Of course now it's very similar to the old theme.



You could also try replacing the gradient altogether with a solid color to give it a more beveled look:



However I personally prefer the former classic look. I find the subtle gradient ideal. Since it really helps make the element standout without becoming distracting.

Update: I've attached my button mock up PSD file below for anyone who'd like to mess around with it.

 

I think that a very subtle linear gradient (more subtle than on the image above) spanning whole height of an element might work fine with an otherwise minimal UI style, as in this Adobe style:



Since it's linear and spans whole height of an element, it doesn't look like a gaudy skeuomorphic shadow, and since its so subtle, it is not perceived as something in conflict with overall flat style.

If you'd prefer not to use a gradient for whatever reason, I think that another good choice would be to split the whole element into two slightly differently colored rectangular fills - as if the body was still covered with a gradient, but that gradient used a palette of just two colors. That's as minimal as it gets while still giving a button a "pop" against a flat background. Here is how that looks:

 

@bac9-flcl I do like the Abode theme, but I think the Blender 2.7x theme is my favorite. It's something of a hybrid which allows it to use elements from both traditional dark and light themes simultaneously. Like dark text which is easier to read, but without the light background which can hurt your eyes. I also like how it differentiates popups and toggles even further from buttons by making them darker.



It may not match the current flat design trend, but I find it extremely practical and flexible. It would also make for a perfect unified theme to replace both the light and dark themes we have now.

 

I'm afraid that A, you might not be aware of Blender 2.8, which sadly is very flat even on the buttons and B, that Blender has an extremely powerful theme editor.

I do think that Blender's UI "engine" is the most powerful out there. The real-time zoom is especially impressive (just hold alt and middle drag on any UI element and watch the magic happen).

 

I wouldn't call it flat, it has both gradients and highlights/shadows:



I think its a good improvement, the only things I really dislike there are hyper-saturated contrasting icons drowning out more subdued elements. Not sure why they use pure blacks and whites in them when the rest of the UI never does.

 

As far as I know that is not the new UI.
This is:

 

testing with dark skin, certainly looks better than new ui with light skin in overall..

some issues
- title and normal text look too similar (hard to see bolding) and no extra spacing

current ui


new ui


dropdown menu looks almost like its locked/readonly (since its this kind of gray text with flat background)




ps. there is good deal on unity plus right now, with some goodies included!

 

I am indeed aware of the Blender 2.8 alpha and it's changes but I'm not exactly sure how that or the theme editor affects my opinion of the current default Blender theme. In any case I've updated my original post to at least clarify which version I'm referring to.

All that being said, roykoma and ekegraphics are correct. The Blender 2.8 theme has been updated to a new flatter design but I don't really feel this as an improvement and still prefer the 2.7 default theme but maybe I'm just bias.



However, strangely enough, I do kind of like the "Flatty Light" theme that comes with 2.7. Probably because it seems to better maintain the original 2.7 theme style. I also think this would be the ideal theme for Unity to start taking inspiration from. Especially the dark/light toggle/button element contrast and blue accents.



I also like how panel headers are a different color, clearly separating each element visually.

 

You can drag-and-drop components to reorder as of 2017.

 

@Madgvox Actually, I just checked and it looks like you could do it as early as Unity 5.6! Wow. Can't believe I went this long without noticing. Feel like such an idiot now, but thanks for pointing that out!

 

Decided to take a full screenshot and just do some paintover on elements. Expanding on what I've done before as well as taking a lot of ideas from others, here's the progress... I'll try to point out specific things, but I'll attach both an edited and unedited version so you can flip back and forth between the two to see the smaller adjustments I've done too.

Click here for current view of 2019.1.a5 for comparison
Resdesign:


Inspector:


Button:


I should note, all of the below is only tested with the dark theme

• A lot of the same items I've posted before, but using the 'classic' font. I know Unity really wants to upgrade the font but, until you can find one that's as crisp as Adobe's, I think this is the best option.
• Dark input fields, checkboxes, and drag and drop selections. These stand out from other inputs so you can instantly tell what kind of function it is.
• Dropdowns (one large arrow) are lighter than the bg color and have a 1px highlight on top to help pop off the bg even more
• Similarly, the button has a 1px highlight, but is also slightly lighter than the dropdowns. I liked a lot of the options above for the buttons, and decided to try my own as well. Pressed state darkens the main color and changes the 1px highlight to a 1px shadow.
• Added dropdown on subsection (Realtime Shadows) to help keep the inspector tidy. Any additional settings that aren't always available should be collapsible subsections. Make your edits, collapse, clean inspector.
• Adjusted all the spacing between the components (gains a lot of vertical real estate !)
• For visual setting purposes only, I made the Light a prefab to show the Prefab buttons and Overrides dropdown at the top. Basically just aligned some of it more
• Component section collapsible titles have a darker BG to help break the sections up.
• Labels are white set to 50% opacity
• Consolidated the 3 component 'settings' buttons into a 3-dot setting button
• Increased checkbox height and width
• Increased window tabs to be the full height of the section (gains 2px) with sharp corners
• Selected tab has white text and blue highlight
• Unselected tabs have same color as labels (white at 50% opacity)
• 'Active' but unselected tabs (see Scene and Project) have a highlight to show they're active, but are a gray color to indicated not selected

...That's all I can see/remember for now. I'd be more than happy to share the PSD if anyone wants to add to it (just let me know, I need to clean it up a bit if other eyes will be seeing it! )

 

Hi and thank for all the effors you people put into improving your engine! :thumbup:

The only gripe I have agains the new editor is that "SampleScene" that is automatically added to new projects. We cannot rename it from the editor; using File/Save scene doesn't rename it but creates a new one and the SampleScene just sits into the project window. It was best using "Create a new scene" when necessary than opening the sample scene and create a new scene afterwards in my opinion.

There are two ways to rename it:

• going into the project window and rename it directly,
  
• going into the explorer and modify its name and the name of the meta file as well.

This is what I'm doing but I'd rather see the "untitled scene" come back in the future.

Thank you!

 

+1 for highlight on buttons.

---

I have serious beef with the overall spacing/padding. Needs a cleanup/consistency pass desperately. Things are simultaneously cramped and way too spaced out. Makes the whole thing look unprofessional and silly.

I'll also echo others and say that changing the font for the sake of it is pants on head. Current font is contributing to the spacing issues.

 

I'd pretty much use this as-is already!

That bigger arrow in dropdown is excellent,
and combining the small icons at component top right reduces clutter nicely.
You click that component documentation button only few times a year anyways..

 

I hope you guys just make the themes customizable as much as possible.

I'm sure there's a whole market out there for people who want to make themes.

 

Good god I'm a fan of this.
Somehow my brain tells me that this shouldn't work and would just muddy the text but it just looks great instead.

Thanks for the Unity devs continually refining this. I'm hoping y'all are mostly ignoring the few truly disgusting mockups amongst the thread

 

Finally had some time to catch up on all the thread. I just want to thank you all for openly gathering feedback about this redesign. As a designer and extensions developer, the Unity GUI is something I think of pretty much every day (literally).

There are some really good suggestions in there, so I'll try not to repeat too much, but there are key points others brought up I think are meant reiterating.

First, what I think the previous theme did especially well:

• Compactness: Unity is a very dense tool with lots of affordances; making sure a given workspace has access to everything was a strong point of the previous theme.
  
  
• Consistency: Controls were consistent across all the UI; a button always looked like a button, a dropdown like a dropdown, a text field like a text field. After an initial understanding of the design language, users could easily interpret a new window.
  
  
• Signifiers: It was clear what actions were possible with a given control just from its skeuomorphic shape. A button could be pressed, a text editor could be filled, a node could be dragged. Gradients and drop shadows played a key role here.

Where I think the previous theme fell short:

• Grouping: Especially in the inspector, property fields fell disconnected and not logically related. Indentation and foldouts did an OK job at best to indicate a logical group.
  
  
• Accumulation: As core features were added, like Services, new editor windows, etc., some areas of the editor became unnecessarily crowded, trying to fit controls that were never intended to be there. Most importantly, the top right corner of the editor (Collab, Services, Account, Layers, Layout) is in strong need of a structural redesign, not just a cosmetic change.

Here's what I think the new theme does especially well:

• Icons: The icons' design is crystal-clear, uses all available space, and does a fantastic minimal use of colour to distinguish and group engine modules together (e.g. green for physics, yellow for light, etc.).
  
  
• Erasing: The theme is more discreet and leaves more space to the created content.
  
  
• Modernity: The cosmetic choices current with design trends and is likely to be forward facing in its minimalism.
  
  
• Branding: The theme fits with Unity's minimalist recent branding, and matches the company prescribed font face (Roboto). This helps creating a continuum for the user when navigating between web services (which are taking an ever-growing place in the ecosystem) and in-editor work.

Now of course, here's where I think the new theme falls short:

• Readability: I don't think I need to stress this out any further. If you insist on keeping Roboto, which I think could be a good choice for the reasons stated above, please hire a font designer to create a variation where its kerning and pixel snapping are adjusted for SDPI screens. Roboto is beautiful for display and web, but it was never designed as a high-legibility small font for UI.
  
  
• Signifiers: It is no longer clear what is clickable, holdable, draggable, editable. Every control uses the same flattened design and it makes it impossible for me to quickly parse a screen.
  
  
• Consistency: This is actually a regression from the previous theme: buttons no longer all have the same appearance. For example, the top-level toolbar buttons don't look the same as the inspector buttons. I understand the need for smaller edge-to-edge buttons the small toolbars, but the big Tools / Play / Pause / Step buttons are not space limited and should fit the global button skin.
  
  Also, focus color is not uniform and could easily be. I think highlighting active controls, tabs and selection is a great idea, but it should all be done with the same highlight color. As part of your branding effort, perhaps it could even be the standard Unity turquoise; or, in another direction entirely, it could match the selection highlight orange from the scene view. Again, the key here is consistency.
  
  
• Grouping: Nothing is proposed to address the poor logical grouping of the previous theme. Users have suggested very interesting new looks for foldouts and property alignment, I think it's worth investigating!

I was going to work on a Sketch library today to plan for new Bolt features, so I'll use the occasion to make suggestions for control skins that I think could fit your intended design goal and keep the best of both worlds, old and new.

 

Quick mockup that implements most of what I (& many others) suggested:

• Minimal skeuomorphism to add dimensionality. No gradient, just a single pixel line above or below the control
• Consistent highlight colours and states
• Control reuse across windows
• Equal control height to facilitate reading

I still think there's much to be done about label alignment / attachment to the actual control, but I have to go work on some other things for now!

​

 

Please allow for colors of the gray to
be set by the user, for example like photoshop has a slider between light and dark, and if possible a choice for the user to switch between classic theme and new theme


Also becareful with the very dark gray almost black in the top bar, its taking attention because of the high contrast.

 

This is highly readable. It looks modern but way less flat than some of the original suggestions at the top of the thread. At a glance I understand what type each control is, and what its state is.

I agree with this sentiment as well. Depending on the screen and viewing angle relative to the user's eye, even the above great mockup by Ludiq can lose its contrast between the "charcoal" and "black". Being able to punch up the contrast a bit would be important.

 

I'm a fan of this but I disagree with the highlight on the "pressed" button state. Having the highlight "flash" to the bottom on click is distracting. I think it will look much better just replacing the top highlight with a darker "shadow" line.

 

I think you're right actually, I designed more mockups with it and it's really annoying to swap the pixel line. It makes it look like the font's line-height changes.

What I'm curious about now is this new theme we saw in the announcement for the 2019 visual scripting tool. It's not the same theme as Graph View (e.g. shader graph), but it's not like this new theme either (e.g. popups are just surrounded by a 1px thin line). Will those end up matching or will there be a different "theme" for each? I'm worried about the consistency here.

 

Another reason for removing the sample scene is that it is automatically added to the build settings and if you don't pay attention, the built game opens on it instead of the real game scene.

 

I love everything about the new theme, expect the font the old one seems better readable.

 

I use Unity on a 16.6 laptop, fonts are always too small for my eyes. We should be able to resize the, what's it's called? dpi, Unity uses.

 

some good news in the roadmap

text will be scalable


https://www.dropbox.com/s/j9sga9giybo4l7g/UniteLA-2018-Roadmap.pdf?dl=0

and I see one extra panel called library, very interested what that does? some sort of way to keep assets organised? that would be great

 

I had the very same concern. For a second, I was actually wondering if that was going to set the tone for an upcoming theme shift.

To be clear, I much prefer the UI presented in the new Visual Effect Graph system over the one we've been experiencing here. Blame it on the colors, blame it on the professional feel. I don't care what you blame it on, but that UI makes me itch to start working with it!

 

Is there a video of the roadmap presentation anywhere? Doesn't seem to be a part of any of the daily livestreams.

 

I have not seen the video yet, I think it will be uploaded later

 

Godot recently polled their users about a UI question which seems to have revealed a fairly definitive preference.

Maybe Unity could consider following this example and just poll their users about what they prefer in situations like this.

Source: https://twitter.com/Akien/status/1055485073846345728

 

In this case it could be simple toggle in preferences, some prefer this some prefer that.

 

This UI mock-up from the product roadmap is interesting for a few reasons:



Most noticeable is the theme color matched top menu bar and the scene manipulation buttons moved to the scene window itself. All good improvements but it's also interesting to note the lack of text field boxes. They've been replaced with a simple underline. This is similar to how Unity 3 displayed text fields:



It definitely helps distinguish buttons from fields but at the cost of visual information since now you can't easily tell what's editable. So I think cow1787's and Ludiq's excellent mock-ups show that actually creating more contrast by darkening the text field boxes, like in Blender, is a much better way to go. It helps make all elements distinct without losing any visual info.

 

I noticed that as well and had thought about trying it in my design, but ultimately went with the darker input field box instead. Adobe XD uses the underline for input and dropdowns. And though it has less content to fill the space, it's all very readable. With the amount of content Unity has per component though, I agree and think using an actual box to differentiate between the lines is a better path than just underlines.

Adobe XD:

 

That UI is the one I'm looking forward to, the transition one that's being worked on is fine in my opinion except for the comments about vertical spacing, the way font is handled on low DPI screens mainly the size (I like Roboto), and just some more contrast to differentiate the text fields from dropdowns. Once those are cleaned up it should be fine. The UI Mockup is the change I'd like to see, it's nice and flat, Icons look good it's overall sexy. Looks like that's where It's headed since it's pretty much the same from Unite Berlin Roadmap talk to Unite LA, so I'm excited about this.

I also see why some people think it's resources not well spent recreating the existing UI if it's already here and working and the updated one will be doing the same thing. Maybe they would feel different if it was a more "drastic" or rather a really noticeable change

from Current Unity UI to the Roadmap Mockup


Blender 2.79 to 2.8 where it's more of this is the new UI

Maybe focus would be more on getting the New UI fleshed out rather than sticking with the old since the poll is pretty close since the last reset. I also Know that a lot of people don't like change so that's a reason for slightly easing them into the changes with this "in-between" state

Question for the devs will this be the same step taken (Forum for feedback) when going from the UI being worked on now to something like the mockup (or to it) if that's the next step?

So far I like what's said about the direction the UI is going in, customization, font scaling, etc. You guys are on top of the feedback so that's nice. Looking forward to the next build or what's next.

 

If its going to be as dark as in the mock up, I sure wish I could set the darkness a bit less in some setting, more towards the current unity gray levels.

it's too contrasty the mockup, too much black.

Also its using a tint of blue in the grey interface boxes, this will mess with color vision when color grading a scene in unity.

 

Current prototype



Adjusted prototype suggestion



All the elements are the same I only changed the colours and took out the blue cast in the menu, because its not so good for color grading.

I feel its still a little bit too dark.

 

Animated gif to see the difference