SlideShare uma empresa Scribd logo
1 de 65
Baixar para ler offline
Branding práctico:
El Drupal Visual Language Guide

Ignacio Segura
Documentados.com
¡HOLA!
(Pantone 2995 coated)
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.
DOCUMENTADOS
consultora Drupal
Nosotros

DOCUMENTADOS
consultora Drupal
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 1
Las 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ón
puede ser la última
Cosa 2
Qué 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á 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...
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í...
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.
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 cambien
las personas
a cargo del proyecto.
Porque se nos juzgará
por nuestra imagen.
A veces, sólo
por nuestra imagen.
Gracias

DOCUMENTADOS
consultora Drupal

Mais conteúdo relacionado

Semelhante a Branding práctico: el Drupal Visual Language Guide

Magia con Drupal
Magia con DrupalMagia con Drupal
Magia con Drupalmbavio
 
Presentacion drupal on the box de Oskar de Documentados
Presentacion drupal on the box de Oskar de DocumentadosPresentacion drupal on the box de Oskar de Documentados
Presentacion drupal on the box de Oskar de DocumentadosWORKbox
 
CANVA - Perla Maldonado.pdf
CANVA - Perla Maldonado.pdfCANVA - Perla Maldonado.pdf
CANVA - Perla Maldonado.pdfPerlaMaldonado8
 
software para creación de contenido digital.
software para creación de contenido digital.software para creación de contenido digital.
software para creación de contenido digital.Cristofer STEVE
 
Incepción ágil at infosoft
Incepción ágil at infosoftIncepción ágil at infosoft
Incepción ágil at infosoftHiroshi Hiromoto
 
Entornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativoEntornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativoMadelyn Nuñez Paula
 
Alexis yaselga 6to a nocturno (2)
Alexis yaselga 6to a nocturno (2)Alexis yaselga 6to a nocturno (2)
Alexis yaselga 6to a nocturno (2)alexisyaselga
 
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalMarketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalLa Drupalera
 
Curso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercioCurso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercioIgone Castillo
 
Consejos y trucos para cualificar una oportunidad Drupal
Consejos y trucos para cualificar una oportunidad DrupalConsejos y trucos para cualificar una oportunidad Drupal
Consejos y trucos para cualificar una oportunidad DrupalLa Drupalera
 
De idea a mvp, drupal para emprendedores
De idea a mvp, drupal para emprendedoresDe idea a mvp, drupal para emprendedores
De idea a mvp, drupal para emprendedoresIván Campaña Naranjo
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?Jimena Catalina Gayo
 

Semelhante a Branding práctico: el Drupal Visual Language Guide (20)

Magia con Drupal
Magia con DrupalMagia con Drupal
Magia con Drupal
 
¿Se puede implementar una Cultura Ágil?
¿Se puede implementar una Cultura Ágil?¿Se puede implementar una Cultura Ágil?
¿Se puede implementar una Cultura Ágil?
 
Presentacion drupal on the box de Oskar de Documentados
Presentacion drupal on the box de Oskar de DocumentadosPresentacion drupal on the box de Oskar de Documentados
Presentacion drupal on the box de Oskar de Documentados
 
Drupalonthebox
DrupalontheboxDrupalonthebox
Drupalonthebox
 
CANVA - Perla Maldonado.pdf
CANVA - Perla Maldonado.pdfCANVA - Perla Maldonado.pdf
CANVA - Perla Maldonado.pdf
 
Drupal vs joomla
Drupal vs joomlaDrupal vs joomla
Drupal vs joomla
 
software para creación de contenido digital.
software para creación de contenido digital.software para creación de contenido digital.
software para creación de contenido digital.
 
Incepción ágil at infosoft
Incepción ágil at infosoftIncepción ágil at infosoft
Incepción ágil at infosoft
 
Jose.ullauri.6to a noc
Jose.ullauri.6to a nocJose.ullauri.6to a noc
Jose.ullauri.6to a noc
 
Entornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativoEntornos digitales de enseñanza y aprendizaje colaborativo
Entornos digitales de enseñanza y aprendizaje colaborativo
 
Jessica vargas 6 to an
Jessica vargas 6 to anJessica vargas 6 to an
Jessica vargas 6 to an
 
