UI Concept for Godot

[alelepd]

Hi there,

This weekend I worked on a conceptual UI for Godot. My focus was on getting a clear and coherent design that can be flexible (fully dockable) and easy to expand in the future, and also up to date with current UX patterns on most 3d related apps. Please take a look and tell me what you think. The concept was first posted on the Godot IRC channel. Thanks to @xodene for the idea of posting the design here.

About the design

• Font used is Source Sans Pro, an open source font made by Adobe. This font has many weights and alternatives, including an mono spaced version, which suits perfect for scripting.
• Current icons are from Font Awesome, a set of open source icons well known in web development. My plan is to make a complete set of custom designed icons for Godot, but this could take a lot of time, so for know I sticking with this icon set, just for testing purposes.
• I took some freedom an added random icons and features, this helps me to see how the layout works.

Update on Oct 13, 2015
Hi everyone! I finally got time to continue my work on the UI. Here is a quick update on the interface that include some of the features you mentioned on the comments.

I also want to share with you a logo design concept I have been working on in parallel with the UI. This logo is my attempt to a fully coherent and modern Godot visual identity that initially starts with the UI design. Here I tried to simplify the current logo and make it more serious, solid and unique; as well as play well with different sizes and colors.

As always feel free to let any feedback you want; that's best way to iterate!

[mamarilmanson]

This is an awesome UI...

You might want to add "Windows" in the menu for hiding/turning on or off some of the docks... :D

[reduz]

that looks really pretty and It's actually very coherent. The main
limitation right now is that docks are not that flexible and the main
window (2D/3D/Script/Help) can't be undocked or reorganized, but it doesn't
seem incompatible with your proposal.

The other limitation is that scene tabs, with the scenes you are currently
editing, must definitely be visible at all times somewhere at one click (no
dropdown or menu since you are moving between them very often). Any ideas
how can that be implemented?

On Sun, Jun 28, 2015 at 10:35 PM, alelepd notifications@github.com wrote:

Hi there,

This weekend I worked on a conceptual UI for Godot. My focus was on
getting a clear and coherent design that can be flexible (fully dockable)
and easy to expand in the future, and also up to date with current UX
patterns on most 3d related apps. Please take a look and tell me what you
think. The concept was first posted on the Godot IRC channel. Thanks to
@xodene https://github.com/xodene for the idea of posting the design
here.

[image: gdoto_basic_layout_concept_01]
https://cloud.githubusercontent.com/assets/6024473/8399419/d3b7f9d0-1dd7-11e5-8596-0ca3efe12341.png

About the design

• Font used is Source Sans Pro, an open source font made by Adobe.
  This font has many weights and alternatives, including an mono spaced
  version, which suits perfect for scripting.
• Current icons are from Font Awesome, a set of open source icons well
  known in web development. My plan is to make a complete set of custom
  designed icons for Godot, but this could take a lot of time, so for know I
  sticking with this icon set, just for testing purposes.
• I took some freedom an added random icons and features, this helps
  me to see how the layout works.

—
Reply to this email directly or view it on GitHub
#2207.

[reduz]

i was thinking something more along the way of this (though it needs to be made pretty)

[alelepd]

@mamarilmanson that would be very useful indeed!
@reduz good point. I'm already thinking about that and I agreed, these tabs should be always visible. I will work on a new version including the mutilple scene tabs.

Glad you guys liked the concept. I will be updating this post with more views/fixes overtime, including the design of many parameters in the Inspector panel (transform, color pop ups, curves, etc).

[godotengine]

awesome, that would be very appreciated

On Mon, Jun 29, 2015 at 12:23 AM, alelepd notifications@github.com wrote:

@mamarilmanson https://github.com/mamarilmanson that would be very
useful indeed!
@reduz https://github.com/reduz good point. I'm already thinking about
that and I agreed, these tabs should be always visible. I will work on a
new version including the mutilple scene tabs.

Glad you guys liked the concept. I will be updating this post with more
views/fixes overtime, including the design of many parameters in the
Inspector panel (transform, color pop ups, curves, etc).

—
Reply to this email directly or view it on GitHub
#2207 (comment).

OkamStudio

[xodene]

can't wait to see where this design goes! so pleasing to the eye I wouldn't mind working on my game all night

[rdcklinux]

Awesome, implement please!!!!

[robertdhernandez]

Would love to see this implemented. It would go a long to way to making Godot more appealing to new and current users.

[razvanab]

Amazing design :)

[neikeq]

This design looks amazing! I like the look in Scene and Inspector tabs.

[Calinou]

👍 for being flat design.

[reduz]

Another issue to note is that node type icons are currently colored blue
for 2D, green for GUI, red for 3D and Yellow for animation.
Without this color coding, it's difficult to tell which version of the
nodes you are using

On Mon, Jun 29, 2015 at 8:45 AM, Calinou notifications@github.com wrote:

[image: 👍] for being flat design.

—
Reply to this email directly or view it on GitHub
#2207 (comment).

[alelepd]

Hey @reduz, sure, we can preserve the color coding on the icons, I think it will look good too ;)

