Foundation.mozilla.org: Finalize YouTube Illustrations and content

[kristinashu]

Links

• Wireframe explorations https://redpen.io/p/qr39aff3aebcd751ac
• UI explorations https://redpen.io/p/fc1dd017be6f0171be
• Final comps will go here https://redpen.io/p/ejbd317099554ec032
• All the stories

Rebecca to gather copy for:

• [x] Intro text:

Got YouTube Regrets? Thousands do!
They told us about the videos they wish they’d never clicked
that sent them down a rabbit how they never meant to go down and didn’t know how to stop
Let’s send a message to YouTube: recommend responsibly, or don't recommend at all.
No regrets!

• [x] About text
  
  
  
  • https://docs.google.com/document/d/14Xj89TE04lh8HWB3q661cugV-pcODXU9HvyigRAV0Os/edit?usp=sharing
  
  

• [x] Individual stories (short intro title and paragraph text for each stories, recommended order for stories)

  • Link: https://docs.google.com/spreadsheets/d/17kFnZMl4cq3QHAl6qOYwk10yAT90AIkTQd4pyw2Elv0/edit?usp=sharing
    (see tab: Final list) with note from Brandi:

  and here are the rest of the stories. still waiting on 3 more that we need to get better translations for but this should be the lot and

  
  

  Also there are a few stories that are related and have similar titles, would it be possible to show them next to each other? I’ve put them in the list in that order, it’s “lost my father” and “lost my father part 2” and “it gets better” and “actually, it doesn’t get better on YouTube”

  
  




• [x] Share copy

Once we have those done ^:

• [x] Natalie to finalize image styling
• [x] Natalie to finalize look of intro section
• [x] Decide which stories should have an image
• [x] Create images for those stories

Bonus:
~Natalie to animate the intro so Mavis has a better idea of what we want the animation to be~

[natalieworth]

Added some more wireframe options for this here and have also merged it in Abstract. :)

[beccaklam]

@natalieworth @kristinashu I've updated the description with 15 final stories and notes about when Brandi will get the rest of the content to us!

[kristinashu]

Nice short titles!

[kristinashu]

Mavis' amazing scroll demo is here https://mmmavis.github.io/z-axis-scroll-test/!

[beccaklam]

@kristinashu just confirming for Brandi that she'll be able to edit the About page in the CMS?

[beccaklam]

@kristinashu @natalieworth Brandi delivered the rough About page content and the rest of the stories. They're still waiting for 3 stories they need better translations on but that should be the lot in the google sheet. Also she left a special note that I've put into the description above but will reiterate here:

Also there are a few stories that are related and have similar titles, would it be possible to show them next to each other? I’ve put them in the list in that order, it’s “lost my father” and “lost my father part 2” and “it gets better” and “actually, it doesn’t get better on YouTube”

[kristinashu]

@kristinashu just confirming for Brandi that she'll be able to edit the About page in the CMS?

@mmmavis I'm assuming this accordion will be a Wagtail component which would be editable in the CMS. If we run out of time then I would recommend we just link out to a regular Wagtail page.

[mmmavis]

@kristinashu I can't make promises for nice to haves now as we don't have a lot of dev time left and there are quite a bit of MVPs to be built. Let's go with the simplest solution (linking out) for now and improve later if we have time.

[natalieworth]

I updated the simplest version of the UI in Sketch with the images. Images, fonts, and the scroll icon (I believe that is the only new icon) are here.

The list with each individual photo link is in here.

cc @mmmavis @kristinashu

[kristinashu]

Natalie is doing to try to lighten up the photos a little but the design is done and here https://redpen.io/p/fc1dd017be6f0171be

[natalieworth]

Uploaded the V2 (lighter red) images here https://drive.google.com/drive/u/0/folders/1z_40mSaV6vIg_l24me8q7hxf4qWMUlXO
There photoshop files are also in there
The images are individually a duotone:

Hex code is red hex is #f1272e

I then convert them back into rgb space after applying the red duotone. I then apply a new red layer with a saturation blend mode applied over the image:

[kristinashu]

w00t! I think this ticket is done and amazing.

A few follows here https://github.com/mozilla/foundation.mozilla.org/issues/3712 but closing this one!