En este post te cuento 11 consejos que deberás tener en cuenta cuando diseñes un banner, tanto para Adwords como para tu web, blog, etc.

¡Hola! ¿Cómo va todo por ahí? ¿Bien? ¡Espero que si! Yo por aquí estoy, nervioso, triste y contento a la vez. ¿Te lo puedes creer?

Contento porque mi amigo Carlos y sus compañeros de CommunityMe han conseguido ganar el premio Bitácoras al mejor Blog de Marketing y Social Media con su fantástico “No sin mis Cookies”. ¡Enhorabuena!

Triste porque, por el contrario, Víctor Martin no lo ha conseguido (por muy poquito) con su podcast The Success Academy que, si me lo permites, para mí es ganador desde su capítulo uno. ¡Ánimo Víctor!

Y nervioso porque mañana Martes 25 de Noviembre de 2014, a las 19:00 horas (GMT+1) impartiré un Webinar a través (y gracias a) Semrush. ¡En serio! ¿Cómo no iba a estar nerviso? ¿Conseguiré estar a la altura?. En el Webinar contaré desde cero cómo diseñar y crear un banner animado HTML5 y cómo subirlo a Google Adwords. Como es gratuito y no es tampoco a una hora de estas de pillarte haciendo la cena o tal … ¿te apuntarías? Ver nombres conocidos me hará sentir en familia … Jejejejeje.

Bueno, pues a raíz de este Webinar he estado recopilando información y consejos sobre cómo deberíamos diseñar un banner y eso es lo que he querido compartir contigo en este post. Are you ready?

[piopialo vcboxed=»1″]Los tamaños de banner con mejor rendimiento según Google Adsense.[/piopialo]

1 – Diseña tus banners al menos en los tamaños más usados

Según la ayuda de Google Adsense, los tamaños de Banners más usados y que suelen tener mejor rendimiento son los siguientes:

• 300x250px. También conocido como “medio rectángulo” es uno de los formatos más usados tanto por anunciantes como por bloggers. Aunque se conozca como rectángulo, su proporción es casi cuadrada. Se suele colocar dentro o al final de los artículos.
• 336x280px. Éste se conoce como “rectángulo grande” y también reúne las características expuestas en el anterior, tanto en volumen de usos como en proporciones. También se suele colocar dentro del texto o al final de los artículos.
• 728x90pxConocido como “leaderboard”, es un tamaño que suele colocarse en los encabezados o pies de artículos y páginas y en los foros.
• 300x600px. Se le suele llamar “media página” y su principal ventaja es que su tamaño permite jugar con buenas creatividades y mostrar mucha información. Es menos usado que los anteriores, aunque también está dentro del ranking de los más usados y con mejor rendimiento.
• 320x100px. Este es un tamaño muy recurrido y con muy buenos resultados en móviles.

Por tanto, si tenemos dudas sobre qué tamaños queremos diseñar para nuestro banner o si no tenemos recursos para diseñar y crear más formatos, éstos son los más recomendados.

[piopialo vcboxed=»1″]3 Elementos imprescindibles en todo diseño de Banner[/piopialo]

2 – Mantén una jerarquía coherente

Por norma general, las campañas de Display suelen tener como objetivos principales aumentar la notoriedad de la marca y dirigir tráfico a nuestro sitio web.

Para cumplir estos dos objetivos, deberemos incluir y ordenar estos tres elementos y, sobre todo, tener en cuenta la importancia de cada uno:

• Nuestro logotipo. Nos ayudará a cumplir el primero de los objetivos además de dotar al banner de la fuerza y valores de la marca. Es un elemento muy importante, que debe tener cierto protagonismo visual pero nunca mayor que los elementos siguientes.
• La propuesta de valor. ¿Qué te ofrezco? ¿Por qué ibas a hacer clic? ¿Qué beneficio obtendrás si pinchas en el banner? La respuesta a esta pregunta es clave ya que el usuario tendrá que tener una razón de peso para invertir energía y tiempo en nuestra propuesta. Por tanto debe incluir información muy interesante para tu público, ofertas importantes, descuentos, precios, nuevos productos, etc. Además, deberá ocupar el máximo espacio en el Banner y captar la atención e interpretarse muy rápidamente.
• La llamada a la acción. ¿Qué tengo que hacer para conseguir lo que dices en tu propuesta de valor? La respuesta a esta pregunta la tiene que dar el tercer elemento: la llamada a la acción. Por norma general son palabras imperativas como “Descarga ahora”, “Infórmate” o “Haz clic” … NO! “haz clic” no vale, lo prohíbe Google. ¡No lo olvides!

Al menos estos tres elementos, aunque podrás añadir un cuarto que veremos más adelante: un elemento gráfico o fotografía que apoye a la propuesta de valor. Luego lo vemos ¿vale?

3 – Mantén un diseño limpio, ordenado y sencillo

