CE-325 Community Guidelines Page - Phase 2 Update

kmlshalf commented 3 years ago

Background

This is a revamp of the Community Guidelines page with the most recent iteration of text. Illustrations and a new design format have been added.

Our goals with this redesign were to:

Make the Community Guidelines page easier to navigate and more exciting to visit.
Add illustrations to represent each guideline.
Emphasize important aspects or intentions of the guidelines.

Assets & Quicklinks

Figma File (go to "For Engineering") Interaction Prototype Demo Illustration SVG files Content copy Current Community Guidelines page

Specs

Resizing & Responsiveness

There are breakpoints at: 1280, 1024, 960, 768, 560, and 360px. Illustrations will start to go above text paragraphs (rather than next to them) at 1024 width. The guidelines menu width is resized with the width of the screen.

Some significant changes when resizing:

At 768 width:

Decorations in the top header are removed

At 560 width:

Header title + subtext text size is reduced by 4px
Short guideline menu becomes vertically stacked

At 360 width:

Header title + subtext text size is reduced by 8px and 4px, respectively
"Help keep Scratch..." and guidelines menu text size is reduced by 4px
Illustration size is reduced to 300x300px

Side by side illustration + text spacing (for 1280 width layout)

Side by side spacing (1024 width)

Vertical Spacing

Vertical spacing stays the same across all responsive widths.
Vertical Spacing (all widths)

Guideline Menu

This top menu acts as a quick at-a-glance list of guidelines, and also as an interactive menu where clicking on one of the guidelines will send the reader to the full guideline + illustration (see Interactions section below).

Individual containers specs (applies across all responsive widths): Snappy guidelines details

Localization: if translation results in longer text/more text lines, individual containers should expand vertically to accommodate the longer text. The width of each container box and text box will not change. This also applies with resizing.

Snappy guidelines localization

Interactions

Guideline options will change color on hover. Clicking on a guideline (or if on tablet/phone, tapping on it) will scroll down to the full guideline on the page. See prototype for demo. At the moment it is only prototyped for the first guideline, but this interaction would apply to all.

LankyBox01 commented 3 years ago

The "Be Honest" description needs to be extended. It's really just one sentence long.

ghost commented 3 years ago

Is something about extensions going to be here? I think it should be on the guildlines

mxmou commented 3 years ago

Is something about extensions going to be here? I think it should be on the guildlines

Ideally all less known policies (listed here, under Rules/Regulation Updates) would be mentioned somewhere on the page, perhaps in a separate section on the bottom.