During one of my internships, I worked on this project to improve and unify the visual and functional aspects of a web-based dashboard. This design system includes many elements such as colors, logo, typography, buttons, alerts, forms, pagination, and more. Additionally, it features the design for various pages & components within the dashboard.
Key Components
Colors
The color palette is designed to be accessible and easy to use. It includes 3 pallettes each serving a specific purpose: primary, helpers & gray colors palette to maintain readability and hierarchy as we can see in the following image.
Logo
Multiple logo variations are introduced to suit different backgounds. The goal is to ensure the logo maintains its visual integrity and impact across different contexts in the dashboard.
Typography
We decided to use the Montserrat font family for titles and Open Sans for body text, aligning with design best practices. Montserrat emphasizes titles with its bold style, while OpenSans ensures excellent readability for body text.
This combination maintains consistency and professionalism, enhancing the overall user experience with a harmonious and accessible typographic design.
UI Components
The design system includes many UI elements of the dashboard, like buttons, alerts, forms, pagination, and more. The goal was to create a user-friendly, visually consistent, and functional design system to improve the overall dashboard experience.
Dashboard Page
In addition to the design system, the project contains the design of some dashboard compoenents such as data tables, timeline, and menus. The goal was to create a user-friendly, visually consistent, and functional design system to improve the overall dashboard experience.
Finally
This project was a great learning experience for me. I learned a lot about design systems and how to create one. I also learned how to use Figma and how to collaborate with other designers on the same project.
Thank you for reaching the end of this description. If you have any questions, or suggestions, or need help feel free to contact me.
Have a nice day ^_^