Tabla de Contenidos

2. Diseño Web: Sistema de diseño

2. Diseño Web: Sistema de diseño

Un sistema de diseño es el conjunto de valores y componentes que se deciden antes de diseñar las pantallas: qué colores, qué sombras, qué tamaños y qué botones hay. Al hacer una pantalla no se elige el valor que uno quiera: se elige uno de los que ya están en el sistema. Sus partes y sus ventajas están en el índice del módulo.

Limitar las opciones

Con millones de colores y cualquier número de píxeles, cada decisión es una tortura (¿12px o 13px? ¿sombra con un 10% o un 15% de opacidad?) y cada pantalla acaba con valores distintos. La solución es decidir una vez una lista corta de valores y usar siempre esos.

En el ejemplo mal cada tarjeta tiene su azul, su redondeo, su sombra, sus márgenes y su tamaño de letra. En el bien, todo sale del mismo sistema.

Mal	Bien

Qué se fija en el sistema:

Colores: las gamas y para qué se usa cada una.
Sombras: unos pocos niveles de elevación.
Tamaños: márgenes, padding, tamaños de fuente y border-radius.
Componentes: los botones y sus variantes.

Y lo mismo con el peso de la fuente, la altura de línea, el ancho de los bordes o la opacidad: cualquier cosa sobre la que haya que decidir un valor.

Con el sistema, elegir es descartar: si para un icono solo hay 12px, 16px, 24px y 32px, se prueba el que parece mejor y los de al lado, y los malos se ven enseguida.

Si un valor no está en el sistema, no se usa. Si de verdad hace falta, se añade al sistema y a partir de ahí lo usan todos.

Cómo se lleva todo esto a CSS con variables está en Sistema de diseño: Tokens.

Colores

Los colores de pueden definir en CSS con formato RGB o HSL. Mas información de HSL en Descripción del modelo de color HSL (Hue, Saturation, Ligthness). Y aquí una herramienta para transformar de RGB a HSL: Color Converter

Una cosa son los colores y otra los colores semánticos:

Colores: Las gamas que tienes, con el nombre de cómo son: grises, blancos, rojos, verdes, azules y amarillos.
Colores semánticos: Con el nombre de para qué se usan: principal, alternativo y peligroso. Cada uno es una gama de colores.

Los colores, con los de Tailwind 4 (los blancos no existen en Tailwind):

En el generador: Grises, Blancos, Rojos, Naranjas, Verdes, Azules, Amarillos.

Los colores semánticos:

En el generador: Principal, Alternativo, Peligroso.

Color semántico	Color	Para qué se usa
Principal	Azul (`blue`)	Casi todo: botones, enlaces, cabeceras
Alternativo	Naranja (`orange`)	Destacar algo
Peligroso	Rojo (`red`)	Las acciones que destruyen algo: borrar, cancelar un pedido

Gracias a los colores semánticos, si mañana el color principal pasa a ser verde solo cambia a qué gama apunta principal, no cada sitio donde se usa. Cómo se llevan a CSS está en Tokens de sistema.

Otros colores semánticos habituales:

Éxito: Verde. La operación ha terminado bien: «Pedido guardado».
Aviso: Amarillo. Algo que conviene revisar pero no impide seguir: «La sesión caduca en 5 minutos».
Información: Azul. Mensajes neutros: «Hay una nueva versión».
Error: Rojo, como peligroso, pero para un estado y no una acción: un campo mal rellenado.
Deshabilitado: Gris claro. Un botón que no se puede pulsar.
Texto: Gris oscuro para el texto normal y gris medio para el secundario.
Fondo: Blancos, para el fondo de la página y de las tarjetas.

Necesitas muchos colores, pero no para hacer cosas así:

sino para hacer cosas así:

La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo.

Para crear variaciones de un color usa:

Data Viz Color Palette Generator (for Charts & Dashboards)
Color Scheme Generator: Mi generador
Palettte App
colorxcolor:Permite ajustar las curvas de saturación y luminosidad.
Paletas de colores de Tailwind CSS
- Rojos
- Azules
- Verdes
- Rosas
- Amarillos
- Morados
- Gris pizarra

Para crear el color alternativo usa:

Color Scheme Designer 3

Evolución de colores en Tailwind

Tailwind ha cambiado su paleta en cada versión mayor. Estos son los tonos 100 a 900 de cada color en cada versión, para comparar sus gráficas de saturación y luminosidad.

Tailwind 4 define los colores en oklch con una gama más amplia que sRGB; el enlace muestra su aproximación en sRGB, que es lo que maneja el generador.

Grises

Gris pizarra `slate` (v.2: `blueGray`)	Gris `gray` (v.2: `coolGray`)	Gris zinc `zinc` (v.2: `gray`)	Gris neutro `neutral` (v.2: `trueGray`)	Gris piedra `stone` (v.2: `warmGray`)
Tailwind v.2, v.3 y v.4	Tailwind v.1 Tailwind v.2, v.3 y v.4	Tailwind v.2, v.3 y v.4	Tailwind v.2, v.3 y v.4	Tailwind v.2, v.3 y v.4

Grises con matiz (nuevos en Tailwind 4)

Gris malva `mauve`	Gris oliva `olive`	Gris niebla `mist`	Gris topo `taupe`
Tailwind v.4	Tailwind v.4	Tailwind v.4	Tailwind v.4

Rojos, naranjas y amarillos

Rojo `red`	Naranja `orange`	Ámbar `amber`	Amarillo `yellow`
Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4

Verdes

Lima `lime`	Verde `green`	Esmeralda `emerald`	Verde azulado `teal`
Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4

Azules

Cian `cyan`	Celeste `sky`	Azul `blue`	Índigo `indigo`
Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4

Morados y rosas

