Introducción
¿Quién es Eva Ferreira? ¿Qué veremos en este curso?
¿Cómo vender accesibilidad?
Desarrollo con accesibilidad
¿Mi marca es accesible? Contraste, colores y fuentes
Tips para flujos de navegación accesibles
Twitter vs. Facebook: textos alternativos en imágenes
Semántica: la web 3.0 original
Flujos y Entornos de Desarrollo con Accesibilidad
Pruebas manuales
Pruebas automáticas
IBM: sistemas de diseño con accesibilidad
Auditorias de accesibilidad
Próximos pasos
Trabajo en equipo: educando sobre accesibilidad
¿Cómo seguir aprendiendo accesibilidad?
You don't have access to this class
Keep learning! Join and start boosting your career
A Design System is the cornerstone in the world of software design and development. It is compared to the Lord of the Rings for its ability to centralize and standardize design and development decisions. Its goal is clear: to be the single source of truth in the organization, incorporating decisions about colors, fonts, and user interface (UI) and user experience (UX) behaviors. This system has a significant impact on product efficiency and quality.
Component libraries are crucial in a Design System, facilitating the creation and maintenance of applications. These libraries include common elements such as buttons, tables and drop-down menus, which are developed once and reused in multiple projects. This is where the magic of tools like Storybook comes into play, allowing you to organize and visualize each component along with its documentation and unit tests.
// Storybook configuration exampleimport { configure } from '@storybook/react';
configure(require.context('../src', true, /storybook/react/), module);
Quality in a Design System is ensured by automated testing. The React Testing Library, together with Jest, allows to reach a minimum coverage of 90%, significantly decreasing the possibility of errors. Adding other tools such as Axe React improves accessibility and increases confidence in the components.
The process of creating a Design System is an exercise in deep collaboration between designers and developers. By working together, teams can create accessible, high-quality components, which are then efficiently integrated into different projects. This approach reduces development time and ensures consistency and quality across all applications.
Case studies show the tangible value of a good Design System.
An exemplary case was the project developed in a company called "Factory", where a Design System called "Minerva" was implemented. The creation of Minerva represented a considerable initial investment, but it exponentially increased the speed of new product development, while improving the team's experience and efficiency.
IBM's Carbon is world-renowned for its quality and focus on accessibility. One of its most notable contributions is the clever numerical nomenclature for the color palette, ensuring that the color combinations used are accessible, simplifying developers' lives.
// Recommended use of colors in CarbonGray 20 (background) - Gray 80 (text)Gray 30 (background) - Gray 90 (text)// Difference of 60 or more ensures accessible contrast.
Adopting a Design System not only standardizes and optimizes development, but also aligns the quality and accessibility of applications, making them sustainable in the long term. Investing in a Design System is investing in the efficiency, quality and happiness of the teams within an organization. Designers and developers working together create solutions that are functional, accessible and responsible. Come explore this fascinating world and transform your projects!
Contributions 4
Questions 1
Revisando el Carbon Design System, vemos que es una biblia del diseño con accesibilidad, habrá que entrar en este mundo y sacarle el máximo provecho.
Así como Storybook también podemos utilizar Bit. Ambas súper buenas y altamente recomendadas. En cuanto a sistemas de Diseño les recomiendo darle un vistazo a esta galería de componentes.
Gracias
Want to see more contributions, questions and answers from the community?