¿A ti no te ha pasado alguna vez que te cruzas con la prima de la sobrina de la tía antoñeta de la vecina Josefa y se pone a contarte que si la otra noche, que estaba ella cocinando, una cremica de verduras que compró en el mercao porque estaban baratas porque la mujer del frutero, que ahora está muy desfarrajusta, no se, se la ve triste con esos ojos así oscuros de no dormir, porque yo cuando no duermo, pos chico, pos me pongo un poco de hemoal que eso es mano de santo…”

Seguro que si y, si no, te invito a que te des una vueltecita por mi pueblo y verás que experiencia más enriquecedora. Jejejejeje.

No, en serio, mantén tu composición lo más simple y sencilla que puedas dentro de tu idea creativa. Recuerda que sólo hay un segundo para captar la atención y trasmitir el mensaje.

[piopialo vcboxed=»1″]Es importante encerrar el banner dentro de un borde que aisle su contenido del resto de la página.[/piopialo]

4 – Delimita tu banner en una composición cerrada

Por lo general, nuestros ojos se sienten atraídos y nuestro cerebro es capaz de procesar mejor los mensajes visuales de espacios correctamente delimitados ya que los interpreta como un todo aislado.

Amos, dicho de otra forma, cuando una composición está delimitada, nuestro cerebro la procesa e interpreta de forma aislada al entorno en donde está colocada.

Joer, los dos párrafos suenan mucho a libro. Cuando bordeas un banner la gente se siente más atraída y entiende mejor el mensaje.

La última mejor, ¿no? Ya sabes, nunca olvides delimitar con un sencillo borde tu banner.

5 – Coloca textos que se lean al instante

Está de más recordarte que disponemos de uno o unos pocos segundos de atención, como mucho mucho así que no lo voy a hacer pero sí que te voy a decir:

• Utiliza: Diferentes tamaños para el texto, colocando el mensaje principal más grande y la explicación o texto adicional más pequeño y nunca superes las 4 líneas cada uno.
• No utilices: Fuentes cursivas, de escritura manual o demasiado finas que hagan difícil su lectura. Tampoco es recomendable escribir los textos sólo en mayúsculas y tampoco utilices tamaños muy pequeños (menos de 10pt).

En definitiva, intenta que se lea de un vistazo. Trata de jugar con el texto para destacar la propuesta de valor y que ésta se capte en un instante.

[piopialo vcboxed=»1″]Diseño de Banners: siempre acorde a tu página de destino.[/piopialo]

6 – Haz el diseño acorde a la página de destino

Esto también es muy importante. Muchas veces utilizamos generadores de Banners y escogemos banners muy chulos pero que presentan un grave problema: su diseño no tiene nada que ver con la página a la que llevaremos al usuario.

Esto es un problema porque, si escogimos el diseño pensando en que es suficientemente bueno como para atraer clics, la ruptura de diseño confundirá al usuario y se irá rápidamente.

Con lo cual, pagaremos por clics que, más que beneficiarnos, nos perjudicarán.

Así que tienes que procurar usar el mismo esquema de color y fuentes que en tu página de destino. Al menos eso. Si, además, puedes usar la misma imagen, mejor que mejor.

Ah! Y, sobre todo, el mismo mensaje y que se capte muy rápido. Si tu propuesta de valor es “50% de dto hasta el 31 de Diciembre” entonces, en la página de aterrizaje, éste debe ser el texto que primero se lea.

[piopialo vcboxed=»1″]El tamaño Importa … en el diseño de banners.[/piopialo]

7 – El tamaño SI importa

De verdad, ¿cuan recurrida es esta puñetera frase? ¿Por qué no decimos “el importa si tamaña y punto”? ¿A que está más chula?.

Bueno, con frase o sin ella, que sepas que en este caso es muy importante. Google impone muchas limitaciones en el tamaño de archivo que vamos a subir que, por lo general, no puede superar los 150 Kb.

Y eso es muy poquito. Así que lo más importante es que diseñes tu Banner en el tamaño real y que trates de optimizar al máximo las imágenes, exportándolas al formato adecuado para que no superen este tamaño.

Si no utilizas fotografías reales, sólo vectores y texto, quizás el formato PNG te resulte mejor. En caso contrario, opta por JPEG pero haz pruebas. Yo he podido comprobar que imágenes guardadas a 60 % de calidad se ven perfectamente.

[piopialo vcboxed=»1″]No siempre hay que utilizar imágenes cuando diseñas un banner.[/piopialo]

8 – Utiliza imágenes para reforzar el mensaje, pero no siempre

Está comprobado que utilizar ciertas imágenes te puede ayudar a reforzar el mensaje o incluso, si tienes la suficiente astucia, captar esa carísima atención del usuario.

Sin embargo, no siempre es necesario recurrir a las fotografías o imágenes. Un banner con una tipografía y colores agresivos puede dar muy buenos resultados.

