EPIC: Create Style Guide Presentation

[Biuwa]

Dependency

• Design: Create Style Guide - Dialog Boxes, Modals, Accordions Tabs, Tooltips, Infoboxes #1721
• Design: Create Style Guide Presentation (Text Area/Fields) #1725
• Create Style Guide - Color Sheet #1727
• Update Icons #1687
• Design: Create Style Guide Presentation (Buttons/Pagination) #1768
• Design: Create Style Guide Presentation (Radio Buttons/Checkboxes) #1839
• Design: Create Style Guide Presentation (My Projects dashboard) #1843

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

• 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

• Google Slides Style Guide Presentation
• Link to style guide in Figma
• presentation format
• Wiki

[Biuwa]

@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]

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]

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]

@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]

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]

• 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]

@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]

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]

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]

--- 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]

• 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]

Hello,
Here is the updated presentation:

Style Guide Presentation

Looking forward to your feedback. Thank you

[Parisajf]

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]

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.
• Also add the link for the Google Slides recent version to the top of the issue under resources.

[ExperimentsInHonesty]

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

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 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]

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

1. 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

2. 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)

3. Availability:

   • I will have about 4 to 6 hours this week to work on this issue.

4. 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]

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

[yiranshan]

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]

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]

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

[yiranshan]

creating sub issues to divide this issue:

• Design: Create Style Guide - Dialog Boxes, Modals, Accordions Tabs, Tooltips, Infoboxes #1721
• Design: Create Style Guide Presentation (Text Area/Fields) #1725
• Create Style Guide - Color Sheet #1727
• Update Icons #1687

[NilakshiS]

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)

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