Principios de composición para gráficos de redes sociales

Nuestra recomendación: para componer una publicación de modo que la gente lea primero lo importante, da a un elemento claramente más peso que al resto y luego alinea y espacia lo demás para que lo apoye. Todo se resume en cuatro principios: jerarquía, cuadrícula, espacio en blanco y énfasis.

Los principios que siguen son nuestra recomendación para gráficos de redes sociales, basada en investigaciones sobre interfaces. Cuando un número o una definición procede de una fuente, está enlazado. Ilustramos cada principio con una plantilla generada por el motor de Chikaboom a partir de nuestra marca de demostración AURORA, a tamaño nativo.

¿Qué significa realmente «leer primero lo importante»?

Nielsen Norman Group define la jerarquía visual como la disposición de los elementos para que la vista los recorra en el orden de importancia previsto. En una publicación, tú decides ese orden antes que el espectador. La gente se encuentra con tu imagen a mitad de scroll, así que el primer elemento en el que se detiene su vista es el que decide si paran.

La investigación sobre el patrón en F de NN/g descubrió que quienes leen páginas web recorren una barra superior, una segunda barra más corta y después bajan por el borde izquierdo, y que rara vez leen palabra por palabra. Ese estudio abarca páginas web con mucho texto, no imágenes de feed. Nuestra suposición, que ese estudio no probó con imágenes, es que el mismo hábito se traslada a los gráficos del feed: coloca la idea principal en la parte superior izquierda del bloque de texto y pon lo importante en las primeras palabras.

Usa la prueba de entrecerrar los ojos del mismo artículo de NN/g: desenfoca tu diseño, o aléjate de la pantalla, y comprueba qué sigue destacando. Si no es lo que querías, cambia la composición, no el texto.

Principio 1: ¿Cómo funciona la jerarquía en una sola publicación?

En nuestro resumen del artículo de NN/g, la jerarquía nace de la escala, el contraste y la agrupación. La orientación de NN/g es no pasar de tres variaciones de tamaño ni de dos elementos de gran tamaño. Nuestra recomendación para una publicación de 1080 px son tres niveles: un titular, una línea de apoyo y una etiqueta pequeña.

En esta composición de estilo suizo, el titular es el único elemento grande. La etiqueta y los metadatos quedan muy por debajo en tamaño, así que la prueba de entrecerrar los ojos devuelve una sola mancha: el titular. Los elementos pequeños no están para competir. Responden a «qué es esto» y «cuánto tardará».

Principio 2: ¿Por qué usar una cuadrícula para una sola imagen?

Una cuadrícula es una unidad repetida que decide dónde pueden ir las cosas. Material Design 3 construye su espaciado sobre una escala de 8dp y distingue el relleno (dentro de un elemento), los huecos (entre elementos) y los márgenes (fuera de ellos). Aplicar la idea a una publicación de redes sociales es recomendación nuestra, no una regla de plataforma: elige una unidad, como 24 o 40 px a 1080, y usa solo múltiplos de ella.

La composición editorial muestra la ventaja. La etiqueta de categoría, el titular y la firma comparten un mismo borde izquierdo, y los huecos entre ellos se repiten. Nada parece colocado a ojo, así que la vista baja por la pila sin buscar. Ese mismo borde izquierdo encaja además con el hábito de exploración desde arriba a la izquierda mencionado antes.

Principio 3: ¿Cuánto espacio en blanco es suficiente?

NN/g describe el espacio en blanco como una forma de equilibrar un diseño y facilitar su exploración y lectura, y recomienda un sistema de espaciado coherente junto con el principio de proximidad. Su artículo sobre proximidad añade que los elementos cercanos entre sí se perciben como un grupo y que esto puede imponerse a la semejanza de color o de forma.

Para una publicación, de ahí sale una regla sencilla nuestra: el espacio dentro de un grupo debe ser claramente menor que el espacio entre grupos. Una cifra y su etiqueta van juntas, así que mantenlas cerca. Sepáralas de la nota al pie.

La tarjeta de datos pone el número y su etiqueta en un mismo grupo, con mucho aire alrededor. La nota al pie es pequeña y queda apartada. El número de esta tarjeta es una ilustración de composición, no un resultado medido.

Principio 4: ¿Cómo se enfatiza una sola cosa sin gritar?

En nuestro planteamiento, el énfasis es la jerarquía llevada a su límite: un elemento, un tratamiento. NN/g también aconseja limitar la paleta a unos pocos colores y no depender solo del color, lo que importa para la accesibilidad. Consulta contraste de color en redes sociales y WCAG para ver las proporciones.

El testimonio es ruidoso a propósito, pero sigue teniendo una sola cosa ruidosa. El estilo es una elección de peso y de bordes, y la jerarquía de fondo es la misma que en la composición suiza, más tranquila: un elemento focal y una pequeña línea de apoyo. Para elecciones tipográficas que transmiten énfasis, consulta tipografía para publicaciones en redes sociales.

¿Cuál es una lista de comprobación rápida de composición?

Comprobación	Nuestra regla práctica	Principio
Prueba de entrecerrar los ojos	Un elemento sobrevive al desenfoque	Jerarquía
Tamaños de texto	Dos o tres, no más	Jerarquía
Borde izquierdo	Etiqueta, titular y firma lo comparten	Cuadrícula
Unidad de espaciado	Una unidad base, solo múltiplos	Cuadrícula
Huecos entre grupos	Dentro de un grupo menores que entre grupos	Espacio en blanco
Bordes	Margen libre por los cuatro lados	Espacio en blanco
Énfasis	Un tratamiento, usado una vez	Énfasis
Contraste	Cumple WCAG, no solo por el color	Énfasis

Antes de dar por terminado el diseño, comprueba el tamaño del lienzo y las zonas seguras en la guía de tamaños de imagen para redes sociales. En nuestra experiencia, las plataformas superponen su propia interfaz a las publicaciones, así que una composición que funciona a 1080 x 1080 aún puede perder su etiqueta en el borde. Para Stories y Reels, consulta zonas seguras explicadas, que cita las zonas seguras de anuncios de Meta.

¿Cómo se mantiene la composición coherente en un equipo?

Las decisiones de composición se mantienen mejor cuando están bloqueadas en una plantilla en vez de recordadas. En Chikaboom, un diseñador construye la composición una vez y el equipo solo rellena el texto. Los tamaños, el espaciado y las tipografías permanecen fijos, y el texto se reduce dentro de su caja en lugar de desbordarse, de modo que la jerarquía sobrevive a un titular más largo. Puedes probarlo en la demo en vivo.

¿Adónde voy a continuación en este grupo de artículos?

Esta página es el eje de la composición. Las guías hermanas tratan la tipografía, el color y el contraste y los tamaños de imagen, que junto con la composición forman el sistema visual de una publicación. Para bloquear estas decisiones en todo el equipo, lee directrices de marca para equipos pequeños y, para una aplicación específica de plataforma, consulta diseño de publicaciones en LinkedIn.