Foundation.mozilla.org: #DearInternet - Design Mockup

[sabrinang]

Create mockup based on wireframes https://github.com/mozilla/foundation.mozilla.org/issues/5650 that includes:

• desktop and mobile screens
• art assets and typography

[sabrinang]

Work in progress mockup of desktop (content direction TBD in wireframes): https://share.goabstract.com/6b7dffe7-d1ef-48c6-a2b2-35488612074e?collectionLayerId=11da7d2f-66a0-4c7e-8294-808bf5b9b6de&mode=design

[kristinashu]

Via Audrey on Slack

• I am happy with the URL https://foundation.mozilla.org/en/campaigns/dearinternet/
• Likes Wireframe Option 1 which is good because that's what Sabrina mocked up and will be easier to build
• Letters should contain:
  
  
  
  • a quote or short story or photo or short video _(I think we an say photo/video might come later)_
  
  
  • attribution _(name, title with links, but not necessarily a profile photo - sometimes attribution will be anonymous)_
  
  
• Expecting to eventually show at least 20 _(I recommend adding in a load more button after ~10)_
• Copy before the letter is good but we should spell it "favorites"

cc @mmmavis

[mmmavis]

CMS can host photos but not videos. If we want videos to show we'll have to upload them to YouTube so we can embed them on our site which I think could be a curation nightmare. @sabrinang and I talked about this last week. We were thinking as an alternative maybe we can just have a preview image (uploaded manually to CMS as the "image" field of the letter) and have a button/link that links out to where the video lives. This way we can simplify things better and don't have to worry about page load time etc.

i.e.,

letters should contain (in terms of CMS fields)

• quote/story (required) -- probably rich text in case we need to include links
• image (optional)
• video link (optional)
• author name (required) -- plain text field, character limit?
• author title (optional?) -- rich text since we wanna include links
• author photo (optional)

[mmmavis]

I've started the backend work. For the most up to date CMS specs see https://github.com/mozilla/foundation.mozilla.org/issues/5658

[sabrinang]

@kristinashu Ready for review.

Desktop: https://share.goabstract.com/6b7dffe7-d1ef-48c6-a2b2-35488612074e?collectionLayerId=cdf9dbe9-1ea8-44ae-86db-87cc0b1607bd&mode=design
Mobile: https://share.goabstract.com/6b7dffe7-d1ef-48c6-a2b2-35488612074e?collectionLayerId=9b2b5596-92e0-4329-82c6-01e5a679e5ee&mode=design

• included a letter with an image
• letters that are anonymous it can just be show 'anonymous' text _(no profile/illustration image)_.
• for mobile, scaling the flight path smaller so it ends at the letters _(if there is a better solution I can mock that up)_
• for mobile, I kept body copy at similar mobile ratio of 18px/27px _(this size looked good for youtube regrets but if the line length is too short I can adjust)_

[kristinashu]

These look wonderful Sabs! I think the mobile body copy looks good.

[mmmavis]

I'm worried about implementation time so I'm gonna start front end work now using the two mockups linked in this comment. @sabrinang if there's any change to the design please flag it in the front end ticket #5616. Thanks!

[sabrinang]

Updated the design/dev chacklist in front end ticket. Exported assets (png/svg) in google drive.