Refine dat-ecosystem website UI

[Mehrabbruno]

#37

@todo

• Go over the dat-ecosystem project and figma file

  • @input 📦 Icon_with_texts_v0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Button_v0.0.1 from Dat Ecosystem web component #68
  • @input 📦 theme_switcher_v0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Navbar_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 About_us_section_card_v0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Projects_card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Footer_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Header_ card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Call_to_action_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Collaborators_tools_card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 profile_card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 growth_program_role_card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Growthprocess_locator_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Growthprocess_overview_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Growthprocess_details_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Input_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Search_Input_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Search_Input_+button_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Search_not_found_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Timeline_Card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Pagination_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Filter_tag_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 checkbox_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 Filter_card_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 mobile_menu_sticky_v.0.0.1 from Dat Ecosystem web component #68
  • @input 📦 dark color theme
  • @input 📦 light color theme from dat-ecosystem website_terminal_frame #86
  • @input 📦 dat_ecosystem from implement and publish website #37
  • @input 📦 dat_ecosystem_web_component_1 from comment
  • @input 📦 dat_ecosystem_web_component_2 from comment
  • Create an issue and structure tasks
  • Duplicate Figma files
  • merge web component 1, web component 2 and website files (so all components can be linked separately)
  • @output 📦 dat_ecosystem_website from comment

---

• Improve home screen
  • @input 📦 dat_ecosystem_website
  • look for references
    • provide mood board
    • @output 📦 moodboard_v0.0.1 from comment
  • update the homepage based on the feedback
  • @output 📦 homepage_v0.0.2 from comment

---

• Improve homepage_v0.0.2
  • go over the feedback- 34min
  • update the homepage based on the feedback - 1h58min
  • record worklog and update tasks - 23min
  • @output 📦 homepage_v0.0.3 from comment
• add dark theme of homepage - 3min
  • @input 📦 homepage_v0.0.3
  • update the homepage to dark theme
  • @output 📦 homepage_dark_v0.0.3 from comment

---

• Separate the current design into the following components
  • @input 📦 homepage_dark_v0.0.3
  • dat-ecosystem website_buttons #71
  • dat-ecosystem website_navbar #72
  • dat-ecosystem website_pill_tag #73
  • dat-ecosystem website_projects_cards #74
  • dat-ecosystem website_footer #75
  • dat-ecosystem website_image_cover_1 #76
  • dat-ecosystem website_about_us_cover #77
  • dat-ecosystem website_logo #78
  • dat-ecosystem website_Image_Robot_1 #79
  • dat-ecosystem website_Image_Robot_2 #80
  • dat-ecosystem website_Image_Robot_3 #81
  • dat-ecosystem website_Image_Robot_4 #82
  • dat-ecosystem website_Image_Robot_5 #83
  • dat-ecosystem website_original_banner #84
  • dat-ecosystem website_homepage #85
  • dat-ecosystem website_terminal_frame #86
  • dat-ecosystem website_terminal_buttons #87
  • dat-ecosystem website_filter_options #89
  • dat-ecosystem website_info_card_1 #90
  • dat-ecosystem website_info_card_2 #91
  • dat-ecosystem website_title_paper_tag_1 #92
  • dat-ecosystem website_title_paper_tag_2 #93
  • dat-ecosystem website_bullet_point_paper_tag #94
  • dat-ecosystem website_team_member_container #95
  • dat-ecosystem website_step_card_1 #96
  • dat-ecosystem website_pagination #97
  • dat-ecosystem website_project_page #98
  • dat-ecosystem website_consortium_page #99
  • dat-ecosystem website_course_card #102
  • dat-ecosystem website_container #104
  • dat-ecosystem website_terminal #105
  • dat-ecosystem website_scrollbar #108
  • dat-ecosystem website_coming_soon_page #112

[Mehrabbruno]

tasks

