Design System MyLeads Portal
Why use Material Design 3?
Since we are redesigning MyLeads Portal, we followed the Material Design 3 guidelines for a unified look, ensuring brand consistency and quality
Many users are already familiar with Material Design principles, making it easier to navigate and interact with interfaces designed
Let’s start from Typography…
We need standard typography to help us establish hierarchy within a design by indicating the relative importance of different elements
➡️ For accessibility, we've used a base text size of 16 pixels, aligning with our commitment to inclusive design and meeting our users' needs
This ensures that users, ranging from 25 to 65+, can effortlessly engage with our content
Color Palette
Colors evoke emotional responses and can influence users' perceptions and behavior.
As a technical solutions company, we build software and provide services for users. Our primary color, electric blue, symbolizes confidence and trust, aligning with our commitment to reliability
⬇️ In the new version logo, we maintain consistency by implementing a flat style icon with a modern look
Grid System and Spacing
We use a 14-column grid, which provides greater flexibility in creating varied and complex layouts
Grid systems and spacing are used for creating responsive designs, and flexible grid structures ensure that content scales appropriately and maintains visual hierarchy across various breakpoints
Icons
Icon Outlined
Used for secondary actions, help establish a clear visual hierarchy by indicating less emphasis
Default or inactive states, an outlined email icon indicates that an email can be sent
VS
Icon Filled
Used for primary actions, filled icons draw more attention and indicate a more direct action
Representing selected states, a filled email icon indicates an email has been sent
Buttons
Buttons are the main calls to action (CTAs) in a website, guiding users to key actions like order check out or submit a form
We ensure consistency, usability, and brand identity while providing clear interaction feedback
Textfield
Text fields include built-in validation to ensure correct data entry. Error messages provide immediate feedback if the input is invalid, preventing user errors and frustration.
Tabs
To ensure consistency for the tabs, Material Design 3 guidelines for tab components have been implemented in the Leads Portal
Next Step
My next step is to implement Material Design 3 across all our digital products during the redesign. As a sole designer, maintaining an effective system is challenging, but prioritizing accessibility and usability is crucial. Material Design 3 continuously evolves based on user feedback and technological advancements, making it a good starting point for our redesign efforts