manual de identidad visual · 2018. 4. 21. · Este manual de identidad es una herramienta...

i

24°

informática cero | versión 1.0 | 02.2018

manual de identidad visual

Este manual de identidad es una herramienta diseñada para proyectar la imagen, los valores y las aspiraciones detrás de informática cero. Es la piedra angular de todos los esfuerzos de comunicación y se debe seguir cuidadosamente para ga-rantizar un estilo consistente y una calidad de presentación. Esto incluye nuestro nombre, logotipo y otros elementos como los colores, tipografías y gráficos.

introducciónSeguir estas pautas es esencial para tener una imagen fuerte y unificada, creando una imagen de calidad, consistencia y estilo propio. Si tienes alguna duda, comuní-cate con [email protected] o visitar 363color.com

– “El diseño es el embajador silencioso de tu marca.”- Paul Brand

Acerca de informática cero.

Nuestro proyecto nace con el propósito de compartir novedades y noticias sobre los avances tecnológicos en el mundo de la informática. Habiendo notado la fal-ta de un espacio de este tipo en nuestro entorno mas próximo, nos propusimos mantenernos actualizados, realizando investigaciones de manera seria y respon-sable para brindar un servicio de excelencia.

El enfoque de informática cero va dirigido hacia un público joven y conocedor de todo lo referente al mundo tecnológico. Nuestro público objetivo son jóvenes con ganas de aprender, emprender y crecer. Que buscan información que los ayude a mantenerse al día en los últimos avances y sobre todo que les permita discernir de entre toda la oferta de hardware y software que existe en la actuali-dad, cuáles son los mejores productos.

Brindamos acceso a información clara, precisa y confiable, que proporciona herramientas importantísimas que pueden ser aplicadas tanto para el trabajo como para el esparcimiento.

Noticias de hoy, tecnología del mañana

Informática cero también se retroalimentade los aportes que nuestros usuarios nos hacen. Al tener acuerdos y convenios con distintos fabricantes, podemos acce-der y compartir información de avanzada sobre futuros lanzamientos en cuanto a hardware se refiere.

Nuestro equipo está conformado por jóvenes técnicos y gamers. Somos parte de una generación que creció rodeada de tecnología y viviendo cambios importantes en breves lapsos de tiempo.

Sabemos que todo es efímero y cambia tan rápidamente que la única manera de mantenernos actualizados es estando comprometidos a dedicarnos a la investi-gación constante. Esto nos posiciona entre los mejores sitios de Latinoamérica en cuanto a información de hardware y software se refiere. Nos comprometemos a brindar información clara y verificada, de manera independiente, sin compromisos ni presiones de ningún tipo. Nuestras premisas son la calidad y la credibilidad. Pretendemos ser una fuente de conocimientos siendo la tecnología nuestra razón de ser.

3

logotipo

Nuestro símbolo es la forma de una CPU que representa el hardware dentro de nuestra marca. Una de las características fundamentales es su inclinación de 24°. La CPU (del inglés, central processing unit) es el principal componente dentro de un ordenador.

símbolo

nuestro símbolo sobre fondo claro nuestro símbolo sobre fondo oscuro

archivossimbolo_color_RGB.aisimbolo_color_negativo_RGB.ai

5

Nuestro logotipo es la combinación de nuestro símbolo y el componente verbal con el nombre de nuestra web. Asegúrate de saber cómo usarlo de acuerdo al contexto como está explicado en los próximos capítulos.

logotipo

nuestro símbolo sobre fondo claro nuestro símbolo sobre fondo oscuro

archivoslogo_color_completo_RGB.ailogo_color_completo_negativo_RGB.ai

6

En estas imágenes podemos ver los criterios geométricos y de proporción sobre los que se construyeron nuestro símbolo y nuestro logotipo principal.

La tipografía utilizada en el logotipo es la Typo Round Font diseñada por studiotypo.com. Se utilizo el estilo de fuente Light para la palabra informática y Bold para cero. La letra ‘e’ tiene el mismo giro de 24° que acompaña al símbolo. Esta tipografía solo será utilizada en el logotipo y no debe ser usada en ninguna otra parte de la marca.

24°geometrización del símbolo geometría y espacios entre nuestro símbolo y el componente verbal

construcción

7

Nuestra área segura hace que nuestro símbolo y logotipo se realce en cualquier aplicación. Para mantener el espacio seguro, utilizar las siguientes reglas.

