¿Cómo diseñar anuncios publicitarios profesionales para tu periódico digital?

El cuidado de la imagen tu periódico digital es un factor clave para que el público se sienta en un espacio serio y de calidad, percepción que se irradia también hacia los contenidos.

Ya he escrito sobre Canva en otro artículo de este blog, pero si aún no la conoces, Canva.com es una herramienta online para crear todo tipo de diseños, desde logotipos, post para redes sociales, portadas, Flyers y también anuncios para publicidades, tema este último sobre el que voy profundizar en este artículo para mostrar de qué manera puedes crear fácilmente tus anuncios publicitarios de estética profesional.

Las plantillas y diseños que ofrecemos en Medios CMS son de tecnología Responsive (significa que se adaptan a todo tipo de dispositivos y pantallas), además, cada espacio para publicidad se adapta a la imagen que queremos publicar. Todas estas condiciones son grandes ventajas porque flexibiliza las dimensiones de los banners y evita la estructura y dimensiones fijas, pero al mismo tiempo requiere tener una idea general de lo que es un píxel y las dimensiones en Píxeles. Aquí es donde Canva nos va a permitir generar anuncios increíbles prácticamente sin conocimientos de diseño.

Introducción a parte, vamos directo al grano. Lo primero que necesitamos hacer es determinar los espacios para anuncios de nuestro sitio. Para eso activamos la maqueta de publicidades y veremos que cada espacio posee un código que lo identifica: FH1, FH2, FH3, Splash, H1, E1, E2, P1, etc.

Para cada espacio (identificado por su código) podemos crear un banner diferente, pero si deseamos mantener un nivel de estética profesional, necesitamos seguir una línea de diseño que no "rompa" con nuestro sitio.

Por ejemplo: En la portada del sitio, los espacios FH1 y FH2 son espacios flotantes a la derecha e izquierda del sitio respectivamente, pero será más bonito y cuidado si mantenemos las mismas dimensiones y estética para cada uno de esos espacios. Lo mismo aplica a otros espacios similares.

Canva.com puede recomendar plantillas prediseñadas para ciertas dimensiones, esta es la parte que más nos interesa para obtener diseños profesionales.

Lo primero que vamos a hacer es ingresar a Canva.com. Si aún no tenemos cuenta vamos a crear una. Es gratis! Una vez dentro del panel de administración de Canva vamos a hacer clic en Dimensiones personalizadas. Para los espacios FH1 y FH2 recomiendo utilizar las dimensiones de 150px de ancho por 600px de alto.

Ahora comenzamos a diseñar
Veremos que Canva nos ofrece una serie de Plantillas prediseñadas de gran calidad estética. Algunas de esas plantillas pueden ofrecer dos o más variantes. Si posamos el mouse sobre una de estas plantillas veremos si el diseño ofrece más de una variante como muestro en el ejemplo siguiente.

Ahora hacemos clic sobre uno de los diseños para aplicarlo a nuestro lienzo.

Perfecto! Ya tenemos un bonito diseño según las dimensiones que necesitamos, ahora solo resta modificar los textos y logotipos para luego descargar el banner. Esto lo logramos intuitivamente haciendo clic sobre el texto para modificarlo, luego sobre el logo para reemplazarlo por el nuestro, y para finalizar descargamos el banner en formato JPG.

Podemos ahora repetir el proceso para elegir otra variante de la misma plantilla y así obtener un diseño diferente pero de la misma línea, logrando justamente una coherencia y cuidado de la estética de nuestro sitio.

El resultado:

Continuamos ahora con los demás espacios publicitarios utilizando la metodología aprendida.

¡Dimensiones y recomendaciones!
Ahora que ya sabemos como crear un banner de diseño profesional, tenemos que simplemente definir las medidas de los demás espacios publicitarios. Para que este artículo sirva de guía, voy a listar cada espacio publicitario y las dimensiones que, a mi parecer, se funden perfectamente con un sitio y no molestan a los visitantes.

FH1 y FH2
Para los espacios laterales flotantes recomiendo las dimensiones de 150px de ancho por 600px de alto.

Splash
Para el espacio emergente Splash recomiendo las dimensiones de 800px por 800px de alto.

FH3
Para el espacio flotante al pie del sitio FH3 recomiendo las dimensiones de 1200px por 150px en el caso de computadoras de escritorio o pantallas grandes. Para la visualización óptima en dispositivos móviles recomiendo las dimensiones de 720px por 300px.

No es necesario producir un banner para desktop y otro para móvil ya que el mismo banner se adapta a cualquier pantalla, pero si lo hacemos obtendremos mejores resultados.

No es cuestión de seguir estas sugerencia al pie de la letra, mi intención es que pruebes con diferentes medidas y aprendas de ello.

