Apuntes del módulo de Diseño de interfaces Web

El objetivo del módulo es crear un sistema de diseño. Cómo se hace uno de verdad lo cuenta Claudia Anaut con Genuine, el sistema de diseño de Veridas:

• Vídeo: Cómo montar un Sistema de Diseño/UI Kit desde cero: la charla en la Commit Conf.
• Transparencias en PDF: las diapositivas de la charla.
• Transparencias en Gamma: la presentación original, con el vídeo de ejemplo y los apartados desplegables.

Es el conjunto de decisiones de diseño, componentes y normas que comparten todas las aplicaciones de una empresa para que se vean y funcionen igual. Tiene tres partes:

• Tokens: los valores de diseño (colores, tipografía, espaciado…) como variables con nombre.
• Componentes: botones, campos, tarjetas… hechos una sola vez con esos tokens y reutilizados en todas las pantallas.
• Documentación: cómo y cuándo se usa cada componente, por ejemplo con Storybook.

Sus ventajas:

• Coherencia: todas las pantallas y todos los productos se ven y se comportan igual.
• Rapidez: una pantalla nueva se monta con piezas que ya existen.
• Mantenimiento: cambiar un token, como el color principal, cambia todas las aplicaciones a la vez.
• Lenguaje común: diseñadores y programadores llaman igual a las mismas cosas.
• Accesibilidad: se resuelve una vez en cada componente y la heredan todas las pantallas.

En el módulo lo construimos paso a paso en los temas de Sistema de diseño.

• 1. Diseño Web: Introducción

• 3. CSS: Básico
• 4. CSS: Flex y Grid
• 5. CSS: Responsivo
• 6. CSS: Animaciones
• 7. CSS: Drag & Drop

• 8. SASS

• 9. Angular: Material
• 10. Angular: Personalizando Material (Tokens)
• 11. Angular: Creación de componentes
• 12. Angular: Atributos de componentes

• 13. Sistema de diseño: BEM
• 14. Sistema de diseño: Tokens
• 15. Sistema de diseño: Globales
• 16. Sistema de diseño: Layout
• 17. Sistema de diseño: Estructura de carpetas

• I Fell Into the "Bootstrap Trap"
• State of CSS 2025