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?

1. Branding práctico:
El Drupal Visual Language Guide
Ignacio Segura
Documentados.com

2. ¡HOLA!
(Pantone 2995 coated)

3. Yo @nachenko
Me llamo Ignacio Segura, y soy el diseñador gráfico y themer
de Documentados, una empresa de desarrollo y consultora
especializada en Drupal.

4. DOCUMENTADOS
consultora Drupal

5. Nosotros
DOCUMENTADOS
consultora Drupal
Yo

6. 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.

7. Cosa 1
Las Marcas. La marca Drupal. Tu marca. Por qué debería importarte.

8. 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?

9. Anuncio de Ogilvy & Mather

10. ¿A quién le importa la marca?
¡Drupal es taaaan alucinante!
(Malas noticias, eso no es suficiente)

11. ¿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.

12. 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.

13. ¿Y a mí qué me importa?

14. 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

15. “The experience of the brand
IS the brand”
Brand Union

16. 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.

17. “¡Buen trabajo, chicos!”
+1
+1
+1
+1
+1

18. “¡Mal trabajo, chicos!”
-1
-1
-1
-1
-1

19. “Drupal bueno,
pero vosotros...”
-1
-1
-1
-1

20. ¿Cómo generamos esa confianza?

21. 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.

22. 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í.

23. 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.

24. La primera impresión
puede ser la última

25. Cosa 2
Qué es un manual de identidad visual corporativa. El Drupal visual language guide.

26. 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.

27. El tipo que lo pensó está apagado
o 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...

28. 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.

29. 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.

30. Drupal Visual Language Guide (el manual)
https://infrastructure.drupal.org/drupal.org-style-guide/index.html

31. 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.

32. El logotipo
* No se especifica reducción mínima.

33. El área de respeto

34. Versión en color

35. Versión con fondo de color

36. 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

37. 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.

38. 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.

40. 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.

44. Podemos conseguir más complejidad usando un
número de columnas mayor y luego agrupando.
Seguirá pareciendo ordenado.

51. 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.

54. 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.

56. 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.

57. Iconos, gráfica auxiliar
https://infrastructure.drupal.org/drupal.org-style-guide/page_furniture.html

58. Queda tal que así...

61. Todo este ladrillo de documentación
se hace por un buen motivo
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.

62. 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.

63. Se trata de comunicar,
y comunicar bien.
Aunque cambien
las personas
a cargo del proyecto.

64. Porque se nos juzgará
por nuestra imagen.
A veces, sólo
por nuestra imagen.

65. Gracias
DOCUMENTADOS
consultora Drupal