Diseño de banners: banners web, de redes y de impresión que se leen

Un buen diseño de banners trabaja con la forma en lugar de contra ella. Un banner es ancho y bajo, así que dale un solo bloque compacto de palabras, un titular corto y quizá una línea de apoyo, colocado donde nada lo tape, y deja que el fondo lleve el color por el resto del ancho. Comprueba antes el tamaño y la zona segura de cada plataforma: un banner de perfil de LinkedIn mide 1584 × 396 píxeles y pierde la esquina inferior izquierda bajo tu foto, mientras que un banner de YouTube mide 2560 × 1440 y en el móvil solo muestra una franja central.

Tamaños de banner para web y redes

Cómo colocar las palabras en un banner ancho

La gente lee un banner como lee una línea de texto: de izquierda a derecha y deprisa. Repartir las palabras por todo el ancho obliga a la mirada a recorrer demasiado. Agrúpalas en un solo bloque, más o menos un tercio del ancho, y pon el titular lo bastante grande para leerse cuando todo el banner se reduce al ancho de la pantalla de un móvil.

A esta altura, la jerarquía tiene que ser sencilla. Dos niveles suelen ser el límite: un titular y una línea pequeña encima o debajo. Si necesitas un tercero, probablemente pertenece al propio perfil. Jerarquía visual explica cómo el tamaño y el espaciado hacen este trabajo sin decoración extra.

Zonas seguras y recortes

Cada plataforma recorta o tapa su banner de forma distinta en el ordenador y en el móvil. El enfoque seguro es el mismo en todas partes: deja que el fondo llegue de borde a borde y mantén las palabras y los logotipos en el centro del encuadre, lejos de la esquina donde está el avatar.

1. 1

   Localiza la esquina tapada

   En LinkedIn, X y Bluesky la foto de perfil se superpone abajo a la izquierda. Deja esa zona solo para el fondo.

2. 2

   Cuenta con los recortes del móvil

   Facebook y Etsy recortan los lados en el móvil. Mantén las palabras dentro de los dos tercios centrales del ancho.

3. 3

   Usa la franja central de YouTube

   Del encuadre de 2560 × 1440, solo la zona central de unos 1546 × 423 píxeles se ve en todos los dispositivos. Pon ahí el nombre y cualquier palabra.

4. 4

   Comprueba a tamaño real

   Súbelo y míralo en un móvil y en un portátil. Una vista previa en una herramienta de diseño no puede mostrarte la interfaz de la plataforma, y las plataformas cambian sus composiciones, así que revisa sus páginas de ayuda antes de un gran lanzamiento.

Banners impresos: roll ups y carteles de eventos

Un roll up, normalmente de 850 × 2000 mm, plantea el problema contrario: es alto y se ve desde varios metros mientras la gente pasa. Necesita un logotipo y un titular en el tercio superior, a la altura de los ojos, muy poco en el tercio inferior, que queda oculto tras mesas y piernas, y una letra lo bastante grande para leerse desde el otro lado de la sala. Pregunta a tu imprenta qué resolución quiere; los banners grandes suelen imprimirse a partir de archivos muy por debajo de 300 ppp porque nadie los mira de cerca.

Para stands y escenarios, consulta diseño de fondos para eventos, y para formatos grandes en papel, tamaños de póster.

Un mismo aspecto en todos los banners

La mayoría de la gente necesita cinco o seis banners a la vez: LinkedIn, X, YouTube, una cabecera de email, el hero de una web. Parecen una sola marca cuando el fondo, la tipografía y el color se mantienen y solo cambia la composición. Un degradado es ideal para esto porque no tiene un sujeto que recortar, siempre que se renderice para cada forma en lugar de estirarse.

En Gradiently, un Mark se renderiza de nuevo en cada tamaño de banner, desplaza su zona más tranquila detrás de tus palabras y deja que la tinta automática elija texto claro u oscuro en cada línea. Con Pro, un diseño se adapta a todos los tamaños en un solo paso, así que los banners de LinkedIn, X y YouTube llegan juntos. La idea de un fondo reconocible se trata en un aspecto propio.