Guía de Estilos Web

Introducción

Esta Guía de Estilos incluye reglas, valores y recomendaciones que te ayudarán a escribir textos y crear diseños con un alto grado de flexibilidad creativa, mientras nos ayudas a mantener una imagen de marca consistente.

Hemos incluido ejemplos de cómo usar (y no usar) nuestro logotipo y otros elementos de nuestra marca, además de plantillas y recursos descargables que te harán la vida más fácil.

Identidad de la Marca

¿Qué es ADC?

ADC es la única plataforma en idioma español que brinda todos las herramientas, recursos y conocimientos necesarios para formar profesionales, empresas y agencias como Consultores de Marketing Estratégico.

Atributos de la Marca ¿Cómo es ADC?

Respetuosos e Inclusivos

En ADC respetamos las diferencias individuales y valoramos las fortalezas que cada miembro aporta a nuestra comunidad de estudiantes, formadores y lectores. ADC es un espacio multi cultural e intelectualmente diverso.

Modernos y Actuales

En ADC somos un poco nerds y curiosos por naturaleza. Nos mantenemos al tanto de las últimas tendencias en Marketing Digital y nos actualizamos constantemente para ofrecer técnicas y herramientas probadas a nuestros estudiantes.

Cercanos y Accesibles

En ADC siempre estamos conectados, somos fáciles de contactar, nos encanta conversar y estamos disponibles para responder las dudas, en primera persona y de forma amistosa.

Transparentes y Confiables

En ADC somos expertos pero no egocéntricos, y compartimos de forma franca y abierta las experiencias (éxitos y fracasos) que hemos acumulado después de años de práctica.

Identidad Visual ¿Cómo luce ADC?

En ADC proyectamos una imagen moderna que combina elementos de varias tendencias para crear una experiencia única.

Encabezados fuertes

En ADC llamamos a las cosas por su nombre y a las secciones por su encabezado. Los encabezados visibles y con gran jerarquía de tamaño ayudan a los usuarios a ubicarse e identificar en qué sección del sitio se encuentran.

Uso generoso de espacios en blanco

En ADC usamos los espacios en blanco de forma generosa, queremos una web espaciosa y fácil de navegar.

Sombras y gradientes

En ADC usamos sombras y gradientes con colores emocionantes para decirle al mundo que somos atrevidos, modernos y sofisticados.

Interacciones Notables

En ADC todo es dinámico y real. Así mismo es nuestra web y usamos las interacciones para mostrar de forma clara el efecto de cada acción.

Uso de tarjetas

En ADC mostramos los contenidos de forma que sea fácil de entender y recordar con tarjetas que mantienen una imagen consistente en todos los dispositivos.

Uso del storytelling y validadores sociales

En ADC nos encanta compartir nuestras historias y las de nuestros estudiantes. Cuando compartimos una opinión o experiencia incluimos nombres, imágenes, videos reales y un (validador) link a un perfil social del protagonísta.

Voz y Tono ¿Cómo hablamos en ADC?

Voz

Cuando crees contendios para nuestro sitio web, redes sociales o te comuniques por correo electrónico, ponte en el lugar de nuestros usuarios, entiende su necesidad y valora el tiempo que que están dedicando para leer los contendios o comunicarse con ADC. Asegúrate que nuestro mensaje sea:

Claro

Usa palabras y oraciones sencillas, alejate de los términos rimbombantes o en idioma extranjero utilizados de forma innecesaria y evita el spanglish siempre que sea posible. Usa los términos técnicos cuando sean relevantes pero sin sonar pretencioso.

Solo usa términos en idiomas extranjeros cuando sean el estandar o estén ampliamente aceptados, por ejemplo Community Manager. No uses términos como Brand Awareness, en su lugar utiliza Reconocimiento de Marca.

Útil

Antes de publicar o respondaer a los usuarios trata de entender completamente su necesidad y pregúntate si el contenido es útil y relevante. ¿Este contenido da respuesta a la necesidad del usuario? ¿Existe otro contenido que ya responde la misma necesidad, y de ser así es lo suficientemente claro?. Responde de forma precisa, evitando dar rodeos y explicaciones innecesarias.

Amistoso

Escribe de forma amistosa y cercana, procura que el usuario se sienta bienvenido desde el primer momento y con la confianza para comunicarse y exponer sus opiniones.

Una forma sencilla de resumir cómo es nuestra voz es comparando lo que somos y lo que no, somos:

  • Divertidos pero no Tontos
  • Expertos pero no Autosuficientes
  • Seguros pero no Engreídos
  • Informales pero no Descuidados
  • Directos pero no Bruscos
  • Condescendientes pero no Paternalístas

Tono

El tono de ADC es informal pero inteligente, hablamos en primera persona y tratamos de tu a tu. Nuestro tono debe empoderar y entusiasmar a los miembros de nuestra comunidad para lograr su meta de convertirse en mejores consultores.

