Overview
Eu-Well design system reflects my initial thoughts on promoting eudaimonic wellbeing using colors, fonts, layouts, and micro-interactions. But it's not just about graphic design. I also try to make this design system easier to developer who focus on coding without knowing much about design.
Principles
- Uncertainty free.
- Nudging
- Intuitive and limited hierachy.
- In-place feedback
- Be an informative minimalist.
Onging activity shall always show its progress for users to know the status.
Give user real-time feedback for each interaction they have made. For example, if user continously input texts more than 12 words, show bursting out dots on the cursor to motivate users to commit more.
Eliminate deep navigation hierachy. Always navigate with a strong purpose.
Give user feedback near what they are interacting with. For example, when user clicked a button which triggered successfull, It is prefered to show micro-animation right on the button instead of showing a “snack bar” or popup. Furthermore, animations cover whole screen is also not recommeded without a strong intent.
Do not fold highly related information just for the simplicity of UI level.
Tooling
Eu-Well utilize multiple tools to make design-code unobstructed and decoupled.
- Figma
- Zeplin
Figma is our primary tool for the production of hi-fidelity artwork and prototypes. This tool is also used for handoff of designs to development.
Zeplin is our tool to deliver design to developers.
Release notes
- Sept 11, 2022
- March 28, 2022
0.1.1: Android and iOS UI design goes into alpha test
0.1.0: Core product styles including colors and typography
