Transcript
Page 1: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Guía de estilo visualpara manejo de marcaGuía de estilo visualpara manejo de marca

Page 2: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

El objetivo de AMexIHC es el de promover la investigación científica y el desarrollo tecnológico en Interacción Humano Computadora en la Republica Mexicana. Nuestro evento marco es el Congreso Mexicano de Interacción Humano Computadora (MexIHC), el cual se realiza de bi-anualmente en diferentes estados de la republica Mexicana. En el 2012, MexIHC se realizará en el Instituto Tecnológico Autónomo de México (ITAM) durante el mes de Octubre.

AMexIHC se encuentra ligada al Grupo de Interés Especial en Interacción Humano Computadora (SIGCHI, por sus siglas en inglés) - Capítulo México – de la ACM y la Red Temática de CONACyT en Tecnologías de la Información y Comunicaciones.

Page 3: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

¿Qué representa la marca o logotipo de la AMexIHC? Su diseño está inspirado en las siguientes ideas:

* Imagina una motherboard. Visualiza cómo se van entrelazando los circuitos impresos como caminos de un planeta lejano. Imagina cómo sería si pudieras navegar dentro de un microchip.

* ¿Qué pasa si tomas un cable de bus de datos o un clip y lo vas doblando? ¿De qué le darías forma? Estás creando. Además, en esta creación, encuentras un simbolismo de union y continuidad.

* En lo frío del mundo tecnológico hay algo mucho más importante: el humano. La escritura fluida y con minúsculas es un buen referente. Si te imaginas planas y planas de texto, puedes percibir esa sensación de una persona dedicada que con esmero va escribiendo y dejando así su conocimiento.

Planteamiento de la marca

Page 4: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Esta versión la debes usar cuando “introduzcas” la AMexIHC ante personas que no sepan qué significan las siglas. Esto puede ser en el inicio del sitio web, tarjetas de presentación, hojas membretadas o cualquier otra aplicación que consideres formal.

Marca completa

Page 5: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

En ocasiones donde la gente ya sabe qué significa AMexIHC, como por ejemplo en un congreso, usa preferentemente esta versión. Imagínala como una especie de “sello”, el cual puedes usar en uniformes, promocionales, impresos, etc.

Marca simple

Page 6: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

b

Observa que la composición de la marca maneja ciertos espacios en blanco. La separación entre la palabra AMexIHC y el nombre extendido depende de la altura denominada ‘a’ pero la separación entre los renglones de dicho nombre depende de la altura denominada ‘b’.

Además, trata de respetar el margen señalado cuando coloques la marca completa en algún lugar. Lo anterior también aplica para la marca simple.

Composición

a

a

b

aa

Page 7: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Cuando necesites indicar áreas de interés específicos, como en los espacios asignados durante un congreso, puedes crear sub-marcas a partir de la composición de arriba. Claramente debes procurar que la sub-marca trate de tener el margen igual que la marca completa.

Adecuaciones

a

a aa/10 a

a

aÁrea temática

Visualización de Información

Interfaces Multimodales

Teoría de HCI

Métodos de Diseño y Evaluación

Page 8: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Colores

Tono al 100%

80%

50%

30%

Azul AMexIHC

* El color de la palabra AMexIHC

* Si solo dispones de una tinta, usa preferentemente este color y no el gris.

* Si tienes que usar un color de fondo, usa preferentemente este color y al menos la palabra AMexIHC en completo blanco para lograr un contraste.

C: 95M: 65Y: 45K: 30

R: 13G: 72B: 93

Hex: #0D485D

C: 50M: 40Y: 40K: 20

R: 117G: 120B: 121

Hex: #757875

Gris AMexIHC

* El color del nombre completo de la Asociación.

* Si no puedes usar el color azul, el siguiente en la lista es este gris.

* La barra de las sub-marcas es de este color. Puedes incluso, si el método de reproducción te lo permite, bajarle a un 50% al tono.

Page 9: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Siempre utiliza estas versiones de preferencia.

Si puedes imprimir a dos tintas, y el fondo es de color, pon el gris está a un 30%.

Si fuera una tinta y el fondo es gris, pone el color del texto al 30% también.

Page 10: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Métodos de Diseño

Si el método de reproducción te lo permite, coloca el color de la barra al 50%.

Métodos de Diseño

En otros casos, como en la serigrafía, tendriás que poner los dos tonos al 100%.

Métodos de Diseño

El equivalente sobre fondo azul es poner la barra con el azul AMexIHC al 30%. Lo mismo harías con el gris.

Métodos de Diseño

Si el fondo es gris y el método de reproducción te lo permite, puedes poner la barra en gris AMexIHC al 50%, mientras que el texto lo pones al 30%.

Métodos de Diseño

Si estás restringido a uno color, procura usar esta versión de azul AMexIHC sobre blanco.

Estas son las reglas para el manejo de color. Sin embargo, puedes romperlas mientras mantengas la consistencia y sabor de la marca.

Page 11: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Como has observado en esta guía, los textos para la marca completa y las sub-marcas tienen el mismo tipo de letra. De hecho, toda esta guía maneja una familia tipográfica por loque los rasgos de la letra son parecidosde una u otra forma. Entonces, lo másrecomendable es que continúes con el manejo de esta familia tipográfica.Si cuidas este detalle, proyectarás unaimagen seria para la Asociación.

Fedra Sans Std LightABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^

Fedra Sans Std BookABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std NormalABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std MediumABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std Light ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^

Fedra Sans Std Book ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std Normal ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std Medium ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Fedra Sans Std BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!”#$%&/()@¨*{}^`

Tipografía

Page 12: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Para diseñar aplicaciones gráficas de la marca, puedes hacer encuadres de las curvas de la palabra AMexIHC y de ahí hacer cambios en el porcentaje de los colores oficiales, recortes fotográficos o aplicar texturas.

Elementos decorativos

Page 13: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora
Page 14: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Ejemplo de aplicación gráfica

Page 15: Manual de Identidad Visual para AmexIHC: Asociación Mexicana para la Interacción Humano-Computadora

Asociación Mexicana de Interacción Humano-Computadora A.C. © 2012. Todos los Derechos Reservados


Top Related