Alexis yaselga 6to a nocturno (2)
Alexis yaselga 6to a nocturno (2)Alexis yaselga 6to a nocturno (2)
Alexis yaselga 6to a nocturno (2)
 
Jose.ullauri.6to anoc
Jose.ullauri.6to anocJose.ullauri.6to anoc
Jose.ullauri.6to anoc
 
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en DrupalMarketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
Marketing, Comunidad, Empleo y Negocio Internacional basado en Drupal
 
Libro final
Libro finalLibro final
Libro final
 
Curso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercioCurso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercio
 
Consejos y trucos para cualificar una oportunidad Drupal
Consejos y trucos para cualificar una oportunidad DrupalConsejos y trucos para cualificar una oportunidad Drupal
Consejos y trucos para cualificar una oportunidad Drupal
 
Carolina
CarolinaCarolina
Carolina
 
De idea a mvp, drupal para emprendedores
De idea a mvp, drupal para emprendedoresDe idea a mvp, drupal para emprendedores
De idea a mvp, drupal para emprendedores
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?
 

Mais de Ignacio Segura

Cloud para tu juego en una tarde
Cloud para tu juego en una tardeCloud para tu juego en una tarde
Cloud para tu juego en una tardeIgnacio Segura
 
Jean Giraud, "Moebius"
Jean Giraud, "Moebius"Jean Giraud, "Moebius"
Jean Giraud, "Moebius"Ignacio Segura
 
Drupalcamp 2012 - Principios de diseño para gente que no diseña
Drupalcamp 2012 - Principios de diseño para gente que no diseñaDrupalcamp 2012 - Principios de diseño para gente que no diseña
Drupalcamp 2012 - Principios de diseño para gente que no diseñaIgnacio Segura
 
Presentación George Grosz
Presentación George GroszPresentación George Grosz
Presentación George GroszIgnacio Segura
 
Presentación - El color en la obra de Sergio Mora
Presentación - El color en la obra de Sergio MoraPresentación - El color en la obra de Sergio Mora
Presentación - El color en la obra de Sergio MoraIgnacio Segura
 

Mais de Ignacio Segura (7)

Taller de Chiptune
Taller de ChiptuneTaller de Chiptune
Taller de Chiptune
 
Cloud para tu juego en una tarde
Cloud para tu juego en una tardeCloud para tu juego en una tarde
Cloud para tu juego en una tarde
 
Jean Giraud, "Moebius"
Jean Giraud, "Moebius"Jean Giraud, "Moebius"
Jean Giraud, "Moebius"
 
Saul Steinberg
Saul SteinbergSaul Steinberg
Saul Steinberg
 
Drupalcamp 2012 - Principios de diseño para gente que no diseña
Drupalcamp 2012 - Principios de diseño para gente que no diseñaDrupalcamp 2012 - Principios de diseño para gente que no diseña
Drupalcamp 2012 - Principios de diseño para gente que no diseña
 
Presentación George Grosz
Presentación George GroszPresentación George Grosz
Presentación George Grosz
 
Presentación - El color en la obra de Sergio Mora
Presentación - El color en la obra de Sergio MoraPresentación - El color en la obra de Sergio Mora
Presentación - El color en la obra de Sergio Mora
 

Último

Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadDiosymarSuarez
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfAsol7
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxHarryArmandoLazaroBa
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfandrea Varela
 
Arquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfArquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfsalazar1611ale
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizingagbhuizinga2000
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezRosibelVictoriaVelas
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAPjuanrincon129309
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfalguien92
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDAdiawaraplast
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfsteevensnodamartel
 

Último (20)

Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la Modernidad
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdf
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptx
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
 
Arquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfArquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdf
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizinga
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAP
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdf
 

Branding práctico: el Drupal Visual Language Guide

  • 1. Branding práctico: El Drupal Visual Language Guide Ignacio Segura Documentados.com
  • 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.
  • 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.
  • 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
  • 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.
  • 39.
  • 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.
  • 41.
  • 42.
  • 43.
  • 44. Podemos conseguir más complejidad usando un número de columnas mayor y luego agrupando. Seguirá pareciendo ordenado.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 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.
  • 52.
  • 53.
  • 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.
  • 55.
  • 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.
  • 58. Queda tal que así...
  • 59.
  • 60.
  • 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.