Lección 1 de 12 · Lectura y práctica
Jerarquía Visual y Layout
Jerarquía Visual: Guiar la Mirada del Usuario La jerarquía visual es el principio más importante del diseño UI. Determina en qué orden el usuario procesa la información en una pantalla. Un buen diseño guía la mirada naturalmente.
Del concepto a la práctica
Taller de esta lección
La jerarquía visual organiza la atención antes de que la persona lea cada palabra. Se puede comprobar observando el orden en que identifica propósito, contenido y acción, no solo mirando si una pantalla parece equilibrada.
Ejemplo resuelto
En una pantalla de reservas, el título «Buscar un libro» va primero, el campo de búsqueda después y la lista debajo. El botón «Reservar» no compite con el título: usa 16 px de alto tipográfico, contraste fuerte y aparece dentro de cada resultado. El resumen del libro ocupa dos líneas y el autor queda como dato secundario.
Pruébalo
Escribe los cinco elementos que deben encontrarse en diez segundos.
Ordénalos por dependencia: búsqueda, filtros, resultados y confirmación.
Asigna una sola prioridad alta y dos medias.
Revisa la composición entrecerrando los ojos y anota qué bloque domina.
Error frecuente: hacer todos los textos grandes para «darles importancia». Corrige reservando el mayor contraste y espacio para una sola decisión principal.
Ejercicio: crea seis tarjetas con título, autor y disponibilidad.
Comprueba tu resultado
un observador identifica el campo de búsqueda primero, una tarjeta después y el estado de disponibilidad sin leer más de tres líneas.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗Jerarquía Visual: Guiar la Mirada del Usuario
La jerarquía visual es el principio más importante del diseño UI. Determina en qué orden el usuario procesa la información en una pantalla. Un buen diseño guía la mirada naturalmente hacia lo más importante primero.
Herramientas de jerarquía visual
- Tamaño: los elementos más grandes capturan la atención primero — usa esto para títulos y CTAs
- Contraste: alto contraste (texto oscuro sobre fondo claro) atrae más que bajo contraste
- Color: un solo color de acento en una página monocromática dirige la atención como un faro
- Espaciado: más espacio alrededor de un elemento lo hace parecer más importante (white space es poder)
- Posición: los usuarios escanean en patrón F (web) o centrado (móvil) — coloca lo importante en esas zonas
- Peso tipográfico: bold destaca sobre regular — úsalo estratégicamente, no en todo el texto
Principios de layout
- Grilla de 8px: todo el espaciado debe ser múltiplo de 8 (8, 16, 24, 32, 48, 64) para consistencia visual
- Grilla de columnas: 12 columnas para desktop, 4 para móvil — las columnas organizan el contenido horizontalmente
- Alineación: todos los elementos deben estar alineados a alguna referencia — el desorden visual genera desconfianza
- Proximidad: elementos relacionados deben estar cerca entre sí y separados de los no relacionados
- Repetición: usa los mismos patrones para elementos similares — el usuario aprende la interfaz más rápido
Errores comunes de jerarquía
- Todo es importante = nada es importante — si todo está en bold y en grande, el usuario no sabe dónde mirar
- Demasiados colores o estilos compiten entre sí y generan ruido visual
- Falta de espacio en blanco: las interfaces abarrotadas son más difíciles de escanear y parecen poco profesionales
- CTAs que no destacan del resto del contenido — el botón principal debe ser el elemento más llamativo de la pantalla
- Texto demasiado largo sin subtítulos ni breaks — divide el contenido en bloques digeribles
Consejo: Haz el 'squint test': entrecierra los ojos y mira tu diseño. ¿Puedes distinguir las zonas más importantes? Si todo se ve igual de prominente, necesitas más jerarquía.
Práctica acompañada: Interfaces que se pueden probar
Un flujo, sus estados y un prototipo en Figma. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.
Práctica: prueba sin explicar
Conecta tres pantallas y un estado de error. Pide a alguien: «Reserva una clase el martes y cambia la fecha antes de confirmar». Observa dónde toca primero, qué lee y si sabe cuándo terminó. No digas el nombre del botón que esperas que use.
Registra los problemas por consecuencia: impide terminar, provoca una elección equivocada o solo añade esfuerzo. Corrige primero los dos primeros. Repite con textos largos y una pantalla estrecha. Si el prototipo no representa el comportamiento del teclado, anota esa limitación para la implementación en lugar de afirmar que ya verificaste la accesibilidad completa.
Comprueba tu entrega
Entrega el flujo, una hoja de componentes y un registro de cambios. Para cada cambio explica el problema observado y la modificación elegida. Por ejemplo: «Dos personas confundieron guardar con confirmar; cambié el texto y mostré un resumen antes de la acción».
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.