Design Curriculum (Github Pages) Template

[sabrinang]

Description

To design a github pages template for curriculum that ties into the brand of the current foundation site.

Design Brief: https://docs.google.com/document/d/1a_RK0OcgWxcBShg-4_jmxAE9cgnjFYD5n0WAL0sXzZg/edit#

---

Links to existing references:

• Global Sprint Example https://mozilla.github.io/global-sprint/participants/
• Curriculum Example https://mozilla.github.io/curriculum-final/internet-health-basics/session03-digital-inclusion.html#overview

Related Issue: https://github.com/mozilla/foundation.mozilla.org/issues/985 Design Web Literacy Curriculum Landing Page

cc/ @xmatthewx @alanmoo @anmechung @zee-moz

[sabrinang]

Since we are placing all the text content on the CMS pages #985, this template can focus on the curriculum content itself with a button to go to github to remix/fork. It'd be great if the sidebar was sticky like the previous curriculum template here: http://chadsansing.github.io/curriculum-testing/intermediate-web-lit-two/session07-creating-a-storytelling-resource.html#overview

Redpens: https://redpen.io/tzb2896b8cc5e28d84 & https://redpen.io/eda98f48b34b8df2df

@xmatthewx design feedback?

[xmatthewx]

I think this all looks great.

Let's consider the hover state on the logo. Besides color, is there any way we can indicate to a user that the logo link will jump back to the site? I'm unsure, but maybe a home icon appears next to the logo on hover? (I would not do a back arrow since some users will land here first.)

Besides that, I think this is good and ready to share with a few people for review: Alan, Zannah, Abby, Kristina.

[anmechung]

Zannah and I think this looks great! The search image is fantastic. There are a few edits to categories in the side bar. I'll set up a quick call between @zee-moz and @sabrinang to discuss.

[xmatthewx]

For content, you should prepare a doc for reference. This is just a template and we won't produce designs of every page. You can drop template feedback in here or in redpen (links at the bottom of the image).

The search image is just a stock image. It's great, but I'm not sure if you have budget for that. Again, we won't be able to do design for the content itself given other projects in our queue.

[sabrinang]

I iterated on the heading area to include the sidebar category and a subtitle breadcrum above to orient users to the current activity and to the web lit category similar to the previous template.

@anmechung This is just placeholder content from one of the projects to test but the idea is that you would be able to update this content to whatever you desire in the template itself.

@xmatthewx I'm assuming the logo/title lockup in the upper corner links back to the web lit landing page and currently for our other sites we don't have hover states for logos leading back to home. I don't know if it will be more obvious to include a hover state (and on mobile it won't be present) but I'm just being cautious if we introduce this pattern here we should consider it on our main property too.

[sabrinang]

Notes from meeting with @anmechung and @zee-moz

Template Feedback

• Subsections need to be included in the sidebar navigation (example: Activity will have subsections and there will be less main sections)
• Highlight "Tips" in the text. Consider icons and coloured highlights & call out boxes
• 2-column format option for text for Glossary

I was referring to an old curriculum template but see these example for the features mentioned: https://mozillascience.github.io/working-open-workshop/personas_pathways/#introduction https://mozillascience.github.io/working-open-workshop/code_of_conduct/#glossary

Graphic Assets Feedback

• find image resources/library for curriculum/pathways and help place/format them (note: look for free stock - if not, ask about budget)

[sabrinang]

We can revise the previous styling of the template to match the current brand by using Zilla Slab and Nunito Sans with a tint of yellow for the highlight colour as well. We can simplify the highlight boxes to have number lists below without the column of white space. Otherwise the spacing and formatting is nicely set overall in the existing template:

[sabrinang]

@gvn The .sketch file is available in the gdrive folder: https://drive.google.com/open?id=1Wnnbo3j_6J1DG-E0p1DTdfx3aQInB2u8

[sabrinang]

Design review is complete for build ticket: https://github.com/mozilla/web-lit-core/pull/2 Demo here: https://mozilla.github.io/web-lit-core/

We simplified the highlighted box feature to be on numbered lists only as other options were hacky as discussed with Gavin. Please file separate feature requests as needed - closing this design ticket!