Design what ODK will look like with WM theming

[iamjessklein]

In order to shepherd the project work, we need to figure out how we can apply the theme of other WMF design properties such as the design style guide on to open design kit. I suspect this will not be a massive reorganizing of the architecture, but it's worth reviewing before committing anything to code.

[iamjessklein]

I mocked up a few of the core screens.
Please take a look and provide any feedback here.

I took a quick stab at making the site map too. The big takeaway here is that the new "landing page" will be the process page not the methods.

I don't love the term "recipes" but can't think of a better way to describe these playlists yet - so I'm open to ideas here. Let me know what you think.

[prtksxna]

Thanks for sharing these @iamjessklein. I have setup this repo locally and starting to make changes. Will share updates here soon.

Would it be ok to publish the changes on my fork? That way we'd have a place to test while we work on this.

[iamjessklein]

Thanks @prtksxna that sounds great to me.

[iamjessklein]

Here is a preview of what the initial release of the site will look like. I'd love any feedback.

I think that we should review the language on the About page to reflect the fact that the maintenance/stewardship is now being done by WMF.

[iamjessklein]

@prtksxna - great work.

• Alignment of section title - can the right pane start at the same height as where the vertical navigation starts so it feels aligned? 

• Scrolling issue with header - when I scroll down (on Chrome) the header moves and gets cut off.

• About page - The current About copy is outdated now. Sooo I took a stab at writing something - feel free to edit!

About

Open Design Kit is a living collection of guides and best practices to help you to make and design openly.

The Kit was originally incubated at Bocoup and became a community-owned project in Summer 2017. In 2020, the community gave it's blessing to the Wikimedia Foundation to take over stewardship of the project.

Design at Wikimedia means making sharing of all human knowledge easy and joyful. For everyone. Designing in the open with a transparent and participatory process, the Wikimedia Foundation collaborates with product teams and with the global community of contributors to create well-designed solutions, together.

Please help us make it better by contributing to it. Open Design Kit is licensed under a Creative Commons Attribution 4.0 International License.

• Images - As @prtksxna and Volker and I discussed off Github - the images need to be optimized for mobile AND all of the process images need to be updated. This should go into the next release so it's not blocking us from shipping.

[prtksxna]

Alignment of section title - can the right pane start at the same height as where the vertical navigation starts so it feels aligned?

Similar to the style guide, if there is a sub-title on the page it gets pushed up so that the main heading and the navigation sidebar align. I agree though that this is looking a bit odd, especially on the homepage. We could…

Align the top	Remove the sub-title

Scrolling issue with header - when I scroll down (on Chrome) the header moves and gets cut off.

This should be the same as the style guide, a static header over which the content scrolls. Are you seeing the same there, or have we discovered a 🐛?

About page - The current About copy is outdated now. Sooo I took a stab at writing something…

In context: https://opendesignkit.now.sh/about.html

Images - As @prtksxna and Volker and I discussed off Github - the images need to be optimized for mobile AND all of the process images need to be updated. This should go into the next release so it's not blocking us from shipping.

Noted in #295