Footer Redesign (Donate button Phase 2)

kmlshalf commented 3 years ago

Context

We are updating the footer to include a donate button and revamp the look + layout of it. The donate button will only show up in the footer for logged-out visitors.

The new footer will have a new color scheme and layout, and have a wavy top. Scratchr2 footers will remain mostly the same, other than a color change to match the new footers.

Assets & Quick Links

Figma File (go to Footer Responsive) Donate page (for donate button) Donors list (for supporter thank you blurb) Join page (for join button) Wave SVG Generator

States

The footer will have 4 different states: Logged-in homepage, logged-in (not homepage), logged-out (not homepage), logged out homepage. You can see all the different states in their responsive forms in the figma file.

Logged-out homepage

When a visitor is logged out on the homepage, the footer will show both join and donate buttons, as well as the blurb thanking supporters of scratch.

Logged-out (not homepage)

When a visitor is logged out (but not on the homepage), the footer will show both join and donate buttons but will not show the thank you blurb.

Logged-in homepage

When a visitor is logged-in on the homepage, the footer will not show join or donate buttons but will show the thank you blurb

Logged-in (not homepage)

When a visitor is logged-in (but not on the homepage), the footer will not show join or donate buttons or the thank you blurb.

Responsiveness

At width 560px, anything on the right side that is not in one of the content columns (language selection, join + donate buttons, thank you blurb) will be moved below. The height of the footer will be extended to make room for these adjustments. In addition, at width 560px the number of link options will be reduced. Options that will be removed are:

The entire "Scratch Family" column
For Parents, For Educators, and For Developers options in "About Scratch" column

Similarly, at width 360px column titles will be taken out and options will be further reduced to only include the following: About Scratch, Jobs, Contact Us, Community Guidelines, FAQ, and Ideas. Legal links (DMCA, Privacy Policy, Terms of Services) will always remain at the very bottom of the footer and will not be removed regardless of screen size.

Text columns will always be 130px wide in width and with 28px space between each new line across all screen sizes.

Thank You blurb

"donors" (underlined) will link to to the donors list in all instances where the Thank You blurb shows in the footer (homepage).

Wave SVG top

Here is a resource that generates a path for making an SVG wave. The estimated path for the wave in the design (using the generator) is M0.00,49.98 C243.43,29.11 303.93,100.16 500.00,49.98 L500.00,150.00 L-2.91,154.44 Z

The wave should stay approximately the same (shallow wave) when resizing.

Localization

For languages that result in longer text strings, text should start on a new line if it exceeds the width of 130px (if in text column). This applies to all screen sizes.

Scratchr2 Update

To keep the footer consistent, we will be updating the colors for Scratchr2 to match the new update. The text color and background should be the same as the new footer (white and dark gray). Content, layout, and behavior will stay the same.

Menu Links

The following are the links for the footer menu options, organized by category:

Accio1 commented 3 years ago

This looks really nice! I love the wave and new colour!

Cool-Scratcher commented 3 years ago

I'd much prefer it if the color is the classic Scratch blue, but nice redesign! Looks a lot better than the old one

ahmetlii commented 3 years ago

That definitely looks very nice. I think linking to https://scratch-wiki.info or respective wikis on other languages would also be helpful for non-English users (whether the language has a wiki can easily be detected via looking to [language-code].scratch-wiki.info), possibly with a fallback to en.scratch-wiki.info

Accio1 commented 3 years ago

That definitely looks very nice. I think linking to https://scratch-wiki.info or respective wikis on other languages would also be helpful for non-English users (whether the language has a wiki can easily be detected via looking to [language-code].scratch-wiki.info), possibly with a fallback to en.scratch-wiki.info

@ahmetlii Isn't this current functionality? If you change your language to French, you can observe that the Scratch Wiki link changes to https://fr.scratch-wiki.info/ with it defaulting to https://en.scratch-wiki.info/ if the selected language doesn't have a wiki. See #4121

ahmetlii commented 3 years ago

@Accio1 didn't realize it was solved. Thanks for letting me know! 👍

But still, I think that it may also be good to link Test Wiki redirects too, like in Albanian, the sq.scratch-wiki.info may be linked in the footer, which redirects to corresponding Test Wiki main page (and becomes the main subdomain for that language after transferred to a separate wiki).

PurpleZen commented 3 years ago

I really like the color of this! It kinda has a Scratch 1.4 vibe to it, but I like that. The wave design has a really creative look and feel to it, which I think fits nicely within Scratch. Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

Samq64 commented 3 years ago

Cool! By any chance is the Scratch Lab link going to be added the footer? I've seen it suggested a couple of times on the Scratch forums and thought now would be a good time to bring it up since you're already planning on redoing the footer.

cobaltt7 commented 3 years ago

Maybe remove "Donate" from the about section if there's already a button?

From: Mimi Shalf @.> Sent: Wednesday, July 28, 2021 2:56:16 PM To: LLK/scratch-www @.> Cc: Subscribed @.***> Subject: [LLK/scratch-www] Footer Redesign (Donate button Phase 2) (#5856)

Context

We are updating the footer to include a donate button and revamp the look + layout of it. The donate button will only show up in the footer for logged-out visitors.

The new footer will have a new color scheme and layout, and have a wavy top. Scratchr2 footers will remain mostly the same, other than a color change to match the new footers.

Assets & Quick Links

Figma Filehttps://www.figma.com/file/17RXndTw4zD0R703zhk0xi/R1_Logged-out-Homepage-Donate-Sketch?node-id=338%3A0 (go to Footer Responsive) Donate pagehttps://secure.donationpay.org/scratchfoundation/ (for donate button) Donors listhttps://www.scratchfoundation.org/supporters (for supporter thank you blurb) Join pagehttps://scratch.mit.edu/join (for join button) Wave SVG Generatorhttps://web.archive.org/web/20180810082435/https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

States

The footer will have 4 different states: Logged-in homepage, logged-in (not homepage), logged-out (not homepage), logged out homepage. You can see all the different states in their responsive forms in the figma file.

Logged-out homepage

When a visitor is logged out on the homepage, the footer will show both join and donate buttons, as well as the blurb thanking supporters of scratch. [loggedouthomepage]https://user-images.githubusercontent.com/17713728/126198136-17df3520-9161-4009-847b-3ace9cbcb55b.png

Logged-out (not homepage)

When a visitor is logged out (but not on the homepage), the footer will show both join and donate buttons but will not show the thank you blurb. [loggedout]https://user-images.githubusercontent.com/17713728/126198166-6f2874e5-7aa6-4394-8584-0935d497d980.png

Logged-in homepage

When a visitor is logged-in on the homepage, the footer will not show join or donate buttons but will show the thank you blurb [loggedinhomepage]https://user-images.githubusercontent.com/17713728/126198178-06d1df26-db5c-4b4c-a474-5c5b07ccbab9.png

Logged-in (not homepage)

When a visitor is logged-in (but not on the homepage), the footer will not show join or donate buttons or the thank you blurb. [loggedin]https://user-images.githubusercontent.com/17713728/126198193-eba4c7df-8ea7-45a3-9d9f-87dbe7063d46.png

Responsiveness

At width 560px, anything on the right side that is not in one of the content columns (language selection, join + donate buttons, thank you blurb) will be moved below. The height of the footer will be extended to make room for these adjustments. In addition, at width 560px the number of link options will be reduced. Options that will be removed are:

The entire "Scratch Family" column
For Parents, For Educators, and For Developers options in "About Scratch" column

[Screen Shot 2021-07-27 at 2 16 29 PM]https://user-images.githubusercontent.com/17713728/127228561-0227a1d9-c3a6-4028-a182-ed2ee1f51eaf.png

Similarly, at width 360px column titles will be taken out and options will be further reduced to only include the following: About Scratch, Jobs, Contact Us, Community Guidelines, FAQ, and Ideas. Legal links (DMCA, Privacy Policy, Terms of Services) will always remain at the very bottom of the footer and will not be removed regardless of screen size.

[Screen Shot 2021-07-27 at 2 28 45 PM]https://user-images.githubusercontent.com/17713728/127229947-edd7b94f-9024-4cbd-a2a0-051bd0de0545.png

Text columns will always be 130px wide in width and with 28px space between each new line across all screen sizes.

[Screen Shot 2021-07-27 at 2 19 35 PM]https://user-images.githubusercontent.com/17713728/127228891-b38ab8be-2d4b-45d1-a4dd-8f837fcaa846.png

Thank You blurb

"donors" (underlined) will link to to the donors listhttps://www.scratchfoundation.org/supporters in all instances where the Thank You blurb shows in the footer (homepage).

[Screen Shot 2021-07-19 at 10 18 16 AM]https://user-images.githubusercontent.com/17713728/126200516-9c9f6e4f-dbf4-4fff-b57d-f42263b6fd13.png

Wave SVG top

Here is a resourcehttps://web.archive.org/web/20180810082435/https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections that generates a path for making an SVG wave. The estimated path for the wave in the design (using the generator) is M0.00,49.98 C243.43,29.11 303.93,100.16 500.00,49.98 L500.00,150.00 L-2.91,154.44 Z

The wave should stay approximately the same (shallow wave) when resizing.

Localization

For languages that result in longer text strings, text should start on a new line if it exceeds the width of 130px (if in text column). This applies to all screen sizes.

[Screen Shot 2021-07-27 at 2 13 42 PM]https://user-images.githubusercontent.com/17713728/127228323-8dd284ba-2603-4ad1-bcd6-c6ef1f44cf26.png

Menu Links

The following are the links for the footer menu options, organized by category:

About

About Scratchhttps://scratch.mit.edu/about For Parentshttps://scratch.mit.edu/parents/ For Educatorshttps://scratch.mit.edu/educators For Developershttps://scratch.mit.edu/developers Our Teamhttps://scratch.mit.edu/credits Donorshttps://www.scratchfoundation.org/supporters Jobshttps://www.scratchfoundation.org/opportunities Donatehttps://secure.donationpay.org/scratchfoundation/

Community

Community Guidelineshttps://scratch.mit.edu/community_guidelines Discussion Forumshttps://scratch.mit.edu/discuss/ Scratch Wikihttps://en.scratch-wiki.info/ Statisticshttps://scratch.mit.edu/statistics/

Resources

Ideashttps://scratch.mit.edu/ideas FAQhttps://scratch.mit.edu/info/faq Downloadhttps://scratch.mit.edu/download Contact Ushttps://scratch.mit.edu/contact-us/

Scratch Family

ScratchEdhttps://scratched.gse.harvard.edu/ ScratchJrhttps://www.scratchjr.org/ Scratch Dayhttps://day.scratch.mit.edu/ Scratch Conferencehttps://scratch.mit.edu/conference/2021 Scratch Foundationhttps://www.scratchfoundation.org/ Scratch Storehttps://scratch-foundation.myshopify.com/

Legal

Terms of Usehttps://scratch.mit.edu/terms_of_use DMCAhttps://scratch.mit.edu/DMCA Privacy Policyhttps://scratch.mit.edu/privacy_policy

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/LLK/scratch-www/issues/5856, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOT5DESLZLNSL7PDUJ4OSLLT2BOGBANCNFSM5BFA5DYA.

mxmou commented 3 years ago

Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

This is the color otherwise used for text, so I don't think it can be used as an accent color.

PurpleZen commented 3 years ago

Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

This is the color otherwise used for text, so I don't think it can be used as an accent color.

Ah, that makes sense! I do see why it wouldn't be used then.

kmlshalf commented 3 years ago

Small update PLEASE READ We will be adding Scratch Lab to the Scratch Family column and reordering Scratch Family.

The new order will be the following: ScratchJr Scratch Lab Scratch Day Scratch Conference Scratch Foundation ScratchEd Scratch Store

kmlshalf commented 3 years ago

Cool! By any chance is the Scratch Lab link going to be added the footer? I've seen it suggested a couple of times on the Scratch forums and thought now would be a good time to bring it up since you're already planning on redoing the footer.

Thanks for bringing that up @Samq64 ! We will be adding it to the footer :)

nasirkhan commented 2 years ago

Is there any estimated date to release this new design? When we conduct workshops at different schools and someone opens the site from a mobile device and pointed the issue that the homepage design is broken!

this issue is about a year old and i did not find and pull request tagged with this.

I reported an issue #6744 about a month ago and I can see the broken footer till today. For me it is a very small fix and if no one is here to look into this, I can do this for you. Please share a contributors guideline and i will send a pull request soon.

scratchfoundation / scratch-www