dat-ecosystem website_timeline_page #101
Comments
tasks
worklogfeedbackproposals |
|
feedback The timeline design looks nice, but i think the current website makes more sense in terms of structure, so that a timeline really feels like a timeline and timeline entires have more space. The timeline content is already on the page but probably needs to contain many more entries than the relatively few listed there yet. Each of those entries is already tagged with a tag, but can potentially tagged by multiple different tags, which makes it possible to filter. Now regarding filters/search/etc... that part is great, because it is missing, so that's pretty cool that you added that. Overall we want a lot of content to fit into the timeline page and use endless scrolling, whcih probably automatically navigates the pagination too.
I like the structure of the card, it lacks the tags though and a section for attached/relevant links and generally (but we didn't have that yet), an option to show a project logo, because each timeline item can be related to one of the projects in the ecosystem. |
tasks
worklogworklog-110 feedbackproposals |
|
feedback generalthe menu bar is awesome, please don't change it again :-) terminal would expand/collapse from the menu bar and do in short what i wrote in the previous feedback comment. it's ok if it is simple. components+1 for buttons and stuff. yes we keep it. lovely you did that :-) 3d visyeah, think of a retro style computer. i think i shared some pinterst or pictures of that and maybe you can check those again. if you think a window box with a frame/border is good enough, ...maybe, let's just integrate it somehow and for now just use a "screenshot" of the visualization in figma. Once we have the real thing, we can go and update, but might be AFTER we have the implementation. You mention the entire screen is the monitor.
consortium pageyou pronounced that perfectly by the way. otherwise sounds good - looking forward to the next worklog. timeline
The timeline is mostly about "history" (=what happened in the past) +1 for first re-using davids design, but your new timeline is better
+1 for infinite scroll, but we still need a quick way of jumping through time or even sharing a link to scroll to a specific spot in the timeline to not lose that feature of pagination when using infinite scroll. Maybe an old scool scroll bar? ...but how to bookmark/jump to specific entries? If you have a good idea how to still make it easy for people to see the timeline, what comes after what, even when you have a 2-3 column grid, then please, do, it saves space, which is great - i just felt maybe people will find it difficult to make sense of the order of time. But while we can add those, what you have feels great so lets focus on getting towards implementing. it's getting urgent. growth programSorry for not making things clearer earlier. It is true davids design does not express it well. He just added a picture of a road a bit disconnected from the rest instead of turning the page into that roadmap (which is just meant to show a journey/path, rather garden/nature or retro computing than cars/street) ...but sadly he didn't do that back then. The roadmap picture needs to become the page, but it shouldn't be a roadm, more like a p2p garden journey? ... Yes we need a merging or splitting or rearranging or whatever you wanna call it :-) yes - maybe like the timeline, one after the other, with a CTA for each stage, but maybe we can make the design more retro computing interesting, maybe some gardening motives, being creative while fitting the theme... ...maybe hexagons to show the stage - lets see All the elements on the current design you have and david made and even the current page have are "aspects" of that "growth journey path" we want and that has many stages, so quite some major re-ordering of the content has to be done to place all the curernt information where it belongs under that new perspective. for example:
It's true that many CTA's are missing.
Maybe we need the path/journey that stretechs out through the whole scrollable page. So that we do not need any other elements on the page, because the path itself is basically showing it.
Here is a pinterest link. here are some more ideas how "garden" and "retro computer graphics" might fit in: |
Tasks
worklogfeedbackproposals |
|
feedback timeline pageit loooks nice, but we will get a lot more news in the future once we source also i tried on my phone to use it swiping an imaginary timeline left/right
for navigation:
main inspiration (but of course in our retro computing style)
check the links below for inspiration. go through all of them.
The timeline should be able to switch to caldendar mode in the future too!
Basically, it should more look & feel like a tool, less like a gimmicky presentation page If you have accounts and are logged in, you can check with your own profile too:
(all the above only works well if you have lots of mails/notifications/feed) |
tasks
worklogfeedbackproposals |
|
feedback Please add another for multiselect/filter based on project(s).
Could the white timeline be what happens when the user opens the dropdown? Also it might not hurt to have separators in the main view based on years or month. |
tasks
worklogfeedbackproposals |
|
feedback 2023.03.09` top menu bar buttons show "home" instead of "timeline" and also the original "dat banner with hexagons" is not visible. basic conceptLet's turn every main menu tab, in this case also timeline, where we have a custom layout, that is not a typical desktop/icons/windows thing, into a software program/tool/app instead, so in this case it is the timeline reader program or timeline viewer program which the user sees or opens when they click on timeline. Hmm, maybe that is a misunderstanding, but we now have time/date indicators 3 times.
I'd like to merge them all into one, e.g. either on the right or left.
Lastly, to keep it all a bit more retro meaning, maybe things should be more compact, e.g. timelineso yes, it is totally cool and that's basically what i just tried to describe. we don't have to literally copy github 1:1 In the case of scrolling through the dropdown scroll bar, the scrolling would first cause some indicator on the 365 days menu to move, until we get to the last day of the year, which is when also the dropdown scroll bar jumps to the next year and then you scroll again through the 1-365 days... for example...
again - i'd like to follow a DRY approach (dont repeat yourself) and make things compact and try a retro minimalism design. This is currently way too much time/date stuff :-) By the way, if we use the github timeline for days and combine it with a yearly scroll bar, i would not mind if we then put the Some have calendars and UI but fill the entire screen and have menus on the bottom You could think of the entire timeline page with date selector github style that is scrollable as some sort of "timeline program" and when a user opens it, we can have some search/filter actions on the bottom as a sticky bar ...the content of the calendar area can scroll to show the data for example. Because it is a program and we should do it on every page like that, a user could click to close it. retroI agree regarding the pixelated fonts and some other aspects that could be "more retro".
That is pretty retro to me. This is not an effect. It is here, but back in the days, systems had 4-8 or max 16 colors in their pallette. These day it's millions or more than you can even distinguish with your eyes, but not back then, so if a photo was taken and should be shown, you literally had to use the few colors available and render the picture, so a tehcnique called |
tasks
worklogfeedbackproposals |
|
feedback +1 amazing improvement :-) Do you think the small scrollbar on the side could be "always" visible and scrolling updates the date in the collapsed dropdown? ...but when clicking the collapsed dropdown, it "enhances" the scrollbar with the dates? otherwise perfect :-) Also, thx again for mentioning Regarding scrollbar, i think we should collapse responsively into single column on mobile or small screens so maybe we dont need it here. Also i like your idea of having a little icon to open/collapse the bottom menu bar. Also the timeline scroller menu is awesome. That is very important to have on every page when launching. Also regarding the menubar I agree the Or if we put it in the right end of the menu bar, we can move the terminal to the left end of the menubar instead (e.g. in front of all the menu buttons) ? githubHm, one thing though. don't underestimate the amount of "news" we will be tracking. But without nice tooling it will be pretty tought to follow news and what's going on. The main reason why we do not yet have so many events and entries is because we don't have yet the automated tooling and pull-in of news items across projects, so it is all manual work and thus you see a lot less entries for now, but that is meant to change in the near future and somehow we should prepare for that :-) but we need to do it in a super retro way :P ..so if, then our grid should look a lot more retro. 7x52 pixels grid or grid of squares ...maybe stretched over the full screen width? maybe it can be optional? on the bottom or top ...so it only shows up when the user expands it? ...not sure, but having just a long list of news items alone does not give a good overview to see when there was more or less activity per project.
If you press Next to is it has some additional side menu and options - but we need it all in retro. Also, the |
Tasks -
|
|
feedback Pretty good the way it is. But let's just drop the search dropup entirely Still, the "github grid" and the dropup dates are both time related. Overall, i like it, but if you checked the terminal feedback, just make sure that this screen will fit the same style :-) Also as you can see, i tried a bit with the highlight/focus color. |
Tasks -
|
|
feedback I love it. Really great. Also the texture are nice and retro. Here the dates somehow end on top in not multiples of the icon size. Otherwise, awesome. Green is also the dat-ecosystem logo, so maybe we can use "PINK" as the highlight/focus color and then if a window (e.g. the "shell" window is highlighted, the window bar turns pink, but it is otherwise black or rather dark_blue to keep the theme. for example: In the picture below, the user would be scrolles to "february" but because 9 cards fit currently on the screen, the user can see all the cards from february up to beginning of april on screen, hence they are marked "green" (which might re-use our active/focus) color. |
Tasks -
|
|
feedback +1 perfect changes. i think the timeline is great.
Also you asked for icons for the banner. Basically for every "window" we make, the icon should reflect the program.
or more complex programs, like a The title bar should otherwise show the "filename", this probably Unless we choose a convention, for example that And the file name displayed converts |
tasks
|
|
feedback calendarthe whole calendar again should also be wrapped in an "program window" with a window bar and some padding on the left and right like the footer and basically all other windows. calendar day slotsseeing the date slots - if e.g. the button to show the calendar, the same as a navbar icon is 30x30 and i would imagine they would be made of 2x2 squares instead of a single slot, then the calendar button would probably be a |
tasks
|
|
feedback Regarding the timeline Again, github has fine tuned this for years and they show months and even prefix rows with weekdays and it works, see. Also again - if the footer was a program window and users could close it, then there was more screen space for showing timeline entries and hence less scrolling needed. The program window, like any other "program window", should function the same,for example by having a top window bar i guess? here that is missing. Also: We need a nice popup/overlay window as an option for some "timeline items" to display the content instead of being an "external link". Regarding grid slot size:
Basically some difficult parts we can fix when we implement. Regarding background patterns: |
tasks
|
|
feedback To make the days in the calendar the exact same size/width as in github is not what i meant. Github does not have empty day slots to separate months perfectly well from each other, instead the first day slot of the next month starts after the last day slot in the previous month. We can use slightly different background patterns or maybe alternate the background color gray/white to differentiate between days from the previous and next month. Also Github prefixes the first column with the day names, which is also a feature i would like to copy.
By the way, we are also not clicking, but if a user hovers, they can see a tooltip. Also, by the way - you can click the days on github and i easily do that with githubs day sizes in the grid. It is ok - as said above - to use the scrollbar when absolutely necessary, which means:
regarding popoverwhat is in that "popover". The reason for the "popover" is to replace the blog at some point. The timeline will be the ultimate history, blog, news, timeline of everything that happens. So again, some news entries will link to external data, mostly when it is legacy web stuff that uses here is an old version of the dat blog from 2016 |
#70
todo@input📦 buttons_v0.0.1 dat-ecosystem website_buttons #71@input📦 original_banner_v0.0.2 from dat-ecosystem website_original_banner #84@input📦 filter_options_v.0.0.1 from dat-ecosystem website_filter_options #89@input📦 projects_card_v.0.0.4 from dat-ecosystem website_projects_cards #74@input📦 pagination_v.0.0.1 from dat-ecosystem website_pagination #97@input📦 footer_v0.0.3 from dat-ecosystem website_footer #75@input📦 terminal_frame_v0.0.2 from dat-ecosystem website_terminal_frame #86@input📦 course_card_v.0.0.1 from dat-ecosystem website_course_card #102@output📦timeline_page_web_v0.0.2fromcomment@input📦timeline_page_web_v0.0.2@output📦 timeline_page_web_v0.0.3 fromcomment@input📦timeline_page_web_v0.0.3@output📦timeline_page_web_v0.0.4fromcomment@input📦timeline_page_web_v0.0.4@output📦timeline_page_web_v0.0.5fromcomment@input📦timeline_page_web_v0.0.5@output📦timeline_page_web_v0.0.6fromcomment@input📦timeline_page_web_v0.0.6@output📦timeline_page_web_v0.0.7fromcomment@input📦 [timeline_page_web_v0.0.7](https://www.figma.com/file/1zBxgchAmrDGw2FDzu7uxX/dat-ecosystem-website?node-id=1275-4949&t=If4neK4QfpiquEnl-4@output📦timeline_page_web_v0.0.8fromcomment@input📦 filter_option_v0.0.2 from dat-ecosystem website_filter_options #89@input📦timeline_page_web_v0.0.8@output📦timeline_page_web_v0.0.9fromcomment@input📦timeline_page_web_v0.0.9@output📦 timeline_page_web_v0.0.10 from comment@input📦 timeline_page_web_v0.0.10@output📦 timeline_page_web_v0.0.11 from comment@input📦 timeline_page_web_v0.0.11@output📦 timeline_page_web_v0.0.12 from comment@input📦 timeline_page_web_v0.0.12@output📦 timeline_page_web_v0.0.13 from commentThe text was updated successfully, but these errors were encountered: