Layout: qué es, elementos y tipos en diseño gráfico y web

Para qué sirve un buen layout

El layout decide qué ve primero el lector, en qué orden recorre la página y qué tan fácil le resulta encontrar lo que busca. Una misma información puede entenderse en segundos o volverse ilegible según cómo esté distribuida. En una tienda en línea, por ejemplo, un layout confuso se traduce en gente que no encuentra el botón de compra.

Elementos de un layout

• Retícula o grilla: una red invisible de columnas y filas que sirve de guía para alinear todo. Da orden y coherencia entre páginas distintas.
• Jerarquía visual: los elementos más importantes se destacan con tamaño, peso, color o posición. El lector debe saber de un vistazo qué es título, qué es texto y qué es secundario.
• Márgenes: el espacio entre el contenido y el borde de la página o la pantalla.
• Espacio en blanco o espacio negativo: las zonas vacías. No es espacio desperdiciado: separa bloques, da descanso a la vista y hace que lo importante resalte.
• Alineación: que los elementos compartan bordes o ejes comunes. Lo desalineado se percibe como descuidado aunque no se sepa por qué.
• Proximidad: lo que está relacionado se agrupa; lo que no, se separa. Es uno de los principios de la psicología de la Gestalt.
• Contraste: diferencias de tamaño, color o peso que distinguen unos elementos de otros.

Tipos de layout en diseño gráfico

• Una columna: texto de corrido, como en una novela. Ideal para lectura larga.
• Varias columnas: típico de diarios y revistas. Permite combinar notas, fotos y avisos en la misma página.
• Modular: la retícula se divide en módulos iguales, como una cuadrícula, y cada contenido ocupa uno o varios.
• Libre: sin retícula visible, frecuente en carteles y portadas. Exige más oficio para que no se vea desordenado.

Layout en páginas web

En la web el layout tiene un problema que el papel no tiene: la misma página se ve en pantallas de 320 píxeles de ancho y de más de 2.000. Por eso se usa el diseño adaptable (en inglés, responsive design): el layout cambia según el tamaño de la pantalla, por ejemplo pasando de tres columnas en un computador a una sola en un teléfono.

Los patrones más comunes en la web son:

• Cabecera, contenido y pie: la estructura básica de casi cualquier sitio.
• Barra lateral: una columna angosta al costado con menú, filtros o enlaces relacionados.
• Tarjetas: bloques del mismo tamaño en una cuadrícula, como en tiendas o sitios de noticias.
• Página única: todo el contenido en una sola página larga que se recorre bajando.

Para construir layouts web se usa CSS. Sus dos herramientas principales son Flexbox, pensada para ordenar elementos en una fila o una columna, y Grid, pensada para cuadrículas de filas y columnas a la vez.

Cómo leemos una página

Los estudios de seguimiento ocular del Nielsen Norman Group mostraron que, en páginas con mucho texto, la gente tiende a leer en forma de F: recorre la parte superior, baja un poco y lee otra línea más corta, y luego escanea el borde izquierdo. Un buen layout usa eso a su favor: pone lo importante arriba y al inicio de cada línea, y usa subtítulos y listas para que el escaneo encuentre algo.

Layout, mockup y wireframe