¡Y recuerda que las imágenes puede hacer que el tamaño crezca!

[piopialo vcboxed=»1″]Añade un carácter de urgencia en tu diseño de Banner.[/piopialo]

9 – Añade un sentimiento de Urgencia

Este me encanta. ¿Verdad que si te dicen “ahora o nunca” te lo piensas dos veces antes de pasar del tema?

La sensación de urgencia es una de las técnicas de marketing (o neuromarketing, o detodalavidamarketing) más recurridas y con mejores resultados.

Sólo hasta mañana, sólo esta vez, hasta el 31 de Diciembre, quedan 2 plazas, hasta agotar existencia que quedan pocas, etc. Éstos mensajes son los que harán que quien vea el banner piense “ostras, como me pierda este chollo y luego resulte que mi cuñado si lo aprovechado verás…”.

10 – Escoge los colores adecuados

Madre mía, te juro que podría escribir un único post acerca de los colores en los banners, las emociones que evocan, los que según los estudios convierten mejor y un sin fin de doctrinas, técnicas y tendencias.

Pero voy a preferir darle un poco al sentido del común:

• No te pases con los colores. A no ser que tu oferta o producto sea de pinturas, colores, etc, intenta no abusar de colores. 2 o 3 como mucho suelen ser un buen número para que el diseño permanezca simple y sea atractivo.
• Utiliza colores que vayan acorde a tu marca, producto u oferta. Por lo que te he comentado antes de que tiene que tener credibilidad y concordancia con la página de destino.
• Utiliza contrastes que faciliten captar el mensaje. Siempre que puedas, si utilizas un fondo de color sólido y fuerte, utiliza colores que contrasten muy bien para el texto.
• Evoca emociones. Si todavía tienes margen para escoger colores, puedes leerte este artículo de 99 designs donde te cuenta cómo los colores afectan a las emociones y comportamientos y escoger el que mejor se adapte a tus objetivos.

¿Cómo vas de fuerzas? Yo estoy agotado! ¿Un chiste súper malo? “¿Por qué los gatos Maullan? Para atraer los ratones angloparlantes… “ Dios! Jajajaja. Por favor, no me pegues, ¿vale?

[piopialo vcboxed=»1″]Los banners animados dan mejores resultados, si están bien animados.[/piopialo]

11 – Considera animar tu banner … pero con cabeza

Estadísticamente, los banners animados superan en rendimiento a los estáticos. Peeeero, esto es muy general porque existen diseños estáticos que son la repera y banners animados que no valen ni para el culín.

Entonces, si te atreves a animar el banner, debes recordar:

• La animación no puede distraer de la propuesta de valor. Vamos, que no pongas un gatito parpadeando todo el rato porque entonces nadie leerá el texto. ¡Eso es hipnotizante!
• Lo primero que debes mostrar es la propuesta de valor. A mi me ha pasado que construyo un timeline que lleva a la propuesta de valor. Esto mola para anuncios de televisión o para el cine. Para Banners, primero di lo que conseguirás y luego anímalo para que sea más atractivo.
• Haz el banner cíclico pero nunca más de 3 repeticiones. Como no sabes en qué momento va a mirar (o tener la oportunidad de hacerlo) el usuario, debes repetir la animación para aumentar las posibilidades. Sin embargo, no es recomendable que la animación sea cíclica. ¡No te pases o no te aprobarán el anuncio!
• Que la llamada a la acción concluya la animación. Si es recomendable comenzar con la propuesta de valor, es recomendable acabar con la llamada a la acción, para que el usuario sepa qué hacer ahora. Si me lo permites, yo te diría que lo mejor es que la llamada a la acción esté siempre visible.

¡Ah! Se me olvidaba. ¡Hazlo en HTML5 para que se pueda ver en PCs y Móviles! Si quieres, puedes apuntarte a este webinar donde explicaré paso a paso y desde cero cómo crear un banner animado.

Conclusiones finales.

Madre mía! ¡Pedazo de artículo no? Jajajajaja. Como siga así voy a tener que darlos por fascículos. Cachesenlamar…

Bueno, pues ya ves que algo tan sencillo como crear un Banner encierra un sin fin de preguntas que hacerte, decisiones que tomar y cositas que tener en cuenta. Pero esto, como todo, son recomendaciones basadas en experiencias previas y estadísticas. ¿Y si te atreves a probar cosas distintas? ¿Y si das con una idea que rompe todas las estadísticas?

Podría ocurrir. Así que, después de dormir la siesta, ¡aventúrate a probar cosas diferentes!

Y…. Ah, si. ¿Me dejas un comentarico porfi? Es que últimamente tengo poquicos y me pongo triste. Enga, las preguntas: ¿Añadirías algo a esta lista de recomendaciones? ¿Hay algún punto del que no estés de acuerdo? ¿Cuál consideras más importante? ¿Estás de acuerdo con la expulsión de Omar? ¡Cuenta cuenta!