MANUAL DE IDENTIDAD CORPORATIVA
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis laoreet leo et maximus. Donec vel leo non lorem finibus sodales quis sed elit. Morbi id egestas augue. Maecenas a cursus ex, non interdum tortor. Aliquam quis nulla sed nulla finibus vestibulum. Morbi id tortor ullamcorper, commodo erat placerat, fe Aliquam sodales semper lacus a gravida. Maecenas ut velit est. Pellentesque congue, diam
UNA GUÍA PARA EL CORRECTO USO Y REPRODUCCIÓN a vulputate lacinia, lectus purus blandit elit, ut ultrices risus quam in risus. Nunc non sapien DE LA IDENTIDAD VISUAL, ELviverra SISTEMA GRÁFICO vulputate, nunc ac, porttitor nisi. Y LA APLICACIÓN MULTIMEDIA DE APPHOME
MANUAL DE IDENTIDAD CORPORATIVA UNA GUÍA PARA EL CORRECTO USO Y REPRODUCCIÓN DE LA IDENTIDAD VISUAL, EL SISTEMA GRÁFICO Y LA APLICACIÓN MULTIMEDIA DE APPHOME © AppHome 2015 | www.apphome.es
3
APPTUALIZANDO EL CONCEPTO INMOBILIARIO
APPHOME: MÁS FÁCIL
Con dos años de desarrollo e investigación dentro del mercado, AppHome nace como la solución fácil a los problemas actuales del mercado inmobiliario. Unificamos todo lo bueno del sector con lo mejor de la tecnología app de hoy en día, para ofrecer un servicio adecuado a las necesidades actuales.
MISIÓN DE LA EMPRESA
Unificamos todos nuestros valores en nuestro eslogan: más fácil. Tanto nuestra app como nuestros servicios adicionales pretenden facilitarte las cosas y hacer que tu experiencia sea más agradable. Este manual de identidad corporativa está hecho bajo esta filosofía, para que puedas entender mejor nuestra marca.
TONO DE COMUNICACIÓN
Somos una empresa cercana que quiere ponerte las cosas fáciles, de ahí que nuestra comunicación sea sencilla, directa y muy visual. Queremos tenerte en cuenta y se nota en nuestra manera de dirigirnos a ti.
© AppHome 2015 | www.apphome.es
5
ÍNDICE 01/ IDENTIDAD VISUAL 1.1/ Logo 1.2/ Construcción 1.3/ Espacio 1.4/ Variaciones 1.5/ Usos erróneos 1.6/ Colores principales 1.7/ Colores secundarios
02/ SISTEMA GRÁFICO 2.1/ Tipografía 2.2/ Tipografías secundarias 2.3/ Iconografía 2.4/ Patrón
03/ APLICACIÓN MULTIMEDIA 3.1/ App 3.2/ Landing page 3.3/ Marketing online 3.4/ Marketing offline
01/ IDENTIDAD VISUAL 1.1/ Logo 1.2/ Construcciรณn 1.3/ Espacio 1.4/ Variaciones 1.5/ Usos errรณneos 1.6/ Colores principales 1.7/ Colores secundarios
1.1/ LOGO
LOGO CORPORATIVO
Nuestro logo es un imagotipo formado por el isotipo + el nombre de la empresa, en colores rojo y negro. El isotipo puede funcionar de forma independiente y representar a la marca. El nombre es sencillo y directo, haciendo la comprensión, como bien dice nuestro eslogan, más fácil. El eslogan puede aparecer como tagline.
10
© AppHome 2015 | www.apphome.es
1.2/ CONSTRUCCIÓN
CONSTRUCCIÓN
El desarrollo creativo del isotipo deriva de la unificación literal del mercado inmobiliario con un smart phone. Ambos elementos están simplificados gráficamente y formados por líneas con esquinas redondeadas para capturar nuestra idea de ofrecer un servicio más fácil y agradable.
© AppHome 2015 | www.apphome.es
11
1.3/ ESPACIO
ESPACIO
12
El espacio a respetar alrededor del imagotipo responde a la altura X de las letras mayĂşsculas de nuestro nombre, para no ahogar el imagotipo con otros contenidos. El espacio entre isotipo y nombre corresponde a la mitad de X.
Š AppHome 2015 | www.apphome.es
1.4/ VARIACIONES
FONDO OSCURO
VERTICAL
UNA SOLA TINTA
VARIACIONES
Nuestro imagotipo tiene diferentes variantes para amoldarse a diferentes formatos: la versión en blanco para ir sobre fondos oscuros, la versión vertical para formatos verticales (como las pantallas de los móviles, por ejemplo), el imagotipo de forma independiente y las versiones en una sola tinta para cuando la ocasión lo requiera.
© AppHome 2015 | www.apphome.es
13
1.5/ USOS ERRÓNEOS
1
2
3
4
5
6
7
8
9
USOS ERRÓNEOS
14
1. 2. 3. 4. 5.
Rotar en cualquier sentido Estrechar/estirar Achatar/alargar Cambiar posición de los elementos Cambiar posición de los elementos
© AppHome 2015 | www.apphome.es
6. 7. 8. 9.
Dividir los elementos Dividir&cambiar de posición Usar el texto como logotipo Simplificación del nombre
10
11
12
13
14
15
16
17
18
USOS ERRÓNEOS
1. 2. 3. 4. 5.
Invertir colores Cambiar colores Usar con degradados Usar gris para la versión en blanc y negro Usar sobre fondos super saturados
© AppHome 2015 | www.apphome.es
6. 7. 8. 9.
Cambiar tipografía Encerrar en un recuadro Contornear Invertir/editar isotipo
15
1.6/ COLORES PRINCIPALES
ROJO PANTONE Red 032 Coated HEX #F6343F CMYK 0 88 68 0 RGB 247 50 63
COLORES PRINCIPALES
16
NEGRO
BLANCO
HEX #000000
HEX #ffffff
CMYK 0 0 0 100
CMYK 0 0 0 0
RGB 29 29 27
RGB 255 255 255
Tres son los colores principales de AppHome: el rojo corporativo, representativo de la energía que queremos transmitir, empleado en el imagotipo y usado para acentuar elementos en la app y en nuestras comunicaciones; el negro, como color más legible y neutro, para hacer la comunicación más fácil; y el blanco, principalmente empleado como fondo sobre el que se plasman los otros dos colores, como color para conseguir limpieza y simplificación de la comunicación.
© AppHome 2015 | www.apphome.es
1.7/ COLORES SECUNDARIOS
COLORES SECUNDARIOS
AZUL OSCURO
AZUL CLARO
HEX #6E8096
HEX #8CA5C3
CMYK 54 36 25 1
CMYK 39 21 10 0
RGB 110 128 150
RGB 140 165 195
AMARILLO
VERDE
HEX #FFBC66
HEX #839F5B
CMYK 0 23 57 0
CMYK 55 22 73 5
RGB 255 188 102
RGB 131 159 94
Los colores secundarios se emplean para categorizar elementos dentro de la app y del programa de gestión inmobiliario. Son, en orden, dos tonos de azul diferentes, amarillo y verde. Todos estos colores tienen una alta luminosidad con la intención de suavizarlos al ojo. No se emplearán nunca como fondo; para eso tenemos nuestro rojo.
© AppHome 2015 | www.apphome.es
17
02/ SISTEMA GRÁFICO 2.1/ Tipografía 2.2/ Tipografías secundarias 2.3/ Iconografía 2.4/ Patrón
2.1/ TIPOGRAFÍA
A TIPOGRAFÍA
20
Helvetica Neue Bold ABCDEFGHIJKLMN ÑOPQRSTUVWXYZ abcdefghijklmn ñopqrstuvwxyz 1234567890
Siguiendo en nuestra línea corporativa, la tipografía elegida para nuestro imagotipo y presente en el resto de nuestras comunicaciones y elementos corporativos es la Helvetica Neue Bold. Una tipografía sin serifas, clara y contundente, consigue transmitir nuestra idea de simplificar las cosas para hacerlas más fáciles.
© AppHome 2015 | www.apphome.es
A A
2.2/ TIPOGRAFÍAS SECUNDARIAS
TIPOGRAFÍAS SECUNDARIAS
Raleway Black ABCDEFGHIJKLMN ÑOPQRSTUVWXYZ abcdefghijklmn ñopqrstuvwxyz 1234567890
Helvetica Neue Light ABCDEFGHIJKLMN ÑOPQRSTUVWXYZ abcdefghijklmn ñopqrstuvwxyz 1234567890
Empleamos la tipografía Raleway Black para poder destacar elementos y acentuarlos en nuestras comunicaciones. Se utiliza para títulos, claims, artes finales... No debe emplearse con textos largos. Para eso tenemos la Helvetica Neue Light, que forma cuerpos de texto redondeados y agradables de leer sin perder la simplicidad que tanto nos gusta de esta familia tipográfica.
© AppHome 2015 | www.apphome.es
21
2.3/ ICONOGRAFÍA
ICONOGRAFÍA
22
Siguiendo la línea gráfica establecida en el isotipo corporativo, todos los elementos gráficos de la app están formados por líneas curvadas sin esquinas y simplificados. Siempre que sea posible están basados en formas rectangulares, para fortalecer y unificar el sistema gráfico de nuestra marca. Los iconos son negros sobre fondo blanco, y se acentúan en rojo cuando se pulsan.
© AppHome 2015 | www.apphome.es
2.4/ PATRÓN
PATRÓN
Otro elemento gráfico corporativo es el patrón formado por el isotipo. Se usará sobre todo como elemento decorativo en las comunicaciones gráficas que hagamos (mailings, banners...). Puede funcionar tanto en blanco sobre rojo, como en rojo sobre blanco. Si se pretende usar como fondo sobre el que escribir habrá que reducir la opacidad del patrón al 10% por cuestiones de legibilidad, aunque no se recomienda usarlo demasiado como fondo.
© AppHome 2015 | www.apphome.es
23
2.5/ PAPELERĂ?A
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis laoreet leo et maximus. Donec vel leo non lorem finibus sodales quis sed elit. Morbi id egestas augue. Maecenas a cursus ex, non interdum tortor. Aliquam quis nulla sed null Aliquam sodales semper lacus a gravida. Maecenas ut velit est. Pellentesque congue, diam a vulputate lacinia, lectus purus blandit elit, ut ultrices risus quam in risus. Nunc non sapien vulputate, viverra nunc ac, porttitor nisi.
24
Š AppHome 2015 | www.apphome.es
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis laoreet leo et maximus. Donec vel leo non lorem finibus sodales quis sed elit. Morbi id egestas augue. Maecenas a cursus ex, non interdum tortor. Aliquam quis nulla sed nulla finibus vestibulum. Morbi id tortor ullamcorper, commodo erat placerat, fe Aliquam sodales semper lacus a gravida. Maecenas ut velit est. Pellentesque congue, diam a vulputate lacinia, lectus purus blandit elit, ut ultrices risus quam in risus. Nunc non sapien vulputate, viverra nunc ac, porttitor nisi.
Š AppHome 2015 | www.apphome.es
25
03/ APLICACIÓN MULTIMEDIA 3.1/ App 3.2/ Landing page 3.3/ Marketing online 3.4/ Marketing offline
3.1/ APP
APP
28
El diseño UI/UX de la app de AppHome se basa en su eslogan: más fácil. Se han reducido en lo posible el número de pantallas de paso para los procesos de búsqueda y publicación de inmuebles, y se han construído sobre un fondo blanco sobre el que se sitúan elementos gráficos negros y rojos. Toda la app es muy visual y fácil de navegar.
© AppHome 2015 | www.apphome.es
APP
Un menú inferior organiza los tres contenidos más importantes de la app: buscar, publicar y descubrir. Este último permite explorar planes y lugares en diferentes ciudades, para descubrir dónde te gustaría vivir o bien disfrutar de lo que tenga que ofrecer tu ciudad. El otro botón del menú es el de mi cuenta, con todos tus datos de usuario a mano para facilitarte la experiencia.
© AppHome 2015 | www.apphome.es
29
3.1/ APP
30
© AppHome 2015 | www.apphome.es
© AppHome 2015 | www.apphome.es
31
3.2/ LANDING PAGE
LANDING PAGE
32
A la espera de un posterior desarrollo de nuestro servicio como página web, ahora mismo se ha desarrollado una landing page informativa con el objetivo de que cree y fortalezca nuestra imagen de marca en la mente del público. Muestra nuestros colores corporativos así como nuestra línea gráfica a través de una ilustración y varios iconos.
© AppHome 2015 | www.apphome.es
LANDING PAGE
La landing tiene dos calls to action: derivar al público a que se descargue la aplicación, y conseguir que profesionales del sector se unan a nuestra comunidad y publiquen sus inmuebles con nosotros. Para ello mostramos mockups de nuestra app, así como los logos de nuestros actuales colaboradores.
© AppHome 2015 | www.apphome.es
33
2.3/ MARKETING ONLINE
REDES SOCIALES
34
¡Estamos muy presentes en las redes! Aprovechando que nos caracterizamos por nuestro aspecto tecnológico y cercano, queremos poder facilitar la comunicación con el público a través de las redes sociales. Para ello hacemos comunicaciones frecuentes que permitan a la gente interactuar, y fortalecemos nuestra imagen de marca a través de creatividades con nuestro color corporativo, pantallazos de la app o bien ilustraciones coherentes con nuestra línea gráfica.
© AppHome 2015 | www.apphome.es
VÍDEOS CORPORATIVOS
Para facilitar la comprensión de la gente tanto de lo que es AppHome como de todo lo que podrán hacer con ello se han desarrollado varios vídeos corporativos. Uno de ellos es un vídeo promocional que define lo que somos y para qué servimos. Otros vídeos siguen la línea de los vídeos de funcionalidad, y muestran lo fácil que es usar nuestra aplicación.
© AppHome 2015 | www.apphome.es
35
2.3/ MARKETING ONLINE
36
© AppHome 2015 | www.apphome.es
© AppHome 2015 | www.apphome.es
37
2.4/ MARKETING OFFLINE
DISEÑO STAND SIMA 2016
38
La presencia online es imporante, pero también lo es la offline. Es por ello que nos presentamos y llevamos nuestra app al Salón Internacional Inmobiliario de Madrid este pasado mayo. Para ello desarrollamos junto con Sweet Ideas el diseño de un stand pequeño, que mostrase con pocos elementos quiénes éramos y qué hacíamos.
© AppHome 2015 | www.apphome.es
DISEÑO STAND SIMA 2016
El stand es un cubículo blanco en el que el elemento más prominente es la pantalla de un teléfono móvil que reproduce los vídeos de funcionalidad de la aplicación. Este elemento es el centro de atención del stand, enmarcado por la moqueta roja y las cortinas que pretenden crear sensación de telón para fortalecer nuestra idea de presentarnos por primera vez ante el público.
© AppHome 2015 | www.apphome.es
39
2.4/ MARKETING OFFLINE
¡Recarga la batería de tu móvil de forma más fácil!
MERCHANDISING
40
Los elementos de merchandising repartidos en la feria siguen nuestra línea gráfica. Se repartieron sujetamóviles rojos que servían para poder colgar el móvil mientras se deja cargando, para fortalecer el ámbito en el que trabaja AppHome en la mente del público (app) junto con el mensaje que queremos transmitir (más fácil).
© AppHome 2015 | www.apphome.es
MERCHANDISING
La imagen que usamos para publicitarnos en el plano de la feria mostraba una imagen muy clara y limpia de lo que hacemos sobre un fondo de nuestro color corporativo, junto con un mensaje muy breve que nos representase. Se repartieron también bolígrafos rojos, con nuestro logo impreso.
© AppHome 2015 | www.apphome.es
41
ÍNDEX
AppHome
Directora general/ Gabriela Fernández Directora de ventas/ Macu López Creativa/ Ane Arzelus
Contacto
hola@apphome.es www.apphome.es
Multimedia
Fotos de stock: StockSnap.io Mockups: GraphicBurger.com Render stand: Sweet Ideas de marketing
Copyright © 2015 AppHome
Todos los derechos reservados. No se permite la reproducción total o parcial de este manual, ni su almacenamiento en un sistema informático, ni su transmisión en cualquier forma o por cualquier medio electrónico, mecánico, fotocopia u otros métodos, sin el permiso del propietario.
42
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis laoreet leo et maximus. Donec vel leo non lorem finibus sodales quis sed elit. Morbi id egestas augue. Maecenas a cursus ex, non interdum tortor. Aliquam quis nulla sed nulla finibus vestibulum. Morbi id tortor ullamcorper, commodo erat placerat, fe Aliquam sodales semper lacus a gravida. Maecenas ut velit est. Pellentesque congue, diam a vulputate lacinia, lectus purus blandit elit, ut ultrices risus quam in risus. Nunc non sapien vulputate, viverra nunc ac, porttitor nisi.
DIRECCIÓN
Calle Hermosilla 48 28001, Madrid
CONTACTO
hola@apphome.es www.apphome.es