New home page design

[djplaner]

Redesign the home page for documentation

• [ ] Add in self enrol link to Collections free course (when finished)

To do

• [x] Fix the 2em padding left to be responsive
• [x] improve table styling for install
• [x] Center the paragraph for install - before table
• [x] Card header size dependent on portion of 100%, not fixed height.
• [x] re-do videos with narration and removing branding
• [x] #262
• [x] Modify the visual design to fit with mkdocs defaults
• [x] Move the "learn more" button to after the videos in the first tab group

[djplaner]

Initial design

Landing page with Improve your Canvas course site's design as the heading followed by these sections

• What does Collections do?
• Why is it important?
• How do I use Collections?

What does Collections do?

Three main cards/tabs organised around collections, representations and objects.

Each tab contains

• Limitations of canvas modules
• Description of the solution
• YouTube video showing it in action
  • Will need to replace these with narration

Why is it important?

Existing cards at the end - using Shoelace cards?

How do I use Collections?

Tabs

• Install (You (anyone) or your institution) Explains the difference with installing as a userscript or in Canvas theme settings. Explains who and how they might do it. Use the types and pre-requisites page in getting started.
• Configure (course teacher/designers) Explains that teachers/designers are responsible for setting it up. Creating collections, allocating modules etc
• Navigate (anyone) Has to be set up, but anyone can navigate.... Explain live and claytons....see the navigating collections overview page in how-tos

[djplaner]

New design

Hero

Canvas Collections

• Transform Modules page by adding

Structure. Visuals. Context.

Structure

Organise modules into different collections. Navigate between collections.

• Move beyond the "...design nightmare...(of) one big list..." and "linear design"
• Actually "structure module content"
• Provide "MANY more options for"

Visuals

Choose a different representation for each collection. Change at any time. Develop more representations.

• Move beyond "a chain of folders circa Windows 95"
• Use visual interfaces like "tiles or cards" (get quote)
• "improve visual cues", help "students visualise priorities" and the "modules page" act as a course home page"

Context

Add more context (data) about each individual module.

• Provide "connective text" for modules

Why is this important

Use the red background/gradient

Three steps to using Collections.

Back to white

[djplaner]

Other insprirations

The learning journal

• The use of typography in the making learning journals easy to use section
• ditto the "learn more" styling
• colours, animations, boxes, cards
• header bar

[djplaner]

How to use

3 rows - like features

Install

No video - so do a two column with individual / install

You (heading

• Experiment with Collections
• Create visual home page using static Collections

Button individual install

Your institution (heading)

• Collections available to all teachers

Button instittuion install

Configure

Two column with video

For your course

1. Identify required collections
2. Add data to each modules
3. Choose the representations

Button to learn more