search

dat-ecosystem / organization

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

Refine dat-ecosystem website UI #70

Closed Mehrabbruno closed 1 year ago

Mehrabbruno commented 1 year ago

37

@todo

Mehrabbruno commented 1 year ago

tasks

worklog

worklog - 98

feedback

proposals

serapath commented 1 year ago

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

Tasks

Worklog

worklog-100 worklog-101

Feedback

Proposals

Mehrabbruno commented 1 year ago

Tasks

Worklog

worklog-102

Feedback

Proposals

Mehrabbruno commented 1 year ago

Tasks

Worklog

worklog-103

Feedback

Proposals

serapath commented 1 year ago

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/