Closed Felienne closed 2 years ago
Uploading some mock-ups here to give more visual context for the staff of bachelorklas (thesis).
Mock up 1
Mock up 2
Mock up 3
In the previous comment made in December, I've shown some mock-ups. These mock-ups were made to show the possible end-goal of this issue. I've redesigned the mock-ups to make Hedy as user-friendly, shape/color/font consistent as possible.
In the latest design, I've focused on consistency and "calmness". This is to prevent Hedy from getting an interface that is getting too full, like discussion #1835 mentioned. Since TiBiBa created the NL/EN dropdown, I've used this in the design for the variable view for consistency. There are two mock-ups. One without and one without color-coding. Color-coding is a functionality brought up by @Felienne where string, integer, and list types will be made distinctive of each other using colors.
1. Design without color-coding string/integer/list types
Clicking on this label icon will expand the variable view.
2. Design with color-coding string/int/list types
After a lot of experimentation with colors, the design above is the best one I could come up with so far. It is based on a common theme used in IDEs called Darcula. I believe it could fit the Hedy theme since the editor is dark.
I am confident that I am able to create the color-code functionality in the variable view, but I am not sure about color-coding in the editor too. (I do think this functionality in the editor would be very cool and helpful).
QOL ideas
Some details
Hi @fRedelaar!!
Firstly, let me say that I love the mockups.
Some topics to think about:
Colors I think the colors are a great addition. I am tagging @thjazi39 here, because he is working on the syntax highlighting for the next few weeks. We are surely planning to give numbers a different color at one point, once we do, we should have different colors in your UI as well. So if you already make sure you can handle different types, we can add them when the highlighter is ready.
Emoji Ali (not yet on Github) is working on metaphors for variables, so he will have an opinion about whether or not we should use the label as an icon :) I will let him know you are considering this so he can reach out.
Discussed in https://github.com/Felienne/hedy/discussions/807
I think this is an excellent idea and will help students indeed. Scratch also supports something like this, where you tick a variable and its value is shown in view (here shown for points):
Maybe this would be a great BSc project, it is very clear in scope a sort of separate of the rest of the project