Así es como tu click-through rate se dispara con el diseño de un buen banner ad

Banner ads para incrementar CTR

El humilde banner ad, como olvidarlo.

Lo que alguna vez fue el principio de la publicidad en internet, ahora es odiado y se bloquea tanto como sus horribles antecesores con puro texto.

Sin embargo, esta herramienta todavía juega un papel fundamental en el panorama de la publicidad online y asegurarse de que el diseño de tu banner ad sea visualmente impactante (recuerda, todo se trata de llamar la atención rápido) es importante.

Basado en esto, a continuación te mostramos 20 banners increíblemente atractivos. A lo largo de este artículo encontrarás algunas plantillas de Canva, que si haces clic en ellas, las abrirás y las podrás personalizar para crear tus propios banners. Para saber cuáles son las plantillas que puedes personalizar, busca las que tengan la leyenda “Edita este diseño en Canva”.

01. Destaca tu logotipo

fb_banner-tb-800x0

Buatoom

Haz que tu logotipo o marca sea el centro de atención. Buatoom nos da ejemplo en este banner ad para Omise.

02. Hazlo plano

grovo-ads-tb-800x0

Alex Collins

Las ilustraciones están aquí para quedarse. Son visuales hermosos y le darán vida a cualquier banner. En el ejemplo de arriba, Alex Collins texturizó su diseño, pero si eso no es de tu preferencia, puedes dejarlas perfectamente planas.

1-18-tb-800x0

Edita este diseño en Canva

En nuestra biblioteca, contamos con varias opciones de ilustraciones, las cuales puedes usar si van con tu estilo. Agrégalas a tu plantilla o personaliza una característica y úsalas.

03. Juega con el difuminado

El difuminado es más común en el diseño de interfaces de usuario. Sin embargo, actualmente se han estado usando en otras áreas del diseño, como los banners.

banners_xsolla-tb-800x0

Alexander Tolstov

Los difuminados, como el de nuestra plantilla que ves arriba, pueden ayudarte a destacar rápidamente un título o logotipo e igualmente le agregan una característica que siempre es buena en las composiciones, la profundidad.

04. Utiliza la cuadrícula

Las cuadrículas son herramientas de organización que puedes usar para facilitar el proceso de diseño. Te llevará unos minutos armarlas, pero a la larga, te ahorrarás un chorro de tiempo.

41797a29c7232008eb6e380f050f805c-tb-800x0

Houzz

3-18-tb-800x0

Edita este diseño en Canva

No hay razón alguna por la cual tus diseños tengan que ser muy elaborados, con tan solo alinear unas imágenes impresionantes podrás crear un banner ad efectivo.

05. Prueba con una paleta monocromática

¿Crees que los diseños monocromáticos son aburridos? Chécate el siguiente diseño basado en el día de la tierra y vuélvelo a pensar. Con sus matices de marrón, este banner ad es todo menos aburrido.

earth_day-tb-800x0

Raquib Ahmed

Screen-Shot-2016-10-18-at-11.29.05-AM-tb-800x0

Edita este diseño en Canva

Si no te quieres atener a un solo matiz, puedes usar variaciones de un par de colores, tal cual lo hicimos arriba.

06. Cuadra la tipografía por bloques

La forma en la que decidas diseñar el layout de la tipografía en tu banner ad puede orientar la atención de tu audiencia. De hecho, colocar tu tipografía en bloques es una gran estrategia para destacar tu call-to-action, pues la mirada de las personas será dirigida de arriba hacia abajo.

a1a91dbafd9a33f3d1dd9e9cdc561568-tb-800x0

Starbucks

2-18-tb-800x0

Edita este diseño en Canva

Sin embargo, debes estar pendiente al trabajar con esta técnica, pues puedes crear una composición aburrida con tipografías del mismo estilo montadas de la misma manera. Por esta razón es importante que utilizes combinaciones de tipografías que se vean increíbles. ¿No es algo que te gustaría hacer? No lo pienses dos veces, utiliza una de nuestras soluciones.

07. Prueba con colores llamativos y que contrasten

Si no estás seguro que colores se contrastarán, utiliza la rueda de colores y elige los colores complementarios. De la misma manera, puedes optar por combinaciones de colores poco comunes, como rojo y morado, que si bien no son complementarios, todavía te ayudan a crear contraste.

f755472b44d7f80b3da148b96a66aac8-tb-800x0

Spotify

Untitled-design-61-tb-800x0

Edita este diseño en Canva

