Imagus
Design System
Imagus Design System serves as a comprehensive reference for designers, developers, and other stakeholders involved in the creation and maintenance of a user interface.
Role
UX/UI Designer
Project Overview
IMGAUS is a facial recognition software and the main product of Vix Vizion. IMAGUS design system is the first reference for design and development teams. The company has been using Material UI components, therefore, I produced this based on MUI source.
Role
UX/UI Designer
.png)
What is MUI?
Material-UI is a popular React UI framework that implements Google's Material Design guidelines. Material Design is a design language developed by Google that emphasises the use of grid layouts, responsive animations, and transitions, padding, and depth effects such as lighting and shadows. MUI provides components that follow these design principles, making it easier for developers to create visually appealing and consistent user interfaces.
In this project, I produced each components based on MUI components as the company has been using MUI for front-end development. Colour, typography and other components were redesigned following company and IMAGUS looks.
IMAGUS Design System
IMAGUS Design System is a document that establishes and enforces IMAGUS design standards to maintain consistency and coherence across a product’s user interface. It serves as a comprehensive reference for designers, developers, and other stakeholders involved in the creation and maintenance of a user interface. The design system covers visual elements, interaction patterns and various code source.
Foundation
Colour 🎨
Colours aren't just for looks; they have superpowers. They can make people feel calm, excited, or focused. In the digital world, picking the right colours is like choosing the perfect outfit – it helps the brand express itself and connects with you.
In developing the colour palette for Vix Vizion's UI, I looked into the psychology of colour, selecting hues that bring the emotional responses. Normally, Blue represents trustworthiness, and Vix Vizion needs this as the public reputations towards a facial recognition has been bad.
Typography
"Roboto" is known for its clarity and readability, even in small sizes. In IMAGUS interface, where users may need to interact with various textual elements, having a font that ensures easy reading is crucial for user engagement and understanding.
-
Font families, sizes, weights, and hierarchy.
Components
-
Buttons, Inputs, Forms: Interactive elements with states (hover, focus, disabled).
-
Navigation Components: Menus, sidebars, breadcrumbs, tabs.
-
Alerts & Notifications: Status messages for users.
Overview
Designing a digital product wasn't just about making it look good – it was about creating a convenient experience for both the design team and the development team. A design system should be consistent and functional. While I was in charge of this project, I didn't have much experience, but I had a lot of confidence and passion. I was very passionate and excited about creating the design system, and now our team has a solid guideline to follow, which they are very happy with.
Things I'd Like to Improve
-
I created three pages. I know that typically, each component is given its own page, but I combined all the components into one page. Next time, I would like to separate them into individual pages.
-
A more specific layout for each component and patterns, and update variations and tokens to each components.
Spacing
-
Layout rules, margins, paddings, and breakpoints for responsive design.
