Unreal Engine 4 Deserves Clean UI

[EXGAMESADRENALINE]

Dec 2020 UPDATE:

While I’m no longer taking part in this, here’s the new update from another author, that I think looks interesting:
https://www.unrealengine.com/marketp…t/darker-nodes

Please let me know is it useful or not, I haven’t tested it yet. It looks promising.

---

Original topic:

Hey guys, first of all, thank you for the product!
UE4 and its community are !

**Summary: **This is a re-design of the UE4 editor.
So far the majority here ~85-90% like the new look in general with minor suggestions.

@Robinson Company;670366

I love what you did with the UI. I wish I could use it right now. I LOVE UE4 but hate the UI.

@Maximum-Dev;668081

Just saw the OP and I really love the design. Makes me want to spend more time with UE4 than I should.

@robob3ar;668509

wow man, your UI is absolutely fantastic - I just now realize how the current UI is a bit of an visual cancer, it’s like a party going on there, so much distracting elements. …] this is amazballs

Others ~10-15% don’t like line/flat icons, usually arguing that flat / line icons are the new trend, conspiracy, whatever (no it’s not), some contrast issues. The very small minority do not care much.

**UPDATE: **I hear you! Fans of the current UI Please check the updated ‘bridge’ version!

**Current status: **I’m currently NOT making the theme. Why: Please check the UE4 roadmap.
And unfortunately, I don’t have enough time for this expensive hobby (65h+ of work up to date).
Maybe later, Epic? Thank you all for your support and feedback!

Details below. Important stuff I’m marking with bold.
[HR][/HR]

**Alpha: **

• accent and BG colors can be changed to lighter, darker tones easily
• toolbar / modes vanilla icons can be left intact
• new: experimental bright version
• new: toolbar icons
  - new: laptop mode (WIP) - prototype with interactive animations: http://xddacp.axshare.com - please leave feedback!
  [HR][/HR]

Laptop Mode (not finished and canceled) - please leave feedback
Prototype with interactive animations: http://xddacp.axshare.com

**

**

Low-quality GIF as an overview of interactivity:

**
http://i.imgur.com/59DWTA2.gif
**

Before / after (latest bridge version - closest to the current UI):

With line icons:

Initial modern version:

Before / after (initial modern version):

Experimental bright version:

**What’s next (canceled): **
- bridge: updated icons close to the vanilla version - done
- modern: laptop mode (small screens) UX and UI - WIP

• modern: new project UI dialog

• modern: tutorials pop up UI and UX overhaul

• modern: more UX updates

• modern: downloadable theme (line icons)

• bridge: downloadable theme (solid icons)Please read the thread below about dark color, flat UI, design process and more.

What’s included:

**UI: **

• I’ve tried to get rid of different visual styles
• unexpected font sizes variations
• the non-uniform language of icons (frontal and in perspective)
• tune and de/emphasize accents (colorful XYZ controls)
• fewer borders (negative space instead)
• less visual noise (show unnecessary ? on hover, fewer icons with the same text!),
• etc.

UX:

• ability to shrink panels with double click on borders,
• smaller fonts for groups’ titles,
• ability to move, rotate, scale with mouse
• laptop mode - smaller icons

Collected feedback:

• less black, add maybe gray, white(???) version
• huge icons, make them smaller (btw toolbar icons can be shrunk in the settings)
• wasted space, smaller fonts (btw toolbars’ tabs can be hidden with right click)
• make toolbar icons as text (maybe shift it to the menu - long wasted row of free space!)
• a few tries with full-colored icons
• extreme care about productivity, efficiency! take into consideration hotkeys, flows, etc.
• ability to pin tabs for the longest time so I can keep my default layout where it is without accidently dragging things around.
• a light variant for people who don’t like dark themes.

**Do you have positive / negative experiences with the current UE4 interface? **

[iniside]

I agree that current Visual style needs to be changes.
I like your design much more than the current one.

On good news side, at some point there was Visual Refresh for editor at roadmap. It could be nice, if the Editor styling could be refactored, so there could be mutiple styles present at the same time.

[Raildex]

The editor needs a more compact UI. So much space wasted. I have a small monitor (1920x1200) and I can’t have the Content Browser and the log opened at the same time. I can’t read both of them.

