Manual de identidad
1
2
Introducción
S
er la empresa líder del mercado web en el sector de la venta de seguros, esa es la ambición de Diana.com, que nació hace unos años para dar un servicio de calidad en un sector novedoso y con gran proyección de futuro. Una marca que busca diferenciarse en un mundo tan dinámico como el que vivimos actualmente debe mostrar un interés por todos los aspectos de su imagen gráfica, por tanto es vital centrarse en todos los aspectos comunicativos. Con este afán se ha creado este manual de identidad, que pretende satisfaccer todas las necesidades gráficas que se le pueden presentar a una empresa que conecta con sus clientes a través de interfaces tecnológicos. Este manual pretende, por lo tanto, normalizar y homogeneizar los parámetros gráficos que deberán emplearse, de modo uniforme, por todas aquellas per-
sonas encargadas de desenvolver y representar la imagen de Diana.com. A modo de normativa de aplicación de la identidad corporativa, deberá ser leído con detenimiento y comprendido antes de proceder a la puesta en práctica de los componentes de esa identidad. Debidamente aplicado, este manual asegura la consecución de una imagen homogénea, atractiva y fácilmente identificable para nuestra organización, a la vez que optimiza la eficacia de sus comunicaciones. El Manual de la Marca debe ser una herramienta “viva” y presente en todas las aplicaciones de la marca corporativa, y su convivencia con sus Productos. Las directrices que contiene este documento no pretenden, de ninguna manera, restringir la creatividad de la empresa, sino ser una guía que abra nuevas posibilidades creativas de comunicar su propia esencia. 3
1 2 3 4
Elementos de identidad
PapelerĂa
Color
Logotipos ConstrucciĂłn Errores Anagrama
Colores Degradados Logo sobre color
Sobre Folio Contrato Tarjeta
Tipografías
Web Aplicación Móvil Ipad Banner
Gran Formato Ciudad Merchandising
Tipografía
Web y App
Merchandising y publicidad
4 5 6 5
6
Elementos de identidad Logotipo Errores Construcciรณn Anagrama
7
Logotipo
El logotipo principal de la identidad se basa en la utilizaciรณn de este logo en fondo blanco. Siempre que se use el logo sin contextualizar se utilizarรก este logo.
En el caso de utilizar blanco y negro, se neutralizarรก el color verde.
Si es posible, se utilizarรก el logo en escala de grises, con el triรกngulo en un matiz del 50%.
8
1. Elementos de identidad
1. Elementos de identidad
Logotipo
En el caso de utilizar una composiciรณn monocroma el logo puede reducirse a un solo color en el amarillo que posteriormente especifcaremos. El logotipo debe ir principalmente sobre un fondo amarillo que se especificarรก posteriormente en el apartado de color.
9
Logotipo
Se puede utilizar el logo sobre fondo gris que serรก posteriormente especificado en el apartado de color. Para esto deberemos modificar a blanco los pictogramas de diana. El mismo casos se puede dar sobre fondo rojo. En el caso de utilizarse los siguientes colores como fondo, siempre el logotipo lo encontraremos en blanco.
10
1. Elementos de identidad
1. Elementos de identidad
Logotipo
11
Errores
En la utilización del logotipo están prohibidas las siguientes acciones: La flecha debe ir siempre en el color verde original que se especificará posteriormente.
“Diana” siempre irá en negro salvo lo especificado anteriormente.
El logotipo no debe ir en ningún color que no sea el específico.
12
1. Elementos de identidad
1. Elementos de identidad
Errores
El logotipo nunca debe presentarse con ningĂşn tipo de inclinaciĂłn.
NingĂşn trazo debe recorrer el logotipo.
El logotipo no debe acortarse. Su nombre completo es Diana.com, no debe nunca modificarse.
13
Logotipo Geometría
La geometría del logo se basa en el módulo que la medida del caractér “d” nos da. La longitud del logo se prolonga en 10 modulos. La flecha caraterística del logotipo tiene de longitud un módulo y medio, situandose a tres octavos del centro de la “d”.
14
1. Elementos de identidad
1. Elementos de identidad
El anagrama de nuestra identidad visual mantienene el elemento gráfico de la “d”, añadiendole un punto, que nos recuerda la importancia de que la empresa se basa en su situación en la
web. La flecha mantiene las mismas proporciones que las acotadas anteriormente, y el punto tiene un ancho igual al grosor del caractér de la “d”,
Geometría Logotipo
comenzando en el límite de su perpendicular.
15
Anagrama
El anagrama puede presentarse en su forma bรกsica, con la flecha en su color verde. Esta es la manera ideal de presentar el anagrama.
Puede presentarse el anagrama en blanco y negro cuando se imprima en un solo color, no obstante es preferible que la flecha pueda encontrarse con un matiz a 50%.
16
1. Elementos de identidad
1. Elementos de identidad
Anagrama
El anagrama se puede encontrar en un matiz del 50% sobre el mismo color de fondo amarillo. TambiĂŠn puede encontrarse este anagrama sobre fondo blanco.
17
Tamaño de Reproducción
Hay que tener en cuenta en la reproducción de nuestro logotipo los tamaños ideales y el tamaño mínimo al que se puede reproducir respetando las características de nuestro logo. A conti-
1. Elementos de identidad
nuación se nos da unos parámetros de reproducción tanto para impresión, expresados tanto en porcentaje en relación al tamaño ideal como en milimetros para orientar de las medidas.
120% - 96 x 7,704 mm 100% - 80 x 6,420 mm 80% - 64 x 5,136 mm 60% - 48 x 3,852 mm 40% - 32 x 2,568 mm 18
Mínimo de reproducción
1. Elementos de identidad
Tamaño de Reproducción
Cuando tratamos los dispositivos virtuales también tendremos que tener este aspecto de los tamaños de reproducción. En este caso, los valores vienen expresados en pixeles.
110% - 281 x 25,70 px 100% - 256 x 23,55 px 80% - 204 x 18,84 px 60% - 153 x 14,13 px 40% - 102 x 9,42 px
Mínimo de reproducción 19
20
Color Colores Primarios Colores Secundarios Degradados Logo sobre color
21
Colores
El color es un elemento esencial en nuestra identidad visual, pues es el principal valor que identifica a nuestra
CMYK: 75 00 100 00 RGB: 59 159 61 LAB: 52 -37 -24 HEX: #0CDC4A
CMYK: 62 07 72 00 RGB: 94 166 94 LAB: 66 -34 24 HEX: #47EE79 22
2. Color
marca. A continuación mostramos una relación de los diferentes colores que se deben utilizar en las diferentes
situaciones que se dan a la hora de diseñar. Los colores vienen descritos en CMYK y deben ser respetados.
2. Color
Colores
CMYK: 75 27 37 28 RGB: 23 37 88 LAB: 35 -2 7 HEX: #1B1F1C
CMYK: 21 84 75 00 RGB: 200 79 74 LAB: 50 48 28 HEX: # E4463E
CMYK: 06 15 99 00 RGB: 38 72 95 LAB: 84 10 80 HEX: #ECE10F 23
2. Color
Colores Secundarios
CMYK: 51 13 30 00 RGB: 59 159 61 LAB: 70 -9 -54 HEX: #0FD2EC
CMYK: 62 07 RGB: 94 166 LAB: 43 11 HEX: #AC7426
72 00 94 99
CMYK: 90 37 71 00 RGB: 59 159 61 LAB: 34 -31 -24 HEX: #388745 24
2. Color
Colores Secundarios
CMYK: 76 25 43 24 RGB: 52 48 54 LAB: 24 17 55 HEX: #AAB5AC
CMYK: 00 60 18 37 RGB: 105 27 43 LAB: 10 -27 34 HEX: #C13B77
CMYK: 45 32 37 54 RGB: 18 37 88 LAB: 34 24 56 HEX: #5FBE9B 25
2. Color
Degradados
Estan permitidos utilizar degradados en los siguientes colores:
CMYK: 62
07
100%
CMYK: 62
100%
26
72 00
80%
07
60%
40%
20%
60%
40%
20%
72 00
80%
2. Color
CMYK: 62
07
100%
CMYK: 62
100%
72 00
80%
07
Degradados
60%
40%
20%
60%
40%
20%
72 00
80%
27
Logo sobre color
28
2. Color
2. Color
Logo sobre color
29
30
PapelerĂa Folio Sobres Tarjeta Contratos
31
3. PapelerĂa
Folio
El anagrama puede presentarse en su forma bĂĄsica, con la flecha en su color verde. Esta es la manera ideal de presentar el anagrama.
22,5 mm
131 mm 16 mm
12 mm 30 mm
8 mm
32
3. PapelerĂa
Folio
33
Contrato
Como servicio complementario, se puede contratar el seguro a travĂŠs de nuestra web. Hay que tener en cuenta que esto va a ser utilizado como una impresiĂłn casera, y entonces debemos tener en cuenta que va a ser impreso en blanco y negro.
34
3. PapelerĂa
3. Papelería
Carta
El diseño de las redacciones deben seguir las proporciones indicadas a continuación.
35
Carpeta
La carpeta corporativa tendrá una medida estándar para A4 (230x320 mm).
36
3. Papelería
3. PapelerĂa
Carpeta
37
3. PapelerĂa
Sobre
Los sobres tendrĂĄn una medida de sobre americano (210x110mm).
30 mm
30 mm 30 mm
38
3. Papelería
Sobre
Pedro Gómez c/ Cea Bermúdez, 17, 3ºB 28027 Madrid
39
Tarjeta
Las tarjetas de visita de los empleados seguirán las siguientes directrices. El formato de la tarjeta tendra 85x55 mm, siendo esencial que la tarjeta utilice una tipografía Helvética Neue (regular y bold).
40
3. Papelería
3. PapelerĂa
Tarjeta
41
42
Tipografía Principal Secundaria Sustitución
43
Tipografías
La tipografía es una de los elementos esenciales que hay que tener en cuenta a la hora de cualquier diseño para nuestra identidad. Como eje central de este punto, la tipografía Myriad Pro es la que vamos a utilizar predominante-
Myriad Pro Tipografía Principal
4. Tipografía
mente. La tipografía Helvética neue se usa con predominancia para la impresión, para papelería. Tambíen tenemos dos tipografías sustitutivas que se utilizan en el caso de problemas con el navegador web.
Regular
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Bold
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 44
4. Tipografía
Tipografías
Semibold
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Italic
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Semibold Italic
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 45
Tipografías
Helvetica Neue Tipografía Secundaria
4. Tipografía
Regular
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Light
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Italic
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
46
4. Tipografía
Tipografías
Bold
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Bold Italic
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Medium
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
47
Tipografías
Verdana Tipografía Sustición
4. Tipografía
Regular
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Light
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Italic
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
48
4. Tipografía
Tipografías
Bold
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz Regular
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
Arial Tipografía Sustitución
Light
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
49
50
Web Web App mรณvil App Ipad Contratos
51
Web
52
5. Web y aplicaciones
5. Web y aplicaciones
Web
53
Web
54
5. Web y aplicaciones
5. Web y aplicaciones
Web
55
Web
56
5. Web y aplicaciones
5. Web y aplicaciones
Web
57
Aplicación Móvil
La aplicación para móvil es un elemento de especial relevancia en nuestro negocio. Cada vez son más las ocasiones en que nuestros clientes utilizan esta plataforma para adquirir seguros. Es por tanto que se ha diseñado un interfaz sencillo para esta aplicación. Botones grandes y concisos, insertando la información necesaria para navegar tu seguro por la aplicación Compara y conseguir un uso sencillo de la web móvil. Seguro de Coche
Seguro de Moto
5. Web y aplicaciones
Compara tu seguro
Seguro de Coche Seguro de Moto
Seguro de Casa
Seguro de Casa Seguro de Salud
Seguro de Salud
58
5. Web y aplicaciones
Aplicaciรณn Mรณvil
59
Aplicación Ipad
La aplicación para móvil es un elemento de especial relevancia en nuestro negocio. Cada vez son más las ocasiones en que nuestros clientes utilizan esta plataforma para adquirir seguros. Es por tanto que se ha diseñado un interfaz sencillo para esta aplicación. Botones grandes y concisos, insertando la información necesaria para navegar por la aplicación y conseguir un uso sencillo de la web móvil.
60
5. Web y aplicaciones
Compara tu seguro
Seguro de Coche
Seguro de Moto
Seguro de Hogar
Seguro de Salud
5. Web y aplicaciones
Aplicaciรณn Ipad
61
Banner
El banner es un elemento de publicidad importante, pues permite el conocimiento por parte del público general de la marca. Los banner tienen unos formatos normalizados, y estos deben ser tomados en cuenta en el momento de la creación de banners. A continuación se muestran unos ejemplos de banner que servirán de base para la creación de banners. Hay que tener en cuenta la prestancia del logo, que debe ser visible, sobre fondo amarillo.
62
5. Web y aplicaciones
5. Web y aplicaciones
Banner
63
Banner
64
5. Web y aplicaciones
5. Web y apliaciones
Banner
Con tu seguro, siempre das en la diana
Seguro de moto
Seguro de hogar
Seguro de coche
Seguro de salud
65
66
Mechandising y Publicidad Folio Sobres Tarjeta Contratos
67
Gran formato
Con el objetivo de hacer reconocible nuestra marca, es probable la utilizaciรณn de vallas de gran formato en ca-
68
6. Merchandising y publicidad
rreteras y autopistas. Estas seguiran el formato de valla de 16x3 m.
6. Merchandising y publicidad
Gran formato
69
Ciudad
70
6. Merchandising y publicidad
6. Merchandising y publicidad
Ciudad
71
Merchandising
A continuaciรณn, unas sugerencias de creaciรณn de merchandising, que intentan dar pinceladas para su creaciรณn.
72
6. Merchandising y publicidad
6. Merchandising y publicidad
Merchandising
23 Marzo
73
Este manual de identidad se realizรณ en el I.E.S Puerta Bonita, como trabajo formativo. La creaciรณn de la obra pertenece a Pablo da Cruz Olmos, alumno del centro en el curso 2015/16.
75