Violeta `violet`	Morado `purple`	Fucsia `fuchsia`	Rosa `pink`	Rosa rojizo `rose`
Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.1 Tailwind v.2 y v.3 Tailwind v.4	Tailwind v.2 y v.3 Tailwind v.4

Sombras

Las sombras dicen a qué altura está cada elemento (la luz viene del cielo). En el sistema se definen unos pocos niveles de elevación y cada tipo de elemento usa siempre el suyo.

Ejemplo de sombras que cada vez están más arriba.

.square {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 6px;

}

<div style="display: flex;gap: 40px;padding: 30px;background-color: #E1E6E6;">
    <div class="square" style="box-shadow: 0  1px  3px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  4px  6px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0  5px 15px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 10px 24px  rgb(0 0 0 / 20%);"></div>
    <div class="square" style="box-shadow: 0 15px 35px  rgb(0 0 0 / 20%);"></div>
</div>

Nivel	Elemento
1	Botones
2	Tarjetas
3	Menús desplegables
4	Avisos flotantes (toasts)
5	Diálogos modales: están encima de todo

Tamaños

Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de márgenes, fuentes, etc.

En el ejemplo mal cada separación tiene un valor distinto (10, 11, 13, 15, 17, 19, 21, 22 y 25 píxeles) y tan parecidos que no se distinguen: parecen descuidos, no decisiones. En el bien solo hay tres valores: 8px entre lo que va junto, 12px entre un título y lo suyo y 24px entre bloques.

Mal	Bien

Veamos algunos ejemplos.

Padding o Margin:

0px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px

Tamaño de fuente:

12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px

Border radius:

0px, 2px, 4px, 6px, 8px, 12px, 16px

Obviamente se puede elegir los tamaños que se deseen pero se tiene que tener en cuenta que a mayor tamaño , mas debe ser el incremento entre uno y otro.

Entre dos valores seguidos tiene que haber una diferencia que se vea: entre 12px y 13px no la hay, así que 13px no está en la lista.

Botones

Los botones también se predefinen: no se diseña un botón para cada pantalla, se elige uno de los que tiene el sistema.

Los botones tienen 2 características:

Importancia: Es si queremos o no que el usuario pulse ahí. A mayor importancia es que queremos que mas veces pulse en ese botón.
Función: Es para decir al usuario que tipo de acción está realizando. Por ejemplo , la función "Peligrosa" es roja y nos quiere decir que tengamos cuidado al pulsar ahí.

	Importancia
Función	Primaria	Secundaria	Terciaria
Normal
Alternativa
Peligrosa

Veamos algunos ejemplos de varios botones juntos:

Pagar carrito	Cancelar pago

Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
Cancelar pago: Terciaria Normal . Nunca queremos que pulse ahí y es una acción normal

Pagar carrito	Vaciar carrito

Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
Vaciar carrito: Terciaria Peligrosa . Nunca queremos que pulse ahí y ademas es peligroso porque se queda sin los productos del carrito

Actualizar a la nueva versión de Windows	Mantener tu versión de Windows

Actualizar a la nueva versión de Windows: Primaria Peligrosa . Queremos que pulse ahí y es una acción peligrosa
Mantener tu versión de Windows: Secundaria Normal . No queremos que pulse ahí y es una acción normal

Donar 20€ a Wikipedia	Donar 5€ a Wikipedia

Donar 20€ a Wikipedia: Primaria Normal . Queremos que pulse ahí y es una acción normal
Donar 5€ a Wikipedia: Secundaria Normal . No queremos que pulse ahí y es una acción normal

La diferencia entre normal y peligrosa está clara, pero la diferencia entre normal y alternativa es una cuestión de estética, para resaltar un tipo sobre otro pero los dos son similares.

Ejemplos

Página de Login

Los 2 botones son iguales, cuando realmente queremos que pulsen "Entrar", así que uno debería ser primario y el otro secundario.

Página de cookies de una web.

Ahora si que está claro cual quiere que pulsemos pero el botón de "Más información" nunca interesa que lo aprieten, así que debería ser terciario. Por otro lado ¿Realmente les interesa que pulsemos en el de "Rechazar y Subscribirme por 0,75€ Por mes"?

Abrir un enlace en WhatsApp.

Aquí está bien porque hace uso de la función peligrosa, además que no quiere influir sobre que botón deberías pulsar.

Iniciar un trámite en una administración pública.

Le da la misma importancia a seguir con el trámite que cancelarlo.

Diálogo

Tienen la misma función el "Si" y "No", cuando el "Si" debería ser peligroso ( ya que es borrar el trámite).

Ejercicios

Ejercicio 1

Busca 2 Webs e indica cuál es el color principal y cuál el color alternativo.

Haz 2 capturas de pantalla del uso del color para cada web

Ejercicio 2

Busca una Web y indica los tipos de botones que tienen según los tipos que hemos visto en el tema.

Haz capturas de pantalla para cada uno de los tipos que haya

Ejercicio 3

Inventa ventanas con botones e indica el texto de cada botón, la importancia y la función

	Botón 1			Botón 2			Botón 3
Nº Botones	Texto	Importancia	Función	Texto	Importancia	Función	Texto	Importancia	Función
1				N/A	N/A	N/A	N/A	N/A	N/A
1				N/A	N/A	N/A	N/A	N/A	N/A
2							N/A	N/A	N/A
2							N/A	N/A	N/A
3
3

Ejercicio 4

Elige una web y, con las herramientas de desarrollador del navegador, saca su sistema de diseño: qué colores, tamaños de fuente, márgenes, border-radius y sombras usa. ¿Están limitados a unos pocos valores o cada sitio usa el que quiere?

Propiedad	Valores que usa
Colores
Tamaños de fuente
Márgenes y padding
border-radius
Sombras