search

dat-ecosystem / organization

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

dat-ecosystem website_growth_program_page #100

Open Mehrabbruno opened 1 year ago

Mehrabbruno commented 1 year ago

37

todo

Mehrabbruno commented 1 year ago

tasks

worklog

worklog-109

feedback

proposals

serapath commented 1 year ago

feedback 2023.02.01

The font seems a bit bold but the small one a bit hard to read, though i like the pixelated style and overall it's pretty good.

I have to admit that the current page almost puts the content in a random order and what you did is definitely a huge improvement, but I think we can improve it further.

For older concepts please check:

  1. https://github.com/dat-ecosystem/organization/issues/20#issuecomment-989012928

pic1

In our opinion, the ideal basic order would be to have an intro header (e.g. you have it), but then, to have a long "process" diagram or a page structure to show that, maybe just an arrow from top to bottom annotated with each phase and a call to action button, which is what "street image" that starts with "seed" was meant to become.

So each phase needs a name (we can call them just numbers for now, where each named phase along the road would then have:

  1. a list of requirements for a potential candidate project to enter that phase
  2. a list of what kind of support the growth program will offer in that stage
  3. a description of what the phase is about and what the goal of that phase is
  4. a list of achievements gained from competing a specific phase (e.g. be listed on website)
  5. a CTA button to apply for that phase (projects can skip earlier phases if they feel it)

regarding (1.): it's mentioned in the last section in above screenshot. regarding (2. and 4.) that is mentioned in the first and middle section in above screenshot.

By structuring the entire growth program into a long journey with several quests, there wont be any sections anymore, because descriptions and details are all added next to the specific phase they belong to, that was the idea from the beginning, but neither the github issue link above nor the current website captured that perfectly well yet sadly. I hope we can do it now :-)

pic2 Here again, the street is meant to be the main thing. Can be a journey, an adventure, whatever... but the point is to reflect that we are dealing with multiple phases/stages, each named for potential projects to apply for to get support and grow.

The CTAs in the end don't look really like CTA buttons, only the green color gives it away, but they should anyway be next to the stage/phase they belong to.

Mehrabbruno commented 1 year ago

tasks

worklog

worklog-113

feedback

proposals

serapath commented 1 year ago

feedback 2023.02.18

growth program

looks cute :-)

While I like the idea, one major concern I kinda have is that I feel the "roadmap". First, let's call it a "hiking trail" or something more nature/garden style instead. While the pixelated is qute, let's not use buildings and cars if possible :-) Sorry for ever naming it a "roadmap". The growth program is a path/trail through the p2p garden. Advanced plants and trees are in one section, the see greenhouse/seedling station is in another, etc...

Next - the entire thing is supposed to give an "overview" over how users can progress.

check links:

All of those are again just inspiration and you can explore more. Maybe combine elements and again - perceive it like a "program" that is open (full screen? maximized?) If you go for that, pressing the minimize or close icon might just jump the user back to the home screen.

Of course, menubar or a collapsible terminal on the bottom might always be present regardless of which program the user is currently using :-)

Mehrabbruno commented 1 year ago

tasks

worklog

worklog-118

feedback

proposals

serapath commented 1 year ago

feedback 2023.03.02

The ideas we had so far before my latest feedback might be useful in the detailed zoomed in view, but we definintely need to overview map view and i would start with it and once we have it come back to the zoomed in detailed view and adapt it based on how the overview looks.

I guess you have checked the links in my previous feedback :-)

Mehrabbruno commented 1 year ago

tasks

worklog

worklog-122

feedback

proposals

serapath commented 1 year ago

feedback 2023.03.09

+1 perfect I think this is great. Amazing job :-)

If a filter overlay can make the whole thing more dithered and high contrast, it might improve the retro feel even more. it feels a tiny bit too good and smooth, but it's minor, really - it's already amazing :-)

If everything you did stays as it is, but the "style" can change slightly towards, e.g.:

It might give it an even more retro appearance :-) You can feel there is an underlying grid in the old retro game shown in that link too.