Mantenga siempre el espacio libre requerido alrededor del logotipo. Ningún texto, imagen, borde derecho, etcétera, debería interferir con el espacio libre del logotipo.

Utilice una copia de la letra ‘O’ de la palabra ‘cero’ para obtener los espacios seguros.

Rodee el símbolo con suficiente espacio libre, basado en cuadriculas. Utilice la cuadricula 8x8 para asegurar-se de obtener un espacio seguro y limpio.

área segura 8

tamaños mínimos

Para uso de impresión, el símbolo nunca debe reducirse por debajo del tamaño mínimo de 0.9 cm

Para uso digital, el símbolo nunca debe reducirse por debajo del tamaño mínimo de 35px

Para uso de impresión, el logotipo nunca debe reducirse por debajo del tamaño mínimo de 0.9 cm

Para uso digital, el logotipo nunca debe reducirse por debajo del tamaño mínimo de 35px

Cuando utilices nuestros identificadores, debes usarlos, como mínimo, con la altura indicada para cada aplicación. Asegurar-nos la buena visibilidad de nuestra marca, nos ayudara a comunicar de manera legible nuestro símbolo y logotipo.

Para uso menor a este, solo es permitido el favicon realizado para tal propósito. Consultar mas adelante en este manual.

Tamaño mínimo | impresión Tamaño mínimo | digital

9

A continuación, analizamos los diferentes colores y variaciones que pueden tener nuestro símbolo. Las diferentes formas pueden dar un aire diferente a las aplicaciones son alterar la imagen visual de nuestra marca.

Las combinaciones de colores están basadas en la paleta escogida para nuestra marca. Asegurarse en utilizar estos colores ayudar a mantener un estándar en nuestra marca.

Nuestro símbolo prin-cipal, utilizarlo siempre que se pueda en todas las aplicaciones.

Nuestra segunda opción utiliza colores corporativos y debe ser usado en algunas aplicaciones.

La tercera opción es completamente creativa y debe ser usados en aplicaciones especiales. De ninguna manera debe ser la primera opción.

Nuestro símbolo en blanco y negro y en escala de grises. Utilizar para material que no se pueda tener a color.

versiones alternativas del símbolo10

Las variaciones de nuestro logotipo siempre tendrán semejanza a nuestro símbolo. Utilizar según la aplicación.

Nuestra segunda opción utiliza colores corporativos y debe ser usado en algunas aplicaciones.

Nuestro símbolo en blanco y negro y en escala de grises. Utilizar para material que no se pueda tener a color.La tercera opción es completamente creativa y debe ser usados en aplicaciones especiales. De ninguna manera debe ser la primera opción.

Nuestro logotipo principal, utilizarlo siempre que se pueda en todas las aplicaciones. Utilizar las combinaciones de colores correspondientes ayudara a mantener la línea que estamos buscando. Nuestros colores azul oscuro y gris neutro que hemos escogido, deben ser usados siempre que la aplicación lo permita.

versiones alternativas del logotipo11

La siguiente lista de uso incorrecto debe evitarse para mantener nuestra marca.

Cualquier modificación de nuestro símbolo o logotipo confunde su significado, disminuye su impacto y es por eso por lo que no está permitido.

io

usos incorrectos del símbolo

No coloque bordes de colores u otra alteración

No coloque imágenes ni patrones encima

No cambie el ángulo ni altere el grado original

No utilice ni realice sombras

No utilice modo espejo o reflejo

No quite ni ponga partes

No cambie el orden de los colores

No escriba encima ni alrededores, respete el espacio

No utilice otro color que no sea nuestra paleta de colores

No utilice el efecto gradiente

No cambie el ancho y alto ni cam-bie las proporciones

No lo ponga sobre fondos que no sean de alto contraste

12

El trabajo exacto del diseño de la marca se ha creado para adaptarse a cualquier necesidad de uso. Nunca intente dibujar, cambiar colores, traducir a otro idioma o alterar nuestro símbolo o logotipo de ninguna manera.

usos incorrectos del logotipo

No coloque bordes de colores u otra alteración

No coloque imágenes ni patrones encima

No cambie a una línea las palabras

No utilice modo espejo o reflejo

No utilice ni realice sombras

No cambie la tipografía

No cambie el orden de los colores

No quite ni ponga partes