• Go over the dat-ecosystem project and figma file - 27min
  • Create an issue and structure tasks - 22min
  • Duplicate Figma files - 5min
  • merge web component 1, web component 2 and website files (so all components can be linked separately) - 38min
  • record worklog, update task and comments - 18min
  • @output 📦 dat_ecosystem_website

---

worklog

worklog - 98

---

feedback

• I went over the previous tasks and figma files
• Created a different issue and task

---

proposals

• create a mood board for the design changes. (aim for bringing more vibrancy to the whole website)

[serapath]

feedback 2022.01.09

I saw your bloobies and choo chew designs.
The dat ecosystem colors are pretty much fixed.
they are green, pink, darkblue, black and white - it has been like this more or less since 2013 and cant be changed.
of course in images with characters there need to be some more and maybe different colors, but the page in general has to be in the main dat colors.
here is a link to an older page that has those main colors https://datproject.org/

Here are the main pages of the dat-ecosystem for comparison - they are basically just black and white
https://cabal.chat/
https://www.datprotocol.com/ (old page)
here the former main page of the protocol https://web.archive.org/web/20211203060652/https://hypercore-protocol.org/
https://peermaps.org/
here is yet another partner project https://earthstar-project.org/
here is ours https://datdot.org/

So just keep in mind, that this is the environment which things are coming from - deeply minimalistic, simplistic and mostly black/white.
People do live in the computer terminal, where they stare into a shell and see one message after another in a console, issuing commands and it's mostly using some system mono fonts.

Now our page should match that, but for sure we have to get away from corporate! That is really bad that it resembles corporate.
Despite the characters and images, the page should look technical.

For example, here is the internet engineering task force that write many or even most of the standards that make up the internet
https://www.rfc-editor.org/rfc/rfc7693

here is another page that is frequented by people in the community https://tildeverse.org/ or https://tilde.club/
many are fans of old retro computers, like the commodore64 and the likes

If we can make the page look very technical, maybe like a terminal with ascii characters and system mono fonts and the likes and confine the art into specific regions or areas where they fit and integrate nicely, that would be sweet.

[Mehrabbruno]

Tasks

• look for references - 41min
  • provide mood board
  • record worklog and update tasks - 21min
  • @output 📦 moodboard_v0.0.1

---

Worklog

worklog-100
worklog-101

---

Feedback

---

Proposals

[Mehrabbruno]

Tasks

• Improve home screen
  • go over 2022.01.09 feedback - 26min
  • update the homepage based on the feedback - 2h53min
  • record worklog and update tasks - 21min
  • @output 📦 homepage_v0.0.2

---

Worklog

worklog-102

---

Feedback

• Kindly ignore the fact that I only linked the single frame and now the correct version on. I will be updating it tomorrow. was just busy and had to go somewhere

---

Proposals

[Mehrabbruno]

Tasks

• Improve home screen
  • go over the feedback- 34min
  • update the homepage based on the feedback - 1h58min
  • record worklog and update tasks - 23min
  • @output 📦 homepage_v0.0.3
• add dark theme of homepage_v0.0.3 - 3min
  • update the homepage to dark theme
  • @output 📦 homepage_dark_v0.0.3

---

Worklog

worklog-103

---

Feedback

---

Proposals

[serapath]

feedback 2023.01.16

---

coding

Lets do the changes mentioned below, but then please also break down the project into some components you think are useful. The design affacts mostly the "Front page", but the menu shows we have some sub pages, for each we have the content already in the current page.
So we need them all and if there are a few components you are pretty sure can stay, maybe you can put them into "figma version controlled components" so we can on the side also start implementing those :-)

---

page content

You are right - the old page was tech/protocol/product oriented.
The new page is projects oriented - it's now an ecosystem and the tech/protocols/products can be found with each project instead of dat-ecosystem directly.

