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 https://github.com/okamstudio/godot/issues/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 https://github.com/okamstudio/godot/issues/2207#issuecomment-116411355.

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]

:+1: 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: :+1:] for being flat design.

— Reply to this email directly or view it on GitHub https://github.com/okamstudio/godot/issues/2207#issuecomment-116624797.

[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 https://github.com/okamstudio/godot/issues/2207#issuecomment-117167341.

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 https://github.com/okamstudio/godot/issues/2207#issuecomment-117167341.

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 https://github.com/okamstudio/godot/issues/2207#issuecomment-117226487.

David Aguiar de Aquino Paiva

[robertdhernandez]

One of my favorite things about GameMaker is its built-in documentation and its ease of access. It goes a very long way and is a major contributing reason to why I like Godot.

[OlexiyKravchuk]

Yes, built-in documentation is 100% that thing which I dream to have in any software I should mention if it was not in Godot, it would be a terrible pain for me, I love it, even despite the fact that it is now not complete, but it really is very necessary so far, and there is a benefit here and now, it's all in one, without the Internet and unnecessary searches!

[mohaalak]

Offline help is so good, I love it so much, it helps me alot. On Jun 30, 2015 9:49 PM, "OlexiyKravchuk" notifications@github.com wrote:

Yes, built-in documentation is 100% that thing which I dream to have in any software I should mention if it was not in Godot, it would be a terrible pain for me, I love it, even despite the fact that it is now not complete, but it really is very necessary so far, and there is a benefit here and now, it's all in one, without the Internet and unnecessary searches!

— Reply to this email directly or view it on GitHub https://github.com/okamstudio/godot/issues/2207#issuecomment-117266005.

[mamarilmanson]

@alelepd ~ Now... need to create a UI creative team... XD

[mamarilmanson]

@reduz ~ sir... also maybe... if you can start cooking the d&d support for godot while we cook this UI brainstorming... uhm please... :)

[draxdeveloper]

since we are here... it would be a good idea the possibility to change grid color, since the viewport border confuses with the grid lines...

2015-06-30 17:32 GMT-03:00 Manson Mamaril notifications@github.com:

@reduz https://github.com/reduz ~ sir... also maybe... if you can start cooking the d&d support for godot while we cook this UI brainstorming... uhm please... :)

— Reply to this email directly or view it on GitHub https://github.com/okamstudio/godot/issues/2207#issuecomment-117333062.

David Aguiar de Aquino Paiva

[alelepd]

These are great arguments! It makes me rethink about the reasons why I like the online reference and I think it's only because is easy to share and access it from any device; aside from that, the offline reference definitely wins. For online help we have the wiki.

@xodene what I mean by a better UX pattern is that is quite common to find the Help or reference docs from a menu instead of a panel, which are normally used to make actions or editing. That said, I think Godot help is fine the way it is :D. I do think there's room for improvement though (visually speaking).

@mamarilmanson haha, good point!

@draxdeveloper you mean grid color on the concept (white) or the current color on Godot (green)?

[mamarilmanson]

@alelepd ~ That's a good keyword to use... "Visually Speaking..." that will better explain that we only want to change how it looks and how it interacts with us... not how it works... :D

[vkbsb]

this looks great.. we should totally get this in godot.. !!

[TeddyDD]

Wow! My eyes of artist are happy to see that nice concept :D

About Project manager @reduz What about sorting projects by tags?

[mamarilmanson]

@reduz ~ It's really time to please designers... XD

[ghost]

custom skins and docking tabs would be nice. i like current skin better than the proposed above skin but i like the ui structure very useful. also the 2d 3d tabs i prefer more and the 1 button menu under Scenes much more useful.

[reduz]

it should be relatively easy to make custom skins, there should just be better documentation on how to do it

On Sun, Jul 19, 2015 at 8:31 AM, trollworkout notifications@github.com wrote:

custom skins and docking tabs would be nice. i like current skin better than the proposed above skin but i like the ui structure very useful.

— Reply to this email directly or view it on GitHub https://github.com/okamstudio/godot/issues/2207#issuecomment-122650767.

[ghost]

u guys must keep 2d 3d scripts an help is much better system than tabs suggested above . also i like how you focus on one scene at a time and how resources can load anything that you quickly wanna access (common container)

would be nice to be able to quickly edit /create images ie like ms paint in 2D view just basic tools select, pencil, brush, eraser . and edit/create 3D models in the 3D view. and help needs more text . the online wiki has more info. i want something like manpages. ideally these 3 changes will enable me to never have to leave Godot

[mamarilmanson]

D&D would be the greatest first step… if you ask me… :)

[reduz]

I'm trying to use multiple scene editing for Okam projects and have to admit it's kind of confusing for me, as having to select scene and script from different lists is difficult, and having to read the opened scene tabs for the scene i'm editing is not as straightforward either.

Going from the scene I have in my mind to a tab requires reading and that's kind of a slow process. I tried to understand why this is so efficient in web browers, and then realized it's obviously the website icons doing the work and not the text. Having the scene disassociated from the script, when in most cases it's related is also kind of annoying.

I've been trying to figure out ways to make this more efficient and realized we can leverage the idea of using scene thumbnails for switching (since they are being generated anyway, and generation could easily become more "real-time" too without much of an issue. )

So, how about something like this, showing scene thumbnails AND scripts related to the scene? (horrible mock-up)

It's easy to find a scene and related scripts this way.

Another problem I usually face is the disconnect from the scene tree and property editor . they are in opposide sides of the screen now by default, so it's not so obvious that they connect. As such, I was considering moving scene tree to the right as it was before, and keeping the left for opened scenes and filesystem.. and do away with resources dock (integrate a similar functionality as a menu in the property editor)

[slapin]

Well, from my perspective, if you have a small amount of scripts (under 20) it is quite easy to display scripts, referenced from scene on top of the list and in different color. However, that won't help when you have > 100 of scripts most of whiach are not referenced from node tree by default. To make this work I'd appreciate being able to group scripts into packages (the python way) being presented as subdirectories.

[zhagsenkk]

@reduz My suggestion.And i think we should allow to use right button.

[TeddyDD]

@zhagsenkk I would add pop-up thumbnails when mouse hover over tabs :+1:

[kubecz3k]

@zhagsenkk Hmm I think @reduz want to utilize scene thumbnails to perform this functionality.. as he said finding tabs with text is not as fast and easy for our brain as finding pictures.. The problem is how to use them in the way that will look good and still will be functional (don't eat half of the screen I guess).