Wensity Layout
El diseño es la forma en que una página le dice a las personas qué es importante y qué va junto, antes de que lean una palabra. Un buen diseño nace de tres hábitos: una escala de espaciado fija, agrupación por distancia y un sistema de alineación único. Este skill establece los tres y cubre la estructura responsiva.
Si el proyecto ya tiene una escala de espaciado y anchos de contenedor, úsalos.
1. La escala de espaciado
Usa una base de 4px. Cada margen, padding y gap proviene de esta lista:
| Token | px | Uso típico |
|---|---|---|
| 1 | 4 | icono a etiqueta, gaps inline ajustados |
| 2 | 8 | dentro de un control, entre una etiqueta y su entrada |
| 3 | 12 | entre elementos en una lista densa, padding y de botón |
| 4 | 16 | padding de tarjeta (compacto), gap entre controles relacionados, gutter de página móvil |
| 5 | 20 | padding x de botón (grande) |
| 6 | 24 | padding de tarjeta, gap entre campos de formulario |
| 8 | 32 | entre grupos dentro de una sección |
| 10 | 40 | entre un encabezado de sección y su contenido (grande) |
| 12 | 48 | padding de sección en móvil |
| 16 | 64 | entre secciones en una app, padding de sección en tablet |
| 20 | 80 | |
| 24 | 96 | padding de sección en páginas de marketing de escritorio |
| 32 | 128 | padding de héroe, el espacio alrededor de una gran declaración |
La escala predeterminada de Tailwind ya sigue una base de 4px (p-4 son 16px), así que usa sus pasos y no inventes p-[13px]. Los valores impares solo están permitidos para correcciones ópticas que hayas verificado en el renderizado (un icono que se ve desalineado por 1px).
2. Agrupa por distancia
La regla de diseño más importante: el espacio dentro de un grupo es menor que el espacio entre grupos. Una etiqueta está a 8px de su entrada; el siguiente campo está a 24px. El título de una tarjeta está a 8px de su texto; la siguiente tarjeta está a 24px. Cuando el espaciado interior y exterior son iguales, todo flota separado y nada se lee como un grupo.
- Apunta a una proporción de aproximadamente 1 a 2 o 1 a 3 entre los gaps interior y exterior.
- Más espacio encima de un encabezado que debajo. El encabezado pertenece al contenido que le sigue. Típico: 48px encima de un encabezado de sección, 16px debajo.
- Espaciado antes de los recuadros. Agrupa primero con distancia. Añade un borde, divisor o fondo solo cuando la distancia no sea suficiente (tablas densas, barras de herramientas, contenido sobre fondos ocupados). Un recuadro alrededor de cada grupo hace que una página sea pesada.
- Usa
gappara hermanos (flex gap-4,grid gap-6) en lugar de márgenes en los hijos. Mantiene el espaciado en un solo lugar y evita márgenes sobrantes en los extremos de una lista.
3. Ritmo, no uniformidad
Una página donde cada sección tiene 96px de padding, un encabezado centrado y una rejilla de tres elementos no tiene ritmo. Varía la densidad a propósito:
- Alterna secciones densas (rejillas de características, tablas, logotipos) con abiertas (una declaración, una imagen grande).
- Deja que las secciones importantes ocupen más espacio. El espacio es cómo gastas la atención.
- Repite un diseño solo cuando el contenido sea realmente del mismo tipo.
4. Alineación
- Un borde de inicio. Los encabezados, párrafos, botones e imágenes en una sección comparten la misma línea de inicio. La mayoría de las quejas de "algo se ve mal" son dos bordes separados por unos pocos píxeles.
- Alinea al inicio por defecto (
text-align: start, que es izquierda en inglés y derecha en árabe o hebreo). Centra solo contenido corto e independiente: un título de héroe, un bloque CTA único, un estado vacío. Los formularios, tablas, listas y texto largo se alinean al inicio. - Alinea los números al final en tablas y columnas de estadísticas.
- Alinea al texto, no a los recuadros. Un icono junto a una etiqueta se alinea con la altura de la tapa o el centro de la etiqueta, no con la parte superior de la línea. En filas flex,
items-centerpara líneas individuales;items-startmás un pequeño margen superior en el icono para texto multilínea. - Ajustes ópticos: los iconos de reproducción, flechas y formas redondas se ven descentrados cuando se centran matemáticamente. Ajusta de 1 a 2px después de verlo.
5. Contenedores y anchos
| Contenedor | Ancho máximo | Uso |
|---|---|---|
| Prosa | 65ch (aproximadamente 640 a 720px) | artículos, documentación, párrafos largos |
| Estrecho | 560 a 640px | formularios, inicio de sesión, tareas enfocadas, una declaración de héroe centrada |
| Contenido | 1120 a 1280px | la mayoría de las secciones de marketing y páginas de app |
| Ancho | 1440 a 1600px | paneles, galerías, editores |
| Sangrado completo | 100% | fondos, imágenes, tomas de productos que deben tocar los bordes |
- Gutter de página: 16px en teléfonos, 24px en tablets, 32 a 48px en escritorio. Mantenlo consistente: un valor de gutter por punto de interrupción para todo el sitio.
- Separa el fondo del ancho del contenido. El fondo de una sección puede ir a sangrado completo mientras su contenido permanece en el contenedor de contenido.
- No dejes que el texto ocupe todo el ancho en pantallas anchas. Las imágenes y rejillas pueden crecer; los párrafos no.
6. Rejillas
- 12 columnas para diseños de marketing te da mitades, tercios, cuartos y divisiones asimétricas (7 y 5, 8 y 4). Las divisiones asimétricas se ven más diseñadas que 6 y 6.
- Rejillas de auto-relleno para tarjetas para que el número de columnas siga al espacio:
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
min(100%, 280px) evita el desbordamiento en pantallas más estrechas de 280px. auto-fill mantiene el ancho de la tarjeta constante cuando solo hay una o dos tarjetas; auto-fit estira las pocas tarjetas para llenar la fila. Elige a propósito.
- Deja que las pistas flexibles se encojan. Los hijos de grid y flex se niegan a encogerse por debajo de su contenido por defecto, por lo que el texto largo o una tabla ancha se desbordan de un panel. Usa
minmax(0, 1fr)para pistas flexibles ymin-width: 0(Tailwindmin-w-0) en hijos flex que contengan texto:
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.row > .text { min-width: 0; }
- Alturas iguales solo para contenido igual. Las tarjetas en una fila se estiran a la más alta por defecto en grid. Bien para un conjunto de planes; mal cuando una tarjeta es claramente la destacada.
- Rejillas Bento: varía los tamaños de las baldosas según la importancia, mantén un valor de gap y dale a cada baldosa un contenido real. Las baldosas decorativas vacías parecen una plantilla.
- Usa subgrid (
grid-template-rows: subgrid) cuando las tarjetas en una fila necesiten que sus títulos, cuerpos y botones se alineen entre sí.
7. Estructura responsiva
Diseña primero para móvil, luego añade estructura a medida que el espacio crece.
- Los puntos de interrupción siguen al contenido, no a los dispositivos. Añade uno donde el diseño comience a verse mal. Los valores predeterminados de Tailwind
sm 640,md 768,lg 1024,xl 1280son buenos. - Reestructura, no solo encojas. En móvil, una rejilla de características de tres columnas se convierte en una columna, el texto y la imagen lado a lado se apilan con la imagen segunda (o primera si lleva el mensaje), una tabla se convierte en una lista de tarjetas o se desplaza horizontalmente dentro de su propio contenedor, una barra lateral se convierte en un cajón.
- Consultas de contenedor para componentes que aparecen en diferentes anchos (una tarjeta en una barra lateral y en una columna principal):
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }
En Tailwind v4: @container en el padre y @md:grid-cols-2 en el hijo.
- Escala el espaciado con la pantalla. Padding de sección: 48px móvil, 64px tablet, 96px escritorio. Los gaps pueden pasar de 16 a 24 a 32.
- Altura de viewport: usa
min-h-dvh(o100dvh), noh-screen(100vh), para diseños de altura completa.100vhes más alto que el área visible en navegadores móviles con barra de herramientas, por lo que el contenido se oculta debajo. - Áreas seguras en teléfonos con muescas:
padding-bottom: env(safe-area-inset-bottom)en barras inferiores fijas, conviewport-fit=coveren la etiqueta meta del viewport. - Idiomas de derecha a izquierda: usa propiedades lógicas (
margin-inline-start,padding-inline,inset-inline-end; Tailwindms-*,pe-*,start-*) en lugar de izquierda y derecha, y prueba condir="rtl". Refleja iconos direccionales (flechas de retroceso, cheurones), no logotipos ni todos los iconos. - Sin desplazamiento horizontal de página, nunca. Verifica a 320px. Las causas habituales son un ancho fijo, una palabra o URL larga, un elemento
w-screen(que incluye el ancho de la barra de desplazamiento) o un margen negativo.
8. Tablas
- Fila de encabezado en el rol de etiqueta, sticky (
position: sticky; top: 0) cuando la tabla se desplaza, sobre una superficie teñida o con un borde inferior más fuerte. - Altura de fila por densidad: 36px compacto, 44px predeterminado, 52px cómodo. Ofrece un alternador cuando los usuarios difieren.
- Filas separadas por divisores finos o por teñido de cebra, no ambos.
- Números alineados al final con
tabular-nums; texto alineado al inicio; estado y acciones en las últimas columnas. - Tablas anchas en móvil: desplázalas horizontalmente dentro de su propio contenedor (
overflow-x: auto) con la primera columna fija, o cambia a una tarjeta apilada por fila. Nunca dejes que una tabla empuje la página hacia los lados. - Estados vacío, de carga y de error viven dentro del marco de la tabla, manteniendo el encabezado para que el usuario sepa qué aparecerá.
9. Densidad
Iguala la densidad a la frecuencia con la que se usa la pantalla:
- Marketing e incorporación: abierta. Pocos elementos por pantalla, espacio generoso, tipo grande.
- Pantallas de app de uso diario: compactas. Filas de 36 a 44px, gaps de 8 a 12px, texto de 14px. Las personas que usan una pantalla todos los días quieren ver más a la vez.
- Tablas y herramientas de datos: densas, con un alternador de densidad si los usuarios difieren.
- No mezcles densidades dentro de un mismo panel.
10. Puntos táctiles y áreas de impacto
- Objetivo de 44 por 44px para cualquier cosa táctil en pantallas táctiles, incluso si el icono visible es de 16px. (WCAG 2.2 AA requiere al menos 24 por 24px; 44 es el tamaño cómodo). Aumenta el área de impacto con padding, o con un pseudoelemento invisible centrado en el control para que el diseño no cambie:
.icon-btn { position: relative; }
.icon-btn::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: max(100%, 44px);
transform: translate(-50%, -50%);
}
- Al menos 8px entre objetivos táctiles separados para que un pulgar no toque dos.
11. Capas
Mantén una escala z-index pequeña y usa solo estos valores:
:root { --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; }
Los <dialog> nativos abiertos con showModal() y los elementos con el atributo popover se renderizan en la capa superior del navegador, por encima de cualquier z-index, por lo que no necesitan ninguno. z-index: 9999 significa que el apilamiento no se entiende. Arregla el contexto de apilamiento (a menudo un transform, filter o isolation extraviado en un padre) en lugar de aumentar el número.
12. Elementos fijos y sticky
- Encabezados sticky: mantenlos cortos (56 a 64px), y dales un fondo (sólido o difuminado) solo una vez que la página se desplace debajo de ellos, para que la parte superior de la página permanezca limpia.
- Añade
scroll-margin-topigual a la altura del encabezado en encabezados anclados para que los enlaces dentro de la página no caigan debajo del encabezado. - Las barras inferiores fijas en móvil necesitan el padding de área segura anterior y no deben cubrir el último contenido de la página; rellena la parte inferior de la página con la altura de la barra.
13. Verifica antes de terminar
- Cada valor de espaciado está en la escala de 4px.
- El espacio dentro de los grupos es claramente menor que el espacio entre ellos.
- Más espacio encima de los encabezados que debajo.
- Un borde de inicio por sección; números alineados al final en tablas.
- Las pistas flexibles usan
minmax(0, 1fr); los hijos de texto pueden encogerse. - Párrafos limitados a aproximadamente 65ch, incluso en pantallas anchas.
- El diseño se reestructura en móvil en lugar de solo encogerse.
- Sin desplazamiento horizontal a 320px; las secciones de altura completa usan
dvh. - Los objetivos táctiles tienen al menos 44px (nunca menos de 24px).
- Los valores de z-index provienen de la escala.
- Prueba de entrecerrar los ojos: lo más importante y los grupos están claros con los detalles borrosos.