Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Audit Colors] in About Us page #826

Closed
14 tasks
Tracked by #823
anitadesigns opened this issue Feb 16, 2023 · 4 comments
Closed
14 tasks
Tracked by #823

[Audit Colors] in About Us page #826

anitadesigns opened this issue Feb 16, 2023 · 4 comments
Labels
feature: design system issues relating to the general design system feature: figma wireframes priority: high role: design anything related to design size: 1pt can be done in 6 hours or less

Comments

@anitadesigns
Copy link
Member

anitadesigns commented Feb 16, 2023

Overview

Extension of #823 . Audit mobile and desktop wireframes under "Design System Audit" on Figma. This issue is split into two parts: Auditing Mobile/Desktop wireframes and Auditing screenshot of page on expungeassist.org

Action Items

Auditing Mobile/Desktop wireframes

  • Select each individual "atom" on a wireframe
  • Assess what Hex code and color style is being used
  • Add metadata (color swap, location, style being used, Hex code, opacity )
    Example:
    Screen Shot 2023-04-26 at 9 01 03 PM
  • Use AutoFlow plugin to draw an arrow to each "atom" and element's color metadata
    • If "atom" is not using a color style, use the Orange (color style saved in Figma library) arrow and note the HEX code being used
    • If an old color style is being used, change the text sharing location and color style to red (use color style saved in Figma library)
  • Note any inconsistencies to share with the team

Auditing screenshot of page on expungeassist.org

  • Use Google Chrome's "inspect" tool to view website's code
  • Assess what Hex code and .jss component is being used
  • Add metadata on screenshot in Figma (color swap, location, hex code, .jss rule)
  • Draw an arrow from element to metadata on Figma

Next steps

  • Comment in this issue "Completed. Ready for Review" and tag "@anitadesigns". Add any other information that is important to share in the comments
  • Unassign yourself and assign "@anitadesigns " to issue
  • Move issue from "In Progress" to "Ready for Review" on the project board

Resources/Instructions

Reach out to @anitadesigns if you have any questions.

You can find access to the space to audit this page under the "Design System Audit" in Figma

@anitadesigns anitadesigns added role: design anything related to design priority: high size: 1pt can be done in 6 hours or less feature: design system issues relating to the general design system feature: figma wireframes labels Feb 16, 2023
@anitadesigns anitadesigns self-assigned this Feb 16, 2023
@anitadesigns anitadesigns removed their assignment Feb 17, 2023
@lexramos01
Copy link
Member

Completed audit color for About Us page (mobile and desktop wireframe). Note: I noticed a few atoms had the color "Black", but this color is not listed in the Color Styles.

@anitadesigns
Copy link
Member Author

Hexcodes were pulled but missing other metadata. Need to be re-done to keep consistency

@mbui31 mbui31 self-assigned this May 25, 2023
@mbui31
Copy link
Member

mbui31 commented Jun 8, 2023

Waiting on updates from Dev before auditing live website

@mbui31
Copy link
Member

mbui31 commented Jun 19, 2023

@anitadesigns "Completed. Ready for Review"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: design system issues relating to the general design system feature: figma wireframes priority: high role: design anything related to design size: 1pt can be done in 6 hours or less
Projects
Development

No branches or pull requests

3 participants