iomando | Style Guide /15

14
GUÍA DE ESTILO

Transcript of iomando | Style Guide /15

Page 1: iomando | Style Guide /15

GUÍA DE ESTILO

Page 2: iomando | Style Guide /15

Esta guía resume de manera práctica las características técnicas fundamentales de la marca iomando.Debe servirnos como guía rigurosa para la producción de todo tipo de elementos relacionados con ésta.

00. LA GUÍA

01. La marca

02. El símbolo

03. Versiones a color

04. Versiones Blanco y negro

05. Aplicación en fondos

06. Área de reserva

07. Tamaño mínimo

08. El color

09. Los colores secundarios

10. La tipografía

11. El estilo fotográfico

Page 3: iomando | Style Guide /15

01. LA MARCA

WordmarkSustento racional

SímboloSustento emocional

El logotipo está formado por dos elementos que se unen para formar la identidad clave de iomando, el wordmark (nombre de la marca)y el símbolo (imagen que acompaña al nombre).

El wordmark representa el lado más racional de la marca, destacando su solidez, aportando simplicidad y elegancia. El símbolo por su parte refleja el lado más emocional y joven de la empresa, aporta la nota de color y resalta una ilusión renovada.

La simbiosis de ambos en una misma palabra genera el elemento característico fresco e innovador de la nueva imagen de iomando.

Page 4: iomando | Style Guide /15

02. EL SÍMBOLO

El nuevo símbolo parte de la estructura original, pero ha sido sometido a un tratamiento de simplificación y abstracción tanto a nivel formal, como cromático.

Aquí puedes ver las proporciones con las que se construye el logotipo. Para su reproducción, emplea siempre los artes finales originales y no modifiques nunca su contenido.

El símbolo

Construcción

Page 5: iomando | Style Guide /15

03. VERSIONES A COLOR

Versión PrincipalLa versión principal del logo es sobre fondo blanco. Siempre que sea posible deberá utilizarse el logotipo en esta versión ya que clarifica nuestra imagen de marca y nos identifica con los principales elementos core como son la tipografía y el símbolo en el color corporativo.

Versión en negativoEn esta versión se destaca el símbolo en blanco sobre el fondo en el azul corporativo. Este formato se utilizará sobretodo para versiones digitales ya que en versiones impresas puede dar problemas el fondo plano de color.

Versión en negativo fondo negroEste formato solo si la ocasión especial lo requiere.

Versión principal

Versión negativo

Versión negativo fondo negro

Page 6: iomando | Style Guide /15

04. VERSIONES B&W

Nuestro logotipo en su versión monocromática se aplicará en aquellos casos en los que no sea posible reproducir la versión principal en cuatricromía.

Versión principal

Versión negativo fondo negro

Page 7: iomando | Style Guide /15

05. APLICACIÓN EN FONDOS

Nuestro logotipo funciona con una única versión para todos los fondos, tanto gráficos como fotográficos y además mantiene una buena legibilidad.

Solo se variará el color del wordmarka blanco en aquellos casos en los que el color de fondo sea muy oscuro de manera que no comprometa su visibilidad y/o legibilidad.

Page 8: iomando | Style Guide /15

06. ÁREA DE RESERVA

Debemos respetar la marca y su visibilidada través de su área de reserva o perímetro de seguridad. Éste se delimita tomando como referencia la altura de la “d” del wordmark. Con su tamaño crearemos un cuadrado que nos servirá como unidad de medida a la que llamaremos X. El área vendrá definida por una X.

Este espacio nunca debe reducirse ni ser invadido por elementos adyacentes, ya sean textos, fotografías u otras marcas.

En el caso del eslogan de la marca el espacio inferior definido por la x podrá reducirse a la mitad.

X

X

X

X

X/2Open the door from Mobile

Page 9: iomando | Style Guide /15

07. TAMAÑO MÍNIMO

El logotipo siempre debe ser reproducido aun tamaño que permita su perfecta legibilidad. Para ello se recomienda que nunca se reduzca por debajo de las medidas indicadas a continuación en ninguna de sus versiones.

Tamaño mínimo del logotipo

Tamaño mínimo del icono

20mm

8mm

Page 10: iomando | Style Guide /15

08. EL COLOR

Iomando se identifica con un color azul como color corporativo, especial, fresco y muy identificativo.

La línea gráfica que se siga en todo momento tiene que tener este color como elemento principal aunque siempre puede ir acompañado de los colores secundarios para complementarlo o ayudarlo a visualizar conceptos.

PANTONEc 80 m17 y24 k5r24 g150 b175

Tints

Shades

20%

40%

60%

80%

c64 m14 y19 k24r68 g141 b158

c48 m10 y14 k43r82 g124 b137

c24 m5 y7 k72r78 g91 b97

bLAck

Page 11: iomando | Style Guide /15

09. COLORES SECUNDARIOS

Los colores secundarios han sido elegidos para generar armonía y coherencia en todos los diseños que se generen de iomando ofreciendo una gama de fondos, colores monocromáticos, colores que generen un alto contraste y fondos.

Todos los colores de iomando se especifican en el archivo coloresiomando.ase adjuntado con esta guía de estilo.

Dark Background

Light Background

High contrast

Monochromatic

c7 m35 y79 k1r231 g169 b79

c0 m80 y95 k0r241 g90 b41

c68 m0 y49 k0r67 g189 b158

c62 m0 y5 k0r64 g199 b233

c71 m11 y24 k0r53 g173 b190

c55 m0 y7 k0r97 g202 b230

c86 m37 y36 k20r8 g111 b127

c80 m17 y24 k90r0 g36 b45

c80 m17 y24 k60r0 g83 b97

c16 m3 y5 k1r208 g226 b232

c12 m9 y10 k0r221 g221 b220

Page 12: iomando | Style Guide /15

10. LA TIPOGRAFÍA

El nuevo diseño de iomando se ha desarrollado con una familia tipográfica que recoge la personalidad de de la empresa contemplando diferentes pesos que utilizaremos dependiendo de la necesidad de comunicación, aportando versatilidad sin perder identificación.

Esta tipografía convivirá con otra mucho más funcional y abierta para las aplicaciones web y app, la Helvética Neue.

ABCDEFGHYJKLMNÑOPQRSTUVWXYZabcdefghyjklmnñopqrstuvwxyz

Alright Sans LightAlright Sans RegularAlright Sans mediumAlright Sans Bold

ALRIGHT SANS

ABCDEFGHYJKLMNÑOPQRSTUVWXYZabcdefghyjklmnñopqrstuvwxyz

Helvetica Neue LightHelvetica Neue RegularHelvetica Neue MediumHelvetica Neue Bold

HELVETICA NEUE

Page 13: iomando | Style Guide /15

11. ESTILO FOTOGRÁFICO

Siempre viraremos los colores hacia las tonalidades más próximas dentro de la paleta de colores de iomando.

Hay que tener en cuenta que deberán tener más peso en las fotografías los colores principales y en segundo término los secundarios.Nuestros colores están presentes en la tonalidad de las fotografías.

Page 14: iomando | Style Guide /15

Si tienes cualquier duda sobre el contenido de esta guía o sobre la aplicación del logotipo en casos no contemplados aquí, por favor, contacta con el equipo de PerezOchando en:

[email protected]