Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

dat-ecosystem website_terminal #105

Closed
32 tasks done
Tracked by #70
Mehrabbruno opened this issue Mar 1, 2023 · 12 comments
Closed
32 tasks done
Tracked by #70

dat-ecosystem website_terminal #105

Mehrabbruno opened this issue Mar 1, 2023 · 12 comments

Comments

@Mehrabbruno
Copy link

Mehrabbruno commented Mar 1, 2023 •
edited by serapath
Loading

#70

@todo

  • update terminal_v0.0.1
    • @input 📦 terminal_v0.0.1
    • move the tabs to bottom of the terminal
    • change the color of the terminal
    • convert icon btns to be commands
    • update task and record worklog
    • @output 📦 terminal_v0.0.2 from comment
  • update terminal_v0.0.2
    • @input 📦 terminal_v0.0.2
    • bring the v0.0.1 UX back to the updated design
    • change the color of the terminal
    • add a scrollbar
    • update task and record worklog
    • @output 📦 terminal_v0.0.3 from comment
  • update terminal_v0.0.3
    • @input 📦 terminal_v0.0.3
    • update the buttons and the icons
    • add border and change the color of the terminal tabs
    • update the scrollbar
    • update task and record worklog
    • @output 📦 terminal_v0.0.4 from comment
  • update terminal_v0.0.6
@Mehrabbruno
Copy link
Author

Tasks

  • design terminal - 1h17min
    • design a terminal container
    • add tabs for each terminal
    • add icon btn with x icon
    • add icon btn for maximum and minimum
    • update task and record worklog - 9min
    • @output terminal_v0.0.1

Worklog

worklog-117

Feedback

Proposals

@serapath
Copy link
Member

serapath commented Mar 2, 2023 •
edited
Loading

feedback 2023.03.02

notice the tab bar has fine lines. looks crisp. retro systems did not have such high resolutions, so things looked a big "bolder" maybe?
maybe tabs have same color as the terminal itself?

win1

love everything, just thinking if we can find inspiration and subtle ways to make it look more retro :-)

win2

The glow effect is a good idea, but if we have it it needs to be pixelated, e.g.
pixel

also, take a look at the images here and how they are monochrome low color pixelated
https://solar.lowtechmagazine.com/2022/11/what-if-we-replace-guns-and-bullets-with-bows-and-arrows.html

here is another retro style website https://tilde.club/wiki/tildeverse.html

here is some more inspiration

term1
term2
term3
term4

@Mehrabbruno
Copy link
Author

tasks

  • update terminal_v0.0.1 - 39min
    • move the tabs to bottom of the terminal
    • change the color of the terminal
    • convert icon btns to be commands
    • read feedback - 7min
    • update task and record worklog - 10min
    • @output terminal_v0.0.2

worklog

worklog-120

feedback

proposals

@serapath
Copy link
Member

feedback 2023.03.09

😅 hmm, not sure if new or old shell was better.

UX

  1. I have trouble imagining/remembering the differences between minimize, close and exit
    and assume having all or some of those options in a retro style tab bar like previously is actually ok, because previously the UX was great and we should strive for great UX, but wrap it in a retro appeal when it comes to ui theming. I think we should somehow stick to a retro themed more pixelated, but modern version of how windows can close/minimize/etc... to not confuse people jsut because it's retro.

  2. I like the "numberered menu" items UI as a retro element, but technically we don't have more than 10 numbers to jump and also if it had many tabs you cant see the numbers anymore. You also mention the terminal title bar and i agree with what you said, maybe we can just remove it and below we change the tab names into the actual "file names" and instead of the first number, we color the first letter.

  3. the focus/highlight is great, adding more tabs displaying some sort of menu to choose from in the terminal is probably cool too, but adding more tabs, closing, etc.. should probably look retro and be on the bottom, but UX wise be more like the previous terminal design, because it is just a better UX (basically also what browser tab bars do)

  4. the "exit" button is probably the same as the purple terminal icon in the top menu bar that we pressed to toggle/expand the terminal, so having a little tooltip that tells people it can be activated with esc is probably enough, so we don't need another button in the terminal to close it and instead have a gimmick so people can actually type "exit" into the terminal and press <enter> to exit the terminal if they dont want to press the top menu bar button.

UI

  • +1 definitely the pixelated font is better.
  • The almost pastel grey smooth contrast (at least to me) makes it feel more modern and pleasant, but much less retro.
  • UI looks retro, but higher contrast, monochrome/low color, pixelated font, etc.. and other UI tricks for retro feel is great, but the UX should be smooth and easy, which is what i worry about a bit. the retro vibes i get from pixelated mono font, high contrasts, monochrome/low colors, maybe old school retro border/framing but potentially also from pixel dithered color filling, e.g.

