Design system
Implementing a design system for Isracard's dashboard, a leading Israeli credit card company with over 40 years of experience.
Implementing a design system for Isracard's dashboard, a leading Israeli credit card company with over 40 years of experience.
Components, Color System, Iconography, Typography
UI design
I conducted an analysis and studied design systems such as Material Design by Google, Lightning Design System by Salesforce, Human Interface Guidelines by Apple, and others. Following the recommendations of these leading companies, I identified best practices and standards for creating a design system.
Salesforce
Apple
Airbnb
During the project, I created a unified design system that includes various components and interface elements. To quickly deliver all materials to the development team, the entire specification was uploaded to Zeplin for convenient access and collaboration. Below are the key components designed to ensure a cohesive and user-friendly experience. These elements include core interface components such as input fields, buttons, etc., a color palette, and icons used across different sections of the project.
Interface elements like radio buttons and checkboxes play a key role in managing settings and user option selection. Our specification within the design system provides clear guidelines on their use in various states, simplifying developers' work and enhancing the quality of the user experience.
When developing the design system for the dashboard, it was important to create convenient and intuitive input fields. Different states of input fields help users navigate the interface better: the normal state indicates the field is ready for input, the focus state indicates the field is active, the error state helps quickly identify and correct mistakes, and the filled state displays entered data. These states ensure a better user experience and enhance usability in interacting with the interface.
.png)
Buttons are presented in two main states: primary and secondary. Primary state buttons are used for key actions or commands, emphasizing their importance. Secondary state buttons are designed for less prominent actions, providing a more restrained appearance and functionality.
Links are presented in a unified standard, ensuring consistency and ease of navigation across website pages.
Typography plays a key role in creating a user-friendly and visually appealing interface. This section presents the main principles and guidelines for font usage in our design system. Here, you will find information about the chosen fonts, their sizes, styles, and recommendations for their use in various components and interface elements. This ensures consistency and ease of text perception at all stages of development and across different parts of the project.
Icons are designed with precise dimensions, ensuring proper display across different devices, and effective use of colors and styles for clear information communication.
The color palette was developed with consideration of the brand's primary colors and accessibility principles. In our interface, color is used to convey meaning and guide user attention, rather than for decoration. It helps to emphasize important elements without distracting from the main content, ensuring clarity and ease of perception.
Creating the design system significantly reduced the time spent by the development team, and my knowledge of CSS and HTML greatly simplified the process of creating specifications. Once, during the presentation of the design system to an external development team, the chief engineer said, 'The design system is very clearly organized, and I have no additional questions about it.' This was a wonderful compliment, which confirmed the correctness of my work and the importance of my contribution to the project.