E1
Para el espacio E1, que se ubica a la derecha del logotipo, recomiendo las dimensiones de 720px por 150px.

E2, H1, H2, H9, P1
Estos espacios ocupan el ancho completo del sitio. Para el espacio E2, H1, H2, H9 y P1, recomiendo las dimensiones de 1200px por 300px para pantallas grandes. En móvil, recomiendo 360px por 300px.

H3, H4, H10, H11
A partir de ahora, los espacios comienzan a ser de dimensiones reducidas, por eso mi recomendación es tratar de mantener una mínima cantidad de texto que sea legible. Mi recomendación para estos espacios y los similares en dimensiones es de 600px por 300px o también 600px por 150px. Lo importante es mantener las mismas medidas en la fila. Por ejemplo: Si uno de los espacios lo diseñamos de 600px por 300px, entonces el espacio contiguo deberemos hacerlo de las mismas dimensiones para mantenerlos alineados.

En este caso se pueden mantener las mismas dimensiones de diseños para dispositivos móviles.

H5, H6, H7, H8, H12, H13, H14 y H15
Estos espacios son de dimensiones pequeñas, se pueden comercializar por separado o complementarse utilizando dos espacios para un mismo auspiciante, o como muestro en la siguiente imagen. Sugiero dimensiones de 300px por 200px

H16, H22, H28, H31, H34
Para estos espacios recomiendo las dimensiones de 800px por 300px. 

H17, H18, H23, H24, H29, H30, H32, H33, H35, H36 y los espacios de la columna derecha
Los espacios H17, H18 y sus similares pueden compartir las dimensiones con los espacios de la columna derecha (los espacios H37, H38 y demás). Las dimensiones que sugiero son 400px por 300px las cuales se pueden mantener también para móviles.

Por último, los espacios H19, H20, H21, H25, H26, H27
Estos espacios son muy pequeños de ancho, pero pueden ser más altos que anchos. Sugiero las dimensiones de 300px por 500px. El resultado a continuación.
Hasta aquí las sugerencias de dimensiones para los espacios publicitarios de la portada de tu periódico, teniendo en cuenta los diseños profesionales que nos ofrece Canva.com.

Veamos a continuación las dimensiones recomendadas para las publicidades en lo que sería el interior de una noticia. Comenzamos con los espacios del cuerpo de los artículos, que son todos iguales.

C1, C2, C3, C4, C5, C6, C7
Estos espacios se integran a la noticia, pueden llegar a molestar y a confundir si no los diferenciamos bien a través del diseño. El ancho común que sugiero es de 800px. El alto puede ser diferente dependiendo del dispositivo y del impacto que esperamos obtener de esta publicidad. Las combinaciones para que Canva.com nos ofrezca plantillas prediseñadas son: 800px por 200px, 800px por 300px, 750px por 300px, siendo esta última mi opción preferida por las plantillas que nos ofrece Canva.com

Para dispositivos móviles sugiero dimensiones cuadradas o verticales. Por ejemplo: 300px por 300px o 300px por 500px

C8, C9, C10, C11, C12, C13
Nos quedan ahora las dimensiones de los espacios publicitarios de la columna derecha las cuales sugiero, para un mejor resultado, sean siempre cuadradas o con una relación de aspecto más alto que ancho, es decir, verticales.

Son 360px por 360px las dimensiones que sugiero para los espacios de la columna derecha en los artículos, una relación de aspecto cuadrada.

Podemos aplicar más alto y obtener lo que se llama un Skycraper. Manteniendo los 360px de ancho pero aumentando a 600px de alto obtendremos un banner vertical más destacado.

Lo interesante de las dimensiones que sugiero para estos espacios es que las mismas se pueden mantener para cualquier tipo de dispositivos y los diseños se ven perfectos, sobre todo el Skycraper de 300px por 600px

Si bien los espacios según su código pueden estar en diferentes posiciones o tener diferentes medidas de acuerdo a la plantilla que tengas aplicada a tu periódico, creo que, al visualizar los espacios publicitarios, es muy intuitivo comprender qué dimensiones aplicar en cada espacio teniendo como guía este artículo.

Por ejemplo; los espacios publicitarios de la portada, los que denominamos con el código H1, H2, H9 y similares, ocupan el ancho completo del sitio. Cualquier otro espacio que ocupe el ancho completo del sitio puede tener las dimensiones que sugiero en este artículo para H1, H2, H9, etc. Así ocurre con el espacio FH3 al pie del sitio, que puede llevar las mismas medidas que los otros espacios de ancho completo.

Espero con esta guía puedas generar diseños profesionales para tu periódico digital, mantener contentos a tus auspiciantes y lograr los objetivos de los mismos. Ahora es tu turno de contarme si este artículo fue de utilidad o si has probado otra herramienta de diseño u otras dimensiones.