Create a Guide/Template: Designers Toolkit

### Overview
We need to create a UX/UI Designer Toolkit so that designers at Hack for LA can find many helpful resources to reference in one place.
### Action Items
The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.
- [x] [Gather Examples Solo](https://github.com/hackforla/guides/wiki/How-to-Gather-Examples:-Solo) (open in a new tab)
- [x] [Gather Examples Collaboratively](https://github.com/hackforla/guides/wiki/Phase-2-%E2%80%90-Gather-Examples-Collaboratively)
- [x] [Create a Guide Draft](https://github.com/hackforla/guides/wiki/How-to-Draft-a-Guide)
- [ ] If needed, create a template
- [ ] [Have your guide peer reviewed](https://github.com/hackforla/guides/wiki/Peer-Reviews-for-Guides)
- [ ] [Present your guide for leadership review](https://github.com/hackforla/guides/wiki/Submitting-Your-Guide-for-Leadership-Review)
### Resources/Instructions
- Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
[0135 Designers Toolkit](https://drive.google.com/drive/folders/1vkgpTjiYPXW5p5rPV6vcYRobX7My1GZw?usp=drive_link)

- We either have links to each of these things or they will be detailed in another guide, which can be linked to:
- [Full Page Screenshot Chrome extention](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en)
- How to setup figma for teams for free (this will be a guide on the admin team repo https://github.com/hackforla/admin/issues/19)~ in the meantime see admin channel and ask for Bonnie to meet with your project leads to setup your teams figma
- [Color picker chrome extention](http://eye-dropper.kepi.cz/)
- How to setup Miro for teams for free (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/knowledgebase-content/issues/7)
- Accessibility Guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/knowledgebase-content/issues/134)
- logo guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/knowledgebase-content/issues/63)
- Brand Identity https://github.com/hackforla/knowledgebase-content/issues/124
- Free Enterprise Design Thinking course and certificate [IMB Enterprise Design Thinking Course and Certificate](https://www.ibm.com/design/thinking/page/courses/Practitioner)

- [Designers Toolkit folder on UI/UX Community of Practice Google Drive](https://drive.google.com/drive/folders/1MfaZahcxseI8qOPSSigysVEqOf9fkRVr)
- [Summary of Toolkit resources](https://docs.google.com/spreadsheets/d/1WbACQLJO4WnA7qlc74xuPrsol9-Y1YcJ8y30hu3Ty9c/edit)
- [Guide: Designers Toolkit](https://docs.google.com/document/d/1L8Maqjsj1ZcGLf35p57Oz46oBq5WtwsPecQ9aSxW9XQ/edit)

- These items will need to be more detailed in the guide:
- image use guidelines
- all images used in the project need to have documented source and how they are licensed.
- if licensed via providing credit on the website, then the website must have a credits page. See [hackforla.org/credits](https://hackforla.org/credits).
- make sure the image you choose is available in high resolution and ideally as an .svg
- Types of images to use and why
### Projects to Check
- [100 Automations](https://github.com/100automations/website)
- https://github.com/100Automations/Website/issues/420
- [Which accessibility testing tool should you use?](https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)
- [Spreadsheet used by the people doing an accessibility audit](https://docs.google.com/spreadsheets/d/1D3ImG4TwDG-M7QZepoOaajCRWAVAIBGV_7T4KAWhgSY/edit#gid=0)
- https://github.com/100Automations/Website/issues/265
- [figma a11y plugin](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker)
- https://github.com/100Automations/Website/issues/100
- [How to design a favicon](https://www.creativebloq.com/illustrator/create-perfect-favicon-12112760)
- [311 Data](https://github.com/hackforla/311-data)
- https://github.com/hackforla/311-data/issues/1170
- [The accessibility icon and instruction sheet have been added to the](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/?node-id=2775%3A7702)
- https://github.com/hackforla/311-data/issues/1160
- https://github.com/hackforla/311-data/issues/1157
- [Menu redesign](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=2775%3A7702)
- https://github.com/hackforla/311-data/issues/1110
- [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/)
- https://github.com/hackforla/311-data/issues/960
- [Update the About us page to no longer be the landing page and will fit with the look and feel of the tool](https://311-data.org/map)
- https://github.com/hackforla/311-data/issues/887
- [Mobile 311 request type selector 1](https://material-ui.com/components/selects/)
- [Mobile 311 request type selector 2](https://material-ui.com/components/chips/)
- https://github.com/hackforla/311-data/issues/848
- [Conduct interviews and usability testing on new designs, to see if there's any iterations needed](https://docs.google.com/spreadsheets/d/1ueibPcAseB8wck_UyXkBn7J61r8MF5J76DObcwtVJdU/edit?usp=sharing)
- [Training deck](https://docs.google.com/document/d/1W7_kTiGuoEWQ6IVFI8vDcdzzSqBpqKrr4FwJUj-OiaQ/edit?usp=sharing)
- [Testing script](https://docs.google.com/document/d/1TmNUgahYILzQAuH_0-Ge-JA6NiH-sErC/edit?usp=sharing&ouid=115969779390102088313&rtpof=true&sd=true)
- https://github.com/hackforla/311-data/issues/834
- [A collapsible map legend displaying request type names and colors](https://material-ui.com/styles/advanced/#makestyles)
- https://github.com/hackforla/311-data/issues/808
- [Colors and Palettes](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1%3A5)
- https://github.com/hackforla/311-data/issues/782
- [Segmentation of Users and features for them](https://www.figma.com/file/9jUMKrCxEdZnThvS3pXD3d/Mapbox-ideas?node-id=0%3A1)
- [Combine Tools](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1%3A2)
- [Access the Data](https://github.com/hackforla/access-the-data)
- https://github.com/hackforla/access-the-data/issues/157
- [Template for Internal Presentations to use during meetings](https://www.figma.com/file/8qlMlrbDMYFqSfDiWlMwzQ/Internal-Meeting-Template?node-id=0%3A1)
- https://github.com/hackforla/access-the-data/issues/158
- [Template used for Informational Interviews (script/notes) with data experts (and data amateurs)](https://docs.google.com/document/d/1SyqoEeXFAyb3rfMfe3wMRdcVoVMtDgTAzx2ezQT5mKQ/edit?usp=sharing)
- https://github.com/hackforla/access-the-data/issues/118
- examples of documentation of "how we do things" from other H4LA teams:
- https://github.com/hackforla/tdm-calculator/wiki/(Pilot-Page)-Usability-Testing
- https://github.com/codeforamerica/brigade-playbook/wiki/Process-overview
- https://github.com/hackforla/access-the-data/issues/96
- [We need a template for images to inset into the website carousel so we can make the carousel modular](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1313%3A4075)
- https://github.com/hackforla/access-the-data/issues/92
- [Examples of stakeholder designer presentation](https://drive.google.com/drive/u/1/folders/1BxkOKD95yZN03yiSthhcLPpiZi0KKodD)
- https://github.com/hackforla/access-the-data/issues/81
- [HfLA Guide to Design Systems](https://docs.google.com/document/d/1zUVnInBcAi3HaoLFoHHjhlmWZvspPxYfg16kAm9nVVY/edit#heading=h.pq5p3t1w1lw2)
- [Link to design system in Hi-Fi Wireframes (mobile)](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1236%3A4449)
- [Design Systems Slack Channel](https://hackforla.slack.com/archives/CH2U1CB9Q)
- [Access the Data Hack4LA's Design Systems Figma link](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A5)
- [BallotNav](https://github.com/hackforla/ballotnav)
- https://github.com/hackforla/ballotnav/issues/86
- [Possible tool to use](https://www.npmjs.com/package/react-share)
- https://github.com/hackforla/ballotnav/issues/18
- [Develop style guide for the overall navigation and visual appearance of the site](https://github.com/hackforla/ballotnav/files/5211046/ballotnav.branding.pdf)
- https://github.com/hackforla/ballotnav/issues/10
- [We will collect assets to put onto website in this issue](https://www.youtube.com/channel/UCS_BOwZ5Hj3pGHN0gmx4gAA/?guided_help_flow=5)
- [Brigade Organizer's Playbook](https://github.com/codeforamerica/brigade-playbook)
- [Civic Tech Index](https://github.com/civictechindex/CTI-website-frontend)
- https://github.com/civictechindex/CTI-website-frontend/issues/82
- [Need several banner illustrations](https://www.figma.com/file- [100 Automations](https://github.com/100automations/website)
- https://github.com/100Automations/Website/issues/420
- [Which accessibility testing tool should you use?](https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)
- [Spreadsheet used by the people doing an accessibility audit](https://docs.google.com/spreadsheets/d/1D3ImG4TwDG-M7QZepoOaajCRWAVAIBGV_7T4KAWhgSY/edit#gid=0)
- https://github.com/100Automations/Website/issues/265
- [figma a11y plugin](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker)
- https://github.com/100Automations/Website/issues/100
- [How to design a favicon](https://www.creativebloq.com/illustrator/create-perfect-favicon-12112760)
- [311 Data](https://github.com/hackforla/311-data)
- https://github.com/hackforla/311-data/issues/1170
- [The accessibility icon and instruction sheet have been added to the](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/?node-id=2775%3A7702)
- https://github.com/hackforla/311-data/issues/1160
- https://github.com/hackforla/311-data/issues/1157
- [Menu redesign](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=2775%3A7702)
- https://github.com/hackforla/311-data/issues/1110
- [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/)
- https://github.com/hackforla/311-data/issues/960
- [Update the About us page to no longer be the landing page and will fit with the look and feel of the tool](https://311-data.org/map)
- https://github.com/hackforla/311-data/issues/887
- [Mobile 311 request type selector 1](https://material-ui.com/components/selects/)
- [Mobile 311 request type selector 2](https://material-ui.com/components/chips/)
- https://github.com/hackforla/311-data/issues/848
- [Conduct interviews and usability testing on new designs, to see if there's any iterations needed](https://docs.google.com/spreadsheets/d/1ueibPcAseB8wck_UyXkBn7J61r8MF5J76DObcwtVJdU/edit?usp=sharing)
- [Training deck](https://docs.google.com/document/d/1W7_kTiGuoEWQ6IVFI8vDcdzzSqBpqKrr4FwJUj-OiaQ/edit?usp=sharing)
- [Testing script](https://docs.google.com/document/d/1TmNUgahYILzQAuH_0-Ge-JA6NiH-sErC/edit?usp=sharing&ouid=115969779390102088313&rtpof=true&sd=true)
- https://github.com/hackforla/311-data/issues/834
- [A collapsible map legend displaying request type names and colors](https://material-ui.com/styles/advanced/#makestyles)
- https://github.com/hackforla/311-data/issues/808
- [Colors and Palettes](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1%3A5)
- https://github.com/hackforla/311-data/issues/782
- [Segmentation of Users and features for them](https://www.figma.com/file/9jUMKrCxEdZnThvS3pXD3d/Mapbox-ideas?node-id=0%3A1)
- [Combine Tools](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1%3A2)
- [Access the Data](https://github.com/hackforla/access-the-data)
- https://github.com/hackforla/access-the-data/issues/157
- [Template for Internal Presentations to use during meetings](https://www.figma.com/file/8qlMlrbDMYFqSfDiWlMwzQ/Internal-Meeting-Template?node-id=0%3A1)
- https://github.com/hackforla/access-the-data/issues/158
- [Template used for Informational Interviews (script/notes) with data experts (and data amateurs)](https://docs.google.com/document/d/1SyqoEeXFAyb3rfMfe3wMRdcVoVMtDgTAzx2ezQT5mKQ/edit?usp=sharing)
- https://github.com/hackforla/access-the-data/issues/118
- examples of documentation of "how we do things" from other H4LA teams:
- https://github.com/hackforla/tdm-calculator/wiki/(Pilot-Page)-Usability-Testing
- https://github.com/codeforamerica/brigade-playbook/wiki/Process-overview
- https://github.com/hackforla/access-the-data/issues/96
- [We need a template for images to inset into the website carousel so we can make the carousel modular](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1313%3A4075)
- https://github.com/hackforla/access-the-data/issues/92
- [Examples of stakeholder designer presentation](https://drive.google.com/drive/u/1/folders/1BxkOKD95yZN03yiSthhcLPpiZi0KKodD)
- https://github.com/hackforla/access-the-data/issues/81
- [HfLA Guide to Design Systems](https://docs.google.com/document/d/1zUVnInBcAi3HaoLFoHHjhlmWZvspPxYfg16kAm9nVVY/edit#heading=h.pq5p3t1w1lw2)
- [Link to design system in Hi-Fi Wireframes (mobile)](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1236%3A4449)
- [Design Systems Slack Channel](https://hackforla.slack.com/archives/CH2U1CB9Q)
- [Access the Data Hack4LA's Design Systems Figma link](https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A5)
- [BallotNav](https://github.com/hackforla/ballotnav)
- https://github.com/hackforla/ballotnav/issues/86
- [Possible tool to use](https://www.npmjs.com/package/react-share)
- https://github.com/hackforla/ballotnav/issues/18
- [Develop style guide for the overall navigation and visual appearance of the site](https://github.com/hackforla/ballotnav/files/5211046/ballotnav.branding.pdf)
- https://github.com/hackforla/ballotnav/issues/10
- [We will collect assets to put onto website in this issue](https://www.youtube.com/channel/UCS_BOwZ5Hj3pGHN0gmx4gAA/?guided_help_flow=5)
- [Brigade Organizer's Playbook](https://github.com/codeforamerica/brigade-playbook)
- [Civic Tech Index](https://github.com/civictechindex/CTI-website-frontend)
- https://github.com/civictechindex/CTI-website-frontend/issues/82
- [Need several banner illustrations](https://www.figma.com/file/EFoSuj1b9G4aZ7bN8OX8tf/CivicTechIndex---Master-Design-File---3.8.20?node-id=0%3A1)
- https://github.com/civictechindex/CTI-website-frontend/issues/1101
- [Related design issue](https://github.com/civictechindex/CTI-website-frontend/issues/12)
- https://github.com/civictechindex/CTI-website-frontend/issues/1033
- (https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)
- https://github.com/civictechindex/CTI-website-frontend/issues/167
- [Create guide to show how to set up Miro correctly](https://github.com/hackforla/product-managment/issues/33)
- [Civic Tech Jobs](https://github.com/hackforla/CivicTechJobs)
- https://github.com/civictechindex/CTI-website-frontend/issues/68
- [Figma master file](https://www.figma.com/file/EFoSuj1b9G4aZ7bN8OX8tf/CivicTechIndex---3.8.20---2?node-id=0%3A1)
- [Civic Tech Structure](https://github.com/hackforla/civic-tech-structure)
- [Data Science Projects](https://github.com/hackforla/data-science)
- [Design Systems](https://github.com/hackforla/design-systems)
- https://github.com/hackforla/design-systems/issues/15
- [ Design System document](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit)
- [Engage](https://github.com/hackla-engage)
- [Expunge-Assist (formerly known as Record Clearance)](https://github.com/hackforla/expunge-assist)
- https://github.com/hackforla/expunge-assist/issues/351
- [Expunge Assist design logo and assets](https://drive.google.com/drive/u/1/folders/1Eu2kVpimmJK9Lptkbs3tpxSMgGfj35tT)
- [Food Oasis](https://github.com/hackforla/food-oasis)
- https://github.com/hackforla/food-oasis/issues/1206
- [GPS button tooltip](https://github.com/hackforla/food-oasis/projects/8)
- https://github.com/hackforla/food-oasis/issues/1204
- [Design System version 1](https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1)
- [Design System version 2](https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1)
- https://github.com/hackforla/food-oasis/issues/1148
- [Tooltips for the Organization Edit Form](https://docs.google.com/spreadsheets/d/1UCoj5ecVQhOBAPNFvzOyySSeJFNtJ34Bx6Ti2cnLma0/edit#gid=862594579)
- https://github.com/hackforla/food-oasis/issues/517
- [Style Guide](https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/Fola-Design-System?node-id=174%3A0)
- [GreenEarthOS](https://github.com/hackforla/climate-project)
- https://github.com/hackforla/GreenEarthOS/issues/55
- [Setting up figma](https://www.figma.com/file/KQPvEByYrLdAen3288D13l/GreenEarthOS-designs?node-id=0%3A1)
- [Guides](https://github.com/hackforla/guides)
- https://github.com/hackforla/guides/issues/61
- [Accessibility guidelines](https://www.figma.com/file/Jz8KoGTBIxdx9jRxBWrEsF/Guides-Team-Figma?node-id=0%3A1)
- (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma)
- (https://www.figma.com/file/Jz8KoGTBIxdx9jRxBWrEsF/Guides-Team-Figma?node-id=1%3A3)
- [HomeUniteUs](https://github.com/hackforla/homeuniteus)
- https://github.com/hackforla/HomeUniteUs/issues/375
- [UI/UX accessibility guidelines](https://github.com/hackforla/knowledgebase-content/issues/134)
- https://github.com/hackforla/HomeUniteUs/issues/280
- [Application Tracker](https://docs.google.com/presentation/d/1RhvqZfcLfyiokpuB9tGcR7oZ2zclDMaq9NT4NEckD1I/edit#slide=id.gca2d33aa22_0_996)
- [Internship project](https://github.com/hackforla/intership)
- [Lucky Parking](https://github.com/hackforla/lucky-parking)
- https://github.com/hackforla/lucky-parking/issues/288
- [Tool tip box for the polygon & trashcan icons](https://www.figma.com/file/R3N7mvDtlFbFgQm4OXcMih/Lucky-Parking?node-id=135%3A7)
- https://github.com/hackforla/lucky-parking/issues/238
- [Resources for Color Accessibility](https://color.adobe.com/create/color-accessibility)
- (https://bit.ly/3w3RnYr)
- (https://bit.ly/2T8nIQr)
- [Open Community Survey](https://github.com/hackforla/open-community-survey)
- https://github.com/hackforla/open-community-survey/issues/21
- [Design system for OCS](https://www.figma.com/file/04T31AqsprIIkuBN4OfwOo/Open-Community-Survey-Designs?node-id=108%3A287)
- (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma?node-id=2%3A6)
- (https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)
- [TDM Calculator](https://github.com/hackforla/tdm-calculator)
- https://github.com/hackforla/tdm-calculator/issues/1148
- [Update Tooltips](https://docs.google.com/document/d/1oFXqFlwj-cbiiqVvE7e8X9BTDDxgAHtYRVie3omypqE/edit)
- https://github.com/hackforla/tdm-calculator/issues/1061
- [Cursor Effect Design](https://www.ibm.com/able/toolkit/design/ux/pointer/)
- https://github.com/hackforla/tdm-calculator/issues/314
- [Design System](https://www.figma.com/file/qNgPc5lttpf0SWSwkbbWyT/TDM-Calculator?node-id=980%3A0)
- [VRMS](https://github.com/hackforla/vrms)
- https://github.com/hackforla/VRMS/issues/301
- [VRMS Logo Brand Guidelines](https://docs.google.com/document/d/1aCNrEIFn8Mj54fqw3GYzQWil0VF98uq-WKrRc1ldA9s/edit?usp=sharing)
- https://github.com/hackforla/VRMS/issues/360
- [Tooltip instructions and color scheme](https://www.figma.com/file/9c6pxjImN8MjHAZLH7zxYm/?node-id=23471%3A0)
- [Hack for LA's Website](https://github.com/hackforla/website)
- https://github.com/hackforla/website/issues/2684
- [Design System Update](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A0)
- https://github.com/hackforla/website/issues/1347
- [Accessibility Audit Checker](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc)
- https://github.com/hackforla/website/issues/538
- [Articles for UX work](https://medium.com/@ryanglasgow/the-startup-method-a-6-step-process-for-new-feature-development-945aae7049e)
- (https://medium.muz.li/ui-ux-case-study-designing-a-better-cinema-experience-29abc7cfb94f)
- [Youth Justice Nav](https://github.com/hackforla/YouthJusticeNav/)
- https://github.com/hackforla/YouthJusticeNav/issues/21
- [UI/UX navigation flow](https://docs.google.com/document/d/1GvI9SssKWr0ewXgjM9qCEB8rSgmKyQpiLKZt2PbGafM/edit?usp=drive_web&ouid=115147153382252034796)
- https://github.com/hackforla/YouthJusticeNav/issues/69
- [FigJam 6-3-5 Brainstorming Method Session & Instruction Guide](https://www.figma.com/file/N6Bjrr42rgODt4ObJRio1w/YJN-6-3-5-Brainstorm---Test?node-id=0%3A1)
- (https://docs.google.com/presentation/d/1F1QvnIZc59zmlPN40stuxDlfPnjfZNKj2Jnt1uccaQk/edit?pli=1#slide=id.p)

### Tasks
- [ ] This is where you will copy instructions from the wiki page for the step you are currently on.