Here is the current website and the information is on that page https://dat-ecosystem.org/
The way it is structured can be improved and if you read through the old pages (at least titles and sub titles) maybe some ideas could be used to refine things, but the main content is the one on the current website.

In essence - The content is important, but if you have suggestions of how to make things more minimal and concise (e.g. moving some content to other sections, etc...), let me know or maybe even suggest in the next figma wireframes

So again, for content, check the latest page https://dat-ecosystem.org

---

dat projects

The changes are otherwise nice.
Still - projects will be classified and based on whether it is a new student or side project by a solo dev or a mature componay with users and a fully fledged product, we give it a badge, which is the logo with a leaf that grows to full size or it is empty with not even a seed in it and every stage in between, see
https://github.com/dat-ecosystem/organization/tree/main/visual%20assets/assets%20by%20tommings/logo

---

banner and theme/style/colors

Also - yes, retro the way you started the design is great.
The core projects i shared with you have a very minimalistic design,
much simpler than the old "dat pages" and mostly just black and white with a system mono font

By the way, the main picture of the tree should probably be the one that has the project logos in the tree leafs. check twtter banner to see what i mean.
https://twitter.com/dat_ecosystem

It has to be close to previous designs in terms of colors or specific recognizable elements, so somebody who hasn't checked dat for the last 3-4 years, will recognize elements and figure out they are still looking at or dealing with the same things that they discovered back then. I don't think the soft shadow white boxes are part of that, so we can skip those.

I still think we need to re-use the banner somewhere in some form
https://web.archive.org/web/20201001002406/https://datbase.org/ has it and many other old pages have it too.

It is cool that you changed the square in the header to a hexagon.
The small hexagons around look nice, but might take a bit from the retro feel - or not? what do you think? ...maybe they can animate, sounds cool.

old blinking cursor:
This is actually a feature we want to support for real, not initially but later.
Maybe a "real" terminal that shows some sort of welcome message because we later want to allow a user to type .help to actually see some options and then interact with the page through the terminal for real - but we wont have that in the initial implementation now.
I didn't want to mention it, but now that you bring up the cursor, i thought i share it :-)

Also, the dark purple though is the color from the characters hair but is not a traditional dat color, so we should keep the green i think. What i mean by re-using elements from old websites is more literally re-using them and not figuratively or in the same spirit, but literally re-using some so that they are recognizable. Not all of them, but if you go through the pages - like in the video - and you see all those pages: What are the re-occuring symbols and elements? We should take the most iconic and defining ones.

Maybe in the history/timeline section, we can also have a list of all the previous logos?
clicking one might even jump to a specific point in the timeline :-)

here is a direct link to the banner

It can be framed in a box, like a screen/display or whatever.
It could be part of the footer.
But keep in mind that dat-ecosystem was inactive for probably around 2 years, so most people are only used to those old pages and they all are quite similar, while the new one significantly changes style and colors. So this will still tell people they are dealing with the same project, but evolved.

Also: That banner captures all important colors:
green/pink/white/black ...only the "dark blue" is missing.

The red and light blue aren't that important are just in the pallette of the other colors that were once in use or are useful in special situations.

The square footer seems better than the previous footer hexagon, but mainly because the footer hexagon had rounded corners which to me made the whole feel different - maybe if it had shard edges like the new hexagon banner frame in the header, it would be fine too, who knows.

Also: the discord icon is one chat and the cabal is another chat, so maybe it should have another icon? currently it looks like the title or name for the discord icon.
Cabal logo is also one dat-ecosystem project and has a downward arrow, see: https://cabal.chat/

---

structure

It is probably not possible to have all pages without any scrolling - wish it was possible.
Anyway, just keep in mind, that the projects page currently has those cards, but we need space or a placeholder for the 3D supply chain network that is in the making.
Probably it just needs to be framed, like a display/screen? somewhere? maybe like an old gaming console style? i have no idea. Anyway something like this
https://vasturiano.github.io/3d-force-graph/example/large-graph/