No cambie el ángulo ni altere el grado original

No utilice otro color que no sea nuestra paleta de colores

No escriba encima ni alrededores, respete el espacio

No utilice el efecto gradiente

No cambie el ancho y alto ni cambie las proporciones

Et rendant laut haruntAtet denditibust, sima con consequia cusdae.

No lo ponga sobre fondos que no sean de alto contraste

io

13

paleta cromática

Esta es nuestra paleta cromática, asegúrate de utilizar los colores correctos para cada contexto.

nuestra paleta de colores

Rojo de informática ceroPantone | 3517 UCMYK | 18 89 99 7RGB | 192 54 25HEX | #C03619

TurquesaPantone | -CMYK | 73 13 42 1RGB | 55 164 159HEX | #37A49F

Azul oscuroPantone | 539 UCMYK | 93 81 53 74RGB | 21 25 37HEX | #151925

BlancoPantone | -CMYK | 0 0 0 0RGB | 225 225 225HEX | #FFFFFF

GrisPantone | -CMYK | 0 0 0 50RGB | 128 128 128HEX | #808080

Gris neutroPantone | Cool Gray 2 UCMYK | 9 6 7 0RGB | 235 236 236HEX | # ebecec

NegroPantone | CMYK | 0 0 0 100RGB | 0 0 0HEX | #000000

Colores primarios

Colores secundarios

Color alterno

Blanco y negro Gris

100%

80% 60% 40% 20%

15

tipografías

nuestras tipografías

Fira Sand Condensed Fira Sand

La tipografía es una fuerte extensión de la personalidad de su marca. Usamos las sans serif ‘Fira Sans Condensed ‘para in-formática cero como nuestra principal tipografía corporativa y ‘Fira Sans’ como segunda fuente. Este tipo de letras modernas y accesibles nos ayuda a comunicar ideas de forma sencilla y con confianza. La familia ‘Fira Sans Condensed‘ y ‘Fira Sans’ apuntan a cubrir las necesidades de legibilidad de una amplia gama de dispositivos que varían en calidad de pantalla y ren-derizado. Estas tipografías fueron diseñadas por Carrois Corporate y Edenspiekermann AG y se obtienen en fonts.google.com.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ‘ “ “ ( ) *

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ‘ “ “ ( ) *LIGHT LIGHTAa Aa




1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ‘ “ “ ( ) *REGULAR REGULARAa Aa




1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ‘ “ “ ( ) *BOLD BOLDAa Aa

17

elementos gráficos

iconografíaNuestra identidad incluye un set de íconos que pueden ser utilizados en cualquier momento, fueron diseñados por Good Ware.

19

Las fotos se utilizan en monótono con colores corporativos, de preferencia estos tres. Las imágenes tendrán contenido tecno-lógico de preferencia, por ejemplo, componentes de computadora.

fotografía

20

Nuestra identidad incluye unos patrones que pueden ser utilizado para material digital o impreso. Son opcionales y deberán ser usados bajo criterio del diseñador gráfico.

patrones

21

aplicacionesdigitales e impresas

Nuestro símbolo y logotipo estará presente en todas las aplicaciones. Tenemos una variación que reduce el tamaño permitido para ‘favicon’.

Mac Windows FaviconiOSAndroid

página web y aplicaciones

23

La misma portada y símbolo para nuestras redes sociales garantizara que nos conectemos más con los usuarios y nos brinda seriedad.

Aunque aquí solo se muestra el ejemplo de Facebook y Twitter, tendremos el mismo tratamiento en las demás redes sociales. Al realizar un cambio de portada o foto de perfil, esta debe ser cambiado en todas por igual. Podemos crear eventos especia-les y alterar por unos días nuestro símbolo y portada, respetando siempre lo presente en este manual. En los archivos podrá encontrar mock-up que ayudaran a entender la línea grafica de las redes sociales.

redes sociales

24

En nuestras publicaciones usaremos nuestros colores y tipografías para mantener un lenguaje visual familiar y coherente. Respetar los contrastes de cada imagen. Ejemplos de cómo puede ser una publicación.

publicaciones

25

carta, libro, tarjeta y sobre

26

taza

27

ropa

28

manual de identidad visual · 2018. 4. 21. · Este manual de identidad es una herramienta...

Documents

Transcript of manual de identidad visual · 2018. 4. 21. · Este manual de identidad es una herramienta...