No necesitas ser diseñador para entregar una interfaz decente. Pero sí tienes que dejar de tratar la UI como «poner los componentes en pantalla y seguir». La mayoría de las pantallas deficientes no son feas por falta de talento visual, sino confusas por falta de intención. A continuación, cinco hábitos que cualquier dev puede adoptar hoy y que resuelven la mayor parte de los problemas antes de que un diseñador tenga que intervenir.
Jerarquía visual: dile al ojo dónde mirar
Toda pantalla tiene algo más importante. El botón de acción principal, el número que importa, el siguiente paso. Si todo tiene el mismo peso, nada lo tiene. Usa tamaño, color y espacio para indicarle al ojo el orden de lectura.
En la práctica: un botón primario destacado y los secundarios discretos. Título grande, metadatos pequeños y grises. No pintes cinco cosas de rojo vibrante compitiendo por la atención. Y respeta el espacio en blanco: no es desperdicio, es lo que separa los grupos y crea aire. Agrupa lo que está relacionado y separa lo que no lo está.
Feedback inmediato: una pantalla muerta es un bug
El usuario hizo clic. ¿Y ahora qué? Si nada cambia en la pantalla, hará clic de nuevo o pensará que algo se rompió. Toda acción necesita una respuesta visible en menos de 100 ms, aunque solo sea que el botón cambie de estado.
Hover, focus, active, disabled: los cuatro estados no son un detalle, son la conversación entre la interfaz y el dedo. Al guardar, muestra un spinner en el propio botón y desactívalo para evitar que la acción se dispare dos veces. Si funcionó, confírmalo; si falló, avisa. El silencio es la peor respuesta que puede dar una UI.
Consistencia: que sea predecible es un elogio
Si el botón de guardar es verde en una pantalla y azul en otra, estás obligando al usuario a reaprender tu producto en cada página. La consistencia es lo que hace que la interfaz parezca confiable, incluso cuando el usuario nunca la ha visto antes.
Estandariza lo obvio: espaciados, tamaños de fuente, esquinas, colores y el texto de los botones. «Cancelar» siempre debe estar en el mismo lugar. Las fechas deben usar el mismo formato. Usa tokens o variables en vez de escribir #3B82F6 en veinte lugares: cuando el estándar se convierte en código, la consistencia deja de depender de tu memoria. Lo predecible es aburrido de implementar y excelente de usar.
La accesibilidad no es un adorno
La accesibilidad no es un favor para una minoría: es lo que hace que tu UI funcione con el teclado, el lector de pantalla o bajo el sol que incide sobre la pantalla del celular. Y buena parte de ella es barata.
Lo básico ya resuelve mucho: contraste suficiente (apunta a AA, 4.5:1 para texto), nunca comuniques un estado solo mediante el color, usa HTML semántico de verdad (button es un botón, no un div con onClick), incluye un label en cada input, alt en las imágenes informativas y foco visible para quienes navegan con Tab. Ejecuta Lighthouse o axe una vez y te sorprenderá cuántos errores se resuelven con una sola línea.
Loading, vacío y error: los tres estados que olvidas
Todo dev diseña la pantalla completa, con datos bonitos provenientes de una API que funcionó. El usuario vive en los otros tres estados, precisamente los que nadie diseña.
Loading: no dejes la pantalla en blanco. Usa un skeleton o un spinner y evita el «salto» de layout cuando llegan los datos. Vacío: una lista sin elementos no es un error, sino una oportunidad: explica qué es y cómo crear el primer elemento, en lugar de mostrar un vacío. Error: habla como una persona. «No se pudo cargar. ¿Intentar de nuevo?» con un botón, no un stack trace ni un alert genérico. Si solo programas el camino feliz, entregaste la mitad de la pantalla.
Lo mínimo que separa una buena pantalla de una insufrible
Ninguno de estos cinco puntos exige talento artístico. Exige intención: algo destacado, una respuesta a cada clic, un estándar que no cambia, un contraste que cualquiera pueda percibir y los tres estados que sueles olvidar. Haz solo eso y tu UI ya subirá de nivel: el diseñador está para el pulido, no para lo básico. Y lo básico es lo primero que percibe el usuario.