dat-ecosystem / organization

Organizational documentation for the dat-ecosystem
https://dat-ecosystem.org/organization/
7 stars 2 forks source link

dat-ecosystem website_terminal #105

Closed Mehrabbruno closed 1 year ago

Mehrabbruno commented 1 year ago

70

@todo







Mehrabbruno commented 1 year ago

Tasks


Worklog

worklog-117


Feedback


Proposals

serapath commented 1 year ago

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 commented 1 year ago

tasks


worklog

worklog-120


feedback


proposals

serapath commented 1 year ago

feedback 2023.03.09

:sweat_smile: 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

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, 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 commented 1 year ago

tasks


worklog

worklog-123


feedback


proposals

serapath commented 1 year ago

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: :star: :star: :star: 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 commented 1 year ago

tasks - 2023.03.29


worklog

worklog-125


feedback


proposals

serapath commented 1 year ago

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)

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 :heart: :heart: :heart: :slightly_smiling_face:

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 commented 1 year ago

tasks - 2023.04.08


worklog

worklog-129


feedback


proposals

serapath commented 1 year ago

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:

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 commented 1 year ago

tasks - 2023.04.14


worklog

worklog-132


feedback


proposals

serapath commented 1 year ago

feedback 2023.04.17

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