I think "color dither" and more retro window frame helps too in making things retro maybe.
Also, the ascii art "hello" or generally some "ascii art" text seems a good retro idea.

  • also very dense and compact UI makes it feel more retro. compact UI design exists even now in modern, so compact doesn't necessarily break the UI - it is more for power users and back in retro times, that was the target audience, because it wasn't mainstream back then.
  • also monochrome (not necessarily green, but often or grey or whatever but very few colors)
    • retro
    • combined with "dither"
    • and pixelated
    • pixelated

Also, displays back in the days where not as crisp, so in addition to low color monochrome dither gradients, they had sometimes other artifacts and maybe subtle pixel patterns can emulate those, ...not sure if like below or similar would help anything, e.g.

@Mehrabbruno
Copy link
Author

tasks

  • update terminal_v0.0.2 - 1h3min
    • read feedback of terminal - 13min
    • bring the v0.0.1 UX back to the updated design
    • change the color of the terminal
    • add a scrollbar
    • update task and record worklog - 13min
    • @output terminal_v0.0.3

worklog

worklog-123

feedback

proposals

@serapath
Copy link
Member

feedback 2023.03.21

Great.
One thing i notice though is that in terms of font size and elements, there are still too many different styles in one. retro UIs where quite homogenous in some way, because of the very limited palette of colors/fonts and stilistic elements, shapes and sizes :-)

Look at this one for example - a lot is going on there, but everything you can see somewhat feels visually like it belongs to the same style

I will prepare a few more links and pictures for inspiration of typical retro UI elements and styles we could copy/steal from :-)

retro ui

Maybe scrollbar should stop/end before the buttons?
It confused me first, wondered what the scrollbar does. if it stopped earlier to align with tabs, before buttons/icons start, it would be more self explanatory probably.
horizontal scrollbar

scrollbar
A lot of retro scroll bars had different arrows and styles.
e.g.: an early apple scrollbar (would prefer it)

That way we could maybe integrate the up/down arrows into the bottom menubar, on the right side of the dates dropdown?
scrollbar

like here (some retro scrollbars)
scrollbars2

I like the overall terminal.
One thing though is borderless "flat design" gives it a clean/modern touch.
missing borders

Most retro UI had some sort of explicit borders.

For example
retro ui

So from previous comments here i think the following are representative:

This one when it comes to visual elements and borders: ⭐ ⭐ ⭐
1

This one when it comes to monochrome.
So - while there are only 4 or 8 or 16 colors available on retro systems, in a monochrome context those can be shades of a certain color instead. So our "theme button" could maybe switch from the colored version which limits to a specific color palette of 16 colors to monochrome green or monochrome red or monochrome blue, etc... which means everything becomes
black/white or black/green or black/red or black/blue, .... with different shades of black or green or red or blue ...
2

Now if you think of the above and compare them with your current design, your design still has quite a modern touch compared to the real retro stuff :-) or not?
That's at least my impression.

Now another thing is, that almost all retro consoles/terminals/etc... where always black.
The terminal having any other color than pitch black is a rather modern thing. These days they are white and grey and transparent and whatnot, but for that reason i don't think black was a bad idea, so at least we should have under our theme button an option to go for the black terminal

terminals

The add tab button and close shell are fine, but the minimize looks like a counter part to the + so maybe people would expect to remove tabs or maybe to zoomin zoomout.
So possibly we should change the minimize/maximize icon to a more common one, like:
close/minimize/maximize/add buttons

like maybe
icons

Can you also take another look at the following links and click images to take a closer look

  1. https://c64os.com/c64os/usersguide/userinterface
  2. http://oldmachinery.blogspot.com/2019/09/
  3. http://c64.com.pl/index.php/cartridge/final.html?cartridge=finaliii
  4. https://www.valoroso.it/en/the-final-cartridge-iii-tutorial-assembling-eprom-programming/
  5. https://www.commodorespain.es/el-cartucho-magico-the-final-cartridge-iii/
  6. https://c64os.com/post/rethinkingthememmap
  7. https://c64os.com/c64os/usersguide/userinterface

They all contain specific inspirational typical retro elements and ideally we can pick the best most creative cool retro UI elements and combine them nicely :-)

quick single picture gallery:

@Mehrabbruno
Copy link
Author

Mehrabbruno commented Mar 29, 2023 •
edited
Loading

tasks - 2023.03.29

  • update terminal_v0.0.3 - 28min
    • update the buttons and the icons
    • add border and change the color of the terminal tabs
    • update the scrollbar
    • read feedback - 23min
    • update task and record worklog - 14min
    • @output 📦 terminal_v0.0.4

worklog

worklog-125

feedback

proposals

@serapath
Copy link
Member

serapath commented Mar 29, 2023 •
edited
Loading

feedback 2023.03.29

You make a good point with containers in the content area
screen

I think we definitely need a focus color (maybe orange or pink or green)

  • to use in background colors, borders or font and icon colors only when focus

ALSO:

Below i will mix some retro screenshots with the screenshots from our current design.
Seeing them side by side definitely shows that our system still looks way more modern and things aren't right yet. Maybe you can medidate with those and study and get just even more in into the retro vibe to really feel it? :-) Not saying what we have is bad, but I just think it can get even better.

