¿Qué es la composición en diseño web?

Una composición coherente guía la mirada del visitante hacia un punto focal, en lugar de dejarlo recorrer la página al azar. Ese es el mecanismo detrás de su valor de negocio: una página que dirige la atención hacia su mensaje y su llamado a la acción transmite los valores de tu marca e impulsa las conversiones.

Entre los principios y las herramientas que los diseñadores suelen usar para componer una página están:

• Sistema de cuadrícula. Organiza el contenido sobre una cuadrícula para que cada elemento se alinee con los demás en lugar de flotar por su cuenta.
• Jerarquía visual. Ordena el contenido por importancia y usa tamaño, color y ubicación para controlar qué se lee primero.
• Tipografía y color. Las fuentes en negritas y los colores intensos resaltan los llamados a la acción y atraen la mirada hacia la información importante.
• Balance visual. Distribuye el peso visual para que ningún lado de la página se sienta más cargado que el otro.
• Espacio en blanco. El espacio vacío alrededor de los elementos le da al punto focal margen para funcionar y evita que la página se sienta apretada.
• Contraste. Las diferencias de color, tamaño o grosor hacen que los elementos clave destaquen de su entorno.

Técnicas de composición

La regla de los tercios es el punto de partida más común. Divide el lienzo en una cuadrícula de 3×3 con 9 cuadrantes iguales y coloca los elementos clave sobre las líneas o en sus 4 intersecciones. La mirada llega primero a la intersección superior izquierda, un lugar natural para el titular o el logotipo. La guía sobre la regla de los tercios (en inglés) que publicó el UX Design Institute en diciembre de 2023 explica el patrón a detalle. La proporción áurea (aproximadamente 1:1.618) es la principal cuadrícula alternativa.

Los patrones de lectura te dicen qué flujo conviene diseñar. El patrón en Z funciona en páginas con poco contenido, como una landing page: el visitante recorre la parte superior, baja en diagonal y termina en la parte inferior. El patrón en F funciona en páginas con mucho texto: el lector recorre las primeras líneas y luego baja por el borde izquierdo. Una página de inicio típica en Z coloca el logotipo arriba a la izquierda, la navegación arriba a la derecha, el titular sobre la línea superior de la cuadrícula y el llamado a la acción principal abajo a la derecha, justo donde termina la Z.

Composición vs. layout

Los diseñadores suelen usar los dos términos como sinónimos. La lección de composición de diseño de Uxcel (en inglés), actualizada el 15 de mayo de 2023, incluso señala que a la composición también se le llama layout. Cuando necesites distinguirlos:

• El layout es dónde están las cosas: la ubicación estructural de los elementos sobre la cuadrícula.
• La composición es el resultado de esa ubicación: el balance, el flujo y el énfasis de la página en su conjunto.

Puedes cambiar la composición sin mover un solo elemento, por ejemplo al cambiar colores o grosores de fuente, pero no puedes cambiar el layout sin cambiar la composición. La distinción importa cuando una página está perfectamente alineada y aun así se ve mal: ese es un problema de composición, no de layout.

Cómo mejorar la composición de tu página

Sigue esta secuencia en orden:

• Elige un solo punto focal por pantalla y acomoda todo lo demás a su alrededor.
• Alinea cada elemento a una cuadrícula. Lo que quede fuera de ella debe estarlo a propósito.
• Agrupa los elementos relacionados para que se lean como una sola unidad.
• Deja espacio en blanco alrededor del llamado a la acción para que no quede rodeado por sus vecinos.
• Revisa el balance y el contraste: entrecierra los ojos frente a la página, y lo que siga destacando es tu punto focal real.
• Vuelve a revisar en anchos móviles, donde un diseño adaptable reacomoda las columnas y los puntos focales cambian de lugar.

Una mala composición falla de maneras predecibles, cada una con su solución:

• Saturación sin un punto focal claro. Los visitantes no encuentran lo que buscan y se van. Elimina o resta protagonismo a todo lo que no apoye la función principal de la página.
• Llamados a la acción que compiten. Botones con el mismo peso dividen los clics. Mantén una sola acción principal por página y dale estilo secundario al resto.
• Alineación inconsistente. Los elementos que casi se alinean se ven descuidados. Ajústalos a la cuadrícula.
• Espaciado apretado. Los elementos amontonados se convierten en ruido. Agrega espacio en blanco hasta que cada grupo se distinga por sí solo.

Empieza por tu página de inicio: identifica su punto focal y recorre la lista. Y para repasar los bloques básicos, consulta nuestra guía sobre los elementos básicos del diseño web.