CE-325 Community Guidelines Page - Phase 2 Update

[kmlshalf]

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)

Vertical Spacing

Vertical spacing stays the same across all responsive 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):

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.

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]

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

[ghost]

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

[mxmou]

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.

[apple502j]

Totally agree with @mxmou - guidelines should be clear, as much as possible. Nobody would find such policies without actively searching for that.

Scratch forums are also not transparent when it comes to policy changes; for example, BEUP was silently amended in 2020, with no notice.

[carljbowman]

Community Guidelines - Phase 2