Embed Size (px)
DESCRIPTION
Todos sabemos que las grandes marcas son poderosas. Consiguen hacernos creer que tienen personalidad, actitudes, valores, y se meten en nuestra cabeza de tal manera que a veces hablamos de ellas como si fueran personas. Drupal quiere convertirse en una marca, quiere asociarse a unos valores y a unas cualidades. Para lograr eso, la marca Drupal se ha reinventado y se ha "profesionalizado", tomando por el camino decisiones polémicas -como la reciente polémica sobre la retirada del Druplicon en el instalador-. Por primera vez tenemos algo parecido a un manual de estilo, o un manual de imagen corporativa. ¿Cómo funciona ese manual? ¿Cómo se usa la "marca Drupal"? Y, sobre todo, ¿por qué es importante usarla correctamente?
Citation preview
Branding práctico:El Drupal Visual Language Guide
Ignacio SeguraDocumentados.com
¡HOLA!(Pantone 2995 coated)
Me llamo Ignacio Segura, y soy el diseñador gráfico y themer de Documentados, una empresa de desarrollo y consultora especializada en Drupal.
Yo @nachenko
consultora DrupalDOCUMENTADOS
consultora DrupalDOCUMENTADOS
Nosotros
Yo
Voy a hablar de dos cosas
Cosa 1: Por qué las marcas son importantes. Por qué la marca Drupal es importante. Por qué debería importaros.
Cosa 2: La marca Drupal. Cómo se usa. Cómo se usa un manual de identidad visual corporativa.
Cosa 1Las Marcas. La marca Drupal. Tu marca. Por qué debería importarte.
Y pienso que esto es importante porque...
Trabajando en la Drupalcamp de 2012 me di cuenta de que Drupal no tiene una marca suficientemente fuerte y profesional, aunque está mejorando rápidamente.
¿Por qué es importante una marca fuerte?
Anuncio de Ogilvy & Mather
¿A quién le importa la marca? ¡Drupal es taaaan alucinante!
(Malas noticias, eso no es suficiente)
¿Por qué no es suficiente?
2 - Apostar por un CMS para tus necesidades es una “compra de riesgo”, aunque sea gratis. Para levantar un sitio web hace falta tiempo y esfuerzo. Elegir la herramienta equivocada supondrá problemas, más tiempo y más esfuerzo.
El coste, incluso sin hablar de dinero, es muy alto.
Se trata de generar confianza
Ya tenemos un producto lleno de cualidades en el que se puede confiar, y eso son buenas noticias.
Ahora falta comunicar esa buena noticia, para que los potenciales clientes/patrocinadores/usuarios/miembros de la comunidad venzan sus razonables reparos y apuesten por Drupal.
De eso trata realmente la marca Drupal.
¿Y a mí qué me importa?
La experiencia de marca sucede tanto si queremos como si no
La experiencia de marca sucede tanto si queremos como si no. Y TODO lo relacionado con el producto es una experiencia de marca.
Ejemplo: nuestra propia ropa
“The experience of the brand IS the brand”
Brand Union
La propagación de los valores de Drupal
Como profesionales y usuarios de Drupal, somos parte de la marca. Nosotros aportamos a la marca, la marca nos aporta a nosotros.
Si comunicamos que Drupal es un buen producto sobre el cual levantar tus proyectos, y lo demostramos con hechos, los profesionales de Drupal nos beneficiaremos de la buena imagen de la marca Drupal.
Cada vez que hacemos un buen trabajo en Drupal, nos ayudamos a nosotros mismos, a la comunidad Drupal y al resto de profesionales que trabajan con Drupal.
“¡Buen trabajo, chicos!”
+1 +1 +1 +1 +1
“¡Mal trabajo, chicos!”
-1 -1 -1 -1 -1
“Drupal bueno,pero vosotros...”
-1 -1 -1 -1
¿Cómo generamos esa confianza?
Se genera confianza en una marca como se genera confianza en una persona
Confiamos cuando conocemos, cuando nos hablan bien de algo, cuando lo que vemos nos da buena impresión.
La confianza se trabaja en tres frentes
• Producto: toda la comunidad está volcada en hacer un mejor Drupal.
• Servicio: Los buenos profesionales procuran dar un buen servicio, por la cuenta que les trae. Cada uno de ellos aporta a la experiencia que tiene la gente de Drupal.
• Imagen: Antes de usar el producto, antes de contratar servicio, está la imagen que da Drupal. De eso tratamos aquí.
Hay que cuidarlo todo,lo que veo es lo que existe
Nuestra mente tiene la mala costumbre de creer que lo que sabemos de algo o alguien es todo lo que necesitamos saber.
Dicho de otra manera: tendemos a opinar de las cosas o las personas, sepamos mucho o poco sobre ellas.
La primera impresiónpuede ser la última
Cosa 2Qué es un manual de identidad visual corporativa. El Drupal visual language guide.
Un manual de instrucciones
Un manual de identidad visual corporativa es un manual de instrucciones. En él, el/los diseñadores dan instrucciones precisas para el uso de todos los elementos de la marca. Logotipo, tipos de letra, colores, etcétera.
El tipo que lo pensó está apagadoo fuera de cobertura
Los manuales se hacen básicamente para poder prescindir del tipo que ideó el diseño. El tipo no está, está en otra ciudad, murió, cambió de camello, nos odia...
El tipo es prescindible pero sus ideas, no
Hay empresas que están sacando nuevas aplicaciones gráficas a diario, por todo el país, como por ejemplo los operadores de telefonía. No hay tiempo de reconstruir la gráfica, ni de reinventar nada. Necesitan un protocolo que puedan seguir.
Las empresas pagan por ese manual,no por el logo
La mayoría de las empresas no lo saben, pero lo que da valor al conjunto es ese manual de instrucciones, no el logotipo.
Drupal Visual Language Guide (el manual)
https://infrastructure.drupal.org/drupal.org-style-guide/index.html
Este manual se refiere a Drupal.org
Este manual se hizo específicamente para Drupal.org y los istios asociados, es decir, los sitios oficiales de Drupal de alcance mundial.
De los sitios locales se espera (y así se especifica) más libertad en el aspecto visual, pero manteniéndose dentro de unos límites que permitan reconocer inmediatamente cualquier sitio oficial relacionado con Drupal.
El logotipo
* No se especifica reducción mínima.
El área de respeto
Versión en color
Versión con fondo de color
Color
Además de especificar con exactitud los colores, se especifican los usos para cada color.
Dark Blue & Light Blue
Background colors used in the masthead
Lime Green
Used for download buttons and to indicate customization
Tipografía
Un detalle peculiar al especificar las tipografías es que nos dice qué usar para cada tag HTML y qué código CSS usar.
Navegación
La navegación se especifica por completo, de tal manera que se podría replicar “pixel-perfect” no ya en una versión posterior de Drupal, sino en cualqueir otro sistema.
Retícula (grid)
La retícula es el ladrillo básico de la maquetación desde hace siglos y es un gran invento, porque hace muy sencillo montar texto en periódicos y revistas.
Lo único que haces es decidir un número de columnas, dejar la misma separación entre todas las columnas y hacer que todo contenido (texto e imágenes) esté dentro de una o más columnas, es muy sencillo.
Podemos conseguir más complejidad usando un número de columnas mayor y luego agrupando.
Seguirá pareciendo ordenado.
Drupal.org usa una retícula de doce columnas para todo excepto el pie, que usa 5. Doce es un gran número porque es divisible por 2, 3, 4 y 6. Es decir, permite hacer muchas combinaciones distintas.
Imágenes
Las imágenes se ciñen a la retícula, igual que el resto de los elementos, con limitaciones. No puede usarse cualquier número de columnas.
Esa limitación ya nos dice los presets de Image que vamos a necesitar.
Publicidad
El manual no sólo explica cómo y dónde situar la publicidad, sino que define una norma: la publicidad hay que justificarla con un texto al pie de cada anuncio, sin excepción.
Advertising provides funds for legal consultation such as licensing for the Drupal trademark.
Advertising has helped pay for part of $25,000 in hardware improvements for Drupal.org.
Advertising provides capital for Drupalcons.
Advertising pays for infrastructure improvements such as a Content Delivery Network (CDN), which improves performance.Advertising funds the all-volunteer Drupal Association members to deal with serious issues such as hardware upgrades.Advertising helps build a successful ecosystem around Drupal.
Iconos, gráfica auxiliar
https://infrastructure.drupal.org/drupal.org-style-guide/page_furniture.html
Queda tal que así...
El Drupal Visual Language Guide explica el presente, pero más importante, especifica cómo hacer ciertas cosas con los sitios oficiales de Drupal en el futuro.
Impide a los diseñadores que se incorporen al equipo ponerse a hacer lo que les dé la gana, y ayuda a los desarrolladores a hacer el trabajo de implementación, al especificar cómo se presentará el contenido en pantalla: Tipos de letra, tamaños, colores, márgenes.
Todo este ladrillo de documentaciónse hace por un buen motivo
Y todo esto era para...
Todo esto era una excusa para que veáis cómo se documenta una marca y por qué se hace de una cierta manera.
También se hace para que entendáis que el valor del diseño de una marca no está en el garabato final, está en esa documentación que explica de dónde sale ese garabato final y por qué, cómo usar tanto el garabato final como todo lo que lo rodea.
Se trata de comunicar,y comunicar bien.
Aunque cambienlas personasa cargo del proyecto.
Porque se nos juzgarápor nuestra imagen.
A veces, sólopor nuestra imagen.
Gracias
consultora DrupalDOCUMENTADOS
