Enhancing the Look and Feel of Eclipse IDE Icons #108
Comments
|
Hello, it will be a pleasure to contribute to this issue. |
|
I find this project incredibly exciting, as icons play a crucial role in shaping the user experience of the Eclipse IDE, and modernizing them has the potential to significantly enhance usability and aesthetics. From what I understand, this initiative focuses on:
I’m particularly drawn to the creative aspect of designing scalable, responsive, and minimalist vector graphics. @Michael5601 could you please provide further details about the workflow, expectations, and timeline? Additionally, would this involve collaborating closely with the Eclipse UI team just like the other contributors? Otherwise, looking forward to hearing your thoughts and potentially getting started on this impactful initiative! |
|
As I am not an experienced Eclipse UI contributor I think at first it is important to hear some opinions in the community. Maybe you could help out here @BeckerWdf. We need to divide the task of remaking icons (if it is wanted this way) into smaller tasks and provide a modern style guide or improve the already existing UI Guidelines. With a style guide we can achieve consistency in the workflow of many collaborators and we could have a base for a discussion at first. "Good" looking Icons are subjective to the individual view but we need to get a consensus about the goals and the style at first. I can also assist in the creation of icons as soon as my bachelor thesis is done in February 2025. Until then I will be part of this discussion and I am glad to help with my knowledge about graphics design. @IamLRBA maybe you want to attend the Eclipse IDE ‐ Developers Community Call that takes place every second thursday and is moderated by @HannesWell. Tomorrow is the next meeting and I also plan to talk about my project that is related to icons/UI. New faces are very welcome :) and more contributors could get aware of this issue. |
|
Please be aware that there are technical constraints, which contradict some of your assumptions AFAIK. E.g. icons are not centered on purpose and they are sometimes aligned at the top, sometimes at the bottom etc. on purpose. See https://www.eclipse.org/articles/Article-UI-Guidelines/Contents.html#IconSpecsSize_VDG. |
Thanks @Michael5601 I'll be sure to attend tomorrow's meeting to get myself acquainted with the agenda. |
It's not. |
|
I propose the following workflow for this project. If you like you can leave a comment with refinements. Proposed Workflow and Initial Tasks for Developing a Comprehensive Style Guide
This structured process minimizes the workload for quality controllers while maintaining consistency in the icon set.
In the community meeting at thursday we talked a bit about this initiative and I felt like the concerns were mostly about the size of this task. By focusing on the proposed workflow at first I think we can create a platform where more collaborators are interested in participating. Also I think that creating 400-500 icons would already be enough to give the most used pages in the Eclipse IDE a new look without replacing all 1500 or so unique icons. |
|
As I have originally created JSVG with this exact purpose (creating a scalable iconset for user interfaces) here are my two cents regarding this topic :) To make creating cohesive icons I think it would be nice to have some color palette, which icons can refer to. In the readme of JSVG there is an example on how to dynamically change the color inside a Also here is an idea I always wanted to see carried out with an icon set (which svg files lend themselves to relatively easily). Embed in the icon some information about
Of course both of these features would need further support on the UI side. |
I'm okay with that, I'll start right away! |
Thats great, thank you! We need to decide which three representative icons we want to design so our results are comparable. How about the following three icons:
And we both design all icons in 16x16px size in black color with white background. As I also have another project that I need to finish, it would be nice if we have time to upload our results on next week Sunday, 1st of December in this discussion. I appreciate your effort and wish you a lot of fun designing the icons! |
Sure thing, Thanks brother and see you on the next Sunday. |
In my profile you can see my contact e-mail :) |
Alright! ✌🏻 |
https://eclipse-platform.github.io/ui-best-practices/#icon_size_placement
https://eclipse-platform.github.io/ui-best-practices/#color_palette_themes A lot of the UI system is described in that documentation, so please check it before starting. It would be a pity if new icons contradict some of the aspects described there. Improvements of that document can be made at https://github.com/eclipse-platform/ui-best-practices. |
|
Please note that these best practices are up for update as a lot have changed since they were written. Please bring any proposal change as issue/PR and it would be discussed at the next PMC call. |
Thanks for the advice. This will be part of the creation process for the new style guide as described above. As @akurtakov metioned: If we find outdated infos in the existing UI Guidelines we will provide an issue/PR and discuss how we proceed with the information in the new style guide. For example: I don't think it is smart to create the icons without centering them in the middle. It seems to me that this workflow comes from technical debt as there is no process in the Eclipse UI to automatically apply an offset. Until all new icons are finished this technical debt is maybe fixed and we would need to change back many icons to a proper centered state. |
|
I personally would love centered icons. |
The issue with changing this is that it will look strange when not all icons (e.g. object type icons in project explorer) are aligned in the same way (if some are centered, some are not). I once provided a talk on best practices when creating icons for eclipse. See here: |
But that does not mean that they are bad our outdated per se. I would prefer PRs for the existing style guide instead of a complete new one. |
I should start with the places in which the icons are currently not aligned, like the main toolbar. For example:
|
These are the 3 icons: 
Indeed they are not nicely aligned. So a PR to the "run" and the "external tools" icons would be the fix for that. |
Thanks would already be a good great step forward (I personally find these misaligned icons very bad looking). @BeckerWdf or @Michael5601 could you provide a PR to fix them? |
I can create the PR but this would also mean that the size of the second and third icon needs to be changed. Is this wanted? |
The existing icons are based on the UI Guildelines. We want to create a whole new icon pack and I think that some parts of the UI Guidelines need to be changed like the color themes. So it would't align with the existing icons anymore. My idea with this issue is the creation of a new icon pack that can be loaded via a future icon theming feature. We can then decide to use the new icon pack as the new default for Eclipse IDE but there is no way to completely replace the existing icons because also Eclipse RCP products are based on them. Thats why I want to create a new style guide for the new icon pack. This new style guide will be based on the existing UI Guidelines so we have an orientation. We can discuss every topic from the UI Guidelines that should not belong into a modern icon pack and find a solution. And we will also provide fixes for outdated content if we find some in the UI Guidelines. |
I would say yes. |
Please see this PR for the fix. |
|
The following table showcases the prototypes of the icon styles I designed. Please view them in light mode in your browser, as they were created in black. While they are visible in dark mode, the design is intended for light mode. Initially, we decided to focus only on monochromatic black icons. However, I experimented with an additional dual-tone style that allows for colorization. As a result, I designed four different styles instead of three. As you will see some styles are not suitable for the samll icon size, this was a nice learning for me. @IamLRBA, I’m excited to see your designs! As planned, I’ll soon create a poll for the community to vote on their favorite style. The selected design can be discussed and improved afterwards. Search
Debug_exc
Pin_Editor
|
|
Thanks @Michael5601, Here's my approach | Number | Style | Zoomed | 16x16px | 32x32px | |---------------------|--------------------|--------------------|--------------------|--------------------| | 0 | original | | 1 | Outline | | 2 | Solid | | 3 | Abstract | Debug_exc | Number | Style | Zoomed | 16x16px | 32x32px | |---------------------|--------------------|--------------------|--------------------|--------------------| | 0 | original | | 1 | Outline | | 2 | Solid | | 3 | Abstract | Pin_editor | Number | Style | Zoomed | 16x16px | 32x32px | |---------------------|--------------------|--------------------|--------------------|--------------------| | 0 | original | | 1 | Outline | | 2 | Solid | | 3 | Abstract | |
|
Sorry my presentation is not appearing well, I'm trying to edit the markdown perhaps I wrote it wrong. |
No worries, your icons look great. Especially for your first icons :) I can already see some things we can learn from these styles. We both interpreted the I try to create the poll as soon as possible next week. I will rename the styles as we have 2 styles with the name |
|
At the moment we cannot have icons set for light and dark theme as we do not support that in the framework. Is it planned to implement dark / light icon support? |
I personally liked your outline art style and thought it looked really nice (Especially with the pin_editor and debug_exc icons). It gives definition to the style. |
For the icon pack that we try to develop an icon theming support is needed. @akurtakov made me aware that someone tried to implement this but stopped working on the project. This project needs to be finished but as it will take some time to develop this icon pack, I don't see a timing issue here. In the same instance a dark/light theme support for icons can be implemented. Also as @weisJ stated his library JSVG (that will probably soon be implemented in Eclipse for vector graphic support in my project) allows rasterization and coloring of icons at runtime. This will be especially great for monochromatic/dual-tone icons as planned in this icon pack. Maybe we can implement the support for light/dark mode icons by just passing a flag in the rasterization process. The disabled icons can be implemented the same way as I already found a way to create disabled icons at runtime with the library. I created a discussion for the disabled icons here. |
Thank you :) I think my outline style is cool but not suitable for small detailed icons as the lines are too thin. It will be hard to simplify every eclipse icon and sometimes we need more details for the icon to work. Your outline style has thicker lines which works better. We will see what the community says. |
|
It's really nice to see these proposals. Impressive work. It's really hard to evaluate icon proposals stand alone. Seeing them "in action" in the real UI helps a lot. On OCX one participant saids: "I like the efforts modernize the UI. But pls. don't turn Eclipse visually into VSCode". When designing monochrome icons keep in mind that with that you will run into issues with the "disabled" icon-style Eclipse provides. See my the issues I have in #114 (comment). You have to come up with an idea how you want to visualize a disabled state of an icon. Is that something VSCode even does offer?
|
|
Thank you for your valuable feedback. Here are my statements to your points:
Maybe I can place them into a "real" environment for the poll.
As soon as the icon theming feature is implemented, the users can decide which icons they want to use. The only discussion would be for the "default" icons but I don't mind if they stay in the current design as long as the user can switch to a modern style. Right now there is no such option and also no modern icon pack.
I already thought of this and I don't know of VSCode but IntelliJ also has monochromatic disabled icons as can be seen in the following screenshot. Disabled icons can be created very easily by darkening the gray tone in dark mode and light mode. They use a monochromatic style where many icons are standard gray and sometimes they are colored like the |
If the difference is between light and dark grey I think this will be a accessibility issue. If the difference is between an monochrom icon (with a color different then grey) and a grey version of that icon that would be much better. So in the IntelliJ screenshot all the icons have color so I can see that e.g. "Stop" id disabled. But the the "Import Tests from File..." entry is grey in the enabled state to. So yes we can see the difference but it's not as easy to see it. Btw. See in the IntelliJ screenshot, that the complete menu entry is also greyed out in the same color. So this also helps. But this only helps in menus - in toolbars you often only have the icon. |
I see your point but I must disagree here as it also works in other programs.
Most icons in IntelliJ are colored with the standard gray. In dark mode disabled icons are always in darker gray regardless of the original color of the icon.
The toolbar in IntelliJ is the same color as the menu. This is not the case in Eclipse as in dark mode the menus are darker than the toolbar. But I don't see the problem with disabling icons in a monochromatic design in Eclipse as we right now also use a darker gray tone in the menus for disabled icons than in the toolbar: |
I like this design, can you open a new issue for this, suggesting that we use the same color in the toolbar and menu for the dark theme? The team around @thomasritter @BeckerWdf and @mvm-sap may want to evaluate this. It definitely would make the usage of new icons more consistent as we only would have to care about one common background color. |
An element in a disabled style can also be drawn using 50% opacity, or drawn such that only every other pixel is rendered in a checkerboard pattern. Older user interfaces opted for an embossed appearance, but that kind of appearance is probably not wanted here. The menu you have shown here is probably doing the 50% opacity style. |
|
@IamLRBA can you please send me your icons as SVG so I can finish the poll? :) |
Alright, should I send on email or right here? |
Send me an e-mail please. Thank you! |
Coming right up! |
|
I created the Community Poll here It would be great if you could participate. |
Icons play a critical role in shaping the overall Look and Feel of the Eclipse IDE. Unfortunately, the current icons appear outdated and suffer from several issues that impact their usability, appearance, and consistency. This issue aims to open a discussion to summarize these problems and outline the requirements for a modern, cohesive set of icons.
Over the past few weeks, I’ve gained insights into these challenges while introducing a feature to rasterize SVGs at runtime within the Eclipse IDE. Through this process, I encountered several recurring issues, particularly related to the state of the SVGs themselves. These include:
1. Problems in the State of the SVGs
Example: The following icon (org.eclipse.jdt.ui\icons\full\etool16\java_app.svg) shows points 1–4:
2. Broader Design and Usability Challenges
Beyond technical issues in the SVGs, I collected the following design flaws of the icons:
To solve these problems I would propose the idea of a new icon set to fully remake the existing icons.
I think this would be a possibility for contributors that are interested in graphics design rather than programming.
As this is a big task it can be divided into icon packs for the different Eclipse IDE projects such as JDT, Platform, PDE etc.
The text was updated successfully, but these errors were encountered: