dat-ecosystem website_homepage #85
Comments
Mehrabbruno
changed the title
tasks
worklogfeedbackproposals |
|
feedback retro page design...what do you think about colorful parts, including banners or any sort of art or picture to be framed into for example "displays" (e.g. even the hexagon might be connected like a display and that's the "explanation" for why it shows a picture (or if we animate it slightly in the future, even some "movie") ...basicaly including it in the page, but more being presented by it without becoming part of the actual retro page design, like the retro page is hosting some modern content. liek a retro TV from ages ago could show a 2022 hollywood blockbuster movie, but by looking at the room and the TV the room would still look retro. otherwise, while the colors look great, i feel the "retro" feel got lost a bit in retro pages or systems, the idea was to have a specific place for everything and put it there instead of like on modern pages, where the landing page is a "mashup" of many things to tell a story. the retro systems functioned more like systems. e.g. we want it MORE RETRO than e.g https://heaven.computer/ projects page sectionthe 3D projects graph goes on the project page in some section. you see all projects on the dat-ecosystem discord server and the active channels. filter sounds cool - also yes, we will have the ecosystem 3D graphic that will also work in virtual reality to show how projects are connected and if users select a project node in that graph it will display more details about that project. so yes, again, a "super retro page can display modern content" we don't have it yet, but it will come. filters based on tags is cool We dont have any "more important" projects project status in cardmaybe the project status can be right next to the project logo? ...a double logo prefixed or postfixed by the phase specific version of the dat ecosystem logo? also - i still think the little robot is cute too (maybe the flying head with hanging arms could "carry" the leaf to indicate status? :P or maybe the project status can be right next to the project logo? ...a double logo prefixed or postfixed by the phase specific version of the dat ecosystem logo? otherwise, while the colors look great, i feel the "retro" feel got lost a bit old bannerregarding the "old banner", i would keep it exactly as is. That also means we need to update the banner from time to time in the future, when projects change and new ones are added, which gives opportunity to fine tune that banner over time. The original banner is mostly important for the re-launch of the website to make people feel familiar :-) page colors & themingless colors make it also more neutral. the dark/light theme button can have a drop down and we add a real "theme customizer" so the user can change the colors and thsoe get cached locally until the user rests their theme, so the theme they picked stays when they come back, but by default things look retro
terminala terminal (maybe collapsible) would be sweet. https://imgur.com/Pib6Wff.png if you feel like https://imgur.com/Pib6Wff.png then it should probably be drawn with simple lines, to be really retro, like e.g. Like literally, if we had that, it should be pixelated lines or look crappy, the way it would be drawn if an ancient retro computer would draw that. their graphics where absolutely basic check: |
tasks
worklogfeedbackproposals |
|
feedback perfect. let's implement it :-) |
|
feedback By the way, all pages do not have the terminal yet. Byt default it might just print/show a hello/welcome message in the terminal which shared information about the discord/cabal chat rooms with a clickable link. So people can configure and maybe it has a little config wheel too to activate/deactivate the beepbopp sound? We might even consider putting the entire pages navigation bar into the footer instead of the header and then you can toggle a button to expand/collapse the terminal.
|
tasks
|
|
feedback
|
tasks
|
|
feedback for worklog-134So the "grid size unit" is not so much about snapping things to other things. so the smallest grid unit we have currently seems to be the up/down/left/right arrows of the vertical/horizontal scroll bar. The years in the timeline already have a height of that arrow so the width of the year should be a multiple of that arrow square too, maybe 3x arrow square, which makes the width of the timeline scrollbar 4 arrow squares, 3 for the year, 1 for the scrollbar, which means the icons in the navbar should probably be width and height of 2 arrow scrollbar squares. It is already close to that, but we can make it pixel perfect :-) Even text inside components should probably only be able to start at specific grid slots, not in between grid slots and all fonts probably need to become mono fonts with the widht of our grid size and even font size might need to come in multiples of those grid slots. Which means, for example the timeline item tags have padding around the text. same here, i think it really makes it retro that all buttons are not the same length, but they should still be each multiples of our minimum grid slot size, which i assume currently might be, as said above, the size of a scrollbar arrow. But there is no need to make the dat-ecosystem logo section fit the width of a card. Basically what is meant by grid is literally an imaginary grid of squares and elements can be positioned in that grid. Maybe the smallest grid size needs to be half a day field, so a day field consists of 2 grid slot squares. Which might make the scrollbar arrow 2x2 grid slot squares. Maybe for implementation we later need to define a grid size constant and then calculate all other sizes in the website as multiples of that constant. Maybe on different screen sizes, we can dynamically adapt that grid size constant. Oh one more thing, maybe the "artwork" (like the tree with scientists) can actually get some sort of CSS dither filter applied to it to make it look "shittier". for worklog-135wow, background pattern works, stripes in the window bar seem cool, padding seems cool too, but as said above, jsut needs multiples of the base "grid slot width", but really nice. also great logo size increase - much better. maybe could even be larger, but i guess it's fine, you probably tried different sizes and figured this one is nice. we could also consider again, if letters are "grid slot size" or multiples, then the logo might also need to be multiples of that, but a few more to make it larger than the letters, but it looks good. Thanks also for trying the differernt highlight color, green vs. pink. I feel though making it all green is way to intense in terms of color, so dark blue must be the main color as you suggest, but by using green as the highlight we maintain the character which dat developed over the many years - and still, what about making an exception for the terminal? ...we could keep the terminal button pink and activating it makes it darkblue, but shows the terminal with a pink window bar to indicate that this is a special window? So in summary, it would be the way you have it, but the highlight color switches from pink to green to keep the traditional dat colorscheme alive, but we keep the cool pink for the terminal. I think i would try that for now and once we have it all implemented we can still play around with schemes or rather allow the "theme picker" to not just be an option between dark and light theme, but also custom to enable people to set their favorite colors as some sort of gimmick :-) Also:
=> so maybe we can show the timeline first and the projects after that? :-) next: projects One thing though: It is an isolated window bar and floating project cards. visually they are grouped so they clearly belong together, but a retro operating system would probably realize this by creating some sort of project/business card viewer program that you could start and it would enable scrolling too.
So if we wrap the cards in a window, then the window inside probably needs a slightly different background pattern and we need to shrink the project cards slightly, by one or two "grid slot sizes" to make the padding work ...oh and it might need space for the scrollbar too. finally: |
tasks
|
|
feedback grid size+1 for the 30px * 30px grid. The word We can also double the grid to We can also leave it at window barapart from maybe allowing action items in the window bar in general, maybe we should still keep the One more thing though, double clicking the window bar makes it full screen minimize/maximize, pressing the orderYou say the order doesn't matter so much, but i have to say i didn't even notice at first where timeline ends and projects start. Also, the timeline (or latest news) is most important, so i think it should be above "about us", but projects can stay where it is is my take. |
tasks
|
|
feedback Some things have been missed from previous feedback, e.g.:
Which means kinda all feedback above was somehow ignored? 🤔 @2.Window bar of a standard program window, like any other "program window", which it's generic features, such as "closable" ( So the idea for implementation later on is to make every window an actual application. To your question: Another purpose is, that the footer, header or "about" section or e.g. 3D visualiation on project pages, they all take some screen space ...so maybe a user wants to get rid of them to have more space for the remaining windows, e.g. more space for the scrollable list of projects, including more space for opening the terminal. It gives a better impression of an actual retro desktop. For example, i perceive the main menu bard e.g. home/timeline/etc... more as desktops you can switch between, each "desktop" having a name or label. Otherwise, even an application could be like a "virtual machine" to actually open an application inside that application, but we don't have to go that far just yet :P @3.regarding "grid size", let's try to find good free pixel mono fonts and choose a smallest one and model the grid after that letter size and a few larger font sizes to be multiples of that smallest one so they also fit into the grid, regarding of how text line breaks. If that works out, we can keep the idea, if no matter what we try this wont work, even when fiddeling with hard coded css params for line height and letter spacing and font kerning, etc... then ok, let's skip this feature, but if it is possible, i think it would be phenomenal. A very subtle visual feature that really delivers retro feel, but also rarely seen and otherwise hard to pull off. |
tasks
|
|
feedback Sure please log your time. Ok, i watched the entire video. Anyway, This feedback is again a bit longer. I agree with many of the points you made. the long term purpose of the pageto get user retention and users coming back to the page.
This page is meant to become alive. So another purpose of the page is to be customizable. Which programs, how are they arranged, maybe a user even decides to change the entire theme (not just light/dark mode) but much more fundamental. They can always do it through the terminal i guess, but at some point they could install a program that helps with switching the theme. On the other hand, anything we might close or remove should always be able to be opened again. At least one command in the terminal should probably be about "reset system" to put everything back to how it was before a user customized everything (but without deleting any user data) ...we are currently working on a "user data vault" standard to store all of the users data and we will eventually integrate that into the dat-ecosystem page as well. the idea is to integrate dat technology into the page once ready, which means ppl will be able to create an account by generating a keypair or putting in their keyphrase and then they can use the terminal or later a software manager app (appstore...) to install more programs over the p2p network. a fully fledged developer environment to actually work is the long term goal, so at some point, some ppl might visit the website (at least me), turn it full screen, and stsrt working ...it would be my daily driver. we would integrate p2p cabal chat and migrate away from discord. So much about "long term purpose/perspective" :-) about our retro website concept
We can work on this concept to refine it. For Example:
Also you might just double click a window bar to put a program temporarily into full screen regarding timeline program on timeline tabWe are building a website, but at the same time the long term purpose is to make it customizable and scriptable for users and developers, thus everything has to be something. If the "timeline program" has no "window bar" on top, then what is it? The purpose, as described in the beginning of my feedback would be, to allow a user to start making the page "theirs" and customize it the way they want and the page to remember those preferences. That's the only purpose of being able to close the program. But maybe for now we can also skip the close button and think of all navbar tabs as "programs" (maybe desktop), but as in the timeline and most navbar tabs, they might be just programs ...presentational programs, which look like a landing page and just "hard code" some programs in a specific way and the layout has them one after another. Maybe that's good enough. Otherwise, if the timline program on the timeline tab is closable, there should be either an icon in the background or some other way of launching it again. Maybe: when a user clicks on a navbar tab, a launcher menu expands, but when a user clicks elsewhere, the launcher menu collapses again. Maybe that's how we could always launch apps again. Would also be cool to have a navbar tab, when selected, show a "window bar" for the entire navbar tab program and be able to close it, but it also means again, there should be a regarding app vs desktop metaphor
ppl would not expect the info and the home page to be different. info has multiple sub windows, so more like a desktop, but home somehow, even though it has a background and multiple boxes that look pretty much like windows is supposed to be an application. i find that confusing regarding font letter sizes slots=> i was talking conceptually, but we can totally use the power of css to achieve that effect in a more efficient way. maybe ...lets try based on the best mono font we can find, whats the smallest font size that is still readable and that is what we use for our grid size. I do agree with you on the example of padding between cards. let's not make it too small. Maybe we can try with 10x10 (even though i found pixel fonts that work on 5px size. i can read them. I agree though that 5px is too small for retro system i think.
let's just find a good mono spaced free pixel font also if the screen size is not perfect mutiples, it isnt problematic, because we anyway habe still the browser chrome, the border around the whole visible window when it isnt full screen,which on top includes also the addressbar and then it also depends to what size a user resized a window. you never know CHALLENGE: That said - having a card and arranging anything within that card in a grid works. We might even use the power of javascript to generate our grid template areas :-) If we need padding inside cards we should probably use multiples of the grid slot size. regardint p2p garden coming soonmaybe the banner on the garden page can look like a box cover for a game or a splash screen where you have the option to start the game, but not yet, because regarding website conceptIt is true, that the My impression was, the menu bar functions as switching named desktops But all the windows on the info desktop (e.g. important documents, members, tools, mission) should then be listed in the navbar as well while open and they are not. So let the "desktop" be just another program and in our case, this particular desktop program has icons files/folders in the background and 4 open windows (important documents, members, mission, tools), but has no extra navbar to show those open window. I think that is ok. also:
This would allow us to have some navbar tabs (pinned like "info" or not) be desktops. To me it makes sense to create potentially many named desktops, for different contexts and if we theoretically had multiple physical screens, maybe those could even be spread across multiple screens isntead :-) Overall, the option with multiple desktops gives us more flexibility for the future. Also, consider the scrollbar on the projects component. regarding
|
tasks
|
|
feedback
Basically, for every program, can you check if we re-use it or if it is new and use an icon that represents the program? (also we have to give each program a name) e.g. needs a pixel version of a simple pdf icon Name changes (snake case) and "close icon" is great. |
tasks
|
#70
todo@input📦homepage_web_v0.0.3from Refine dat-ecosystem website UI #70@input📦homepage_dark_web_v0.0.3from Refine dat-ecosystem website UI #70@input📦 'buttons_v0.0.1' from dat-ecosystem website_buttons #71@input📦 'about_us_section_cover_v0.0.1' from dat-ecosystem website_about_us_cover #77@input📦 'footer_v0.0.3' from dat-ecosystem website_footer #75@input📦 'pill_tag_v0.0.1' from dat-ecosystem website_pill_tag #73@input📦 'projects_card_v0.0.3' from dat-ecosystem website_projects_cards #74@input📦 'image_cover_1_v0.0.2' from dat-ecosystem website_image_cover_1 #76@input📦 'navbar_v0.0.2' from dat-ecosystem website_navbar #72@output📦home_page_web_v0.0.4from comment@input📦home_page_web_v0.0.4@output📦home_page_web_v0.0.5from comment@input📦home_page_web_v0.0.5@output📦home_page_web_v0.0.6from comment@input📦home_page_web_v0.0.6@output📦home_page_web_v0.0.7from comment@input📦home_page_web_v0.0.7@output📦home_page_web_v0.0.8from comment@input📦home_page_web_v0.0.8@output📦home_page_web_v0.0.9from comment@input📦home_page_web_v0.0.9@output📦home_page_web_v0.0.10from comment@input📦home_page_web_v0.0.10@output📦home_page_web_v0.0.11from comment@input📦home_page_web_v0.0.92013.05.10@output📦discussion_document_v0.0.1from comment@output🏭discussion_document_v1The text was updated successfully, but these errors were encountered: