Redesign Citizen's Engagement's SDG sizes and related padding

[phuonguvan]

Overview

We need to make sure that all text on the site is minimum 16pt, including text on the SDG icons, which will also require padding changes to accommodate.

Details

We need to make sure that the Website and the Figma design match for the Citizen Engagement page, so that the current website has the most up-to-date design decisions and that the Figma file is ready for future iterations.

Action Items

• [x] Review the screenshots in the Resources section
• [x] Make a copy of the 16pt version in Figma (has a red line), add a blue line around it, and start working on the new copy
• [x] Figure out what size the SDG needs to be in order for the text, that is part of the image, to be a minimum of 16pt. See note in resources about how to determine this.
• [x] Make the SDG icon the new proper size in your Figma draft (in blue)
• [x] Redesign the padding
• [ ] Review the draft with the design lead

Resources/Instructions

• HfLA - Citizen Engagement Page
• Gold's Figma
• Figma - Citizen Engagement
• Figma, Design Systems
• The image has text embeded in it. We did not create the image so you can't decompose it into its parts to see what size the text is. What you can do, is try Roboto (bold and black) or Oswald (medium and semibold) in all caps to try to match the existing size and then once you have determined the size and weight of the font used, you can figure out how big you need to make the SDG Icon Image in order for the font to equal 16pt. Here is a link to the styleguide for the SDGs https://www.un.org/sustainabledevelopment/wp-content/uploads/2019/01/SDG_Guidelines_AUG_2019_Final.pdf

Details

Website

SDG text box width: 280 SDG image is 120x120

Website Screenshot

Figma

SDG text box width: 318 SDG image is 88x88

Figma

[github-actions[bot]]

Hi @phuonguvan.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Size, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[github-actions[bot]]

@EmilyTat

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, May 31, 2022 at 12:19 AM PST.}

[EmilyTat]

Availability for this week: 6 hrs My estimated ETA for completing this issue: EOD 06/10/22

[EmilyTat]

Provide Update

1. Progress - I have completed steps 1 & 2, reviewing screenshots and making a working copy of the 16pt version with a blue line around it in Figma File.
2. Blockers - All text on website and Figma file is 16 pt - unsure what needs changing - is it the text on the actual image? Unsure how to edit this in Figma.
3. Availability - 6 hrs
4. ETA - EOD 06/10/22

[EmilyTat]

Want to discuss and work together on this in next Design Team Meeting, thank you!

[github-actions[bot]]

Hi @gold-o, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[github-actions[bot]]

Hi @gold-o, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 5, 2022 at 12:19 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 12, 2022 at 12:20 AM PST.}

[gold-o]

Progress: I have redesigned the SDG section and padding for the citizen engagement cards on the website page. I still have to redesign the SDG section for the mobile page, but I have a few questions. Blockers: N/A Availability: 4-5 hours ETA: By the end of this week (by 07/23) Pictures (optional): "Add any pictures of the visual changes made to the site so far."

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, July 26, 2022 at 12:20 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 2, 2022 at 12:20 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 9, 2022 at 12:20 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 16, 2022 at 12:21 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 23, 2022 at 12:25 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 30, 2022 at 12:27 AM PST.}

[github-actions[bot]]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 6, 2022 at 12:28 AM PST.}

[gold-o]

Progress: I have completed the desktop design for the issue Blockers: For the mobile version, when the font is changed to 16pt and the image is resized, it changes the design. It would be good to explore the best way we can design the mobile version of this page with the new SDG sizing. Availability: N/A ETA: The issue is completed

[gold-o]

The issue is completed. For the mobile version, developers will use the original SDG image with the 90 pixels sizing.

[ExperimentsInHonesty]

Hi Dev leads.

The latest version is on this figma frame labeled final version

If you are unclear what needs to be done, please bring this to the sunday or monday meeting.

[JessicaLucindaCheng]

Hi Dev leads.

The latest version is on this figma frame labeled final version

If you are unclear what needs to be done, please bring this to the sunday or monday meeting.

• This is the dev issue to implement the new design: #3738

[JessicaLucindaCheng]

@ExperimentsInHonesty I just want to confirm a couple of notes:

• Gold O. wrote:

  The issue is completed. For the mobile version, developers will use the original SDG image with the 90 pixels sizing.

  • Does this mean changes only need to be made for the desktop view of the Citizen Engagement page?
    • Ans from Bonnie: Yes, only changes for desktop

• You wrote:

  The latest version is on this figma frame labeled final version

  • I don't see a frame labeled final version. Do you mean the frame labeled "Newest Version"?
    • Ans from Bonnie: Yes, newest version

[JessicaLucindaCheng]

• This is the dev issue to implement the new desktop design: #3738

[JessicaLucindaCheng]

@ExperimentsInHonesty I know the mobile design is staying the same. However, the current Citizen Engagement webpage SDG image size, SDG paragraph text size, and the SDG header text size do not match the Current Page Figma design.

• Note: I couldn't inspect the mobile view in the updated Figma design in the red frame labeled Newest Version. Thus, I referred to the Current Pages Figma design. Let me know if there is a different design I should be referring to.
• Question: Do you want the mobile design to match the Current Pages in Figma?
  • If yes, do you want me to write a separate Medium size issue to update the mobile Citizen Engagement to match the Figma design?

Ans:

• From 2023-01-16 Dev/PM meeting, Bonnie said the mobile view of the webpage is fine as is. The mobile design should match the page. So, write an ER issue so that the mobile design is updated to match the page.

[JessicaLucindaCheng]

Hi Dev leads.

The latest version is on this figma frame labeled final version

If you are unclear what needs to be done, please bring this to the sunday or monday meeting.

• This is the dev issue to implement the new desktop design: #3738

...

• From 2023-01-16 Dev/PM meeting, Bonnie said the mobile view of the webpage is fine as is. The mobile design should match the page. So, write an ER issue so that the mobile design is updated to match the page.

• I wrote the #3766 for a design lead to follow up on.