[Nawrot]

@Raildex_;667133

The editor needs a more compact UI. So much space wasted. I have a small monitor (1920x1200) and I can’t have the Content Browser and the log opened at the same time. I can’t read both of them.

Solution to this is one 40" hd monitor and one or two portrait oriented 24". I cannot work on just single monitor.

[ryanjon2040]

+1 from me. I like this new flat metro design.

[zeOrb]

Yup, would love to have modern UI!

[Deathrey (DeathreyCG)]

With due respect, I love native UI and I think it needs no changes.

[BrUnO_XaVIeR]

It looks like a Qt application.
I would use it, where is download button

[Burnz]

I don’t like that design. The current UI Highlights Elements & Sections with different colours. The dark skin looks a bit more fancy but when developing i do not really care about a fancy UI, i care about efficiency when working so the current UI. However i agree some changes could be needed, e.g. being able to disable the icons/buttons in certain areas to gain more space in the editor (The toolbar for example could be just text, giving you a bit more space for other elements)

[aWinter]

Appreciate your efforts, but I also like the current design of the Editor a lot more. Yours might be more elegant, but it’s worse for productivity.

[EXGAMESADRENALINE]

Thank you for all your feedback! I really appreciate that!

Here are some answers:

@Raildex_;667133

The editor needs a more compact UI. So much space wasted.

Yeah, the initial idea was not to reskin it to darker tones, fancy line icons, etc. but make it more productive and efficient.

It could be nice if the Editor styling could be refactored, so there could be if the Editor styling could be refactored, so there could be mutiple styles present at the same time.

Maybe you’re right, UE4 is a very versatile engine and the goal here is to make necessary changes first, and (maybe) fancy stuff later.

@BrUnO XaVIeR;667185

It looks like a Qt application.
I would use it, where is download button

After the long nights developing this, this is a very welcome response from the community! Thanks for all your warm words!

---

@Deathrey;667179

With due respect, I love native UI and I think it needs no changes.

@Burnz;667190

I don’t like that design. The current UI Highlights Elements & Sections with different colours. The dark skin looks a bit more fancy but when developing i do not really care about a fancy UI, i care about efficiency when working so the current UI. However i agree some changes could be needed, e.g. being able to disable the icons/buttons in certain areas to gain more space in the editor (The toolbar for example could be just text, giving you a bit more space for other elements)

Thank you for your criticism. I was expecting to see such comments because you know we all hate those badly curated redesigns, especially if they hurt your productivity! I completely understand your position.

In the first attempt, I’ve tried to make very cautious reimagine of the current UI closer to the UI of well-established products on the market, without completely different UX solutions. Now let’s divide this initial redesign to 2 imaginable parts: re-skin / re-design / re-style (you love it or hate it) and user experience.

What’s included:

Initial re-skin:

• I’ve tried to get rid of different visual styles
• unexpected font sizes variations
• the non-uniform language of icons (frontal and in perspective)
• tune and de/emphasize accents (colorful xyz controls)
• fewer borders (negative space instead)
• less visual noise (show unnecessary ? on hover, fewer icons with the same text!),
• etc.

Initial UX:

• ability to shrink panels with double click on borders,

• smaller fonts for groups’ titles,

• ability to move, rotate, scale with mouse

• suggest more here, this I’ll try to address in the second part.

We all know that it’s wise to bot fall to binary love / hate holy wars with votes / replies (both sides are right, you know).

Please leave all your positive / negative experiences with the current UE4 interface, so I can grab as many as possible issues that can be fixed quickly and easily and send you a few more updates based on your feedback.

Right now we’ve collected:

• less black, add maybe gray, white(???) version
• huge icons, make them smaller (btw toolbar icons can be shrunk in the settings)
• wasted space, smaller fonts (btw toolbars’ tabs can be hidden with right click)
• make toolbar icons as text (maybe shift it to the menu - long wasted row of free space!)
• a few tries with full-colored icons

New:

• ability to pin tabs for the longest time so I can keep my default layout where it is without accidently dragging things around.*

• a light variant for people who don’t like dark themes.

