Tabla de Contenidos
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:
- 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.
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: 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 diseño.
Diseño
CSS
SASS
Angular
Sistema de diseño
