Fundamento de diseño
Jerarquía visual en diseño UI
Aprende cómo tamaño, contraste, espacio y posición guían la atención y hacen una interfaz más fácil de escanear.
En una frase
La jerarquía visual indica al usuario qué importa primero, después y a continuación.
Por qué importa
Cuando todos los elementos compiten con el mismo peso visual, el usuario debe esforzarse más para entender qué hacer.
Los 4 controles de la jerarquía visual
La jerarquía no depende de una sola propiedad. Normalmente combinamos tamaño, contraste, espacio y posición para crear un orden de atención claro.
Tamaño
Lo grande suele ganar atención primero, pero debe reflejar importancia real.
Contraste
Diferencias de color, peso o tono separan lo prioritario de lo secundario.
Espacio
El espacio agrupa, separa niveles y evita que todo compita al mismo tiempo.
Posición
Ubicación, alineación y flujo determinan qué encuentra el ojo a continuación.
Error común
Si todo destaca, nada destaca.
Botones grandes, títulos pesados, tarjetas con sombras y múltiples colores de acento pueden competir entre sí. Una buena jerarquía también decide qué debe permanecer silencioso.
Ejemplo aplicado
Un CTA principal puede ganar prioridad mediante mayor contraste y espacio sin hacer desaparecer el resto de la interfaz.
Qué recordar
- Prioriza con contraste, no con decoración.
- Usa el espacio para separar niveles de importancia.
- Haz que la acción principal sea fácil de identificar.
PixelDojo
No memorices el principio. Practica detectándolo.
Pon a prueba tu criterio con retos visuales rápidos y feedback inmediato.
Empezar entrenamiento