New design prototype for the web version UI
this is a continuation of this thread: ( I just didn't want this to get lost in the middle of 50 posts)
Here is the design I came up with for the Web version.
(I chose the display module as an example due to the higher number of different elements it comprises.)
(the real image is much sharper especially the fonts.
Double click this link:
It is the exactitude in design that create the quality, an approximation of this, not respecting exact placements, gaps, color scheme, fonts, kerning etc will not work.
Fonts are the same size than the web version yet the module is much smaller and breathes more.
There are also more details, options and instruction within, to go with the education centric push,
I gathered that @adent42 wanted to create a text flow to the logic, however the last line of the current web version:
“using font” “with size” “and color” is not necessary. Sometime more instruction = more confusion.
Moreover, this last line is cosmetic and not part of the logic. Hence I left it out of the text flow for the sake of simplicity, clarity and logic.
To increase text flow I added caps the “Place text at” and added the word “text” for a more natural text flow ( this also allow for alignment with line bellow.
“Same with Warp inside actor” is now “Warp text inside actor” for the same reasons.
The check Box is now after the description as the entire flow should be and is: description then activation, this keeps the interface logic consistent and helpful especially for education
The main window is slightly rounded , not because apple does it but simply because it’s more friendly and a game engine should not look like an accounting software, this create more fun and higher esthetics.
All the tabs are also rounded a tiny bit for harmony and consistency
Static text is grey, editable text is a bit whiter
The instruction in the main text box are intentionally faded, as soon as you type in the box the actual text is the same brightness than the tabs below.
Hello world! has been removed, 12 years old have no idea about this 40 years old reference, i rather use the empty space for instructions
The expression editor is represented with parenthesis because it’s their visual chraracteristic and have been moved back to the right of their tabs in order to not break the text flow with too many symbols.
Gaps everywhere follow a certain logic and consistency.