Here are 3 videos where it is a bit "zoomed in", but if you would "zoom out" to see not just one screen at a time, but all screens at the same time, you would probably get to something like the 3rd video.

  1. mystic quest https://www.youtube.com/watch?v=dTUYbI1pkf4&t=252s
  2. zelda https://www.youtube.com/watch?v=rXWqFO75IZY
  3. nethack https://www.youtube.com/watch?v=8L8LiQ-cIWA

other feedback

  1. if it was called p2p garden or dat garden might be better. "growth program" is good enough in the top menu bar, the island might rather have p2p or dat garden as a name.
  2. oh - don't forget to think about how to show information/details when user hovers or clicks around on that island or even zooms in.
  3. there needs to be space in the garden to position project logos next or around the area of a "stage" ...maybe as flowers or as leafs/fruits in a tree or as characters with a project logo on the shirt or something like that
  4. We probably don't even need a character to be able to walk around, just to be somewhere statically is probably enough, but if the character would walk around later, it would probably not walk through asssets/sprites, but can only walk where there is nothing blockhing the path. anyway, no walking around for the first iteration of implementing it. maybe clicking to jump the character somewhere, that is ok
  5. having a few more interesting garden objects would be lovely.
    • let's just expand it to a botanic garden to add all kinds of cool garden attractions to the garden :-)
  6. yes hover to have a gate/stage outline sounds good. garden

Again, please check the links above, they are important :-) And here are some more

So if you can incorporate that a bit more grid/pixel/square like retro feel would be good. The positioning of things at the moment are quite freely positioned, which looks nice and modern, but might lack a bit the retro vibe.

Don't forget, you can "ZOOM OUT" a lot to fit more map on the screen, we will need to have a zoomin/zoomout option

Mehrabbruno commented 1 year ago

tasks 2023.04.17

worklog

worklog-137

feedback

proposals

serapath commented 1 year ago

feedback 2024.04.17

first - misunderstanding, the color is not what i was referring to. More the grid layout or rather how everything falls into some sort of virtual SQUARES. Trees are in squares. The road is in squares. A character is the size of a square, items too. Moving a character also moves it from one square to the next. An character avatar can never stand between 2 squares. I think that is what you already have in your latest dat garden verison too.

Also, as you can see in those old gameboy style images, a specific larger object can span multiple grid fields, basically you draw a little forrest or building or lake and cut it into square pieces and then that represents the thing that spans multiple grids. At least that is how it looks like, but because we are in the web, it has to only look like it, we might not actually cut a big sprite into many sprites :-)

...there are lots of options and in the end we just need to somehow make it look and feel as retro as possible :-)

Like if you forget color scheme, just see how every sprite sits in one of the squares, where each square is aprox. the size of the main avatar mysticquest

I see you already adopted the map a little bit in that direction. Regarding colors, we have a low variety color scheme which we can use.

The monochrome color is not the thing i was going after, which is why one of the links shows a lot of color too, as you can see in the "nethack" link above.

MAP

The main point of the maps below is not the color and not the style. It is the size in terms of zoom level and variety of the map. We dont have much variety and we dont have much zoom level. We can zoom way more in to really see the character close up (but then no overview). But by default we should be zoomed out a lot more and have a lot more garden. Maybe we keep a lot of garden in some sort of game shadow/shrouded, so we dont yet have to design the entire map,but leave space for more later

We can use more our colors (not necessarily just monochrome) and we can use different variety of garden styles inspired stuff... google image search about botanic gardens, chinese gardens, japanese gardens, english gardens, french gardens, etc... whatever you can find to basically place some sort of sprite simplified maybe pixelated or whatever version of interesting garden objects or elements or plants into our garden, to make the map more interesting. ...maybe it includes a lake, maybe a jungle, maybe a field, maybe an area with edible plants .... maybe with hills and mountains and desert, probalby not, it should be garden themed, but wild garden, jugnle like would still work i guess. It shouldnt be repetitive and boring basically :-)

