Gdevelop: Redoing the icons

Created on 1 Aug 2020  路  6Comments  路  Source: 4ian/GDevelop

Hi!

I really like GDevelop but I feel like compared to Construct3 in dark mode the UI lacks polish. I'm not that much o a programmer so I'd like to ask where I can find all the icons that are being used so I could work on redoing them.

Just to clarify, GDevelop's UI is mostly material 1.0 DNA, however it's combined with a bunch of these Widnows 8 looking icons that kind of don't really match.
image

They have a shadow/shading effect over them where as buttons are completely flat
image

There is yet another icon style when we move over to behaviours where icons that are being used are very skeumorphic:
image

I think the whole UI can do a bit of a makeover but as a starting step I'd like to work on the icons as changing those to match the existing UX dna would make the product feel a lot better already.

Thanks for all the work you guys do :)

question

All 6 comments

Hello @Brin-o, while we appreciate the fact that you are trying to contribute, how about we have a discussion at length first on our discord channel. :)

The icons are in the newIde/app/public/ and splitted in res and the platforms folders.

All icons are indeed in newIDE/app/public/res, newIDE/app/public/JsPlatform and newIDE/app/public/CppPlatform. Look in ribbon_default folder for the toolbar icons. Your help is welcome to make a new set of icons - though it's a fairly large project so I recommend first starting with toolbar icons, then looking at the rest of icons, maybe splitting work by doing objects first, then behaviors, then the rest of actions/conditions, going feature by feature.

Prototyping a few icons and then posting them here/on the Discord/on the forum to gather feedback is surely a good idea.

Hello @Brin-o, while we appreciate the fact that you are trying to contribute, how about we have a discussion at length first on our discord channel. :)

Discussions on Discord are not mandatory, everyone is free to start asking how to contribute on GitHub. This being said, it's true that you might get some good guidance on the Discord or forum.

Anyway, feel free to go ahead and start reworking some! 馃槃 I would love to see new icons being made. Again it's a fairly large projects, some icons are super old, there are also a large bunch of unused files I never removed. So be sure to get step by step to not get "burned out" by the work. I think prioritizing as I explained would be good to have the maximum impact!

At worst case, if they're not all going to be redone, a lot of them can likely be sourced here somewhere like here: https://material.io/resources/icons/ (All open source/apache 2.0 licensed)

At a quick 5 minute glance, I found these which could all likely be used as a start if @Brin-o wants to customize them to more closely fit. These are just examples and there's 1000s of icons so there's a lot more options.

  • Camera:
    image
  • Layers:
    image or
    image
  • Timer:
    image or
    image or
    image

  • Behavior Gear:
    Maybe something like this:
    image
    Instead of a gear, or this?
    image

  • Speed:
    image

For the behavior gear the setting icon is already used for project properties:
image

At worst case, if they're not all going to be redone, a lot of them can likely be sourced here somewhere like here: https://material.io/resources/icons/ (All open source/apache 2.0 licensed)

At a quick 5 minute glance, I found these which could all likely be used as a start if @Brin-o wants to customize them to more closely fit. These are just examples and there's 1000s of icons so there's a lot more options.

* Camera:
  ![image](https://user-images.githubusercontent.com/24237149/89115367-32519880-d44d-11ea-9d2b-257bf86bc157.png)

* Layers:
  ![image](https://user-images.githubusercontent.com/24237149/89115351-151cca00-d44d-11ea-85d3-38a748539e58.png) or
  ![image](https://user-images.githubusercontent.com/24237149/89115463-04208880-d44e-11ea-86d2-43f5bf5e8222.png)

* Timer:
  ![image](https://user-images.githubusercontent.com/24237149/89115359-2665d680-d44d-11ea-9596-229214b5ecc5.png) or
  ![image](https://user-images.githubusercontent.com/24237149/89115392-80ff3280-d44d-11ea-853a-3812a8a2d599.png) or
  ![image](https://user-images.githubusercontent.com/24237149/89115439-d3d8ea00-d44d-11ea-822f-4a13d0dbcb9e.png)

* Behavior Gear:
  Maybe something like this:
  ![image](https://user-images.githubusercontent.com/24237149/89115399-983e2000-d44d-11ea-9419-53659ef64d58.png)
  Instead of a gear, or this?
  ![image](https://user-images.githubusercontent.com/24237149/89115408-a724d280-d44d-11ea-93fc-ffe4b8415460.png)

* Speed:
  ![image](https://user-images.githubusercontent.com/24237149/89115421-c4f23780-d44d-11ea-95f9-fc853a16888e.png)

I agree that these icons should be used. I'll work on the toolbar icons first this week because those can't be really replaced with the symbolic stuff from material.io but otherwise a lot of stuff can already be replaced with that.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KinkGD picture KinkGD  路  5Comments

RyanNerd picture RyanNerd  路  4Comments

Jeje2201 picture Jeje2201  路  5Comments

Bouh picture Bouh  路  3Comments

BWPanda picture BWPanda  路  4Comments