hackforla / hackforla/311-data
UXD - Design System Updates: Inputs & Controls
- Dominant language
- JavaScript
- Stars
- 73
- Forks
- 74
- PR merge metrics
- No merged PRs in 30d
Description
### Overview
We need to audit and evaluate the Inputs & Controls in our design system to allow for a uniform and cohesive design aesthetic so that members can clearly and intuitively understand how to interact with and make selections and can be easily expanded and replicated in the future.
### Action Items
- [ ] utilize a new figma page (e.g. `Design System Review: Inputs & Controls`) to perform the following tasks:
- [ ] audit / verify Inputs & Controls in hand-off page
- [ ] consider existing design system [Inputs](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1923-5302&t=Lk8VOOgmRvLIMTEC-1) & [Controls](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1833-3803&t=Lk8VOOgmRvLIMTEC-1)
- [ ] create a general and informal guide with examples of when to use what (
- [ ] identify/confirm the appropriate Inputs & Control library and create a loose guideline for Inputs $ Controls expansion moving forward as need for future Inputs & Controls arise
- [ ] research and recommend if current Inputs & Controls are sufficient or should be updated
---
### Designer Resources
#### 311_Data_UXUI Figma Sections
- [Page: Design System](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1-5)
- [Section: Inputs](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1923-5302&t=Lk8VOOgmRvLIMTEC-1)
- [Section: Controls](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1833-3803&t=Lk8VOOgmRvLIMTEC-1)
#### Informational Articles
- [Navigating the Design of Input Controls in UI, by VERSIONS Design Agency](https://versions.com/user-interface-design/explore-the-integral-relationship-between-input-controls-and-ui-signifiers-in-web-design-highlighting-their-role-in-guiding-user-interaction-and-enhancing-overall-usability/#:~:text=Input%20controls%20are%20the%20bridges%20between%20the%20user,their%20design%20a%20critical%20focus%20in%20UI%20development)
- [Atomic Design Methodology: Atoms, molecules, organisms, templates, and pages](https://atomicdesign.bradfrost.com/chapter-2/)
- [User-Interface Elements: Glossary by NN Group](https://www.nngroup.com/articles/ui-elements-glossary/)
Contributor guide
Assessment
This issue has not been assessed yet.