Design System
Contains the web app desktop components. Mobile version of design system to be build in future when features require native operating system level access. The web app will be built on Flutter platform using Swift code base. You can step the process and example artifacts below. You can also watch the 7:27 video
The first step in delivering a design system was gaining organizational understanding of what a design system is, is not, and then aligning on value, and investment. Determined to use a responsive design approach to support multi-modal; windows app, mobile app., web app., and form factor; desktop, table, phone, and wearable/internet of things. This design system created to initially support web app built on Flutter platform using Swift code base.
Design System Roadmap
Example of coaching for typography. Seeded the questions and lead discussion for team to learn and unify on set of standards and rationale:
1. if font standards previously exist
* Semantic Hierarchy - determine accessibility of content
* Visual Hierarchy - scrutinize number and styles of type
2. Body font-size - account for data density
3. Body line-height - establish line-height ratio, reference WCAG SC 1.4.8
4. Modularscale - reference Tim Brown modular scale to limit font scales to minimal necessary
5. Define H1 - Start with largest font and work down to establish the H-series hierarchy
6. Header line height - establish line-height ratio, reference WCAG SC 1.4.8
7. Leading & Kerning - establish font control within objects
