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

===== Objetivo del módulo =====
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:
  * [[https://www.youtube.com/watch?v=O1bOo44ql_U|Vídeo: Cómo montar un Sistema de Diseño/UI Kit desde cero]]: la charla en la Commit Conf.
  * {{:clase:daw:diw:de_cero_a_sistema.pdf|Transparencias en PDF}}: las diapositivas de la charla.
  * [[https://gamma.app/docs/Copy-of-De-cero-a-sistema-lecciones-reales-de-la-creacion-de-un-s-zcwjokbpzuivcnq?mode=present|Transparencias en Gamma]]: la presentación original, con el vídeo de ejemplo y los apartados desplegables.


Aqui hay otro video de como un yotuber nos vende su app para hacer un sistema de diseño. Lo interesante es que explica lo mismo que vamos a ver en clase: [[https://www.youtube.com/watch?v=Y0GxR37RvyI|Mi herramienta para que la IA respete tu sistema de diseño]]

==== ¿Qué es un sistema de diseño? ====
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_diseno|Sistema de diseño]].

===== Diseño =====

  * [[.:diseno-web-introduccion]]
  * [[.:diseno-web-sistema-diseno]]

===== CSS =====

  * [[.:css-basico]]
  * [[.:css-flex-grid]]
  * [[.:css-responsivo]]
  * [[.:css-animaciones]]
  * [[.:css-drag-drop]]

===== SASS =====

  * [[.:sass]]

===== Angular =====

  * [[.:angular-material]]
  * [[.:angular-material-tokens]]
  * [[.:angular-creacion-componentes]]
  * [[.:angular-atributos-componentes]]

===== Sistema de diseño =====

  * [[.:sistema-diseno-bem]]
  * [[.:sistema-diseno-tokens]]
  * [[.:sistema-diseno-globales]]
  * [[.:sistema-diseno-layout]]
  * [[.:sistema-diseno-estructura-carpetas]]


{{:clase:daw:diw:c6f7f15372ec42ecb6931aaec62feaa3.jpg?direct&600|}}


===== Mas información =====

  * [[https://dev.to/efortney28/i-fell-into-the-bootstrap-trap-4dcd|I Fell Into the "Bootstrap Trap"]]
  * [[https://2025.stateofcss.com/en-US|State of CSS 2025]]