I kinda wish we could homogenize the style and really keep it even more retro.
everything has a more standardized layout along a mono font character sized imaginary grid.

I think things get better slowly, but don't feel shy to put some serious hours in and also standardize everything more into one retro style. I will attach again some more pictures.
Currently fonts, menubars, icons and colors are still not yet in this grid like retro style.

Just to keep in mind, users will anyway use their scroll wheel or maybe click the scrollbar and drag it, nobody really uses the scroll bar arrows anyway, they are more a "visual gimmick" to make it appear more retro.

For example scrollbar
scrollbar

Basically those are also very representative. mono color and again everything is compact and aligned.

Here is that applied to the terminal, but of course, i am not good in making it look more retro, like the image above, but still, just to share what i mean:
screen
screen2

the following also has a lot more retro touch, if that is possible to achieve.
Whether it is the scrollbar from this one or the one above from the beginning.
This one has the dotted pattern and the other one has the diagonal striped pattern.
The point is that the entire UI of all screens uses the same retro style.

retro ui

This one for example is even older and even more retro, so if you can even do that, that would be cool

retro ui

I just think the whole thing needs some retro ❤️ ❤️ ❤️ 🙂

some more real retro screenshots (you might need to zoom in on some)
a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12

Basically those links help:

Can you also take another look at the following links and click images to take a closer look
https://c64os.com/c64os/usersguide/userinterface
http://oldmachinery.blogspot.com/2019/09/
http://c64.com.pl/index.php/cartridge/final.html?cartridge=finaliii
https://www.valoroso.it/en/the-final-cartridge-iii-tutorial-assembling-eprom-programming/
https://www.commodorespain.es/el-cartucho-magico-the-final-cartridge-iii/
https://c64os.com/post/rethinkingthememmap
https://c64os.com/c64os/usersguide/userinterface
They all contain specific inspirational typical retro elements and ideally we can pick the best most creative cool retro UI elements and combine them nicely :-)

check also these to see how we can make things more retro
http://www.symbos.de/mirrors/www.clips64.de/desktop.htm
http://www.symbos.de/mirrors/www.clips64.de/controlp.htm
http://www.symbos.de/mirrors/www.clips64.de/pathfind.htm
http://www.symbos.de/mirrors/www.clips64.de/processm.htm
http://www.symbos.de/mirrors/www.clips64.de/clipdemo.htm

@Mehrabbruno
Copy link
Author

Mehrabbruno commented Apr 7, 2023 •
edited
Loading

tasks - 2023.04.08

  • update terminal_v0.0.4 - 2h30min

    • read feedback on terminal - 12min
    • update the UI to be flat retro
    • @output 📦 terminal_v0.0.5

  • update terminal_v0.0.5 - 24min

    • add the scrollbar_v0.0.2. - 5min
    • change the highlight colors
    • make the buttons more compacts
    • record and update tasks, worklog etc - 20min
    • @output 📦 terminal_v0.0.6

worklog

worklog-129

feedback

proposals

@serapath
Copy link
Member

serapath commented Apr 9, 2023 •
edited
Loading

feedback 2023.04.09

Great. At first i was sad for the terminal to not have the pink window bar anymore.
I wish we could have one theme version where we actually keep this :P
...But It makes sense, because we can use colors for highlighting messages in the terminal.

Also the more squeezed font in the terminal tabs makes it look more retro. that's cool.

I also like the renaming of terminal into shell after seeing you do it in the video.
Of course - the black window bar should be the main theme color from light or dark theme, where the default one has the dat dark_blue

So all great.
Regarding icons, maybe one thing:

  • let's remove the min/max icon for now to keep it simple
  • maybe we can or should move the + button into the tabs row
  • and thus make the scrollbar under the +.
  • the < and > button of the scrollbar might have the same width as the + maybe.
    terminal

Basically, something that makes sens to align all windows, scrollbars, icons etc... in an invisible grid to be multiplze sizes of a basica square and aligned to each other, so that is the main goal - currently we still have +/#/x buttons not squares but somewhat rectangles of an in between height not fitting into an imaginary grid.

if we later "move" windows around or icons, they should probably snap from one grid unit to the next instead of being continuously dragged - but that needs to wait until we actually implement it, but it also means nothing can be resized or positioned in between those invisible square grid blocks

@Mehrabbruno
Copy link
Author

tasks - 2023.04.14

  • update terminal_v0.0.6 - 31min
    • read feedback on terminal - 4min
    • remove the extra buttons from the bottom tab container
    • record and update tasks, worklog etc - 11min
    • @output 📦 terminal_v0.0.7

worklog

worklog-132

feedback

proposals

@serapath
Copy link
Member

feedback 2023.04.17

+1 perfect changes. i think the terminal is great.

@serapath serapath mentioned this issue Jun 7, 2023
Closed
48 tasks
@serapath serapath closed this as completed Jun 8, 2023
@serapath serapath mentioned this issue Jun 8, 2023
Open
17 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@serapath @Mehrabbruno