En nuestra plantilla, hemos seleccionado visuales que cuentan con colores contrastados, creando un diseño excepcional. Recuerda, para editar solo tienes que hacer un clic.

08. Opta por la clásica superposición de colores

Una de las formas más sencillas de estilizar imágenes es la superposición de colores. Lo mejor es la flexibilidad que ofrecen; pueden ser de una sola tonalidad, usando dos o más colores e inclusive, ni siquiera tienen que ser lisos. Debajo, verás ejemplos de superposiciones de degradados.

3c6ca7ed6fe2961ec1257a2997d77f1d-tb-800x0

American Apparel

Untitled-design-63-tb-800x0

Edita este diseño en Canva

Cuando se trata de superposiciones de color, el texto en blanco tiende a destacarse con mayor claridad. Incorpora más color en tu banner y asegúrate de que el texto sea llamativo,  justo como en la plantilla de arriba.

09. Incorpora una tipografía hecha a mano

Es un hecho que las fuentes manuscritas son elementos expresivos y encantadores, con los que se puede generar distintas sensaciones, razón por la cual hay que saber elegirlas.

b7fcd1dfe46d6766387133f3729336d0-tb-800x0

Good Eggs

2-18-tb-800x0

Edita este diseño en Canva

¿Tu letra es ilegible? No te preocupes, nosotros te ayudamos. En nuestra biblioteca, encontrarás un montón de tipografías con las que podrás conseguir el aspecto que quieras igual manteniendo la legibilidad.

10. Juega con los patrones

Las estaciones o un día festivo son oportunidades únicas para diseñar patrones que se basen en temáticas especiales. Si este es un método que quisieras emplear en tus diseños, reemplaza las imágenes con las que normalmente creas tus patrones y deja que tu layout te guíe.

ef3629480d3f571b66c0676ef046165c-tb-800x0

Whole Foods

Screen-Shot-2016-10-18-at-10.33.37-AM-tb-800x0

Edita este diseño en Canva

Los patrones son herramientas que puedes crear incluso con las figuras geométricas más básicas. En este caso, hemos seleccionado figuras lisas, pero los contornos también sirven perfectamente.

11. Diseña un layout con la tipografía como pieza central

Si tienes un banner ad para el cual no tienes imágenes, crea una composición atractiva solo con la tipografía. En este caso, lo primero que tienes que hacer es decidir qué fragmentos son los más importantes y estilizarlos para que sean lo primero que tu audiencia ve. Por ejemplo, en el siguiente banner de J. Crew, lo primero es ese gran descuento.

Untitled-design-70-1-tb-800x0

J.Crew

5-15-tb-800x0

Edita este diseño en Canva

Lo más probable es que con tu banner ad quieras promocionar una gran oferta. Así como tus clientes pueden ahorrar dinero, puedes ahorrarte el tiempo que pasas diseñando usando nuestra plantilla como la base.

12. Se explícito

El refrán ‘una imagen vale más que mil palabras’ cobra vida en este punto, pues hay un millón de formas en las que puedes describir tu producto, pero si tu audiencia lo puede ver, es más probable que lo compre. Así que, diseña el banner ad en torno a las fotografías del producto y muéstralo en toda su gloria.

1b994382b5fab549a8c1e2474018a182-tb-800x0

Tiffany & Co.

8-10-tb-800x0

Edita este diseño en Canva

Aunque, esto no significa que no debas incorporar texto. Por ejemplo en el banner de arriba lo incluimos, pero los deliciosos cupcakes son el elemento dominante.

13. Ahorra tiempo con las plantillas

Como las ofertas se dan en varias ocasiones y diseñar un nuevo banner para cada una es toda una molestia, es muy probable que vayas a usar la misma clase de banner varias veces. Por eso, es muy recomendable que definas la clase de banners que necesitarás y crear plantillas sencillas que puedas reusar cuantas veces quieras. Madewell, por ejemplo, utiliza bordes alegres en la suya.

65cf28634d017874a47aa02ee4961bf0-tb-800x0

Madewell

Cuando de plantillas se habla, los bordes brindan mucha flexibilidad. Puedes reemplazarlos fácilmente y crear algo nuevo. Arriba, nosotros cambiamos la imagen de Navidad y produjimos un nuevo banner en tiempo récord.

14. Resalta tu call-to-action

Usar un color brillante en tu call-to-action no es suficiente, tiene que verse como un elemento que no le dé otra opción al usuario que realizar la acción. En este sentido, puedes estilizarlo para que sea como un botón o subrayarlo para dejar claro que es un vínculo.
Igualmente, es importante colocar el texto correcto en tus CTAs, usando un lenguaje sencillo, es decir, solo una palabra o dos.

 

