Design System
The design system (DS) of Deyel is a set of reusable standards and predefined components that guide the build 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, ensuring a consistent 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 the development and the maintenance of applications.
•Optimize the modeling of pages and entities, ensuring that each application has the necessary elements and subtypes from the start, minimizing specific configuration during development.
The use of the design system (DS) of Deyel guarantees key benefits:
•Reduces the learning curve for users.
•Improves the perceived quality of the applications.
•Accelerates development by providing ready-to-use components and clear guidelines.
Components
The design system (DS) of Deyel includes components which, when configured and used centrally, guarantee the uniformity and visual quality of the applications.
•Elements
Defines the properties and behaviors of the various user interface elements within the design system, such as text, buttons, and fields, among others.
•Font family
Sets fonts, sizes, and styles to ensure readability and the visual structure of applications.
•Color palette
Defines the selected colors and their correct use within applications.
Implementation
The implementation of the design system of Deyel is organized through a structured workflow that guides the process from building to maintenance of the applications.
When it comes to existing applications, the design system can be incorporated in a step-by-step process, allowing the validation of proper functionality at each stage and adaptation of fonts, colors, and subtypes without compromising 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, which promote order, style centralization, responsible management, and respect for the underlying design logic.
Workspace Sections
The design system workspace is enabled by selecting the “Design” button on the top toolbar of the applications modeler, and is divided into panels.
•Left panel
Displays the different available elements and the style variables associated, depending on the tab selected.
•Center panel
Allows displaying the different types and subtypes of elements, depending on where the mouse pointer is positioned in the left panel.
•Right panel
Allows configuring the properties that define each type of selected element.
