Imprescindibles Marketing Online

11 consejos para diseñar un banner

Diseño de Banners

Te cuento 11 consejos que deberás tener en cuenta cuando diseñes un banner, tanto para Google Adwords como para tu web, blog, etc. Y, como siempre, algo más …

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?

Los tamaños de banner con mejor rendimiento según Google Adsense. - piopíalo    

Powered by Vcgs-Toolbox

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.

3 Elementos imprescindibles en todo diseño de Banner - piopíalo    

Powered by Vcgs-Toolbox

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.

Es importante encerrar el banner dentro de un borde que aisle su contenido del resto de la página. - piopíalo    

Powered by Vcgs-Toolbox

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.

Diseño de Banners: siempre acorde a tu página de destino. - piopíalo    

Powered by Vcgs-Toolbox

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.

El tamaño Importa … en el diseño de banners. - piopíalo    

Powered by Vcgs-Toolbox

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.

No siempre hay que utilizar imágenes cuando diseñas un banner. - piopíalo    

Powered by Vcgs-Toolbox

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!

Añade un carácter de urgencia en tu diseño de Banner. - piopíalo    

Powered by Vcgs-Toolbox

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?

Los banners animados dan mejores resultados, si están bien animados. - piopíalo    

Powered by Vcgs-Toolbox

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!

¿Qué te ha parecido este artículo?

¡Espero que te haya gustado! ¿Me permites pedirte un favorcito?

1. Participa con tu comentario

Los comentarios son el alma de este blog. Aquí se premia la participación y la comunidad es lo más. ¡Prueba!

Dejar un comentario

2. ¡No olvides compartirlo!

Se llama generosidad: si algo te gusta y puedes compartirlo, ¿por qué no hacerlo?

¡Millones de gracias! Te lo agradezco un montonazo, de verdad.

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado.

Hazte notar. ¡Participa!

*

25 comentarios

  • Víctor, ya sabes que la tecnología no es mi fuerte. Así que añadiré algo que es obvio, aunque a veces lo olvidemos: Pásatelo bien con tu banner y tu blog.

    Puede que otras personas estén un segundo en tu blog y tengas que engancharlas al vuelo. Pero posiblemente, tu blog sea de las cosas en las que pases tú más tiempo. Así que vale más un banner sencillo con el que te encuentres a gusto que con uno supercomplicado que se vea a la legua que no tiene nada que ver con tu blog.

  • Pues si y no… No me gusta Omar pero hubiese preferido q expulsaran a Luis q me cae fatal. Jaja
    Como tampoco estoy muy puesto en lo otro lo leeré más detenidamente a ver si me entero bien…
    Un saludo

  • Hola Víctor! Estupendo post, como siempre! Me han encantado tus 11 consejos!
    Me quedo con el 12….” Atrévete aprobar cosas distintas, innova y échale imaginación”
    ayyy! no te pongas triste!!!!
    Feliz comienzo de semana! 😉

  • por cierto….creo que tu Blog sigue con el horario de verano….Look las horas de los comentarios!
    Un abrazo! 😉

  • ¡Hola Víctor!

    Me encanta este post y además lo voy a necesitar en breve, así que me acabo de inscribir en el webinar. Me parece muy interesante. Espero que no se me complique la cosa a última hora y poder asistir (sino me tiraré de los pelos, te lo prometo).

    Hasta mañana 😉

  • Hola,
    hacia tiempo que no pasaba por aquí, has cambiado de diseño y todo.
    Precisamente encargué un banner para que me hicieran y es que lo puedo hacer yo pero me ahorro tiempo. La cosa es que estuve practicando para hace run banner animado con la herrmaienta de google Web designer, me da el código pero no se ve cuando lo pongo en el blog. No sé si tú has utilizado esta herramienta?

    • Hola Diego!

      Pues precisamente con esa herramienta haré el banner mañana durante el Webinar así que igual te interesa pasarte y ver cómo va. Creo que para insertarlo en un blog tendrías que hacerlo con un Adserver o, más fácil, con un iframe. ¿Has probado esa opción?

      Saludos!

  • ¿Lo que hicimos con #Bundi y #Blogramé era un banner?

    Ay, madre mía… que ya es tarde y me estoy perdiendo. Claro, es que pones tantas letritas, que revoloteando de arriba a abajo y vuelta a subir, me estoy mareando.

    Sobre los consejos: el único que no me gusta es el de la urgencia. Sí, ya sé que es muy efectivo, pero eso de que te pongan prisa, me tira para atrás. Debo ser rarita…

    Respecto al banner animado, creo hay que tener muy buen gusto y mucho dominio del diseño para hacerlo bien.

    Por cierto, no sabía que se penaliza eso de “haz clic”…

    • Muy buena tu aportación #Bolboreta!!

      Con lo de “Haz Clic” no es que se penalice, es que no está permitido en las políticas de Google Adwords.

      Ah! Y que sepas que me has sembrado inseguridad con lo del Banner animado. jajajajajaja.

      Saludines!

  • ¡Muchas gracias Víctor! Ya te dije que un trocín de esa “B” que nos dieron es tuya por tu apoyo y ese gran post que escribiste.

    Por cierto, este post me lo guardo en favoritos para trabajarlo con calma, ¡contenido muy útil!

    ¡Un abrazo!

    • Hola Juan!

      Para mí fue un auténtico honor ser invitado a vuestro maravilloso “No sin mis Cookies” y creo que es merecidísima vuestra victoria.

      Por eso me hace aún más feliz que te haya resultado útil este post.

      Abrazos! 🙂

  • Enhorabuena, Víctor!
    Sin esperar a más te guardo en favoritos para visitarte.
    Y gracias por tu aportación.
    Feliz día a todos!

  • Muy bien aporte. Solo una pregunta a ver si me puedes ayudar. He creado un par de banners bastante chulos, lo único es que ha la hora de alojarlo en la web, cuando cargas la página tengo una latencia muy grande de un segundo y pico después de haber cargado el resto de imágenes y texto, y la animación empieza desde el segundo 0. Pesan muy muy poco y aun así tienen esta latencia en carga. Espero que puedas ayudarme. Muchísimas gracias.

    • Hola Rubén!! Es normal que haya latencia porque el javascript tardará en cargar. Pero también es muy probable que el problema venga porque el banner sea muy pesado. Digo yo. ¿Has mirado cuánto pesa? Hay animación javascript? Es gif?

      A ver si podemos echarle un ojo …

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies
Víctor Campuzano

¡Muchísimas gracias por comentar!

Has hecho algo muy grande, que lo sepas. Te estoy tan agradecido que me gustaría ofrecerte un regalo: un ebook sobre "Growth Hacking para impulsar rápidamente tu proyecto". Bueno, y algunas cositas extra que descubrirás si te suscribes. ¿Me aceptarías en tu buzón? Porfi, porfi, porfi...

¡Perfecto! Te has suscrito correctamente

Víctor Campuzano

¡Ey que te mola mi blog ¿eh?!

He detectado que has visto más de 3 páginas en esta sesión y, digo yo... ¿Te está molando? Si es así, suscríbete y recibirás cada nuevo post en tu buzón, regalos exclusivos, contenido privado.. ¡Lo más de mi! ¿Quieres? ¿Si? ¡Bien!

¡Perfecto! Te has suscrito correctamente