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

EPIC: Create Style Guide Presentation #1365

Open
1 of 3 tasks
Biuwa opened this issue May 10, 2023 · 22 comments
Open
1 of 3 tasks

EPIC: Create Style Guide Presentation #1365

Biuwa opened this issue May 10, 2023 · 22 comments
Assignees
Labels
Dependency Issues that cannot be worked on until another issue is closed documentation Improvements or additions to documentation feature: Project Documentation feature: style guide level: medium priority: MUST HAVE role: ui/ux design size: 3pt Can be done in 13-18 hours

Comments

@Biuwa
Copy link
Member

Biuwa commented May 10, 2023

@Biuwa
Copy link
Member Author

Biuwa commented Aug 2, 2023

@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
Copy link
Member

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
Copy link
Member

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
Copy link
Member Author

Biuwa commented Nov 2, 2023

@ShahAmani
Copy link
Member

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
Copy link
Member Author

Biuwa commented Nov 16, 2023

@ShahAmani
Copy link
Member

@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
Copy link
Member

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
Copy link
Member Author

Biuwa commented Nov 27, 2023

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
Copy link
Member

--- 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):
Screen Shot 2024-04-11 at 4 34 05 PM

@ExperimentsInHonesty
Copy link
Member

ExperimentsInHonesty commented Apr 11, 2024

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

@ExperimentsInHonesty ExperimentsInHonesty added size: 3pt Can be done in 13-18 hours and removed size: missing labels Apr 11, 2024
@ShahAmani
Copy link
Member

ShahAmani commented Apr 25, 2024

Hello,
Here is the updated presentation:

Style Guide Presentation

Looking forward to your feedback. Thank you

@Parisajf
Copy link
Member

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
Copy link
Member

ExperimentsInHonesty commented May 2, 2024

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
Copy link
Member

@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
Copy link
Member

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
Copy link
Member

  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
Screen Shot 2024-05-23 at 3 16 38 PM Screen Shot 2024-05-23 at 3 16 21 PM Screen Shot 2024-05-23 at 3 16 02 PM Screen Shot 2024-05-23 at 3 15 54 PM Screen Shot 2024-05-23 at 3 17 33 PM Screen Shot 2024-05-23 at 3 17 26 PM Screen Shot 2024-05-23 at 3 17 07 PM Screen Shot 2024-05-23 at 3 17 00 PM Screen Shot 2024-05-23 at 3 16 54 PM Screen Shot 2024-05-23 at 3 16 46 PM

@yiranshan
Copy link
Member

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
Copy link
Member

ExperimentsInHonesty commented May 23, 2024

Emily's comments

  • Are tool tips in the Paragraph 1 style?
    Screen Shot 2024-05-23 at 4 36 16 PM

  • add hex code in text

  • 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
      Screen Shot 2024-05-23 at 4 37 10 PM

    • Slide 15: John suggested also having image when its earned points have been met.
      Screen Shot 2024-05-23 at 4 37 44 PM

    • 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)
      Screen Shot 2024-05-23 at 4 39 05 PM

  • Slide 24: Bonnie added the example s of inactive

  • Screen Shot 2024-05-23 at 5 04 57 PM

  • 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.
    Screen Shot 2024-05-23 at 5 04 57 PM

  • Slide 27: Log in Need updates according to comments
    Screen Shot 2024-05-23 at 5 09 59 PM

@yiranshan yiranshan changed the title Create Style guide Presentation Design: Create Style Guide Presentation May 30, 2024
@ExperimentsInHonesty ExperimentsInHonesty moved this to In progress (actively working) in P: TDM: project board Jun 11, 2024
@ExperimentsInHonesty ExperimentsInHonesty added the pbv: design all issues for design roles label Jun 13, 2024
@NilakshiS
Copy link
Member

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

@Parisajf Parisajf assigned NilakshiS and unassigned ShahAmani Aug 22, 2024
@NilakshiS NilakshiS changed the title Design: Create Style Guide Presentation EPIC: Create Style Guide Presentation Sep 5, 2024
@NilakshiS NilakshiS added the Dependency Issues that cannot be worked on until another issue is closed label Oct 5, 2024
@NilakshiS NilakshiS moved this from In progress (actively working) to Ice Box in P: TDM: project board Oct 5, 2024
@ExperimentsInHonesty ExperimentsInHonesty removed the pbv: design all issues for design roles label Oct 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dependency Issues that cannot be worked on until another issue is closed documentation Improvements or additions to documentation feature: Project Documentation feature: style guide level: medium priority: MUST HAVE role: ui/ux design size: 3pt Can be done in 13-18 hours
Projects
Status: Ice Box
Development

No branches or pull requests

7 participants