SURA - Manual de marca

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.

Descargar los contenedores en versión editable

Tamaños del contenedor

Las medidas para el contenedor de logotipo varían de acuerdo a la red social.

Facebook

Twitter

Instagram

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.

Ir a los lineamientos de las fotografías.

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 Barlow 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:

Descargar las versiones del logotipo con descriptor y con leyenda de respaldo