EPIC: Create Style Guide Presentation

Biuwa commented 1 year ago

Dependency

https://github.com/hackforla/tdm-calculator/issues/1721
https://github.com/hackforla/tdm-calculator/issues/1725
https://github.com/hackforla/tdm-calculator/issues/1727
https://github.com/hackforla/tdm-calculator/issues/1687
https://github.com/hackforla/tdm-calculator/issues/1768
Overview

We need to create a Google deck of all the style guide pages on Figma and add a link to the wiki

Action Items

[x] Create Deck using the presentation format
[ ] Review with the team and PMs
[ ] Add a link to the style guide section of the wiki

Resources/Instructions

Biuwa commented 1 year ago

@Noushie I know your team is currently busy with the My Projects page, so I'll be unassigning this issue and moving it to the prioritized column. it is ready to be worked on.

ShahAmani commented 10 months ago

Update:

I completed this deck LADOT TDM Style Guide.pdf

I did not realize I should be using the 'presentation format' above. I will revise the slides using the correct format

ShahAmani commented 10 months ago

Question:

Which design system should I be referencing?

This one or this one?

Each figma file has different typography and color palettes. Plus the first file does not include components.

Biuwa commented 10 months ago

@ShahAmani The new Design System: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=2619-11671&mode=design&t=oSV4Vrfj1WvuN2Rw-0

ShahAmani commented 10 months ago

Hello @Biuwa ,

Can you please review my Style Guide Presentation and provide feedback on if it is ready to be approved?

Please go to slide 3, and select the first link “Style Guide Presentation - link”

Looking forward to hearing back.

Biuwa commented 10 months ago

Shah, Apologies for the late reply, but i cannot access the link you provided: Style Guide Presentation - link
Please move the file to the TDM shared drive

ShahAmani commented 10 months ago

@Biuwa I uploaded the file to the TDM Shared Drive. It was uploaded into the location: TDM calculator> UIUX > Design > Sidebar images I dont have the ability to move it from that location in the shared drive but here is the link

ShahAmani commented 10 months ago

Hi @Biuwa

Here is the updated Presentation: LADOT TDM Style Guide Presentation.pdf

It can also be found in the TDM Shared Drive under the file name: LADOT TDM Style Guide Presentation

I added the Hack for LA logo on each page. Let me know if any changes should be made.

Biuwa commented 9 months ago

2023-11-16 MEETING FEEDBACK:

[ ] Add Prepared for before the LADOT Logo
[ ] Add Prepared by before the Hack for LA Logo
[ ] Remove the City of LA Logo
[ ] Add a Page to the slide with a link to the City's style guide and mention that the TDM Calculator is meant to mimic the City's look and feel,l and we used elements from their style guide.
[ ] Any page on our style guide deck that uses elements from the City's style guide should be referenced. E.g. the blue side panel currently on the PDF deck you created. ( It is city-owned and not a product of HfLA)
[ ] ~The presentation should be made using Google Slides for better options for editing and correction~ see below for updated requirements

yiranshan commented 5 months ago

--- Don't use the iconography on the current front and back page. refer to this deck for styling: 2024-04-16 Release Updates --- Add an extra page similar to this (with link to the Figma Page):

ExperimentsInHonesty commented 5 months ago

We don't need to put the pages into a google slides, since they are in figma and can be edited there. Also, this preserves the fonts, that may not be available in Google Slides
We do need to update the pdf with proper beginning
- beginning slide example - do not use this imagery, but do include information about hack for la producing it for LADOT see architecture example document
- don't use the wallpaper, except in the guide itself with a reference to us using it in the side pannel.
- slide 12 needs a status update. Specifically, remove that breakpoints have been established.

ShahAmani commented 4 months ago

Hello, Here is the updated presentation:

Style Guide Presentation

Looking forward to your feedback. Thank you

Parisajf commented 4 months ago

In the last slide: We need to add the Dev site and production site, and other links and references Dialog boxes needs to match the Figma

ExperimentsInHonesty commented 4 months ago

Please

[ ] add the link to the current Figma page for this style guide to the top of the issue. The current one seems out of date.
[x] Also add the link for the Google Slides recent version to the top of the issue under resources.

ExperimentsInHonesty commented 4 months ago

@ShahAmani Please provide update. Is there a new version of the deck. Are you finished, etc?

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

remember to add links to the top of the issue if they are going to be needed again.

ShahAmani commented 4 months ago

The most updated version of the deck is linked under resources.

Progress:
- This issue is still in progress.
- Left to do:
  - Design team must perform UI audit to update/validate Figma Style Guide
  - Issue 1687 - contingent on this issue
Blockers:
- The slide deck is reflective of the Figma Style Guide. The information on the Figma Style guide and the website do not match. For example, dialog boxes and buttons are not consistent.
- All icons need to be replaced (Issue 1687)
Availability:
- I will have about 4 to 6 hours this week to work on this issue.
ETA:
- I expect this issue to be completed in about two weeks. (about one week for the ux team to perform an audit of all design elements of the website and one week to replace all the icons)

Questions: Should the Style Guide Deck be based of the Figma Style Guide or the website? Because they do not match. Aka whats the source of truth- Is the website based off the Figma Style Guide or is the Figma Style Guide based off the website?

yiranshan commented 3 months ago

Progress: cleaning up style guide
Blockers: some questions regarding icons, refer to issue #1687
Availability: most team members should be able to spend 2-4 hours
ETA: next week

yiranshan commented 3 months ago

here is a list of members who worked for each section, not sure if we can add everyone to the issue: Design System Clean Up: Color Palette @lbeatonn Iconography @marlenamellody Buttons/Pagination @ShahAmani (delayed to next week) Dialog Boxes, Modals, Accordians Tabs, Tooltips @yiranshan Text Inputs/Fields @namigoeku

ExperimentsInHonesty commented 3 months ago

Emily's comments

Are tool tips in the Paragraph 1 style?
add hex code in text
- bonnie provided an example https://docs.google.com/presentation/d/1b67e6ubqqKgFTf7l1A9srHDrCEIk5kprRf9JldS5RNI/edit#slide=id.g8078b36bb8_0_0
11: At the top of the 2nd column, the "Edit Section" button is a style that we don't see outlined on the left of this slide. Please make sure there's an explanation of when to use that style, too.
- Bonnie added a circle. There are variations in the examples that should be in the Button Types with details about when to use each
- Slide 15: John suggested also having image when its earned points have been met.
- Slide 18: Design to add a note to this slide that says that Clicking the X is equivalent to choosing the Cancel button (although the button could also be NO or some other word that does not continue the action)
Slide 24: Bonnie added the example s of inactive
Slide 25: Bonnie added an example of error, also This should be changed to Text Area. Text inputs are one line, Text area are multiple lines.
Slide 27: Log in Need updates according to comments

ExperimentsInHonesty commented 3 months ago

Copy of GYR Communications Guide for Document Creation [INTERNAL] - COLORS SLIDE

yiranshan commented 3 months ago

creating sub issues to divide this issue:

NilakshiS commented 2 months ago

By @Parisajf Buttons:

We need to update the buttons and the use cases.

The use of the tertiary button (when it has a green outline), is for when there are two positive buttons on the same page, the outline version is less important option)

Screen Shot 2024-06-20 at 4 04 30 PM

Style Guid Slides: https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g27275e02f73_6_0 https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g2e134a56948_6_41

hackforla / tdm-calculator