Diseño (Layout)
La posición, el espaciado y la alineación transmiten jerarquía antes de que se lea una palabra. Este skill construye esa estructura y la pone a prueba: redimensiónalo, tradúcelo, refléjalo para RTL.
Escribe cada corrección en el sistema de estilo del proyecto. Los números siguientes son puntos de partida para interfaces sin un sistema de densidad establecido; cuando exista uno, utilízalo tal como está escrito, no un sustituto que parezca familiar. Mantén el chrome deliberado de la plataforma, las herramientas profesionales compactas y los tokens del proyecto donde aún pasen las pruebas de estrés.
Las áreas de interacción y el comportamiento de enfoque pertenecen a better-accessibility. El radio, las sombras y la animación pertenecen a better-ui. La longitud de línea y el espaciado de texto pertenecen a better-typography.
Agrupar con espacio, no con líneas
El espacio agrupa primero, luego las formas de fondo, y por último las líneas separadoras, y solo donde 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 intragrupo a 16px+ intergrupo), o la agrupación se lee como ruido. Los bordes de alineación y el orden de importancia se encuentran 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 coherente. Un control con estilo similar al texto estático que lo rodea no se percibe como un control.
Alinea a bordes compartidos
Elige bordes de alineación y mantente fiel a ellos; cada borde fuera de lugar se lee 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 la dirección: padding-inline-start, margin-inline-end. Reserva el left y right físicos solo para geometría genuinamente física.
Ordenar por importancia
El contenido más importante se sitúa cerca de la parte superior y del borde de inicio (leading edge). El orden de lectura fluye de arriba abajo, de inicio a fin. Piensa en términos de inicio (leading) y final (trailing), no en izquierda y derecha.
Insinuar contenido oculto
La divulgación progresiva necesita un indicador visible. Usa la señal establecida del proyecto, o permite que el siguiente elemento asome 16–32px más allá del borde de desplazamiento, o muestra un control de divulgación. El contenido oculto sin señal podría no existir.
Espacio de respiración entre objetivos
Sin un sistema de densidad establecido, comienza con 12px entre controles adyacentes con borde o relleno, y 24px alrededor de controles sin borde, solo de texto o de icono. Los diseños compactos pueden usar menos, siempre que las áreas de interacción de 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 insertados desde los bordes
En diseños de contenido, mantén los botones de ancho completo dentro de los márgenes del 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 chrome de plataforma establecido, tienen en cuenta las áreas seguras y se mantienen distinguibles de la interfaz de usuario del sistema.
El contenido se desborda, los controles flotan
Los fondos y los medios se extienden hasta los bordes de la ventana gráfica. Los controles y el texto se mantienen dentro de los márgenes del diseño y las áreas seguras (env(safe-area-inset-*)). El chrome flotante y fijo se sitúa sobre la capa de contenido sin bloquearla.
Mantener la estructura hasta que se rompa
Los puntos de interrupción provienen del contenido, no de valores predeterminados de dispositivos. Mantén el diseño expandido siempre que realmente encaje y contrae tarde. Prefiere consultas de contenedor para la adaptación a nivel de componente, y prueba primero los tamaños más pequeños y más grandes.
Planificar 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 arriesgado en la pantalla. No pongas un ancho o alto fijo en un contenedor de texto y permite que las filas se ajusten. Prueba con pseudolocalización y una configuración regional representativa en lugar de calcular 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 chrome estable adecuado al 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 de la ventana gráfica | Insertar dentro de los márgenes del proyecto; mantener el chrome de plataforma intencional |
| Puntos de interrupción en 768/1024 porque son los predeterminados | Romper donde el contenido realmente deja de encajar |
| Contenedor de texto con ancho fijo ajustado a un idioma | max-width y ajuste; probar pseudolocalización |
| Acción principal en la parte inferior propensa a recortes de un panel | Posicionamiento fijo (sticky) o chrome estable con relleno de área segura |
Informes
Gravedad. HIGH bloquea contenido o una acción en una ventana gráfica compatible. MEDIUM perjudica la jerarquía, el orden de lectura o la adaptabilidad. LOW es un ajuste aislado de alineación o espaciado.
Verificación. Sin navegador: propiedades lógicas en lugar de físicas, consultas de contenedor y de medios contra la lista de ventanas gráficas compatibles, y orden del DOM contra el orden de lectura previsto. Con uno: cada ancho compatible, zoom al 200% y el espejo RTL. Reporta cada comprobación que no hayas podido ejecutar como No verificado.
Formato. Agrupa los hallazgos bajo el principio que cada uno viola, ordenados por gravedad, una fila por causa raíz que enumere cada ubicación donde 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.
Termina con Bloqueado cuando quede algún HIGH, Aprobar en caso contrario, dejando el resto en la tabla como trabajo pendiente. Nunca Aprobar una cobertura que no hayas inspeccionado. Si no hay nada que reportar, indica "No se encontraron hallazgos de diseño procesables" y reporta la verificación.