Hey, I'm Daniel Wang, my personal ambition is to design and build world class Design Systems. I am interested in Dark mode (WCAG compliance), Theming and Motion designs.
I am a time-poor person, who spent 2-3 hours each night from Mon to Thurdays. So I quickly wired things up by leveraging some frameworks and starter kits I am familiar with. It took me approximately 10 hours to get this far, like my daily work, 3/10 on designing, 5/10 on developing, 2/10 on documenting. If time allows, I'd like to explore and use Kaizen DS.
I had a light touch on below areas, plesae let me know if you would like to explore more on any particular topics or skills missing from this list, e.g. CSS Module. I am more than happy to demostrate.
- Requirement Analysis
- Data Proccess
- Ideation
- wireframes
- Design skills
- Visual design
- Design principles
- Hi fidelity mockup in Figma
- Responsive design
- Accessibility at design layer
- Development
- FE Toolings
- Semantic HTML
- Sass, Atmoic CSS
- Responsive code
- React SPA
- Web A11y, WCAG, WAI-ARIA tag, Assistive technology
Design Process and Tech highlights on FigJam file
Hi fidelity mockups on Figma file
Install the dependencies:
npm install
Run locally:
npm start
It will automatically fire up in a browser tab http://localhost:3000/
├── ...
├── pages
│ ├── Home.js # Surveys landing page
│ ├── Survey.js # Survey details page
│ └── ...
├── sass
│ ├── main.scss # Styles
│ └── ...
└── ...
https://github.com/danielwang/cultureamp/tree/main/screenshots