Manual de IconografĂa
ÍNDICE Icono
................................................
3
Uso de iconos
................................................
6
Usos no correctos
................................................
8
Formulario ................................................
10
Diseño web
................................................
13
Botones ................................................
16
Colores
................................................
18
Tipografía ................................................
20
ICONOS
Imágenes asociadas y utilizadas para representar archivos, carpetas, programas, unidades de almacenamiento o cualquier comando u otros indicadores de nuestros sistemas de información y SharePoint. El tamaño establecido para los iconos informáticos es de 22 px X 22 px.
USO DE ICONOS
El icono se puede manejar en color negro, blanco o gris. Es necesario asegurarse que siempre exista contraste con el fondo para favorecer la legibilidad del mismo. Se debe evitar siempre el uso de otros colores distintos a los especificados y/o el uso de más de un color en los elementos por separado. Cuando se utilice el icono en un fondo multicolor, como una fotografía, se podrá utilizar en su versión en blanco y negro, según la claridad y nitidez de la imagen.
USOS NO CORRECTOS
Una parte importante de este Manual de Iconografía es cuidar la identidad de C & M Consultores S.A. ya que en este se constituyen los lineamientos para la utilización de los íconos en nuestros distintos sistemas de información y así evitar los usos no correctos que pueden afectar nuestra imagen corporativa.
FORMULARIO
Unidades de almacenamiento diseñados para nuestros Sistemas de Información y SharePoint. Los campos tendrán borde sólido de 2px de grosor, con borde redondeado y color con código #d5d5d5. El fondo de cada campo es de color blanco. La tipografía del título tiene un tamaño de 30px en bold y tendra un color con el código #384662. El texto que ira dentro de las celdas tendra un tamaño es de 14px en light y con color de código #909090. Los botones tienen un color azul con código #384662, con un tamaño de 1,2 cm de alto con un icono de color blanco y texto en blanco con tamaño 14px. Todos los formularios deben ir a dos columnas, algunos con iconos si lo requiere.
DISEÑO WEB
El logo se mantiene en su color original y se ubica en la parte superior izquierda, con un tamaño de 71px x 38px. El menú se establece dentro de una barra de color gris con código #F0F0F0, su medida es de 100% x 52 px. La tipografía de los títulos del menú es Source Sans Pro Bold, con código de color #494949. Anterior al texto se ubica el icono del texto correspondiente mencionado en este Manual, utilizando el mismo color del texto. La imagen del banner debe ser de 1200px x 300px.
Los títulos de las páginas internas mantienen la misma tipografía, con código de color #384662 y con un tamaño de 30 px. Los subtítulos manejan el código de color #494949 a un tamaño de 25 px, en la misma tipografía, pero en esta ocasión el estilo es en letra Regular. Los demás textos manejaran el código de color #909090, con un tamaño de 14 px. El footer, ubicado en la parte inferior de la página, maneja las mismas especificaciones del menú. La tipografía y color del texto del footer es la mencionanda anteriormente, pero en esta ocasión el estilo es en letra Regular. Este texto siempre será © 2017 - C & M Consultores S.A. Todos los derechos reservados y se ubicara en el centro de la página. Nota: Todos los textos deben ir con letra minúscula a excepción de su primera letra. Ejemplo: Fecha de entrega
BOTONES
El tamaño establecido para los botones informáticos es de 34 px de alto, con color de fondo azul con código #384662 y con borde redondeado de 4 px. El texto tiene un tamaño de 17 px en bold y en color blanco igual que los iconos.
COLORES
En adiciรณn a los dos colores primarios se pueden utilizar en distintas piezas de comunicaciรณn, los colores indicados en la paleta secundaria.
TIPOGRAFÍA
La tipografĂa establecida maneja un estilo limpio y moderno dependiendo de la herramienta de comunicaciĂłn que se quiera utilizar. A continuaciĂłn, se relacionan las distintas formas dependiendo de su uso.