Diseño de interfaz
La mayoría de las interfaces no fallan por las ideas. Fallan en la ejecución: espaciado que es casi consistente, jerarquía que es casi clara, tipografía que es casi correcta.
Diagnosticar antes de rediseñar
Pregunta para qué sirve la pantalla. Una acción principal, como máximo una secundaria. Si no puedes nombrar la acción principal, el problema de diseño es un problema de producto y ningún estilo lo soluciona.
Las cosas que realmente se perciben como calidad
Jerarquía. Un espectador debe saber dónde mirar antes de leer nada. Consíguelo con tamaño, peso y espacio, en ese orden. El color es la herramienta de jerarquía más débil y la más sobreutilizada.
Ritmo de espaciado. Las cosas relacionadas están más cerca que las no relacionadas, y los espacios provienen de una sola escala. El espaciado inconsistente es el defecto que la gente siente pero no puede nombrar. Consigue la proximidad correcta y un diseño sencillo se lee como diseñado.
Tipografía. Una familia para la interfaz, dos como máximo en la página. Establece una escala real y usa sus pasos en lugar de inventar tamaños. El texto del cuerpo quiere una medida cómoda: aproximadamente 60–75 caracteres— y una altura de línea que crece a medida que la medida se ensancha.
Moderación en las superficies. Los bordes, las sombras y los rellenos separan cosas. Elige uno por límite. Apilar los tres es por lo que las interfaces se ven recargadas con una densidad normal.
Alineación. Todo se alinea con algo. Un elemento alineado con nada se lee como un error incluso cuando es intencional.
La densidad es una decisión
Una herramienta con mucha información y una página de marketing quieren tratamientos opuestos. Decide cuál es esta y comprométete: el término medio incómodo, donde una tabla de datos tiene el padding de una página de aterrizaje, no sirve a ninguna.
Termina los estados
Carga, vacío, error y desbordamiento son donde los productos se sienten inacabados. Un estado vacío es una oportunidad de diseño; un spinner sin contexto es una admisión. Las cadenas largas, las listas largas y las pantallas pequeñas deben manejarse, no esperarse.
El modo oscuro es una paleta, no una inversión
Invertir un tema claro produce el característico modo oscuro malo: fondos negros puros, texto blanco puro y sombras que no hacen nada.
- Usa un gris muy oscuro en lugar de negro puro, y un blanco ligeramente atenuado en lugar de blanco puro. El contraste máximo entre ambos causa halos y es genuinamente cansado de leer.
- La elevación se invierte: en temas claros las superficies elevadas proyectan sombras, en temas oscuros se vuelven más claras. La sombra por sí sola no transmite nada sobre un fondo oscuro.
- Los colores saturados que funcionaban sobre blanco vibrarán sobre oscuro. Desatura y aclara los colores de acento para la paleta oscura en lugar de reutilizarlos.
- Define ambas paletas juntas, a nivel de token, desde el principio. Readaptar significa auditar cada superficie.
Piso de accesibilidad
Estos no son elementos de pulido: por debajo de ellos, algunas personas no pueden usar la interfaz en absoluto.
- Contraste de texto que cumpla con la relación estándar contra su fondo real, incluido texto sobre imágenes y dentro de botones de color.
- Nunca transmitas significado solo con el color. Un borde rojo que indica un error necesita texto o un icono también.
- Cada elemento interactivo accesible por teclado, en un orden sensato, con un estado de foco visible.
- Objetivos táctiles lo suficientemente grandes como para pulsarlos de manera confiable, con espacio entre los adyacentes.
- Respeta la preferencia de movimiento reducido: la animación que no se puede deshabilitar causa síntomas reales en algunos usuarios.
- Elementos semánticos reales: botones que son botones, encabezados en orden. Un div estilizado es invisible para la tecnología de asistencia.
Nunca
- Añadas peso visual para solucionar un problema de jerarquía causado por demasiados elementos iguales. Elimina en su lugar.
- Centres el texto del cuerpo.
- Publiques un estado de hover sin el estado de foco correspondiente.