1. No category

Marzo 2015
MANUAL DE IDENTIDAD
CORPORATIVA
1
ÍNDICE
01. NUESTRA
MARCA
03. ELEMENTOS
BÁSICOS
QUÉ ES COCHES.NET
PALETA DE COLORES
HISTORIA DE LA MARCA
TIPOGRAFÍA
MISIÓN
ICONOGRAFÍA
VISIÓN
ESTILO DE FONDOS
VALORES
USO DE FOTOGRAFÍAS
CONCEPTO CREATIVO “TU PRÓXIMO
COCHE ESTÁ AQUÍ”
02. NUESTRA
IDENTIDAD VISUAL
04. EJEMPLOS
DE APLICACIÓN
LANDING PAGES
EMAILS
LOGOTIPO
FIRMA EMAIL
LOGOTIPO+CLAIM
PRODUCTOS DISPLAY
VERSIÓN PARA FORMATOS REDUCIDOS
APLICACIONES OFFLINE
TAMAÑO MÍNIMO
REDES SOCIALES
ÁREA DE PROTECCIÓN
COLORES DE LA MARCA
VERSIÓN A UN COLOR
APLICACIÓN SOBRE FONDOS DE COLOR
VARIANTE ABREVIADA
USOS INCORRECTOS
2
01. NUESTRA MARCA
QUÉ ES COCHES.NET
HISTORIA DE LA MARCA
MISIÓN
VISIÓN
VALORES
CONCEPTO CREATIVO “TU PRÓXIMO
COCHE ESTÁ AQUÍ”
3
01. NUESTRA MARCA QUÉ ES COCHES.NET
ENCANTADOS,
SOMOS COCHES.NET
Para todos los que quieren comprar
un vehículo, el portal de motor con
la oferta más variada de vehículos
nuevos y segunda mano de España.
Y para todos los que quieren vender
su vehículo, la opción
más fácil, rápida y segura.
Un puente entre vendedores
y compradores, que además ofrece
un contenido editorial
e información técnica de gran interés
y calidad.
4
01. NUESTRA MARCA HISTORIA DE LA MARCA
UN POCO
DE HISTORIA
En 1996 nacimos como un magazine de motor con
noticias, vehículos de ocasión y una comunidad del
automóvil.
En 2004 entramos a formar parte del grupo Anuntis.
En 2008 apostamos por el segmento del vehículo nuevo
y el contenido editorial y presentamos un restyling
completo del portal.
De su mano, hemos conseguido unos números que nos
llenan de orgullo: 9,6 millones de visitas al mes y 182
millones de páginas vistas*.
*Datos de OJD, diciembre 2014.
5
01. NUESTRA MARCA MISIÓN
NUESTRA MISIÓN,
CONVERTIRNOS EN EL MAYOR
MARKETPLACE MÁS EFICIENTE,
ÚTIL Y ATRACTIVO DE ESPAÑA.
Queremos ser la referencia para aquellos que buscan el
coche que mejor se adapta a sus necesidades y para los
que quieren vender el suyo.
6
01. NUESTRA MARCA VISIÓN
VISIÓN
DE PRESENTE
(Y DE
FUTURO)
Nuestro objetivo es ser el Marketplace que mejora la vida
de las personas.
7
01. NUESTRA MARCA VALORES
NUESTROS VALORES,
ALGO MÁS QUE PALABRAS
BONITAS.
8
01. NUESTRA MARCA VALORES
LÍDER
Creemos que el camino hacia el liderazgo debe ser el trabajo y la ambición
positiva. Por supuesto, basados en pilares como la experiencia o la innovación.
Si cada día pensamos en superarnos, acabaremos superándonos.
9
01. NUESTRA MARCA VALORES
HELPFUL
Nos gusta estar cerca de nuestros usuarios y clientes. Saber qué les gusta, qué
no les gusta, qué les preocupa. Intentamos estar abiertos a todo aquello que
nos haga mejores y que repercuta positivamente en ellos.
10
01. NUESTRA MARCA VALORES
TRUSTWORTHY
siendo totalmente coherentes con lo que decimos. Respetando las opiniones
de nuestros usuarios y siendo sinceros con ellos. Así, ganamos todos.
11
01. NUESTRA MARCA VALORES
PRÁCTICO
también. Somos prácticos y así lo transmitimos, en cada detalle, para conseguir
12
01. NUESTRA MARCA VALORES
SMART
Buscamos ser positivos, estar en conexión con todo lo que nos rodea
y actualizarnos constantemente para mantenernos listos y espabilados.
Tratamos de contagiar una actitud positiva a todos nuestros compañeros
y usuarios para que mantengan la misma vitalidad.
13
01. NUESTRA MARCA CONCEPTO CREATIVO “TU PRÓXIMO COCHE ESTÁ AQUÍ”
NUESTRA
ESENCIA
DE MARCA
Queremos que todo el mundo encuentre el coche que
mejor se adapta a sus deseos y necesidades.
Que todo el mundo venda su coche de la forma más fácil
y rápida.
Y que todo el mundo encuentre un contenido editorial y
unos servicios del mundo del motor de máxima calidad.
Por todo ello, podemos decir orgullosos que, sea cual
sea el coche que necesitas, lo tenemos.
CON TODOS VOSOTROS…
14
15
02. NUESTRA IDENTIDAD VISUAL
LOGOTIPO
LOGOTIPO + CLAIM
VERSIÓN PARA FORMATOS REDUCIDOS
TAMAÑO MÍNIMO
ÁREA DE PROTECCIÓN
COLORES DE LA MARCA
VERSIÓN A UN COLOR
APLICACIÓN SOBRE FONDOS DE COLOR
VARIANTE ABREVIADA
USOS INCORRECTOS
16
02. NUESTRA IDENTIDAD VISUAL LOGOTIPO PRINCIPAL
17
02. NUESTRA IDENTIDAD VISUAL LOGOTIPO + CLAIM
18
02. NUESTRA IDENTIDAD VISUAL VERSIÓN PARA FORMATOS REDUCIDOS
El logotipo tiene una “versión B” para su utilización en tamaños
muy reducidos. Esta versión solo debe ser utilizada para
la versión principal.
19
02. NUESTRA IDENTIDAD VISUAL TAMAÑO MÍNIMO
Para impresión el logotipo puede ser reducido hasta los 30
(largo). En casos excepcionales en los que sea necesario un tamaño
más pequeño usaremos la versión B.
Tamaño mínimo
de impresión
Tamaño mínimo
para digital
140 px
139 px
30 mm
29 mm
18 mm
90 px
En aplicaciones del logotipo + Claim se aplican las mismas normas. La medida mínima será siempre la del ancho del logotipo.
20
02. NUESTRA IDENTIDAD VISUAL ÁREA DE PROTECCIÓN
El espacio de protección mínimo debe ser siempre la medida
de “2X” asegurando la buena visualización del logo en un contexto.
Logotipo principal
21
02. NUESTRA IDENTIDAD VISUAL ÁREA DE PROTECCIÓN
Logotipo + Claim
22
02. NUESTRA IDENTIDAD VISUAL ÁREA DE PROTECCIÓN
Versión B para formatos reducidos
23
02. NUESTRA IDENTIDAD VISUAL COLORES DE LA MARCA
negro y el rojo. En su aplicación a negativo se sustituye el negro por
blanco.
Pantone Black C
CMYK 90 90 90 100
RGB 0 0 0
HEX #000000
Pantone Warm Red
CMYK 0 85 85 0
RGB 234 75 54
#E84C3D
24
02. NUESTRA IDENTIDAD VISUAL VERSIÓN A UN COLOR
En casos excepcionales en los que no sea posible aplicar
el logotipo a colores usaremos su versión a un color.
Para el uso a un color usamos el negro al 100% o su versión a
negativo en color blanco. No se permite el uso de otros colores.
25
02. NUESTRA IDENTIDAD VISUAL APLICACIÓN SOBRE FONDOS DE COLOR
26
02. NUESTRA IDENTIDAD VISUAL VARIANTE ABREVIADA
La versión abreviada del logotipo solo debe ser utilizado como
icono cuando no sea posible el uso de la versión principal,
ej: un icono de aplicación móvil.
27
02. NUESTRA IDENTIDAD VISUAL USOS INCORRECTOS
nuestra marca, para eso hay que tratar de salvaguardar su
integridad y legibilidad. Aquí se pueden ver algunos ejemplos de
uso incorrecto del logotipo.
Cambiar orientación
Volumen
Cambiar color
Cortar
Glow
Fondos de color similar
Sombras
Caja blanca
Distorsionar
Desplazar elementos
Sustituir elementos
28
03. ELEMENTOS BÁSICOS
PALETA DE COLORES
TIPOGRAFÍA
ICONOGRAFÍA
ESTILO DE FONDOS
USO DE FOTOGRAFÍAS
29
03. ELEMENTOS BÁSICOS PALETA DE COLORES
Los colores principales de la marca Coches.net son el negro
y el rojo que se complementan con el gris y el Blanco.
Como colores secundarios se puede usar toda la gama
de porcentaje del negro, el verde y el azul.
Colores principales
Pantone Black C
CMYK 90 90 90 100
RGB 0 0 0
HEX #000000
10% Pantone Black C
CMYK 90 90 90 100
RGB 0 0 0
HEX #000000
Pantone Warm Red
CMYK 0 85 85 0
RGB 234 75 54
#E84C3D
Colores secundarios
% Negro
Pantone 562
CMYK 90 40 40 8
RGB 0 122 135
#007A87
Pantone 285
CMYK 70 50 0 0
RGB 69 133 242
#4585F2
30
03. ELEMENTOS BÁSICOS PALETA DE COLORES
Los colores secundarios deberán aplicarse de manera limitada,
como apoyo a los colores principales.
nuestras composiciones. Aunque el rojo sea un color principal
debe ser utilizado en menor proporción. Se usará para destacar o
enriquecer elementos de la composición.
Proporción de colores
31
03. ELEMENTOS BÁSICOS TIPOGRAFÍA
D. Hunt. Concebida principalmente como un tipo de letra para las
En todos aquellos casos en los que no sea posible usar la Source
Sans Pro, como emails o newsletters, usaremos Arial como
Tipografía principal
Tipografía secundaria
Source Sans Pro
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
1234567890!@£$%^&*()_+
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()_+
32
03. ELEMENTOS BÁSICOS TIPOGRAFÍA
transmitir contenidos muy variados, ya sea en materiales
promocionales o contenido institucional.
Para que nuestra marca mantenga coherencia usaremos para
Ipsum dolor
Lorem ipsum dolor
Sit amet, consectetur adipiscing elit.
Fusce sed leo. Maecenas ultrices lorem sit
amet diam.
CONSECTETUR
Ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce sed leo. Maecenas
ultrices lorem sit amet diam.
Otros colores solo deberán ser usados en casos excepcionales y
Ipsum dolor sit amet consectetur
adipiscing elit. Fusce sed leo.
Maecenas ultrices lorem sit amet
diam. Suspendisse commodo
leo. Aliquam quis diam. Aliquam
sollicitudin tristique nulla. Duis
libero diam, condimentum et,
congue eu, tellus. Phasellus eu elit
at nisi ultricies lobortis.Suspendisse
porta commodo leo.
Lorem ipsum dolor
33
03. ELEMENTOS BÁSICOS TIPOGRAFÍA
Para aplicaciones online limitaremos los tamaños y el uso
títulos, subtítulos y bloques de texto.
Para los titulares principales daremos prioridad al uso de la
y el uso de las demás versiones de la Source Sans Pro solo los
usaremos en piezas donde se requiera un gran impacto.
Aplicaciones online
Lorem ipsum dolor
H1 Source Sans Pro Bold 32px
Leading 36 px
Lorem ipsum dolor
H2 Source Sans Pro Bold 28px
Leading 34 px
Lorem ipsum dolor
H3 Source Sans Pro Bold 24px
Leading 30 px
Loren ipsum dolor
H4 Source Sans Pro Bold 18px
Leading 20 px
Para aplicaciones web el base font size es de 16 px.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce sed leo. Maecenas
ultrices lorem sit amet diam.
Body Copy Source Sans Pro Regular 16px
Leading 21 px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce sed leo. Maecenas ultrices lorem sit amet.
Body Copy Source Sans Pro Regular 14px
Leading 17 px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed
leo. Maecenas ultrices lorem sit amet diam.
Legal text Source Sans Pro Regular 11px
Leading 13 px / 10 Tracking
34
03. ELEMENTOS BÁSICOS ICONOGRAFÍA
ICONOS DE NAVEGACIÓN
más rápida de una característica o acción de nuestras
aplicaciones online. Pueden representar acciones como enviar,
guardar, editar y compartir.
No deben ser demasiado complicados ya que puede ocurrir
que tengamos la necesidad de usar estés iconos a tamaño muy
pequeño.
35
03. ELEMENTOS BÁSICOS ICONOGRAFÍA
ICONOS DE DESCRIPTIVOS
Usaremos los iconos descriptivos para enriquecer y destacar
ideas y conceptos, como listar servicios o explicar un producto.
Deben ser utilizados para complementar, destacar y hacer el
contenido más atractivo, nunca sustituirlo.
La paleta de colores que podemos usar es la de la marca.
36
03. ELEMENTOS BÁSICOS ESTILO FOTOGRÁFICO
Nos encanta transmitir siempre una actitud positiva. Por eso los
más cálidas y ricas visualmente, usaremos juegos lumínicos y
evitaremos la saturación.
queremos transmitir en nuestros valores.
37
04. EJEMPLOS DE APLICACIÓN
LANDING PAGES
EMAILS
FIRMA EMAIL
PRODUCTOS DISPLAY
APLICACIONES OFFLINE
REDES SOCIALES
38
04. EJEMPLOS DE APLICACIÓN LANDING PAGES
Usaremos este tipo de páginas para comunicar novedades
de producto, eventos o promociones de la marca.
La estructura de contenido debe ser simple y clara.
39
04. EJEMPLOS DE APLICACIÓN EMAILS
Para nuestras plantillas de mail tenemos siempre dos elementos
Debemos utilizar mails responsive para asegurarnos que se
visualicen correctamente en cualquier cliente de correo. Siempre
40
04. EJEMPLOS DE APLICACIÓN EMAILS
41
04. EJEMPLOS DE APLICACIÓN FIRMA EMAIL
42
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY
Han de respetarse las guías de seguridad para la colocación del
contenido para garantizar una buena lectura de la marca.
Y
x
Y
x
x
La medida “X” es la misma que la altura de la H del logotipo.
43
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY
44
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY
45
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY
46
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY
47
04. EJEMPLOS DE APLICACIÓN APLICACIONES OFFLINE
Es importante ser concisos en nuestro mensaje, nuestras
respectar las proporciones entre los elementos de la composición
manchas de texto o visuales cargados.
Deberemos colocar el logotipo abajo a la izquierda y siempre que
sea posible evitar otros contenidos en la misma área.
limitaremos los tamaños de los titulares a un máximo de 36pt.
Para bloques de texto un máximo de 14pt.
X
X
48
04. EJEMPLOS DE APLICACIÓN APLICACIONES OFFLINE / ROLLUP
49
04. EJEMPLOS DE APLICACIÓN PRODUCTOS DISPLAY / CARTELA VÍDEO
50
04. EJEMPLOS DE APLICACIÓN REDES SOCIALES
51
04. EJEMPLOS DE APLICACIÓN REDES SOCIALES
52
Si tienes dudas en la aplicación de cualquier elemento de esta guía, puedes contactar
con el equipo de diseño de Coches.net en [email protected]
53
54