Designed in 2024

The Design System

This project involved refining an existing design system and coding it into Vue.js components.

My role: design and develop

The Design System

Background

The company decided to use Vue.js to rebuild old systems and develop new ones. Developers faced challenges in accurately translating design details into code.

Challenage

Learning Vue.js from scratch within a limited timeframe. Overcame this by dedicating time to online tutorials, documentation, and practical coding exercises.

Vision

Plan to expand the component library and continuously update the design guidelines based on user feedback and evolving project needs.

Research and Inspiration

Analyzed existing design systems and Vue.js component libraries. Gathered feedback from the design and development teams to identify areas for improvement.

BackgroundColors
BackgroundIcons
BackgroundButtons
BackgroundAccordion
BackgroundSwitch
BackgroundTags

Apply to Projects and Themes

Implement the design system across various projects and themes to ensure consistency and cohesiveness.

Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme
Backgrounditem.com theme

Design to Code Translation

Create components with Vue.js and Tailwind CSS. This allows developers to focus on backend functionality without worrying about the styling.

BackgroundUNIS DS
BackgroundUNIS DS
BackgroundUNIS DS
BackgroundUNIS DS
BackgroundUNIS DS