Manual de identidad corporativa AppHome

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.