Introducción
A continuación se muestran algunas aplicaciones digitales en donde se podrán ver ejemplos del sistema visual.
WEB. Home
El sitio web debe presentar todos los elementos de la marca en cuanto a logotipo, colores, imágenes y tipografías.
Es muy importante que se apliquen los campos de color, separados por medianiles o no, para dividir y jerarquizar la información.
Las imágenes se pueden aplicar bajo los parámetros del estilo fotográfico o bien, siluetadas sobre fondos claros o sobre el azul corporativo del ABC.
La información se puede separar por medianiles para que exista un buen diseño de experiencia de usuario y de interfaz, que venga acompañado de una buena jerarquía de texto, iconografía, legibilidad y contraste.
WEB. Banner publicitario
Los banners web deben presentar todos los elementos de la marca en cuanto a logotipo, colores, imágenes y tipografías.
Los banners pueden tener ciertas composiciones tipográficas sencillas, como “obtén un 15% de descuento” en el ejemplo 3.
Los botones siempre deben tener buena legibilidad y deben destacar del resto de la composición. Se pueden ocupar los colores secundarios para resaltar los botones.
Al crear la gráfica del banner se debe considerar que si es un banner que estará dentro de la página de un partner del Centro Médico ABC, éste siempre debe llevar el logotipo. En caso de ser un banner que pertenece al sitio web del Centro Médico ABC no se necesita colocar el logotipo.
WEB. Ejemplos de formulario
A continuación se muestran dos ejemplos de formulario.
En éstos se debe aplicar el sistema de armado y las reglas tipográficas ya establecidas.
Es importante mencionar que los campos de llenado deben ser formas ortogonales en gris, blanco o color secundario, cuidando el contraste y que no altere la armonía con el color principal (azul Pantone© 3005 C).
WEB. Pantallas de consulta de resultados
A continuación se muestran dos ejemplos de pantallas de consulta de resultados.
En éstas se debe aplicar el sistema de armado y las reglas tipográficas ya establecidas.
Es importante mencionar que los campos de llenado deben ser formas ortogonales en gris, blanco o azul claro.
Redes Sociales
Los materiales para Redes Sociales deben tomar en cuenta el dinamismo, la rapidez de la comunicación en estos medios y considerar al usuario en la comunicación.
Existen tres elementos principales que conforman las carátulas de las redes sociales:
- Foto de perfil
- Portada
- Post
Es importante revisar las especificaciones del tamaño para cada elemento que tiene cada red social.
Foto de perfil / Avatar
Es la fotografía o imagen que identifica al perfil de la institución dentro de cada red social. Aparece tanto en el perfil como en otras instancias: comentarios hechos en otras publicaciones, resultados de búsqueda, mensajes privados entre otros.
A continuación se presentan las diferentes alternativas para la foto del perfil y la proporción de sus elementos:
- Acrónimo:
Se recomienda utilizar el acrónimo para no ser repetitivos con el nombre del perfil, éste se puede utilizar en las 2 versiones principales de color.
La fórmula para definir las proporciones es de 35/30/35, donde el logotipo debe medir el 30% de la altura del contenedor y estar centrado horizontal y verticalmente dentro del contenedor, mientras que el 70% es el porcentaje restante total de área libre.
- Logotipo
Se realizó el diseño del acrónimo para darle dinamismo a los avatares de redes sociales. Sin embargo, de requerirse, también se puede utilizar el logotipo. En este caso, al igual que en el acrónimo, puede ser aplicado en su versión positiva y negativa. Las proporciones de esta versión difieren del acrónimo, siendo la proporción de 23/50/27.
Portada
Es la imagen que viste al perfil de la compañía. Generalmente se puede prescindir del logotipo de la compañía para no saturar el perfil.
A continuación presentamos un ejemplo de portada.
Posts
Los posts son publicaciones donde se comparte contenido relacionado con la marca. Es importante que todos los posts que se publiquen cuenten con elementos del sistema visual del Centro Médico ABC. De esta manera, los usuarios podrán asociar el contenido con la marca de forma rápida.
A continuación presentamos ejemplos de posts.
Instagram permite a sus usuarios subir imágenes y videos de manera constante y rápida, es una red que permite compartir contenido creativo y novedoso.
Se deben consultar las medidas de los formatos de Instagram ya que se actualizan constantemente.
Instagram posts
A continuación presentamos ejemplos de posts.
En las publicaciones es importante distinguir las especialidades por medio de un campo de color o un acento de color en la tipografía.
La tipografía puede usar las variantes de tonos de la especialidad como recurso para distinguir el Centro de Alta Especialidad; estos colores se encuentran en la paleta secundaria. Se debe cuidar la legibilidad y buen contraste en los textos.
Es importante señalar el centro de especialidad dentro de los posts (como en el Ejemplo 1), de no ser posible, se debe colocar en la zona de descripción (como en el Ejemplo 2).
Instagram story
A continuación presentamos ejemplos de stories.
En el caso de la portada de las historias, se justifica el uso de formas no cuadradas porque el uso de éstas no satisface un capricho de diseño y en cambio resulta semántico para la ilustración del contenido.
En facebook se puede compartir contenido más específico sobre temas de interés, ofertas y recomendaciones, ya que permite una mayor interacción con el usuario.
Se deben consultar las medidas de los formatos para Facebook ya que se actualizan constantemente.
Facebook posts
A continuación presentamos ejemplos de posts.
Es importante que en los posts de facebook el logotipo esté ubicado donde no haya ruido visual y que contraste bien con el fondo, creando así una imagen limpia.
Facebook mosaico
A continuación presentamos un ejemplo de mosaico.
En este tipo de publicaciones, el azul siempre debe estar presente en la portada y debe predominar; el color que se elija de manera secundaria, por ejemplo un color del Centro de Especialidad, se debe utilizar solo para acentuar elementos de la composición.
Facebook carrusel
A continuación presentamos un ejemplo de carrusel.
En éstos, así como en los demás posts, se pueden emplear ilustraciones con los colores de la paleta cromática secundaria, siempre y cuando éstas sean sencillas, sin efectos ni detalles o cualquier otro elemento que las complique.
Facebook post de anuncio
A continuación presentamos algunos ejemplos de post en anuncio.
En estos anuncios es muy importante señalar el Centro de Especialidad dentro de los posts, de no ser posible, se debe colocar en la descripción.
Es ideal para conocer las tendencias de conversación, entregar información noticiosa y resolver dudas, inquietudes o reclamos con mayor velocidad.
La frecuencia está determinada por la estrategia y objetivo de la red.
Se deben consultar las medidas de los formatos para Twitter ya que se actualizan constantemente.
Twitter post
A continuación presentamos un ejemplo de post.
E-mailing
A continuación presentamos ejemplos de e-mailings.
Las plantillas de e-mailing deben diseñarse de manera que se puedan leer bien en todos los dispositivos, por lo que es imprescindible que se diseñen a partir de bloques.
Los datos de contacto y las redes sociales deben aplicarse siempre en el footer de la composición y los íconos de las redes sociales deben ser monocromáticos.
Es muy importante para que la lectura sea clara, jerarquizar la información. Esta jerarquía se logra jugando con los diferentes tamaños de la tipografía.
Powerpoint
A continuación presentamos plantillas para presentaciones en powerpoint. Se pueden elegir las portadas e interiores que más convengan.
Los templetes ya están predeterminados y no se deben alterar.
La tipografía debe aplicarse en un rango del 75% al 90% de negro.
Las fotografías se pueden sustituir por las del tema de la presentación o requerimiento de ser necesario.
No se pueden incluir otros elementos como outline, curvas, sombras, etc. que no pertenezcan al sistema visual ABC.
ABC Channel
A continuación presentamos ejemplos de ABC Channel.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Videos YouTube
A continuación presentamos ejemplos de tomas para videos de YouTube.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Videos – entrada
A continuación presentamos ejemplos de tomas de entrada para videos de YouTube.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Videos – créditos
A continuación presentamos ejemplos de tomas de créditos para videos de YouTube.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Videos – salida
A continuación presentamos ejemplos de tomas de salida para videos de YouTube.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Thumbnails
A continuación presentamos ejemplos de thumbnails para videos de Youtube.
En estas aplicaciones siempre se debe aplicar el sistema de retícula y de plecado con todos los parámetros ya establecidos, así como la implementación de las reglas tipográficas.
Debido a la naturaleza de los formatos pequeños en los que funcionan los thumbnails éstos deben de tener poca información y se debe ser cuidadoso con los tamaños de la tipografía para que sean lo más legibles posible.