Uso del humor

ADC tiene un gran sentido del humor, pero recuerda que preferimos ser claros, útiles y pertinentes que entretenidos. Si se te da el humor, pues adelante. Usa siempre el sentido común y ten en cuenta que en ADC tenemos una comunidad multi cultural.

Logotipo

El Logotipo Principal de ADC es la representación simplificada de nuestra imagen de marca y debe ser siempre la primera opción al usar un logotipo de ADC. Donde no sea posible utilizar el Logotipo Principal debe ser utilizada una de sus variaciones.

Usa el Logotipo Principal solo sobre fondo blanco o Azul Light ($color-azul-light). En la sección Colores puedes ver más sobre el uso de los colores y sus nombres.

Proporciones

La distancia entre el texto y el ADC Shield (b) debe ser igual a la distancia (a).

Área de aislamiento

El espacio en blanco que existe alrededor del logotipo se denomina área de aislamiento. El área de aislamiento es una zona de espacio visual neutro que rodea el logotipo para evitar la interferencia de otros elementos gráficos y garantizar que sea visible y reconocible.
El área de aislamiento propuesta es igual al ancho de la letra S y muestra el mínimo recomendado por lo que puedes incrementarlo siempre que sea necesario.

Tamaño Mínimo

No existen tamaños predeterminados para el logotipo de ADC. La escala y la proporción deben definirse por el espacio disponible, el contexto, la estética y la visibilidad.

No hay establecido un tamaño máximo para el uso del logotipo de ADC. Sin embargo, los tamaños mínimos se muestran a continuación. Estos tamaños ayudan a garantizar la integridad del logotipo en todo momento.

Para casos de uso especial como los iconos de aplicaciones y favicon de sitios web creamos versiones especiales.

Variaciones del Logo

Usa una de las variaciones cuando no sea posible utilizar el Master Logo. Sigue las instrucciones para que te sea más fácil determinar cuál utilizar en cada caso.

Letras claras sobre fondo oscuro

Utiliza esta variación para lograr un mejor contraste cuando el color del fondo no permita el uso del Master Logo.

Logotipo Monocromático Invertido (Todo blanco)

Usa esta variación para el logo en los footer y otros casos donde sea necesario dejar constancia de la marca como videos overlays.

ADC Shield

El Escudo de ADC (ADC Shield) es una representación simplificada del Logotipo Principal y será utilizado cuando por razones de espacio o estética visual el Logotipo Principal o una de sus variaciones no pueda ser utilizada.

El ADC Shield es además la imagen de perfil por defecto para todos los perfiles de redes sociales.

Área de aislamiento

Al igual que con el logotipo, para el ADC Shield debe respetarse un área de aislamiento.

Favicon & App Icon

Usos incorrectos del Logo

A continuación te mostramos algunos ejemplos de usos incorrectos del logotipo de ADC.

Q

No invierta los colores


No alterne los colores del ADC Shield y el texto.

Q

Diferentes colores de texto


No use varios colores en el texto

Q

Distorsionar el Logotipo


No distorsione, estire o estreche el logotipo

Q

Usar un solo color diferente del blanco


No use un solo color en el logotipo

Q

No respetar las proporciones y distancias


Respete la distancia entre el Shield y el texto

Q

Utilizar el Master Logo sobre fondo oscuro


No use el Master Logo sobre fondo oscuro

Colores

En ADC contamos con cuatro grupos o paletas de colores, que utilizamos de forma consistente y significativa. A continuación te presentamos el uso y restricciones para cada color.

Definición de Colores

Paleta Primaria de Colores

La Paleta Primaria de Colores debe ser utilizada en todas las comunicaciones de marketing de ADC y forma parte indisoluble de su identidad de marca. Aun cuando se utilicen otros colores permitidos en esta Guía de Estilos alguno de los colores de la Paleta Primaria debe estar presente, de preferencia el Amarillo ADC.

Amarillo ADC
$amarillo-adc-color
#F7A537
rgb(247, 165, 55)
hsl(34, 92%, 59%)

Azul ADC
$azul-adc-color
#212735
rgb(33, 39, 53)
hsl(222, 23%, 17%)

Azul Énfasis ADC
$highlight-blue-color
#2875A3
rgb(40, 117, 163)
hsl(202, 61%, 40%)

Colores de Texto

Colores de texto para ser usados en ADC.

Gris Texto ADC
$text-color
#717171
rgb(113, 113, 113)
hsl(0, 0%, 44%)

Gris Info ADC
$context-info-color
#ACACAC
rgb(172, 172, 172)
hsl(0, 0%, 67%)

Colores de Fondo

Colores de fondo para ser utilizados en secciones de contenido.

