Identify what needs to be done

[mrmetaverse]

What is left? Who owns what work? How do we want to define the "done" of this website iteration?

I propose we spend time Tuesday taking stock of which tickets still need to be done. I'll make it a point to be at a physical computer this time.

We can populate a high level backlog, nothing too burdensome, and gain an understanding of what remains to be done while establishing a pipeline for future website improvements. Keep in mind, this website helps us tell our story about who we are, and why we are here, and how to get involved. This could serve as a baseline for blogging, events, and more.

[mrmetaverse]

An example of breaking down the work is #18

[Elirudite]

As I understand it, we need to get the following done:

• Create a walkthrough of how to use/update Docusaurus (or decide if we're going to use a different tool)
• Create the React components for the website design
• Create a version of the website using frontend HTML/CSS to make it easier to make those components
• Confirm what information we will include on the (first version of the) website: pictures, videos, articles, etc
• Get the visual design of the website done

Aaaaand we gotta do all this by like tomorrow lol. We mentioned doing a hackathon but idk if that's still on?

[mrmetaverse]

@Elirudite I am not sure if we will still do #3, we may keep Docusaurus. I think we should stick with react components, as that is what we are designing for and we have those resources. Also @robertlong is OOO today, but did offer to walk the group through using docusarus and how Docusarus handles components is allegedly highly extensible and once you get the hang of it, it's a great framework.

RE: component design, @matthewbcool did we make any progress this weekend?
RE: Images, @LightLodges did we get any images submitted for the site?

[Elirudite]

Whatever works with you all. IDK what is needed for react components, and was told it may help to build it out in HTML/CSS to help. If not that's fine.

Anything else in terms of design? Should I try my hand at creating a site map for all the other pages we will need?

Do we need to include a section of the homepage for this event (and future events)? I recall that being a potential need as well.

[mrmetaverse]

I suppose it comes down to the LoE and who is available to build out these components. I have been avoiding adding pages until we get our home page done, but I know to your point, the group has expressed a need for that before. I suppose it really all comes down to who is available.

[matthewbcool]

@mrmetaverse I took a look at the figma doc this past weekend and we have a great base to continue to design upon but I don't have a clear sense of the desktop vs mobile layout. I like shadow's mobile design but would like to see how this translates to desktop before I start writing components. A higher fidelity design can also help give us a better sense of color, typography and we can start keeping track of images we want to use and where they belong. Doesn't have to be perfect of course but would be helpful.

[mrmetaverse]

@matthewbcool Sounds good, and agreed. We started a design system / style guide #29 ticket and I'll also add these comments to the new "implement shadows designs" ticket #28 and #25.

Which means we can probably combine some #29 and #25

Cc: @Elirudite

[Elirudite]

@mrmetaverse I took a look at the figma doc this past weekend and we have a great base to continue to design upon but I don't have a clear sense of the desktop vs mobile layout. I like shadow's mobile design but would like to see how this translates to desktop before I start writing components. A higher fidelity design can also help give us a better sense of color, typography and we can start keeping track of images we want to use and where they belong. Doesn't have to be perfect of course but would be helpful.

My design is for desktop 😅. Apologies if that wasn't clear. I used a 1440px width and the length is over 6000px which is roughly 6 1080px 'screens' long. The red highlights are a layout grid to assist with responsive design. I am not sure if you are familiar with grids/responsive design, but in short, the ratio of columns can be used as guidelines for breakpoints when scaled to smaller or larger screens. I used a 12column design with one column on each side acting as a bounding box for the whole page. So the full-width sections take between 8-10 columns. That's roughly 66-80% of the screen for each section. You can see the layout grid settings in Figma for the exact dimensions. Also, my design is intended to show where images/media will go (within the empty squares in the 2x3 grid and 1x3 grid).

But yeah, I'll be working on a styleguide to surface all of this.

I will prioritize figuring out the colors and typography for the styleguide. I threw together a quick draft the other day if you need something immediately. Hopefully I will be able to fill this out tonight/tomorrow.