Diseño (Layout)
La posición, el espaciado y la alineación transmiten jerarquía antes de que se lea una palabra. Esta habilidad construye esa estructura y la somete a pruebas de estrés: redimensiona, traduce, refleja para RTL.
Escribe cada corrección en el sistema de estilos del proyecto. Los números a continuación son puntos de partida para interfaces sin un sistema de densidad establecido; cuando exista uno, úsalo tal como está escrito en lugar de un sustituto que parezca familiar. Mantén el cromo deliberado de la plataforma, las herramientas profesionales compactas y los tokens del proyecto si aún pasan las pruebas de estrés.
Las áreas táctiles y el comportamiento de foco pertenecen a hr-better-accessibility. El radio, las sombras y la animación están fuera de esta habilidad. La longitud de línea y el espaciado de texto pertenecen a hr-better-typography.
Agrupa con espacio, no con líneas
El espacio agrupa primero, las formas de fondo después, las líneas separadoras al final y solo cuando el espacio por sí solo no puede transmitir la estructura. La separación entre grupos debe ser al menos 2× la separación dentro de uno (8px intra-grupo a 16px+ entre grupos), o la agrupación se percibe como ruido. Los bordes de alineación y el orden de importancia están en grouping-and-alignment.md.
Mantén los controles distintos del contenido
Dale a cada elemento interactivo una forma de fondo, un borde o una zona de colocación consistente. Un control estilizado como el texto estático que lo rodea no se percibe como control.
Alinea a bordes compartidos
Elige bordes de alineación y mantente fiel a ellos; cada borde suelto se percibe como ruido. Usa un paso de espaciado del proyecto por nivel de subordinación, donde 16px es un valor predeterminado útil.
Usa propiedades lógicas para el diseño dependiente de dirección: padding-inline-start, margin-inline-end. Reserva left y right físicos solo para geometría genuinamente física.
Ordena por importancia
El contenido más importante se sitúa cerca de la parte superior y del borde inicial. El orden de lectura fluye de arriba abajo, de inicio a fin. Piensa en término de inicio (leading) y final (trailing), no de izquierda y derecha.
Insinúa el contenido oculto
La divulgación progresiva necesita un indicio visible. Usa la señal establecida del proyecto, o deja que el siguiente elemento se asome 16–32px más allá del borde de desplazamiento, o muestra un control de despliegue. El contenido oculto sin ningún indicio podría no existir.
Espacio de respiro entre objetivos
Sin un sistema de densidad establecido, comienza con 12px entre controles adyacentes con borde o fondo y 24px alrededor de controles sin borde que solo tengan texto o icono. Los diseños compactos pueden usar menos, siempre que las áreas táctiles de hr-better-accessibility no se superpongan y los controles sigan siendo distintos. Los márgenes de diseño y las recetas de puntos de interrupción están en spacing-and-adaptivity.md.
Botones empotrados desde los bordes
En diseños de contenido, mantén los botones de ancho completo dentro de los márgenes de diseño con un radio visible, comenzando cerca de 16px en línea en móvil. Las acciones de borde a borde funcionan cuando siguen el cromo de plataforma establecido, tienen en cuenta las áreas seguras y se mantienen distinguibles de la interfaz de sistema.
El contenido sangra, los controles flotan
Los fondos y los medios se extienden hasta los bordes del viewport. Los controles y el texto permanecen dentro de los márgenes de diseño y las áreas seguras (env(safe-area-inset-*)). El cromo fijo flota sobre la capa de contenido en lugar de bloquearla.
Mantén la estructura hasta que se rompa
Los puntos de interrupción provienen del contenido, no de valores predefinidos de dispositivos. Mantén el diseño expandido mientras realmente encaje y colapsa tarde. Prefiere las consultas a contenedores (container queries) para la adaptación a nivel de componente, y prueba primero los tamaños más pequeños y más grandes.
Planifica para el crecimiento y el recorte
Las cadenas traducidas crecen, y las cortas crecen proporcionalmente más, por lo que una etiqueta de botón de una palabra es lo más riesgoso en la pantalla. No pongas ancho o alto fijo en un contenedor de texto y deja que las filas se ajusten. Prueba con pseudolocalización y una configuración regional representativa en lugar de presupuestar un porcentaje.
Nunca coloques una acción crítica donde el redimensionamiento o el desplazamiento la recorten. Mantenla en el flujo normal, o en un cromo estable adecuado para el producto.
Antes de terminar
| Error | Corrección |
|---|---|
margin-left / padding-right en un diseño localizable | margin-inline-start / padding-inline-end |
| Botón de diseño de contenido toca el borde del viewport | Empotrar dentro de los márgenes del proyecto; mantener el cromo intencional de la plataforma |
| Puntos de interrupción en 768/1024 porque son los valores predeterminados | Romper donde el contenido realmente deja de encajar |
| Contenedor de texto con ancho fijo dimensionado para un idioma | max-width y ajuste de línea; probar con pseudolocalización |
| Acción principal en la parte inferior de un panel propensa a recorte | Posicionamiento fijo (sticky) o cromo estable con padding de área segura |
100vh en shell de aplicación o héroe en móvil | 100dvh para un shell que sigue el cromo del navegador, 100svh para una primera pantalla |
| Texto largo empuja la acción final de una fila fuera de la pantalla o aplasta su avatar | min-width: 0 en la columna de texto, flex-shrink: 0 en elementos de tamaño fijo |
Reporte
Gravedad. HIGH bloquea contenido o una acción en un viewport soportado. MEDIUM perjudica jerarquía, orden de lectura o adaptabilidad. LOW es un ajuste aislado de alineación o espaciado.
Verificación. Sin navegador: propiedades lógicas en lugar de físicas, consultas a contenedores y multimedia contra la lista de viewports soportados y orden del DOM contra el orden de lectura previsto. Con uno: cada ancho soportado, zoom al 200% y espejado RTL. Reporta cada verificación que no pudiste ejecutar como No verificado.
Formato. Agrupa los hallazgos bajo el principio que viola cada uno, ordenados por gravedad, una fila por causa raíz listando cada ubicación en la que aparece:
| Gravedad | Ubicación | Antes | Después | Por qué |
|---|
Ubicación es ruta/al/archivo:línea. Por qué nombra el principio y el impacto en el usuario.
Reporta Bloqueado cuando quede algún HIGH, Aprobar en caso contrario, dejando el resto en la tabla como trabajo pendiente. Nunca apruebes una cobertura que no inspeccionaste. Si no hay nada que reportar, indica "No se encontraron hallazgos de diseño procesables" y reporta la verificación.