DESIGN SYSTEM

Part 2 - Components

Introduction

The use of consistent components in a design system is crucial for maintaining a cohesive user experience across all digital products. By adhering to a set of pre-established visual tokens, a design team can ensure that all components are in line with the brand's principles and design guidelines.

Having a component library that follows the visual tokens, allows the team to work efficiently and effectively, enabling them to focus on creating new and innovative features rather than recreating basic components. This also ensures that all parts of the project are in harmony with the visual language established for the brand.

It's important to note that the following example of a component library is just a small sample of the overall project. The components shown here adhere to the visual tokens and design guidelines established for the brand, but the complete component library contains many more options and variations to meet the needs of different digital products.

Actions

Action components are a fundamental aspect of any user experience (UX) design library. These elements are utilized to guide users through the various stages of a digital product, and are typically employed to initiate actions such as form submission or transactions..

TThe design and functionality of action components play a vital role in the overall user experience. They should be designed to be intuitive, easily understandable, and highly visible and accessible. This ensures that users can initiate the desired action with ease, thereby improving the overall usability of the product.

In a UX design library, action components are a set of pre-designed, pre-coded elements that can be reused across various projects. This facilitates consistency in design and functionality, which is crucial for creating a cohesive user experience across all digital products.

Buttons

Forms

Forms and their components are a crucial aspect of any user experience (UX) design system. They play a vital role in gathering information from users, and are necessary for various digital products such as online shopping, registration and contact forms. Forms should be designed for clarity, ease of use and accessibility, including being optimized for mobile devices, to ensure a seamless user experience and reduce errors. The design and functionality of forms should be given due consideration, as they are an essential aspect of any digital product, and play a key role in the success of the project.

The following examples are a small sample of the comprehensive design system.

Inputs

Labels

Other form components

Lists and tables

The effective organization and presentation of data through tables and lists is crucial for any user experience (UX) design system, they play a vital role in digital products such as analytics dashboards, financial reports, and inventory management systems. They should be designed for clarity, ease of use, and accessibility, including being optimized for mobile devices, to ensure a seamless user experience and easy data comprehension. A comprehensive design system should include a well-defined set of guidelines and pre-designed elements that can be reused across different projects, ensuring consistency and ease of use.

As previously mentioned, the following examples are a representative selection of the comprehensive design system.

Lists

Tables

Tags & bubbles

The effective use of tags and bubbles within a design system can enhance the organization and presentation of information, particularly in digital products such as content management systems, social networks, and e-commerce platforms. These elements, when designed and implemented correctly, can improve the user's ability to quickly identify and understand the information presented. The design of tags and bubbles should include clear typography, appropriate color contrast and spacing, and be optimized for mobile devices to ensure readability and a seamless user experience. It's important to keep in mind that the implementation of these elements, when done correctly, can greatly improve the overall user experience and should be given due consideration in the design process as they are a fundamental aspect of any digital product that contributes to its success.

Tags

Bubbles

System feedback & status

Effective system feedback and status notifications are a critical component of any design system. They provide users with real-time information about the outcome of their actions and the current state of the system. These elements include notifications, error messages, loading indicators, progress bars and other types of feedback which are important to guide user's interactions. The design of these elements should be crafted to ensure clarity, ease of use, and accessibility, including being optimized for mobile devices. The strategic implementation of system feedback and status notifications greatly improves the overall user experience and should be given paramount consideration as it is a fundamental aspect of any digital product that contributes to its effectiveness and success.