Design System
The design system (DS) of Deyel is a set of reusable standards and predefined components that guide the building of user interfaces. It establishes a solid foundation for application development, ensuring visual and functional consistency, which is essential for usability and user experience.
The implementation of the design system of Deyel pursues the following main objectives:
•Ensure visual and functional consistency, guaranteeing a uniform and predictable user experience across all applications.
•Centralize the modeling of page element and entity properties, enabling their centralized adaptation and modification, thus facilitating both application development and the maintenance.
•Optimize the entities and pages modeling, ensuring that each application has the necessary elements and subtypes from the outset, minimizing application-specific configuration during development.
The use of the design system of Deyel ensures key benefits:
•Reduces the learning curve for users.
•Improves the perceived quality of applications.
•Accelerates development by providing ready-to-use components and clear guidelines.
Components
The design system of Deyel includes components that, when configured and used centrally, ensure the consistency and visual quality of applications.
•Elements
Define the properties and behaviors of the different elements of the user interface within the design system, such as texts, buttons, and fields, among others.
•Font family
The font family establishes the fonts, sizes, and styles in order to ensure the readability and visual structure of applications.
•Color palette
The color palette defines the selected colors and their correct use within applications.
•Spacing
The spacing defines a scale of reusable spaces for organizing the gaps and padding between interface elements, ensuring visual consistency throughout the application.
Implementation
The Implementation of the design system of Deyel is organized around a structured workflow that guides the process from application building through maintenance.
When it comes to existing applications, it is possible to incorporate the design system by following a gradual procedure that allows validating the correct functioning at each stage and adapting fonts, colors and subtypes without affecting stability.
Finally, to ensure the effectiveness of the design system and its long-term evolution, it is essential to apply a set of best practices and recommendations that promote organization, centralized style management, accountability, and adherence to the underlying design logic.
Workspace Sections
The design system workspace is accessed by selecting the “Design” button in the top toolbar of the applications modeler, and is divided into panels.
•Left panel
The available elements and associated style variables are displayed according to the selected tab.
•Central panel
It allows the different types and subtypes of elements to be viewed, depending on the cursor position in the left panel.
•Right panel
It allows configuring the properties that define each type of selected element.