Maybe one place can also be clearly the "starting place" ...where one enters the garden for the first time. garden entrance

maps

Additionally, our chat on discord had quite a few zelda/supermario maps with zoomed in and zoomed out state, because the current map is somewhere in the middle, see here: z1 z2

please compare with zoomable here: https://mikesrpgcenter.com/zelda3/maps.html

and another example of a whole map:

wholemap

parts of map: (zoomed in)

b d f e a

  1. it is not really zoomed in (which is good, but we should enable the zoom in)
  2. it is also not really zoomed out to the degree of giving an overview over an even larger world

Lastly, the garden has not yet enough variety, so maybe we can take inspiration from those game screenshots or you can find some more ...or you check french gardens, english gardens, all kinds of gardens or botanic gardens and create some more variety in the garden landscape :-)

So in terms of colors, your approach is great map

In terms of effect, photoshop or others. We need to do that in pure CSS effects (CSS is quite powerful too by now), because we wont be embedding a large pixel based picture into the page, we really need vectors (as you say), so even if we don't have effects it is not too bad. I really like your green version too that is just pure figma effectmap

Regarding pixel to svg. For small sprites, we can keep pixel graphics, but there are bitmap to svg converters and they work decently well if it is simple pixel images. But actuall, scaling a pixel based image makes it just more clunky when it is bigger, but that is fine - that is exactly what retro systems would do, so why not :-)

What i otherwise found:

FOr SVG:

integrate into website

image Thats is pretty cool. Maybe it can be even two columns in that bottom menu, one for the text to e.g. list requirements, the other half to show a "picture" or whatever of that spot in the garden, or maybe one is the infox column and the other the user interaction column, like a "text adventure" or menu to interact with ... not sure yet.

Maybe a special kind of marker is needed to indicate where a user can click on the app to get some interaction or at least info options. The "japanese gates" are those or maybe the colored things inside the japanese gates, but if we extend the map, we might need more of those spots, not just japanese gates :-)

But i like it :P

By the way, for mouse hover to highlight is cool, but also clicking to keep it selected and show the information. When you hover a different POI (point of interest) you might see that in the menu below, but when you stop hovering the different POI, it will show again the content from the currently/formerly selected POI. If you click somewhere else, it probably unselects and shows no content in the menu below.

old pic This old picture is probably still how things gonna look like when you maximally zoom in. we need also those zoom controls (maybe like +/- on google maps) The popup/overlay gets replaced though by the menu below which might be 2 columns or on mobile 1 column with 2 tabs, where one is the description and the other one has the interaction or actions, including e.g. the submit button or apply button or whatever it will be.

Maybe once you are logged in and have a profile, it could also show your own profile information, but we will see :-)

zelda map

The pyramid by the way is in the cener of the map where the palace is, but it is not in the map that shows the palace, which is the "light map" or "overworld", but instead it is in the "dark map" the "underworld" map of the same thing, but actually in the game this is future map and past map (hence the name "link to the past").

The main feature is the amount of zoom that is possible in zelda. I agree though, that additional background that you get on the pyramid is what we would not have and it is also a special case for the pyramid, most or maybe even all other places do not have that "background feature" when zoomed in. We would not have that.

And yes, ... and things could or probably should be EVEN SMALLER than shown below :-) Maybe we can make POIs glow like a rainbow so they are still catching attention even though a user zoomed out a lot. yes And yes, we need to fill in a lot more assets, that is true :-) yes

nethack (inspiration)

imagine we design the maps like in nethack, e.g.

const P = 'Big Tree'
const b = 'small bush'
const o = 'character'
const H = 'japanese gate'
const _ = 'grass'
const garden_level_1 = [
  P, P, P, _, _, _,
  b, b, o, b, b, o,
  P, P, P, _, _, _,
  b, b, o, H, b, o,
  P, P, P, _, _, _,
  b, b, o, b, b, o,
]