b01302847bab65b707f5088d54298f2e-tb-800x0

Nike

La posición y jerarquía son dos elementos de tu banner igual de importantes que los mencionados. No ocultes el CTA, utiliza otros elementos en tu layout para guiar la mirada de la audiencia hacia dicha herramienta. Si todavía estás en el proceso de aprender a crear jerarquía, puedes usar la plantilla que incluimos en este punto.

15. Utiliza colores atractivos

Si quieres usar color para estar seguro de que tu banner llama la atención, tienes que considerar el contexto. Toma como ejemplo un banner que se diseñe para Facebook, en el que, un matiz azul, por muy claro que sea, va a pasar desapercibido. En este caso, un anaranjado brillante sería mucho mejor.

1475a2f5413c372c15cdce471459d911-tb-800x0

Slack

Sin embargo, elegir solamente un matiz brillante no es suficiente, pues tienes que saber cómo usarlo en tu composición. Para diseñar un banner que se destaque, no limites el uso del color atractivo solo a los pequeños detalles, sino úsalo en grandes bloques, así como lo hicimos arriba.

19. Cura tu fotografía

Las imágenes que elijas para tu banner tienen que ser de la mejor calidad, es decir, que deben ser impresionantes y que al mismo tiempo, se puedan ver perfectamente en todos los tamaños. En Canva, tenemos una gran biblioteca con imágenes de alta calidad, no dudes en darle un vistazo.

d4c8c726c629897774500fae5b3b7404-tb-800x0

Herschel

Screen-Shot-2016-10-18-at-11.52.43-AM-tb-800x0

Edita este diseño en Canva

Asimismo, las fotografías deben verse bien con el texto y ser de ayuda en la expresión del mensaje del banner. Si cuentas con más de una opción, crea distintas composiciones y determina cuál se ve mejor, así podrás aprender del proceso y cuando sea el turno del siguiente diseño, sabrás cómo hacerlo mejor.

18. Trabaja con degradados

En la actualidad, los degradados son muy populares, los vemos en diseños impresos, medios digitales y en interfaces de usuario. Algunos son monótonos, mientras que otros, como el siguiente, combinan un par de matices.

22fa100b57346ca80d8a6d81c9c11f1b-tb-800x0

Spotify

Con los degradados se pueden crear fondos interesantes, e igualmente son filtros de fotos encantadores. En general, las opciones que los degradados brindan son muy variadas, como variar la intensidad de un solo color o usar dos colores que se deriven uno del otro.

17. Juega con las texturas

Ver las texturas como fondos es muy común, sin embargo, esa no es la única forma que puedes emplearlas, pues las puedes usar para llenar el interior de las letras, usarlas en elementos de diseño o incluso como filtros de fotos.

Cuando usas texturas o fondos texturizados, lo importante es el contenido, asegurarte que no se pierda y que sea fácil de leer, algo que no se puede hacer con un fondo cargado. Una herramienta muy útil que puedes usar para que el contenido sea legible es el color, así como lo hicimos en nuestra plantilla.

16. Figuras, figuras y más figuras

Las figuras son elementos de diseño extremadamente versátiles, que se pueden usar para crear texturas, ilustraciones o si lo prefieres, únicamente como recursos decorativos.

a8bc03fb79564e63e14904f0531d6d32-tb-800x0

SAP

Screen-Shot-2016-10-18-at-12.34.27-PM-tb-800x0

Edita este diseño en Canva

En nuestra plantilla, las hemos usado en más de una forma. Las figuras principales son las de color rosa, que le agregan interés visual a la composición, mientras que todos los demás elementos ayudan a estructurar el texto.

20. Incorpora títulos llamativos

Si tu banner cuenta con mucho texto diminuto, ten por seguro que será difícil de leer, así que cuando estés elaborando el texto de tu banner, trata solo de emplear un título conciso y breve que lo puedas colocar en un gran tamaño, para aumentar así su legibilidad.

f2cc7e6cfe8af79ca2678a4d924283ae-tb-800x0

Fab

7-10-tb-800x0

Edita este diseño en Canva

Cuando tienes una oferta, lo recomendable es que tu audiencia a.) Sepa que estás haciendo una y b.) Se enganchen cuando vean lo mucho que se ahorra. Así que, cualquiera de los dos móntalos en una fuente grande y llamativa para que tu audiencia no se pierda en la web.