Branding práctico: el Drupal Visual Language Guide

743 views
619 views

Published on

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?

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
743
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Branding práctico: el Drupal Visual Language Guide

  1. 1. Branding práctico: El Drupal Visual Language Guide Ignacio Segura Documentados.com
  2. 2. ¡HOLA! (Pantone 2995 coated)
  3. 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. 4. DOCUMENTADOS consultora Drupal
  5. 5. Nosotros DOCUMENTADOS consultora Drupal Yo
  6. 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. 7. Cosa 1 Las Marcas. La marca Drupal. Tu marca. Por qué debería importarte.
  8. 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. 9. Anuncio de Ogilvy & Mather
  10. 10. ¿A quién le importa la marca? ¡Drupal es taaaan alucinante! (Malas noticias, eso no es suficiente)
  11. 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. 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. 13. ¿Y a mí qué me importa?
  14. 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. 15. “The experience of the brand IS the brand” Brand Union
  16. 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. 17. “¡Buen trabajo, chicos!” +1 +1 +1 +1 +1
  18. 18. “¡Mal trabajo, chicos!” -1 -1 -1 -1 -1
  19. 19. “Drupal bueno, pero vosotros...” -1 -1 -1 -1
  20. 20. ¿Cómo generamos esa confianza?
  21. 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. 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. 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. 24. La primera impresión puede ser la última
  25. 25. Cosa 2 Qué es un manual de identidad visual corporativa. El Drupal visual language guide.
  26. 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. 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. 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. 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. 30. Drupal Visual Language Guide (el manual) https://infrastructure.drupal.org/drupal.org-style-guide/index.html
  31. 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. 32. El logotipo * No se especifica reducción mínima.
  33. 33. El área de respeto
  34. 34. Versión en color
  35. 35. Versión con fondo de color
  36. 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. 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. 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.
  39. 39. 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.
  40. 40. Podemos conseguir más complejidad usando un número de columnas mayor y luego agrupando. Seguirá pareciendo ordenado.
  41. 41. 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.
  42. 42. 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.
  43. 43. 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.
  44. 44. Iconos, gráfica auxiliar https://infrastructure.drupal.org/drupal.org-style-guide/page_furniture.html
  45. 45. Queda tal que así...
  46. 46. 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.
  47. 47. 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.
  48. 48. Se trata de comunicar, y comunicar bien. Aunque cambien las personas a cargo del proyecto.
  49. 49. Porque se nos juzgará por nuestra imagen. A veces, sólo por nuestra imagen.
  50. 50. Gracias DOCUMENTADOS consultora Drupal

×