[xodene]

you should also try to post a concept design for the project manager - would be nice to see.

[reduz]

@alelepd: awesome :)
@xodene Project manager needs some work. When you scan all the demos it becomes hell, so I was thinking of adding categories, previews and templates (that you can use to create a new project)

[reduz]

I was thinking of something more along this way for the project manager:

https://docs.unrealengine.com/latest/images/Engine/Basics/Projects/Browser/ProjectBrowserBoth.jpg

[alelepd]

@xodene indeed, I have some ideas for it.
@reduz nice! templates would be great for new users and the preview feature is very helpful too.

[macramole]

so hot

[mamarilmanson]

@reduz ~ Is it possible that in the nearest future you can implement the scripting reference as a separate offline web reference? my reference for this is how unity does it... it installs the program then when the user clicks help>scripting reference it opens the default browser to display the docs...

I think this is good so we can remove the reference/help button in the UI, because it seems it's always a problem finding a place or fitting it to put in the godot interface...

:)

[mamarilmanson]

@alelepd & @reduz ~ Some ideas I have in mind...

[itsraineing]

Very minor, but assuming that the 2D and 3D tabs remain (like @alelepd 's and @reduz 's examples), I would recommend that either the default (eg when creating a new scene) be changed to 2D, or the 3D tab moved to be the first; it's always stricken me as a bit odd that the editor defaults to the second tab.

[reduz]

@mamarilmanson : Scripts are good the way they are now (as a list). You usually have so many of them open that it's impossible to locate them when using tabs, being this much worse if you mix them with the scenes

[draxdeveloper]

yeah, really liked de design... There is some people that when come to
godot goes with a: wel... i don't know... Deisgn help with that part.
But speaking of UI... there is a bug in the actual one, that i can't dock
more than 2 tabs in the same docking area

2015-06-30 9:56 GMT-03:00 Juan Linietsky notifications@github.com:

@mamarilmanson https://github.com/mamarilmanson : Scripts are good the
way they are now (as a list). You usually have so many of them open that
it's impossible to locate them when using tabs, being this much worse if
you mix them with the scenes

—
Reply to this email directly or view it on GitHub
#2207 (comment).

David Aguiar de Aquino Paiva

[draxdeveloper]

Ah! would be very useful to undock the output, even more if we can undock
stuff and put in a separeted window in the future... You can double the
usefulness of this with people that have two screens... (so one to output
and other to thre rest)

2015-06-30 10:30 GMT-03:00 David Paiva draxdeveloper@gmail.com:

yeah, really liked de design... There is some people that when come to
godot goes with a: wel... i don't know... Deisgn help with that part.
But speaking of UI... there is a bug in the actual one, that i can't dock
more than 2 tabs in the same docking area

2015-06-30 9:56 GMT-03:00 Juan Linietsky notifications@github.com:

@mamarilmanson https://github.com/mamarilmanson : Scripts are good the
way they are now (as a list). You usually have so many of them open that
it's impossible to locate them when using tabs, being this much worse if
you mix them with the scenes

—
Reply to this email directly or view it on GitHub
#2207 (comment).

David Aguiar de Aquino Paiva

David Aguiar de Aquino Paiva

[OlexiyKravchuk]

I very much look forward to the steps towards the interface the same as in a blender to all the parameters of the position and the configuration so that you can adjust as you like in any order and configuration.

[alelepd]

@mamarilmanson I agreed on that, it would be great if the reference is online, using a menu button for the help section is also a better ux pattern, that's where normally it is on other apps.
+1 for the X icon on the scene tabs, that's the way I think of it (same as in chrome). The 3d/2d switch is insteresting, this is way unity works but in our case, that icon should be on the right corners because 2d and 3d views have different options, although maybe there's a way to standardize it.

The idea of mixing scripts and scenes tabs looks interesting although right now I'm liking more the @reduz approach (switching between scenes and scripting views) for this particular feature. If you have many scenes and scripting tabs open it could be a little mess. That said, your idea may suit perfect when having few files opens.

I will think deeply on this and share here what I come up this weekend.

@GungnirInd Yup, I think 3D should be first and always the default option, it should be in perspective camera by default too (easy to understand that it's a 3d view).

[reduz]

@alelepd The built-in help is useful for many reasons. First one is that it generates this help from the currently running version of the engine when compiling, so if you are using a development release, this documentation is always up to date (no function or class will be missing). The other reason for it is that, even though this is not implemented right now, the plan is that properties being edited can show tooltips extracted directly from the internal docs to make it more obvious what everything does

[kubecz3k]

@alelepd Another reason to have build in docs is the fact they work offline :)

[xodene]

It's actually a smart idea to have the documentation within the editor. The nice thing about Godot's editor is that workflow is always focused on the editor and that's really nice. Others benefits for in-editor docs have already been explained. I don't see how opening up a web browser for the documentation is a better UX experience, I'd say it's the opposite.

[draxdeveloper]

agreed

2015-06-30 12:22 GMT-03:00 Maximillian notifications@github.com:

It's actually a smart idea to have the documentation within the editor.
The nice thing about Godot's editor is that workflow is always focused on
the editor and that's really nice. Others benefits for in-editor docs have
already been explained. I don't see how opening up a web browser for the
documentation is a better UX experience, I'd say it's the opposite.

—
Reply to this email directly or view it on GitHub
#2207 (comment).

David Aguiar de Aquino Paiva

[Geequlim]

@MarianoGnu You should run the install.py

[toger5]

For windows the theme did not install correct. So i got the same result than MarianoGnu.
Now it works. So installing the theme is as easy as downloading Geequlim's repo -> running the python file -> go to godot settings and choose the right path for the custom theme.
On windows: C:\Users\your_username\AppData\Roaming\Godot\theme
On mac & linux: Users/your_username/.godot
restart and you are done...

[KioriSun]

@Geequlim
I Would just like to point out that in a smaller screen 1366x768, the theme takes up too much room. I guess it's all the extra 'padding' that the theme uses.
Here is an example:

For comparison, the original theme:

Overall much more functional. ;)

[Geequlim]

@KioriSun You can change the margin and font size of the theme for your screen.

[alelepd]

Related to that; I always though that these window buttons are too small;
they should be bigger because they represent the main actions that you are
going to take.

2016-09-11 14:30 GMT-04:00 Geequlim notifications@github.com:

@KioriSun https://github.com/KioriSun kiYou can change the margin and
font size of the theme for your screen.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#2207 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFvtGV3p_XIHVpR7yPr8QwT3SKVpd_Mlks5qpEisgaJpZM4FNyIT
.

[ghost]

Just found this today and it looks absolutely brilliant. I want this implemented badly, new logo and all.

[Geequlim]

Hey guys~
Anothor editor theme looks like adobe photoshop is coming

[Geequlim]

@KioriSun This problem should be fixed in latest commit :)

[ObaniGemini]

I don't get it. Is there an official theme support or are those only patches replacing files that you have to recompile ?

[toger5]

@ObaniGemini there is an official theme support. It still has it's edges but basically it works. I think Geequilim is the only one actually understand how it works and using it (of course there are some more understanding it... ). Most other design previews you see are based on changing textures, some style information in the default_theme.cpp file and recompile.

[zicklag]

I just found this and I really enjoy @alelepd's original concept along with the comments about it that I added a 👍 to. I has a very professional feel like Unity and Blender does.

I think the logo is a good idea. It is going to be hard to change a trademark like the Godot logo, but I do think that it could be more professional looking. I don't want it to look mean in any respect, but when I first saw it I did think it look a little child-like.

I've been keeping up with the master branch and they have been working on a new default theme, but it is mostly just style changes. Was the original concept just an image put together with an image editor or was there actual code for building that UI? I'm really just wondering if that UI is something that can get merged into the Engine or if it is just a concept that would need to be coded into existence.

[toger5]

@zicklag it is a concept (made in image manipulating software)
the current theme implementations are influenced by it and a good mix of: possible to execute (in terms of how much work it is) and best looking. In addition to that the new theme will allow for much easier customisation.
Icon change happend already. It is nicer (more modern) but godot won't loose it's branding. (I like it).
-> it can't get merged exactly like proposed. but the new theme will be great you will see!

[zicklag]

@toger5, thanks for clearing that up for me. Can't wait to watch this play out. :)

[toger5]

@akien-mga since the new ui is pretty close to the concept and most points which got discussed here are solved in a really nice manner right now we could consider closing.

[akien-mga]

Indeed :)

[alelepd]

Hi everyone! it's been a while since I published this initial design concept. I feel so happy that some of these ideas actually made it to the final release of Godot 3.0 UI.

Also happy with the improvements in other design aspects of Godot, like the new web design.

It was great to see how many of you took the concept and implemented for real, and even expanded to many other sections of the editor.

There is still a lot to do in design for Godot, but this is definitely a step forward!

[groud]

@alelepd honestly, your first design is so great I wanted to implement it. I'll give it a try someday ^^

[reduz]

Your design was a big inspiration for us. We couldn't follow it more closely because we needed to keep things functional, bit there are still many ideas on it we can explore in the future!

[Pakrohk]

@alelepd & @reduz ~ Some ideas I have in mind...

Your design was a big inspiration for us. We couldn't follow it more closely because we needed to keep things functional, bit there are still many ideas on it we can explore in the future!

In version 4.0, how close is Godot to the new design?
Is it associated with a design like version 3?
The Godot interface is in dire need of updates!

[Calinou]

@APakrohk The editor theme will probably be redesigned in Godot 4.0. I have a WIP branch for this, but it needs to be rebased.

[toger5]

@Calinou can we get screenshots 😍

[alelepd]

@APakrohk Thanks for checking. Actually, I have many new ideas for a new UI (and website) design but I haven't got enough time to work on it. I'll try to make some progress soon.

[Calinou]

@toger5 Here's how it currently looks. I recently rebased it on top of the master branch with the DisplayServer changes:

There are still many things to fix, like icon margins and decreasing margins between docks.