hackforla / hackforla/311-data

UXD - Design System Updates: Inputs & Controls

Open
#1,966 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Small Feature: Style Guide role: UI/UX Design size: 2pt
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.