Azul Claro ADC
$hero-bg-color
#ECF7FE
rgb(236, 247, 254)
hsl(203, 90%, 96%)

Gris Claro ADC
$gray-bg-color
#F7F7F7
rgb(247, 247, 247)
hsl(0, 0%, 97%)

Colores de Certificaciones

A continuación se muestran los colores que representan cada una de las certificaciones que ofrece ADC. Estos pueden ser incrementados o disminuidos de acuerdo a la oferta académica futura de ADC.

Rojo Publicidad ADC
$course-publicidad-color
#BE2E2E
rgb(190, 46, 46)
hsl(0, 61%, 46%)

Azul Consultor ADC
$course-consultor-color
#005C96
rgb(0, 92, 150)
hsl(203, 100%, 29%)

Violeta Email ADC
$course-email-color
#8C038E
rgb(140, 3, 142)
hsl(299, 96%, 28%)

Verde Social ADC
$course-social-color
#007753
rgb(0, 119, 83)
hsl(162, 100%, 23%)

Uso de colores

Amarillo ADC

Este color debe ser usado para los botones, enlaces y llamadas a la acción. No lo utilices como color de fondo o para encabezados.

Azul ADC

Este color debe ser usado de forma exclusiva para encabezados y títulos.

Azul Énfasis ADC

Este color tiene por objetivo principal destacar elementos no clickables. Puede ser aplicado a elementos clickables siempre y cuando no constituyan la llamada a la acción principal e incorporen pistas visuales que los identifiquen como clickables. Por ejemplo estar subrayados o ser un botón.

Gris Texto ADC

Color de texto por defecto para todos los elementos excepto los encabezados.

Gris Info ADC

Utilice este color para ofrecer información contextual menos relevante.

Azul Claro ADC

Tiene como uso exclusivo ser un color de fondo para secciones de contenido.

Gris Claro ADC

Tiene como uso exclusivo ser un color de fondo para secciones de contenido.

Rojo Publicidad ADC

Identifica los contenidos de la certificación en Publicidad y Ventas Online

Violeta Email ADC

Identifica los contenidos de la certificación en Email Mmarketing, Automatización de Marketing Y Funnels

Azul Consultor ADC

Identifica los contenidos de la certificación en Consultor Estratégico

Verde Social ADC

Identifica los contenidos de la certificación en Redes Sociales y Contenidos

Gradientes

El uso de gradientes brinda una imagen moderna y audáz, utilizando los siguientes mixins podrás mantener la consistencia en los gradientes.

Gradientes para certificaciones

Sustituye $course-color por el color de la certificación

Degradado de un solo color

Sustituye $angle y $gradient-color por los valores deseados.

Degradado de dos colores

Sustituye $angle, $gradient-color-one, $gradient-color-two por los valores deseados.

Tipografías

En ADC utilizamos dos tipografías web, Montserrat para los encabezados y Open Sans para el resto de elementos. Ambas fuentes son parte de las Google Fonts y presentan un tiempo de carga rápido. Esto cumple el doble porpósito de mantener una imagen consistente y mantener el tiempo de carga del sitio lo más bajo posible.

Montserrat

Utiliza siempre Montserrat para los encabezados, en color Azul ADC sobre fondos claros y en color blanco sobre fondos oscuros.

Medium

Medium Italic

Bold

Bold Italic

Yo soy un h1

39px / 2.441em

Yo soy un h2

33px / 2.1em

Yo soy un h3

24px / 1.56em

Yo soy un h4

16px / 1em

Open Sans

Utiliza Open Sans para todos los elementos que no sean encabezados, como párrafos, listas, enlaces o citas.

Light
Light Italic
Normal
Normal Italic
Bold
Bold Italic
Medium
Medium Italic
Bold
Bold Italic

Párrafo

La política es tanto como obra de pensamiento obra de voluntad; no basta con que unas ideas pasen galopando por unas cabezas; es menester que socialmente se realicen, y para ello que se pongan resueltamente a su servicio las energías más decididas de anchos grupos sociales.

Lista ordenada

  1. Elemento de lista
  2. Elemento de lista
  3. Elemento de lista

Lista no ordenada

  • Elemento de lista
  • Elemento de lista
  • Elemento de lista

Imágenes e Ilustraciones

En ADC utilizamos las imágenes a ilustraciones para dar contexto y facilitar la comprension del mensaje que queremos transmitir a nuestra comunidad. Evita usar imágenes que no estén directamente relacionadas con el contenido o usarlas solo por estética.

Iconos

En el sitio hemos reservado el uso de iconos a aquellos que sean ya conocidos por los usuarios y no supongan que tengan que aprender o desfifrar que significan. El sitio está construido utilizando el Tema de WordPress Divi, que incorpora una librería propia con más de 300 íconos.