so we can decide which characters to use, for water, and bridges and so on... And then hand craft or even randomly generate those maps, probably hand craft it once. And then when a 'P' is encountered, it randomly picks one of the Big Tree Sprites so there is enough variety. We then write something to translate that into <svg...>

We probably also can design different areas of the garden in this style separately and then connect them in a second step.

also, we need flags or some way of including/placing project logos into the garden at different spots

Basically from the same primitive grid defined in an array, you can generate different quality levels, like in the game nethack and the examples below showing the primitive grid and better and better visualizations of the same basic level basically, just by generating improved graphics starting with a simple array like the above, e.g.:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Mehrabbruno commented 1 year ago

tasks 2023.05.03

worklog

worklog-139

feedback

proposals

serapath commented 1 year ago

feedback 2023.05.10

we can definitely start implementing the page.

We will just make a placeholder or something using the twitter banner as a placeholder, see: https://twitter.com/dat_ecosystem/header_photo and write COMING SOON

Otherwise

Once we actually design the growth program garden page, please lets relax and take a lot of time so we can work out the details and plan the entire page well - so no rush. Most importantly people can see that a lot of love went into the growth program page.

checkout this pinterest board for inspiration for different parts/scenes of the garden/nature style map: https://www.pinterest.co.uk/serapath/wizard-game/

Also yes, let's choose a color palette and see how many colors we need to make things look great. gras, wood, sand/beach, water/sky https://www.color-hex.com/color-palette/1007393 https://lospec.com/palette-list/commodore64 https://www.c64-wiki.com/wiki/Color We can copy - C64 had a good one But we need to also use the dat-ecosystem color palette Basically make a good overall color palette

Your current approach is good and the different assets you made work well. Hopefully, despite being a grid we can design parts in ways to make it really fun and more organic looking - i would say: steal literally from existing great maps, e.g.

Literally explore those maps and copy the best and most intersting parts. You can explore some zoomed out and zoomed in to see how they look and just rebuild specific interesting parts literally if they fit the garden :-)

Maybe we can also come up with certain styles and parts of the map as a seperate area - like a "game level" and then later combine those into an overall map of different areas connected through bridges or sea or small passages ... a garden of gardens. Maybe some zen mountain gardens, maybe some underwater gardens. We still have our mad scientists and they use lightweight minimalistic tech that blends well with nature. So please don't hesitate to also google/search for solar punk and combine some elements into the best parts of maps and gardens you can copy/steal from existing examples :D

Here is a high rest map: https://i.imgur.com/fBOIJb9.png https://i.imgur.com/tbgvx4U.png https://i.imgur.com/BAAkJrN.gif

Maybe you can of course also try to take some inspiration from modern games that are in some ways pixel retro, but not really. They also have environment with greenery or certain game elements, like a menu or minimap that we can use to display certain "mission statements" or allow a person to use the minimap to scroll quickly through the map without zooming out first, e.g. https://www.youtube.com/watch?v=FQxm6_Y7stg

From what we have: the old one with the japanese gates was nice too and the bridges. did you remove it?

