Redes Sociales
Contenedor
Versiones de contenedor
El contenedor de logotipo se puede usar en las siguientes versiones:
1. Contenedor en color blanco.
2. Contenedor en color amarillo PANTONE® 809C.
3. Contenedor en color blanco con franja de color del negocio. Color amarillo PANTONE® 809C para las unidades de negocio de Ahorro/Pensiones y color gris PANTONE® 424C para Inversiones.
Tamaños del contenedor
Las medidas para el contenedor de logotipo varían de acuerdo a la red social.
Sombra del contenedor
El contenedor usa una ligera sombra para que sobresalga sobre los fondos de color claro. Para aplicarla, se deben seguir los siguientes pasos:
1. Duplicar la ventana
2. Aplicarle color negro al 30%
3. Aplicarle el efecto”Gaussian Blur” como se muestra en la imagen
4. Poner la transparencia en “Multiply”
5. Enviarla detrás de la ventana y moverla ligeramente hacia la esquina superior izquierda
Usos incorrectos del contendor
Algunos usos incorrectos para el contenedor del logotipo son:
1. Ubicar el contenedor en un lugar distinto a la esquina inferior derecha.
2. Usar formas contenedoras distintas a las establecidas en este capítulo.
3. No se debe usar el descriptor de negocio fuera del contenedor.
4. Modificar las medidas del contenedor o de sus elementos.
Post
Es una publicación donde se comparte contenido relacionado con la compañía. Es importante que todos los posts que se publiquen cuenten con elementos propios del sistema visual de SURA. De esta manera, los usuarios podrán asociar el contenido con la marca, sin necesidad de hacer un gran esfuerzo.
Post con imagen
A continuación, presentamos alternativas para el manejo de la marca dentro de posts:
1. Imagen con contendor: La imagen lleva el logotipo dentro de un contenedor; éste puede tener sólo el logotipo o el logotipo con el descriptor de negocio.
2. Post con logotipo dentro de la imagen: En aquellos casos donde el logotipo de Protección ya aparece en la imagen, no se debe usar el contenedor con logotipo ya que aparecería repetido. Este caso se da cuando se presentan imágenes de aplicaciones de la marca: un folleto, una fachada de edificio, un artículo promocional, etc.
Post con textos
Algunas recomendaciones para el uso de textos en posts son:
Mini Álbum
Permite visualizar las imágenes de un albúm de forma más completa ya que cuenta con una imagen principal o video, donde puede ubicarse una breve descripción o mensaje, seguidos de tres imágenes miniatura del álbum. Cuando se da clic en cualquiera de los cuatro recuadros que aparecen en el post, se despliegan el resto de las imágenes del albúm.
La portada puede ser cuadrada o ligeramente rectangular siempre y cuando el ancho sea de 700 px y el alto se encuentre entre los 370 px a 700 px.
El logotipo siempre debe aparecer en la portada, preferiblemente en su versión principal sobre los fondos de color permitidos, o sobre una imagen. En este último caso, se debe cuidar la legibilidad del mismo. El tamaño del logotipo puede estar entre los 100 px a los 400 px de ancho, dependiendo de la composición.
Se recomienda utilizar este formato para compartir eventos y campañas, aprovechando la portada para expresar agradecimiento o explicar el contenido del álbum.
Cuadrícula
Este formato permite visualizar de forma simúltanea cuatro imágenes. Es útil cuando se requiere mencionar varios tópicos de un mismo tema, opciones o sugerencias.
El logotipo de PROTECCIÓN debe ir dentro del contenedor y aparecer en la esquina inferior derecha de la última imagen.
Infografía
Las infografías permiten presentar información estadística de una manera visualmente atractiva y dinámica. El tamaño de la tipografía puede ser más reducido que en un post normal sin perder legibilidad o saturar demasiado el espacio. Se recomienda utilizar íconos e ilustraciones para representar conceptos y mantener el orden de los elementos y jerarquías claras.
1. En aquellos casos donde sólo se presente un concepto o dato, es decir, donde se cuente con poca información, el formato del post debe ser cuadrado. El logotipo se deberá ubicar dentro de un contenedor en la esquina inferior derecha.
2. Cuando se genere una infografía más compleja, con gran cantidad de datos a presentar, se puede utilizar un formato más vertical manteniendo un ancho de 700 px. En este caso, no se utiliza el contenedor de logotipo; éste se ubica en un pie de página o nota en la parte inferior de la imagen. Si el fondo lo permite, el logotipo debe ir en su versión principal o en versión monocromática, según lo permita el color de fondo.
Colección
Es un formato que facilita descubrir, explorar y comprar productos, servicios o eventos, desde un dispositivo móvil de una forma visual.
Una colección contiene normalmente una imagen o un video de portada, en los que puede ubicar una breve descripción o mensaje, seguidos de varias imágenes de productos, servicios o eventos. Cuando se hace clic en cualquiera de las imágenes se despliega un “canvas” o lienzo, una experiencia en pantalla completa que promueve la interacción y fomenta el interés y la intención de compra.
La portada puede ser cuadrada o ligeramente rectangular siempre y cuando el ancho sea de 700 px y el alto se encuentre entre los 370 y 700 px.
Carrusel
El formato carrusel permite mostrar hasta diez imágenes o videos, títulos y enlaces o llamadas a la acción en un sólo anuncio. Por su extensión, el uso del carrusel se vuelve óptimo para:
1. Presentar los productos de un catálogo.
2. Destacar las características de un producto.
3. Contar una historia mostrando imágenes o videos en sucesión para ilustrar una narrativa relevante.
4. Explicar un proceso, ya sea sobre cómo usar un producto o cómo navegar una app.
5. Mostrar una imagen panorámica.
6. Compartir fuentes y artículos.
7. Mostrar un estilo de vida.
8. Compartir testimonios de personas o empresas que hayan usado un producto o servicio.
Las imágenes deberán ir en formato cuadrado (mínimo 700×700 px). El logotipo puede aparecer como cierre con un ancho mínimo de 100 y máximo de 400 px.
360°
Las imágenes 360 grados son aquellas que se visualizan con el celular alzado en posición vertical y que al moverlo en distintas direcciones, se descubren las distintas partes de una misma foto. Este formato de imagen se puede capturar mediante dispositivos, aplicaciones o software específicos.
Se recomienda utilizar esta herramienta para mostrar imágenes de eventos y dinámicas hechas por PROTECCIÓN. Se debe tratar de iniciar la captura mostrando el logotipo de PROTECCIÓN, dentro de alguna aplicación en el espacio, para posteriormente mostrar el suceso a registrar. El logotipo o algún elemento visual identificable de su identidad, debe estar en el primer plano, éste puede tener un ancho mínimo de 100 y máximo de 400 px dependiendo de la composición.
Versus
Este recurso permite presentar visualmente dos ideas opuestas o complementarias. El objetivo es que la imagen se divida a la mitad y en cada lado se ubique una imagen cuya forma, contenido o ancho se relacione con la otra.
La división puede ser tanto horizontal como vertical y siempre debe estar completamente centrada en el espacio disponible. La línea divisoria es opcional.
El logotipo debe ubicarse dentro de un contenedor en la esquina inferior derecha.
GIF animado
Este recurso es el punto medio entre un post y un video ya que permite mostrar, con animaciones sencillas hechas cuadro por cuadro, mensajes cortos de una manera interactiva y dinámica.
En este formato el logotipo de PROTECCIÓN siempre debe estar al cierre de la animación centrado y ocupando el mayor espacio del formato del gif.
Todos los elementos deben formar parte de la identidad visual de PROTECCIÓN.
Es importante que el contenido sea coherente y conciso y que la animación cuente con movimientos y transiciones fluida, facilitando la lectura de los contenidos.
Encuesta
Este recurso permite hacer encuestas en Facebook de forma rápida y sencilla a través de las reacciones de los usuarios. Se pueden ubicar de dos a cuatro opciones distintas, asignando una reacción específica a cada una de ellas. Los usuarios seleccionarán la opción preferida y posteriormente se analizarán los resultados.
El orden y tipo de reacciones para cada opción debe ser siempre el mismo: “me encanta” (corazón), “me gusta” (pulgar arriba), “me asombra” (cara sorprendida) y “me divierte” (cara riendo).
El corte de la imagen depende de la cantidad de opciones ofrecidas:
– Horizontal y vertical
– Horizontal
– Cuadrícula
El logotipo debe aparecer dentro de un contenedor en la esquina inferior derecha.
No está permitido utilizar las reacciones negativas como (enfadado, tristeza, confusión, atemorizado, etc..)
Este recurso se usa para conocer si un producto gusta más o menos que otro a nuestros consumidores. El objetivo es que la imagen se divida a la mitad y en cada lado se ubique una imagen cuyo contenido sea opuesto a la otra.
La división es vertical y el tamaño de las imágenes debe ser 1280×1280 px. No se recomienda exceder estas medidas, en ningún eje, para evitar que la imagen se corte en la previsualización.
El logotipo debe ubicarse en la imagen que está del lado derecho dentro de un contenedor en la esquina inferior derecha.
Usos incorrectos
Algunos usos incorrectos en el diseño de posts son:
Tendencias
Historias
Tanto Instagram como Facebook cuentan con el recurso de historias el cual permite compartir fotos o videos temporales, los cuales desaparecen después de 24 horas. A continuación, se describen los elementos disponibles para personalizarlas así como sugerencias de uso.
Historias destacadas
Se recomienda que los botones de las historias destacadas sean distintos en diseño para hacerlos más vistosos. Se pueden utilizar: íconos, tipografías, imágenes, destacados o combinaciones de estos elementos, siempre y cuando se logre un diseño sencillo y concreto.
Imágenes y videos
Las historias permiten utilizar videos, imágenes y gifs animados capturados en el momento o tomados desde la galería del dispositivo móvil. El contenido de estos recursos debe respetar todos los lineamientos descritos en la sección Fotografía (ver link en la nota), tratando de mantener un estilo más informal y espontáneo.
Tanto Instagram como Facebook permiten aplicar filtros a los recursos visuales una vez que éstos han sido seleccionados. Se recomienda evitar su uso y en caso de necesitar edición, hacerla antes de subir el contenido a la aplicación.
Al tomar fotos o videos que se compartirán en tiempo real, se deberá procurar que aparezca el logotipo de SURA en alguna aplicación (fachada, artículo promocional, etc.) o alguno de los colores corporativos de la marca, en los casos que sea posible.
Etiquetas (stickers)
Al seleccionar el control para etiquetas se despliega un catálogo de iconos para decorar la historia (1). Por su carcácter lúdico e informal, de esta sección sólo se podrán usar las opciones marcadas en la imagen (2) que corresponden a: ubicación, temperatura, fecha, hashtag y encuesta.
Se recomienda utilizar colores sobrios como blanco, gris y negro o, en la medida de lo posible, colores similares a los de la paleta corporativa. El tamaño de los elementos debe ser mediano o pequeño, sin comprometer la legibilidad. La información debe ir centrada o justificada a la izquierda y debe ubicarse en una parte de la imagen que no afecte su lectura.
Cuando sea necesario utilizar más de una etiqueta en una misma imagen, se sugiere diferenciarlos con variaciones de tamaño y/o de posición (3).
Texto (captions)
Una vez seleccionado el visual, entre las distintas funciones que permite la interfaz, se pueden insertar textos (1). Para los textos, se recomienda utilizar colores sobrios como blanco, gris y negro o, en la medida de lo posible, colores similares a los de la paleta corporativa. El tamaño del texto debe ser mediano o pequeño, sin comprometer la legibilidad (2).
Los textos pueden ser de tres tipos: estándar, etiqueta (hashtags) y mención (mentions) (3). Cuando sea necesario utilizar los tres tipos en una misma imagen, se sugiere diferenciarlos con color, recuadros y/o un tamaño inferior al del texto estándar. La información debe ir centrada o justificada a la izquierda y debe ubicarse en una parte de la imagen que no afecte su legibilidad.
Usos incorrectos
Algunos usos incorrectos en la generación de las historias son:
Hashtags
En redes sociales, se utilizan hashtags para hacer mención a eventos, campañas, contenidos, tendencias y productos relacionados con la marca Protección. Los hashtags en los posts deben tener las siguientes características:
– Cortos y precisos
– Memorables (originales)
– Legibles
– Utilizar las tipografías DIN OT, FS Joey, o Covered by your grace cuando van dentro de la imagen
– Escritos en caracteres estándar (sin espacios, sin ñ y sin acentos)
– Los hashtags deben ubicarse después del caption
– Idealmente, la primera letra de cada palabra debe ir en mayúsculas.
– Los hashtags no deben sustituir palabras del contenido, a menos que se haga mención a un evento o producto de Protección que ya tenga un hashtag asignado.
Usos incorrectos
Los siguientes son usos incorrectos en hashtags:
Utilizarlos en exceso en un mismo post.
Sustituir palabras del contenido con hashtags.
Usar más de una tipografía en un mismo hashtag.
Hacer uso de un hashtag como elemento gráfico de un identificador.
Videos en vivo
Los videos en vivo están disponibles tanto en Instagram como en Facebook. Esta modalidad se presta para documentar eventos y conferencias, así como para compartir comunicados. Además, permite que los usuarios interactúen con la marca.
Durante la transmisión, las aplicaciones permiten recibir y enviar solicitudes a otros usuarios para compartir la transmisión en vivo lo cual puede utilizarse para realizar entrevistas, debates, mostrar dos eventos simultáneos, entre otras cosas.
Filtros faciales
No está permitido el uso de este recurso ya que no va de acuerdo con los lineamientos de la marca PROTECCIÓN.
Publicaciones personalizadas
Funcionalidad disponible únicamente en Facebook que permite utilizar fondos de color en las publicaciones. Este recurso permite publicar mensajes concretos, dudas y comentarios de una forma más llamativa y sin necesidad de una herramienta adicional de edición. De ser necesario su uso, se recomienda utilizar colores sobrios como negro y grises o similares a los de la paleta corporativa. Si no se encuentran estas opciones, es mejor evitar su uso. No está permitido utilizar fondos con patrones o ilustraciones predeterminadas por la aplicación de Facebook.
Comentarios personalizados
Este recurso funciona de manera similar a las publicaciones personalizadas y el objetivo es aplicar un color de fondo a los comentarios que se hagan en una publicación. Al igual que con las publicaciones personalizadas, se sugiere elegir tonos sobrios o similares a los de la paleta corporativa. De no encontrarse estas opciones es mejor evitar su uso.
Co-branding
Existen tres casos distintos en donde la marca Protección puede participar en co-branding con otras marcas.
Protección al 75%
Protección está presente con todos sus elementos (consultar la sección correspondiente dependiendo del tipo de publicación).
El logotipo de la otra marca debe ubicarse en la esquina superior izquierda en un tamaño menor al de Protección.
Protección al 50%
Ambas marcas deben ir al mismo tamaño, una al lado de la otra, separadas por una línea delgada. Se recomienda ubicar los logotipos en la esquina inferior derecha aunque la posición puede variar para ajustarse al diseño y contenido. Siempre que sea posible, se deberá respetar el área de reserva del logotipo de PROTECCIÓN por todos los lados.
Si el fondo de la publicación es claro, se debe utilizar la versión principal del logotipo de PROTECCIÓN; si es obscuro, el logotipo debe ir completamente blanco.
Los elementos gráficos de ambas marcas pueden convivir manteniendo la misma relevancia.
Protección al 25%
Los elementos gráficos de la otra marca perdominan en la imagen.
El logotipo de PROTECCIÓNd ebe ubicarse en la esquina inferior derecha sin contenedor en un tamaño igual o menor al de la otra marca. Pueden existir las siguientes variantes:
Ejemplos
A continuación presentamos ejemplos de aplicación en los perfiles de las principales redes sociales que manejan los distintos negocios de PROTECCIÓN.
Youtube
Yammer
Formatos
Los elementos principales que conforman las distintas redes sociales son: foto del perfil, portada y post. A continuación presentamos los formatos para cada uno.
1. Foto del perfil: 170 x 170 px.
2. Portada: 820 x 312 px.
3. Post: 700 x 700 px.
Las imágenes deben estar en RGB y guardadas en formato JPG. Su peso debe ser igual o menor a 100KB. Si la imagen tiene texto o logos, se recomienda usar un formato PNG con optimización para texto.
1. Foto del perfil: 400 x 400 px. Peso máximo: 100 KB (JPG, GIF o PNG).
2. Portada: 1500 x 500 px. Peso máximo: 10 MB (JPG, GIF o PNG).
3. Post: 1000 x 560 px. Peso máximo: 5MB para fotos y 3 MB para GIFs animados.
Las imágenes deben estar en RGB y guardadas en formato JPG. Su peso debe ser igual o menor a 100 KB. Si la imagen tiene texto o logos, se recomienda usar un formato PNG con optimización para texto.
1. Foto del perfil: 110 x 110 px.
2. Foto: 2048 x 2048 px (cuadrado). La altura puede ir de 1074 px hasta 2560 px.
Puede contener una foto, un GIF animado o un video.
Las imágenes deben estar en RGB y guardadas en formato JPG. Su peso debe ser igual o menor a 100 KB. Si la imagen tiene texto o logos, se recomienda usar un formato PNG con optimización para texto.
YouTube
1. Foto del perfil: 400 x 400 px.
2. Foto de portada: 2560 x 1440 px. Peso máximo: 4 MB.
Las imágenes deben estar en RGB y guardadas en formato JPG. Su peso debe ser igual o menor a 100 KB. Si la imagen tiene texto o logos, se recomienda usar un formato PNG con optimización para texto.
1. Foto del perfil: 200 x 200 px. Peso máximo: 10 MB (JPG, GIF o PNG).
2. Portada: 1584 x 396 px. Peso máximo: 4 MB (JPG, GIF o PNG).
3. Post: 2560 x 1440 px.
Yammer
1. Foto del perfil: 200 x 200 px.
2. Post:
Tamaño a exportar desde PowerPoint: 20,298 x 11,329 cm en formato PNG.
Tamaño a exportar desde otros programas: 2439 x 3745 px en formato PNG.
Foto de perfil
Alternativas
Existen dos alternativas para el diseño de la foto de perfil:
Con logotipo
El tamaño del logotipo debe ser igual al 28% de X e ir centrado tanto vertical como horizontalmente en el formato. Se puede usar en sus versiones sobre fondo blanco
y sobre fondo amarillo PANTONE® 809C.
Con logotipo y descriptor de negocio
El tamaño del logotipo debe ser igual al 28% de X e ir centrado vertical y horizontalmente en el espacio blanco. El descriptor se ubica en la parte inferior, dentro de una franja con el color que identifica al negocio y centrado con respecto al logotipo. El tamaño del descriptor debe ser igual al 10% de X. El alto de la franja debe ser igual al 25% de X.
Usos incorrectos
Algunos usos incorrectos en la foto del perfil son:
1. Incluir otros elementos distintos a los señalados.
2. Usar colores distintos a los indicados anteriormente.
3. Cambiar la ubicación del descriptor.
4. Modificar las medidas de los elementos.
Portada
La portada es la imagen que viste al perfil de la compañía.
Alternativas
Existen diversas alternativas para el manejo de la portada en redes sociales:
1. Foto de portada con fotografía: La imagen seleccionada debe seguir todos los lineamientos descritos en la sección Fotografía click aquí.
2. Foto de portada con fotografía y texto: Es importante seleccionar imágenes con espacios vacíos para que no se afecte la legibilidad de los textos. En la mayoría de casos, las imágenes se deben modificar en Photoshop.
3. Foto de portada con ventana, íconos o ilustraciones.
4. Videos o GIFs animados: Las imágenes en movimiento ayudan a conectar al público de una forma más cercana y directa, algunos aspectos importantes para su creación son:
– Deben durar de 6 a 10 segundos
– Deben proporcionar tiempo suficiente para la lectura de los textos
– No deben incluir el logotipo
– El tamaño debe ser el indicado para la portada según la red social.
Caso especial
En Youtube, el área de visualización de la foto de portada cambia según el dispositivo que se esté utilizando. Es importante tener esto en cuenta ya que la foto se cortará y podría visualizarse parcial o incorrectamente en algunos casos. Para ello, debemos considerar las siguientes medidas:
Usos incorrectos
Al diseñar la portada, se debe tener en cuenta que:
1. Las fotografías no se deben cortar. Revisar que se visualicen correctamente en distintos dispositivos.
2. La ventana no debe cubrir partes importantes de la imagen, por ejemplo el rostro de las personas.
3. No se debe ubicar texto en partes de la imagen donde se compromete la legibilidad.
4. No se debe saturar la portada con elementos de la marca.
