GDevelop uses lots of different colors on its icons. Some icons are pale, some are bright. Some colors are muted and dull, others vivid and saturated. The buttons to open object and object group editors are slightly less saturated and more pale, while the other icons here are a bit more saturated and more vivid.
I’m testing those out. The problem is, they have to work against all sorts of different background colors. Here are the light blue base colors:
1: Pale colors
2: Bright and saturated colors
3: The blue used in the new GDevelop logo
The dark purples are easy, in comparison. There’s only one hue of purple. Here’s a quick comparison - note that all of these purples are the same, they’re just seen in pairs, against different backgrounds.
All the icons currently use a darker shadow on the bottom left corner. I might leave that out for some icons, like undo and redo, that don’t have smaller shapes where just parts of the shadow are visible.
It would also be possible to change the strength of the shadow on these icons. I think the current setting is fine. Also, hue is a very minor design decision, so I think I’ll just go with pale blue number 3, the one used in the new GDevelop logo.
You make a good analyses !
I’m going to need you for my future video extention, i will need your help for create some icons.
I’ll keep you informed as to which icons i needed.
In accordance with GDevelop’s colors of course
Once I’ve done some thinking and decided what sort of icons to make, I’ll most likely write up a simple style guide about it. I could also do a small tutorial about how to do the icons in a vector format, and create sample files in multiple different formats. At least Photoshop and Gimp formats, maybe Inkscape and Krita too.
Here’s one version of my mock-up implemented in GDevelop. It’s mostly done with themes, with one change in the actual code. The rows in the code editor were 1 pixel too close to each other, so I pushed them a bit further apart. I’m not sure if it’s something I broke with CSS styling, or if it’s something that’s actually been broken in the main GDevelop, but has gone unnoticed.
Any way, GDevelop UI is done with CSS, and it gets super complicated very quickly! Moving the vertical scrollbar to the side of the window is surprisingly difficult. Adding some empty space at the bottom of the event sheet is surprisingly complicated. Accidentally removing the little arrows that collapse and expand nested events? It’s so easy I’m not not sure how I did it! Still, it’s a start!
Improved version with feedback from various GitHub discussions. The idea here is to have an icon for “global variable”, “scene variable” and “object variable”, where they each have an icon that both tells that it’s a variable, and describes its scope.
Nice icons but I dislike the 24x24. I prefer the icons to be small.
You might want to post this on GitHub and Trello. Devs don’t read the forum that often.
Thanks for the feedback! I’ve actually been talking about these things with the devs on GitHub.
If you don’t mind me asking, what’s your screen resolution? Are you using GDevelop with a tablet, with a laptop (with probably a physically smaller screen), or from a desktop computer (with most likely a physically decent sized screen)? I’m using GDevelop mostly on a desktop computer, with a 1920x1080 resolution.
This discussion started because some of the icons I made work well on bigger sizes, but when downscaled to 16 pixels, they become a bit too small. So for once, this isn’t something I personally prefer or recommend. It’s just something I’m testing out. If it doesn’t work and if there isn’t any reason to change the icon sizes, I’ll have to rethink a few icon designs, but that’s not a problem.
I use GDevelop mostly on my desktop with the resolution 1680x1050 but I do plan to upgrade my monitor to 1920x1080.
I also use it on my 15" laptop sometimes at resolution 1366x768 but I do plan to upgrade to a new device with resolution 1920x1080
I don’t use it on my tablet but if I would the resolution is 1280x800 with no plan to upgrade in the near future.
Basically the smallest resolution I would personally use is 1280x800 with no plan to go below that and 1920x1080 is the biggest resolution I plan to be using in the near future with no plan to go above that for some years.
Refresh Preview of Project window (using the F5-key) or hot reload
Next tab, previous tab
Toggle project manager
Toggle Variable global, Scene
Toggle grid, snap
Naviguate with arrows in eventsheet, enter for open condition/action
When a window have “Cancel” button, bind ECHAP-key on it.
Atm it’s not effective on all window, Global variable, windows for set properties about event choosen
For fast shortcuts we should use keys on left side of keyboard with one hand.
This way you keep your hand on the mouse and on on keyboard Source
Same bind ECHAP-key when we rename something
Possibility to enlarge JS event in eventsheet, with a button or drag and drop borders or something else (just enlarge, not open a new window)
For fast shortcuts we should use keys on left side of keyboard with one hand.
This way you keep your hand on the mouse and on on keyboard
I suggest making this a user preference. Some people (not me) control their mouse with their left hand, so having the keys on the left side will make GDevelop harder for them to use.
I’ve started to talk with other peoples about interactive tutorials.
Because since few months the questions are often the same.
New users I don’t know where they come from or if they follow a written wiki tutorial, a youtube video, or if they try the software directly.
The question is how users find the resources to learn.
Because it is clear that they use them badly, or that they do not find them, otherwise we would not have X question on same subject.
From the point of view of the size of the elements, lists, colors, buttons, borders…
Separation between the panel/ separation in list…
Are there things you don’t like?
Things that are not very visible? Things that are too big?
Things that are better in other software? (if yes, please give us an example)
Are you close or open some panels in particular?
Do you resize them?
Please I’m looking for constructive feedback.
If you can compare with another software and provide some screenshot it is better.
The UI of GD is a bit unique because we use material-ui. This UI can’t fit to everyone and are a bit large, and also thinking for the web.
We can custom GDevelop as you want.
A good UI is important.
…I neither see in the tree which item I clicked, nor is that information given on the right hand side. Only the combination of the fields and values give an experienced user the hint that I selected the object instance. This hint has no value if I had multiple object instances.
I was thinking it would be more logical to store the network preview under the normal preview, rather than under the debugging icon, but actually, it would merit an icon of its own, 1. for ease of access and 2. to make newcomers aware of the feature.
Visually, the icon could be something like that:
(behold my mad GIMP skillz)
Coming from my post in Discord, do you guys think it’s a good idea if both the Scene and Scene Events share a single tab? Switching between a scene and its event can be done through a keyboard shortcut like Ctrl + Tab.
Still, it’s a start!