hmm, ... also, maybe it is better to show the japanese part of the garden by default (basically to decide and zoom in on one part of the garden as a starting point, but be able to have buttons to zoom in/out, to go up to the overview and wrapping the entire "growth program map" in a program window.

we need generally some more more iterations when we start again on doing the growth program part i think.

currently the gray roofs look a bit ...gray 😆 they should be special. maybe they have rooftop gardens. mabye they have real funky roofs of all sorts to make each of them unique in it's own way. anyway. if we have buildings or even small villages, they should have their own unique story and style to make sense. ...whether it is a lonely wooden magical elvish or gnomish house in the middle of an enchanted forrest or whether it is a main square of the gardeners that could serve as a starting zone. ...or maybe it is a special mountain remote monk temple with the secrets of wisdom ... lets copy ideas and stories from existing games of retro times. There are plenty of block buster games that look retarded for todays standard but enormous effort for details went into making them

Currently it still looks like one or two villages conncted through a forrest, relatively boring and monotonous. probably the best design would happen by designing it all on the scale of the old garden, but then zooming out.

Now you asked also about the style. trees places a bit randomly vs. trees placed in a block or sequence. They are both good. We want variety in different areas. When you zoom into any place in the garden, each place should somehow have it's purpose, which is why we can try to copy/steal from good inspiration and make a convenient "continent" or complex of areas, some island, but not necessarily, maybe bridges, or maybe other ways.

It is a fantasy land, so you can make a rainbow bridge or whatever else mystical or magical ideas could make sense - again maybe stealing ideas from popular games, modern and retrofying it or even better directly from great retro games with a lot of plot and storyline and thought. After all, companies like Lukas Arts or Blizzard started out small.

Blizzard made:

Lucas Arts now Lucas Films made

These days they make AAA games worth gazillions with high end graphics and they make exceptional movies, but also back then they had massive teams of professionals to pour a lot of effort and thought into games, similar to nintendo, so these are hard to compare with modern games made by indie developers in terms of how much thought went into details, because of the big budgets that went to make those seemingly simple games from todays perspective. Just search for the game titles and graphics on google images or youtube. We just need great inspiration for different parts of our map :-)

It should look much more like a jungles of interestingly interwoven gardens, with all kind of garden styles and special places and the path doesn't always have to be a straight path, maybe stepping stones, maybe changing materials, maybe just empty fields, maybe more curved, maybe thinner or thicker... and while we stick to this retro grid style, he sprites/tiles can be interesting to get little repetition and make every part special - probably by "stealing" the best ideas from cool game maps of nature and gardens and copying ideas and combining them.

Basically: find lots of amazing examples and pick and steal the best parts

So some links i shared above, to copy literally from. Another game or link series is this one: You might jsut go through and make notes or pick and choose and steal the best parts

Now in order to make things more garden or jungle or maybe let's say it "national park style" with the most stunning and beautiful nature and all kinds of trees, flowers, caves, creeks, streams, flowers, birds, etc... just adapt the idea for maps and combine it with inspiration from all kinds of botanic garden pictures (check google) and combine it with garden maps

here is more inspiration to pick from:

https://www.google.com/search?q=satr+dew+valley+map&tbm=isch&ved=2ahUKEwjz05CAm-v-AhUzsCcCHWgQAE8Q2-cCegQIABAA&oq=satr+dew+valley+map&gs_lcp=CgNpbWcQAzoHCAAQigUQQzoICAAQgAQQsQM6BQgAEIAEOgoIABCKBRCxAxBDOgYIABAIEB46CQgAEBgQgAQQClCCBViwGGCjGWgAcAB4AIABZogBlgySAQQxOS4xmAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=o8tbZLP2ELPgnsEP6KCA-AQ&bih=1134&biw=1095

and this

https://www.google.com/search?q=garden+map&client=ms-android-samsung-ss&prmd=imsvn&sxsrf=APwXEdeL7dK_r0d4ZNzu3vxriZwBCXGOPA:1683117706170&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjN6faHltn-AhWDglwKHVyXCM0Q_AUoAXoECAIQAQ&biw=412&bih=782&dpr=2.63

and

https://www.milbysmaps.com/2020/07/26/the-great-garden/

Milby's Maps MattMilby The Great Garden Queen's Garden - Digital Map

or

https://www.reddit.com/r/DnD/comments/zlp0c0/a_garden_map_with_a_small_hut_30x30_and_a/

or

r/DnD - A garden map with a small hut [30x30] (and a possible encou...

here is an even better search query

https://www.google.com/search?q=d%26d+garden+map&tbm=isch&client=ms-android-samsung-ss&prmd=imsvn&hl=en&sa=X&ved=2ahUKEwjl9qKNltn-AhWkrycCHVlbDp8QrNwCKAB6BQgBEJ4C&biw=412&bih=782

also, the idea of little garden islands connected by bridges was pretty cool in your previous one 🙂 ..maybe the types of bridges could be different for different garden parts