• extreme care about productivity, efficiency! take into consideration hotkeys, flows, etc.

• please add more suggestions!

And let’s discuss them after that again.
I’m here to listen to you very carefully. At the end of the day we’re in the same boat : )
Thank you!

[Hevedy]

Why now all have to be like Windows 10 design plain design, that is too simple. Is like if Dropbox and Windows 10 have a son, why all have to be the same meh. And all black I never get whay all need to be black, like all is too mysterious. And all designed by web designers, that is why even the modern games have the same copy paste transparent UI ?

In other hand your design is clear and that but I don’t like all box style, in some years the new modern will be have the round corners back, and this will be like Windows 98. Since now all copy paste the same plane style.
But your design open a way to allow the color change, like gre/white/black since all is plain and you can change the colors without icons of colors.

[VassiliosC]

I also prefer the current UI but if this user interface can be as an additional Theme option to choose it would be cool!
it looks a little bit like Intrinsic´s User Interface:

Thanks For All The Fish!

[EXGAMESADRENALINE]

@Hevedy;667314

Why now all have to be like Windows 10 design plain design, that is too simple. Is like if Dropbox and Windows 10 have a son, why all have to be the same meh. And all black I never get whay all need to be black, like all is too mysterious. And all designed by web designers, that is why even the modern games have the same copy paste transparent UI ?

In other hand your design is clear and that but I don’t like all box style, in some years the new modern will be have the round corners back, and this will be like Windows 98. Since now all copy paste the same plane style.

thank you for your feedback. The goal is not to make it all black/flat

please read above.
and also for developers, it’s much easier to maintain the flat panels, than that skeuomorphic 9-grid madness.

[EXGAMESADRENALINE]

@Hevedy;667314

But your design open a way to allow the color change, like gre/white/black since all is plain and you can change the colors without icons of colors.

Yep, that’s the whole point - versatility, efficiency, fast dev cycles, not fancy icons or dark mysterious same as Win 10… oh my!
I think I’ll send the toned down version because many see only “it’s different!”, “it’s dark!” and not all hidden, but crucial details (covered in the “Initial re-skin:”)

[Par0l]

I just wanted to say that your design looks superb! I love it.

[MonsOlympus]

I dont mind the more minimalist design with less icons, reducing noise does make it seem less cluttered even if the changes are minimal. I dont like the contrast of the darker theme though it all blends in too much together which could cause a similar issue to noise in that it makes it difficult to find the information you want.

There was someone working on coloured tabs so you could see what type of asset it was based on colour, I do like that idea that colours are a theme that spread across the editor for assets to make it easier to recognize things at a glance.

Ive wanted the ability to pin tabs for the longest time so I can keep my default layout where it is without accidently dragging things around. That seems to be the theme of my wants in regards to UX though is more to do with small functional changes to make using the editor better. I dont think the current grey is that bad it needs a complete overhaul but totally wouldnt be opposed to different skins, maybe even a light variant for people who dont like dark themes.

[EXGAMESADRENALINE]

@MonsOlympus;667331

I dont like the contrast of the darker theme though it all blends in too much together which could cause a similar issue to noise in that it makes it difficult to find the information you want.

…] Ive wanted the ability to pin tabs for the longest time so I can keep my default layout where it is without accidently dragging things around.

…] maybe even a light variant for people who dont like dark themes.

Thanks! Added to the list

@MonsOlympus;667331

There was someone working on coloured tabs so you could see what type of asset it was based on colour,
I do like that idea that colours are a theme that spread across the editor for assets to make it easier to recognize things at a glance.

Interesting, can you send a link or how to Google it? Thanks

[MonsOlympus]

@EXGAMESADRENALINE;667334

Thanks! Added to the list

Interesting, can you send a link or how to Google it? Thanks

Not a problem.

https://github.com/EpicGames/UnrealEngine/pull/3122

Here is the link but if you dont have access to the GitHub…

[shot]https://puu.sh/u5Wfr/0c8e090e05.jpg[/shot]

I liked the top one myself its good to know which assets are what type at a glance instead of having to decode the cryptic file naming format

[gmpreussner]

@EXGAMESADRENALINE;667078

here is the initial, alpha version of the dark “skin”.

I like it