Los iconos en el sitio son de color  Azul Énfasis ADC y de color blanco cuando se encuentran sobre fondos oscuros como puedes ver a continuación.

Los Master Icons

En el sitio usamos tres iconos especiales (los Master Icons) que representan los tres beneficios fundamentales que ofrece ADC a sus estudiantes.

Icono Certificaciones

El icono hace referencia a las certificaciones que ofrece ADC y es usado en los bloques de contenido relacionados.

Icono Herramientas

El icono hace referencia a las herramientas y recursos que ofrece ADC y es usado en los bloques de contenido relacionados.

Icono Tutorías

El icono hace referencia a las tutorías y formas de interacción que ofrece ADC y es usado en los bloques de contenido relacionados.

Capturas de Pantalla

Siempre que las condiciones específicas del contexto en que será usada la captura de pantalla lo permita, agrégale el ADC Browser como marco.

Fotografías

En ADC somos cercanos, directos y transparentes. ¿Recuerdas lo de que una imagen vale más que mil palabras? Una imagen dice mucho de cómo eres y por eso ponemos especial atención a las imágenes que compartimos en el sitio de ADC y en nuestras redes sociales. Aquí hay algunos consejos que puedes seguir para elegir imagenes que vayan con nostr@s.

Cuando uses imágenes de stock

  • Evita las imágenes super corporativas y distantes, esas del hombre con sonrisa de galán y traje impecable. A nadie le gustan y lucen muy falsas.
  • No selecciones imágenes super artísticas, o con personas que parecen super modelos. Los marketeros no somos tan guapos.
  • Las fotos que lucen muy retocadas o con filtros demasiado evidentes pues tampoco son lo de nostros.
  • Elije imágenes donde se muestren acciones en primer plano, de ser poisble que se muestre el rostro de la persona.

Te lo mostramos con un ejemplo. Si tuviesemos que elejir una de las imagenes a continuación para mostrar que con ADC puedes formarte desde dónde desees, eligiríamos la primera.

Video Cover

Los video cover que en este caso también funcionan como miniaturas para los videos, los hemos dividido en dos grupos:

  1. Los videos que se presentan dentro del sitio.
  2. Los videos alojados en plataformas de terceros como YouTube o Vimeo.

Para los videos presentados en el sitio web de ADC existen cuatro variantes que pueden ser utilizadas. Para ofrecer una mayor flexibilidad se han previsto dos posiciones adicionales para el logotipo en los overlays.

En todos los casos tenga en cuenta el área segura marcada en las plantillas.

Para los videos alojados en plataformas de terceros existen dos opciones.

Social Media

En ADC pensamos en todo, en las redes sociales tratamos de manejar con mucha fuerza nuestros colores de marca. Hemos creado diseños listo para usar que ayudan a brindar una imagen consistente pero que dejan chance a la creatividad. Úsalos como ejemplo para crear publicaciones increibles.

En el Social Media Pack encontrarás 3 templates para encabezados y 16 diseños de posts. Aquí tienes algunos ejemplos:

Presentaciones

Si vas a crear presentaciones para ADC, sigue estos consejos que te ayudarán a mostrar los datos de forma más eficiente y fácil de entender para los estudiantes. Además ya hemos diseñado algunas diapositivas que puedes usar como patrón.

Cuida las proporciones

Al tratar de presentar datos de forma gráfica queremos ser lo más precisos posible, por eso trata de evitar errores como el que te mostramos a continuación.

En la imagen de la derecha se ha escalado la figura humana a dos veces (2x) su altura para representar el doble de personas pero al escalar el alto también se escaló el ancho y en realidad ocupa un área cuatro veces mayor (4x).

Mira el mismo ejemplo ahora con cuadrados.

Comparando proporciones

El siguiente gráfico muestra las diferencias entre estudiantes en un mismo grupo de forma acertada, pero falla al comprar los estudiantes de diferentes grupos. A simple vista parece que el grupo con más estudiantes hombres es el C y en realidad el Grupo B tiene muchos más estudiantes varones.

Datos en tablas

Cuando desees presentar datos utilizando tablas ten en cuenta lo siguiente:

Presenta los datos en columnas

Los datos presentados en columnas son más fáciles de comparar y por lo tanto de entender. En el siguiente ejemplo, para poder comparar los datos, es necesario recorrer varias veces la tabla con la vista.

Organiza los datos en columnas para que sean más comprensibles

Mantén los números alineados a la derecha

Existe la costumbre de centrar los números en las tablas para que luzcan más organizados o visualmente atractivos, pero lo cierto es que los números alineados a la derecha son más fáciles de leer. Mira la imagen siguiente y compárala con la anterior

Diapositivas listas para usar

Tenemos dispositivas para los usos más comunes, aquí te las mostramos y explicamos el uso recomendado para cada una.