Manual de Identidad Corporativa

Transcripción

1 Manual de Identidad Corporativa Versión 01 - Octubre de 2014

2 Universidad del Norte Manual de identidad corporativa CONTENIDO LOGO-SÍMBOLO COMPOSICIÓN ELEMENTO VEGETAL GEOMETRIZACIÓN ELEMENTOS VERSIONES COLORIMETRÍA TIPOGRAFÍA APLICACIONES MÁXIMOS Y MÍNIMOS La marca Universidad del Norte, está conformada por su logotipo, colores, fuentes, elementos representativos e imágenes. Sus usos y lenguaje en diferentes piezas de comunicación en los medios tradicionales y digitales. Esta política explica cómo puede utilizar el logotipo de la Universidad del Norte y otros activos de la marca, así como la forma en que puede hacer relación a la Universidad del Norte, sus productos, servicios y diferentes áreas. La Dirección de Comunicaciones y Relaciones Publicas implementa y hace cumplir los lineamientos aquí estipulados. USO EXTERNO E INTERNO (Áreas) SUBMARCAS UBICACIÓN USOS NO PERMITIDO CATEGORIZACIÓN DE MARCAS APLICACIÓN INSTITUCIONAL

3 ORIGINAL La marca Universidad del Norte, está dispuesta para un uso horizontal en su versión original. Compuesta por: Símbolo UN fundido en una flecha de brújula que simboliza el norte. La tipografía Arial Black en altas dispuesta en dos líneas y con justificación forzada. Composición logo-símbolo Versión vertical Esta versión deberá ser utilizada solo en los casos que el espacio sea insuficiente para el uso de la marca original. El símbolo es un tercio del ancho de la tipografía de la marca. Nota En ningún caso se permite el uso individual de los elementos de la marca, ni variar la proporción que se define en este manual. Excepción Se permite el uso de la marca de manera horizontal con la tipografía en una línea, solamente para los diplomas institucionales y web.

4 ORIGINAL Versión vertical

5 Elemento vegetal El roble amarillo o guayacán es el elemento vegetal que representa a la Universidad del Norte, este simboliza nuestro pasado terrenal y futuros ideales; y representa el respeto a la naturaleza y el medio ambiente. La abstracción gráfica del roble se utilizará como ornamento en piezas institucionales. Se usará en el color Amarillo Roble Uninorte o en versiones blanco y negro en negro al 60 %. Cuando aparezca el roble completo se deberá utilizar una línea de base que representa el horizonte. Las piezas aprobadas de uso institucional: carpeta, wallpaper, cabezotes (impresos y digitales).

6

7 GEOMETRIZACIÓN El logosímbolo se construye con base en la unidad U, que se refiere a la altura de la letra inicial U, y de ahí se toma la proporción para la geometrización. U Especificaciones logo-símbolo ÁREA DE SEGURIDAD La marca deberá siempre conservar un espacio de seguridad que correspode al área formada por la medida referencia U. Este espacio debe respetarse para asegurar la legibilidad y limpieza de la marca.

8 GEOMETRIZACIÓN 1/2 U U 1/4 U 15 U 1 1/2 U ÁREA DE SEGURIDAD

9 INVERTIDA Aplicación de la marca para fondos de color plano oscuro o tramas, fotografías y/o texturas que generen alto contraste. Nota En ambos casos la UN se vuelve un espacio vacio, se recorta de la flecha; es decir, la UN toma el color del fondo, en ningúno de estos casos se permite el uso de la UN en blanco. Versiones de la marca Invertida, una tinta y sobre fotografía UNA TINTA Aplicación de la marca en color blanco y negro (prensa), para material promocional (POP) y/o casos de fondos de color, en los cuales el contraste de la marca original no es visible o compatible. SOBRE FOTOGRAFÍA Al aplicar la marca sobre una fotografía deberá siempre usarse sobre una franja blanca que asegure la limpieza y legibilidad. Esta franja puede moverse entre 80 a 100% de transparencia según diseño. De la misma manera se acepta el uso sobre franja de color siempre y cuando el logotipo se utilice en las versiones adecuadas al color.

10 INVERTIDA UNA TINTA - sobre blanco UNA TINTA- sobre color claro UNA TINTA- sobre color oscuro

11 USO SOBRE FOTOGRAFÍA

12 COLORES INSTITUCIONALES Rojo y Negro Uninorte Amarillo Roble Uninorte: color para la aplicación del símbolo vegetal. Colorimetría NOTA: Se permitirá el uso de colores de apoyo en los elementos de apoyo para la aplicación de la campaña institucional vigente o eventos específicos, pero no se podrá alterar el uso del color en la marca.

13 COLORES INSTITUCIONALES Rojo Uninorte C 0 M 100 Y 100 K 10 Pantone 1797C Negro Uninorte C 0 M 0 Y 0 K 100 Pantone Process Black Amarillo Roble Uninorte C 0 M 20 Y 100 K 0 Pantone 116C

14 INSTITUCIONAL Para todos los textos corridos (contenidos) se deberá usar alguna de las tipografías aprobadas como institucionales. Así mismo, se utilizarán estas tipografías para los títulos, cuando sea material institucional como papelería, cabezotes. presentaciones ppt y firmas de correos. Tipografía APOYO Se podrá utilizar una tipografía de acuerdo a la necesidad del área, evento, campaña o pieza diferente para los títulos que ayuden a generar diferenciación, siempre acompañada de una tipografía institucional en los textos corridos.

15 TIPOGRAFÍAS INSTITUCIONALES

16 Aplicaciones Máximos y mínimos

17 Uso mínimo de la marca: 2cm de ancho a proporción. Ideal para marcación material POP Uso máximo de la marca: Este uso es especialmente para impresión a gran formato (vallas). Importante asegurar visibilidad con el mínimo de 20cm de alto la fuente del logo.

18 ÁMBITO NACIONAL E INTERNACIONAL La marca Universidad del Norte se utilizará con referencia a Colombia para piezas de uso regional, nacional y/o internacional. De resto se utilizará el logosímbolo sin ningún texto inferior. Aplicaciones Uso externo de la marca ÁMBITO LOCAL La marca Universidad del Norte se utilizará en el ámbito local sin ningún texto inferior y se debe específicar en los mayores informes de la pieza que la ubicación de la Universidad es en el Área Metropolitana de Barranquilla junto con los datos necesarios.

19 EJEMPLO:

20 General El uso del nombre de las dependencias académicas, administrativas o de extensión será siempre junto a la marca Universidad del Norte. Esta, se comportará como marca madre de las áreas, los nombres de: divisiones, escuelas, centros de investigación, observatorios, laboratorios y direcciones administrativas y/o áreas académicas se ubicarán bajo la marca, centrada, divididas por una línea negra de 0,5 puntos de grosor que ocupa toda la marca horizontal y con una separación de 10 mm. Fuente: Vialog LT Light, texto en altas y bajas. Proporción: Logo-símbolo 10cm ancho - Fuente 25 puntos, centrada Opción 2 En caso de que el espacio no lo permita y/o el nombre del área sea extenso se ubicará del lado izquierdo de la marca con la misma separación de 10mm, texto justificado a la derecha. Aplicaciones Áreas digital En el caso web, el nombre del área o evento se ubicará del lado derecho de la marca con la misma separación de 10mm, texto justificado a la izquierda. excepción Con la versión vertical de la marca no se permite aplicar el uso para áreas, la única excepción es para la aplicación en lomos de la Editorial, debido al poco espacio. Nota No se debe colocar más de un área bajo la marca, en caso que se requiera, se dejará sola la marca Universidad del Norte y el listado de áreas se llevará a los mayores informes de la pieza.

21 General Opción 2 Digital Trabaja con nosotros Excepción: versión reducida solo para lomos de la Editorial.

22 Aplicaciones Submarcas Se permite el uso de una identidad gráfica (logo) a las siguientes unidades académicas y de extensión por su impacto y función con el público externo. Estas identidades van de la mano con la marca Universidad Norte y bajo ninguna circunstancia deberán utilizarse sin esta. Centro Cultural Cayena, Centro de Educación Continuada, Centro de Consultoría y Servicios, Emisora Uninorte F.M. Estéreo, Centro de Producción Audiovisual y Unidades de Servicios y Logística Empresarial.

23 Sub-marcas permitidas, uso material promocional: Sub-marcas permitidas, uso material institucional (Ver: Aplicación áreas)

24 GENERAL La marca Universidad del Norte se ubicará siempre en el lugar más visible y limpio, más aún cuando se encuentre en relación con otras marcas, la marca Universidad del Norte se ubicará siempre a la derecha y al final de todas las marcas participantes. Nota No se debe colocar la marca debajo o encima de otra, ni del lado izquierdo, y siempre se debe mantener la proporción. Aplicaciones Ubicación de la marca

25 GENERAL - IMPRESOS marca 1 marca 2 marca 3

26 Aplicaciones Usos NO permitidos

27 La versión vertical no aplica para submarcas No se permite colocar dos áreas o más bajo la marca Por ningún motivo alterar las proporciones de la marca (no alargar, aplastar, ni cambiar la proporción del símbolo y la tipografia) No colocar otra marca sobre, ni debajo del logo marca 1 marca 1 No usar borde blanco, ni cambiar los colores de la marca

28 Categorización de marcas A continuación se especifican, a través de ejemplos, las categorías en las que se dividen la creación y uso de logos o marcas dentro de la Universidad y su relación con la marca madre: Universidad del Norte. Los usos de marcas que apliquen en estas categorías deben ser aprobados y autorizados por la Dirección de Comunicaciones y Relaciones Públicas para su promoción.

29 Marcas producto Estas marcas, debido a su naturaleza, tienen autorización de uso independiente en algunos casos, siempre y cuando se especifique su relación con la Universidad del Norte en algún espacio de las diferentes piezas. Contraportadas ó mayores informes, por ejemplo. Y en material oficial debe especificarse que es una marca registrada de la Universidad del Norte. Marcas: Proyectos especiales Estas marcas, debido a su naturaleza, tienen autorización de uso independiente, ya que son creadas para proyectos especiales con recursos e impacto externo. Este uso independiente, en algunos casos, se da siempre y cuando se especifique su relación con la Universidad del Norte en algún espacio de las piezas (Contraportadas ó mayores informes, mayor información e páginas web, por ejemplo).

30 Marca evento Marcas registradas de eventos que lleven a lo mínimo 3 años consecutivos de ser realizados. Este tipo de marcas deberán siempre presentarse en acompañamiento de la marca madre: Universidad del Norte. Aplica en esta categoría la creación de identidades tipográficas (solo letras) para eventos académicos tales como congresos, concursos, etc. Marcas Grupos Estudiantiles En su aplicación de diseño, los grupos estudiantiles deben estar acompañados de la marca Universidad del Norte y expresar claramente su vinculación con la Institución, conservando esta presentación en las aplicaciones internas; en caso de realizar publicaciones externas se usará la versión original de la marca paraguas Universidad del Norte y debajo el nombre del grupo estudiantil. Uso interno Uso externo

31 Marca Medios de comunicación Por su razón de ser, los medios de comunicación interna y externa de la Universidad del Norte podrán tener una marca que los identifique y en todo caso, deberán conservar el cuidado de la marca Uninorte en su manejo interno y externo, de acuerdo con el Manual de Identidad e Imagen Corporativa.

32 Aplicación institucional Papelería Para especificaciones del uso de esta papelería a nivel institucional, hacer referencia al documento: Instructivo para la Elaboración de Comunicaciones y Documentación Organizacional de la Dirección de Servicios Administrativos.

33 Tarjeta de presentación ancho marca: 36 mm Nombres Apellidos Cargo Oficina / departamento /área Km. 5 vía Puerto Colombia A.A Tel.: XXX ext XXXX Fax: ext. XXX nombrecorreo@uninorte.edu.co Área Metropolitana de Barranquilla Colombia 5,5 cm 9 cm

34 Membrete ancho marca: 60 mm

35 Sobre carta ancho marca: 65 mm

36 Sobre manila Carta ancho marca: 55 mm

37 Sobre lord

38 Tarjeta de lord 2

39 Carpetas

40 Cabezotes impresos (words, pdfs) Comunicado Boletín de prensa

41 Campaña Institucional Plantillas PPT Wallpapers Vallas El diseño de estas piezas variará dependiendo de la campaña institucional que se encuentre vigente. Se actualizarán y se enviarán a la comunidad universitaria, estipulando su tiempo de uso.

42 Plantillas PPT

43 Plantillas PPT, aplicación institucional educamos para transformar

44 La marca Universidad del Norte, está conformada por su logotipo, colores, fuentes, elementos representativos e imágenes. Sus usos y lenguaje en diferentes piezas de comunicación en el medio digital incluyen los iconos, diseños de páginas web, correos electrónicos y demás elementos relacionados con el diseño de usabilidad e interfaz gráfica que están asociados con Uninorte y los servicios que ofrece. GENERALIDADES DE LA MARCA APLICACIÓN DE MARCA Manual de Identidad Digital TIPOGRAFÍA COLORIMETRÍA PÁGINA WEB NIVELES DE NAVEGACIÓN TRATAMIENTO DE IMÁGENES ICONOGRAFÍA RETÍCULAS (LAYOUTS) CORREO CORREOS INSTITUCIONALES FIRMAS INSTITUCIONALES WEB 2.0 REDES SOCIALES Versión 01 - Mayo del 2014

45 Universidad del Norte Manual de identidad digital APLICACIONES DE LA MARCA USOS Original Su uso se limita al cabezote del tema institucional. Versión horizontal en un tono Su uso se limita al pie de página(footer). Versión horizóntal desplegada Su uso se limita únicamente al cabezote global de la página institucional, el cual se usa sobre las plantillas de las sub-marcas. UNA TINTA DE COLOR GRIS HEX # SOBRE FONDO GRIS HEX #222222

46 EJEMPLOS CABEZOTE GLOBAL CABEZOTE DEL TEMA INSTITUCIONAL FOOTER Versión 01 - Mayo del 2014

47 Invertida - La aplicación de la marca en versión invertida se usa en casos de fondos oscuros, en los cuales el contraste de la marca original no es visible. Símbolo - Su uso por separado de la tipografía institucional es sólo para perfiles en redes sociales.

48 Uso sobre fotografía - Siempre que se use el logotipo sobre una fotografía este debe tener un respaldo de color blanco(#ffffff).

49 TAMAÑO MÍNIMO Tamaño mínimo Original x 34 px Tamaño mínimo símbolo x 300 px ÁREA DE SEGURIDAD La marca deberá siempre conservar un espacio de seguridad que corresponde al área formada por la medida referencia U. Este espacio debe respetarse para asegurar la legibilidad y limpieza de la marca. Tamaño mínimo versión horizontal desplegada 124 x 28 px

50 SUB-MARCAS Siempre y cuando se ubiquen en el cabezote y debajo de la marca madre. Aplicaciónes:

51 SUB-MARCA SIN LOGOTIPO Las áreas se titularán en el sub-header, dado el caso que el nombre del área sea muy extenso y deberá crecer verticalmente. Aplicación: NOMBRE DE LA MARCA ÁREAS Las áreas se titularán en el sub-header, dado el caso que el nombre del área sea muy extenso y deberá crecer verticalmente. Aplicación: Menu desplegable Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Sección Submenu 1 Submenu 2 Submenu 3 Submenu 4 Submenu 5 Submenu 6 Submenu 7

52 LA TIPOGRAFÍA TIPOGRAFÍA PARA ENCABEZADOS, BANNERS Y COMPOSICIONES TIPOGRÁFICAS Halis R (Uppercase Bold) ABCDEFGHIJKL MNOPQRSTUVW XYZ Ejemplo:

53 TIPOGRAFÍA GENERAL, PARA PARRAFOS Y CUERPOS DE TEXTO EXTENSOS Open Sans (Uppercase, Bold, Regular, Semibold) ABCDEFGHIJKLMNOPQRSTU VWXYZ abcdefghijklmnopqrstuvwxyz Menús: 15px Semibold Titulos: 18px Bold Sub-titulos: 16px Bold Parrafos: 14px Regular Ejemplo:

54 COLORIMETRÍA Los colores generales se usan en todos los temas #B6E05B es para los botones, # para la primera barra de navegación y el footer, #AAAAAA para los links que están sobre esta barra y sobre el footer, #D72B32 para el header y los elementos principales, #A51F20 y #DB5D58 para los demás links. Menu desplegable Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 # #D72B32 #A51F20 #AAAAAA #B6E05B #DB5D58

55 NIVELES DE NAVEGACIÓN Primer nivel Menu desplegable Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Sección Submenu 1 Submenu 2 Submenu 3 Submenu 4 Submenu 5 Submenu 6 Submenu 7 Segundo nivel 15px Menu desplegable Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Sección Submenu 1 Submenu 2 Submenu 3 Submenu 4 Submenu 5 Submenu 6 Submenu 7 Open Sans 22px Open Sans 14px Tercer y cuarto nivel Menu desplegable Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Sección Submenu 1 Submenu 2 Submenu 3 Submenu 4 Submenu 5 Submenu 6 Submenu 7

56 TRATAMIENTO DE IMÁGENES IMÁGENES FRONT PAGE + BANNERS Al ser este banner un espacio de alto impacto para el usuario, los temas a comunicar en este son los siguientes: Especificaciones: -Investigación -Noticias de alto impacto para la ciudad o el país -Proyectos destacados -Biodiversidad -Visita de personajes importantes -Eventos de gran relevancia -Bloguero destacado Tamaño: 1280 px de alto por 500 px de ancho. Peso: No mas de 500 kbps De esta forma se asegura que esta se visualizará correctamente en cualquier resolución de pantalla y mantendrá una velocidad de carga eficaz en la página de la universidad. Es importante resaltar que desde la Dirección de Comunicaciones y Relaciones Públicas se podrán sugerir cambios en los temas a comunicar y que se consideren estratégicos para la Institución. CABEZOTE FOCO DE LA IMAGEN 50% TEXTO (HISTORIA) 50% Aquí se debe concentrar la historia que cuenta la imagen. CUERPO DE LA PÁGINA 100% IMÁGENES PEQUEÑAS

57 BANNERS Especificaciones: Tamaño: 980 px de alto por 364 px de ancho. Peso: No mas de 500 kbps De esta forma se asegura que esta se visualizará correctamente en cualquier resolución de pantalla y mantendrá una velocidad de carga eficaz en la página de la universidad. CABEZOTE TEXTO (HISTORIA) 50% CUERPO DE LA PÁGINA 100%

58 BANNERS Especificaciones: Tamaño: 730 px de alto por 304 px de ancho. Peso: No mas de 500 kbps De esta forma se asegura que esta se visualizará correctamente en cualquier resolución de pantalla y mantendrá una velocidad de carga eficaz en la página de la universidad. CABEZOTE TEXTO (HISTORIA) 50% CUERPO DE LA PÁGINA 100%

59 BANNERS Especificaciones: Tamaño: 490 px de alto por 300 px de ancho. Peso: No mas de 500 kbps De esta forma se asegura que esta se visualizará correctamente en cualquier resolución de pantalla y mantendrá una velocidad de carga eficaz en la página de la universidad. CABEZOTE TEXTO (HISTORIA) 50% CUERPO DE LA PÁGINA 100%

60 Al igual que la imagen del front page esta debe ser de 2560 px de alto por 1440 px de ancho y no debe pesar mas de 500 kbps, ya que de la misma manera cubre la totalidad horizontal de la pantalla.

61 IMÁGENES EN EL SIDEBAR Especificaciones: Tamaño: 230 px de ancho por 150 px de alto Especificaciones: Tamaño:100 px de ancho por 100 px de alto IMÁGENES GRANDES DE CONTENIDO Especificaciones: Tamaño: 580 px de ancho por 340 px de alto

62 ICONOGRAFÍA La iconografía nos ayuda a identificar elementos interactivos de manera rápida y eficaz. El estilo iconográfico que se maneja es el outlined (trazados).

63 RETÍCULAS (LAYOUTS) RETÍCULA UNINORTE Se presenta una retícula de 20 columnas la cual se debe usar en todas las variaciones de páginas y sub páginas de la comunidad Uninorte.

64 MEDIDAS DE LA RETÍCULA Formado por 20 columnas de 30 pixeles de ancho con espaciados de 20 pixeles, formando un total de 980 pixeles de ancho. Columnas 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px Espaciados 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px Total 980px

65 ESTILOS DE LAYOUTS Con el fin de generar contenidos flexibles que funcionen perfectamente en las distintas resoluciones de pantallas se crearon 4 disposiciones de los espacios a utilizar % - 30% 580 px 330 px 2. 33% - 33% - 33% 280 px 280 px 280 px % 980 px 4. 50% - 50% 464 px 464 px

66 LAYOUTS EXISTENTES Partiendo de la información citada en esta sección se dispone un layout general para las plantillas institucionales, el cual esta compuesto por un área principal, creada para la ubicación de la noticia en cabecera que ocupa el 100% de la pantalla y dos áreas inferiores en donde se ubica el contenido de la página. Estas ocupan un 40% del lado izquierdo y un 60% del lado derecho. 100% 40% 60%

67 EJEMPLO 980px / 100% 330px / 30% 580px / 30%

68 CORREO WEB ÁREA DE SEGURIDAD Los correos no deben tener un ancho mayor a 600 px, de esta forma es seguro que funcionarán en cualquier gestor de correo. DISPOSICIÓN DE LOS ELEMENTOS La disposición de los elementos debe pensarse de manera centrada, además esta debe ser diseñada de manera flexible para que funcione en dispositivos móviles. 800 px

69 ESTRUCTURA DE CORREO Header con logo de la campaña y universidad Cabecera de correo con el titulo y la información introductoria de la campaña Noticia Principal Noticia Secundaria Noticia Secundaria Footer

70 FIRMAS INSTITUCIONALES El logo de la firma tendrá un hipervínculo que llevará a la página web, los teléfonos se digitarán si se hace clic desde un smartphone, y los íconos de redes sociales enviarán a los sitios respectivos. Aplicación para la firma de correos electrónicos: - nombre (en caso de ser académico, especificar nivel) - cargo - dependencia - teléfono (con indicativo internacional) - celular (si su número es institucional o quiere incluirlo) redes sociales (solo si aplica) No se podrá acompañar la firma de ningún fondo, ícono, imagen o gráfico. Tipografía: Open Sans (Bold, Regular) Nombre: 16px Bold # Cargo: 14px Regular # Tel: 14px Regular # Links: 14px Regular #DB262E Firmas Campañas Nombre de la campaña Nombre Cargo Tel Firmas Administrativos Firmas Académicos Nombre del Administrativo Cargo del Administrativo Tel Nombre del Académico Cargo del Académico Tel

71 WEB 2.0 La información en las redes sociales debe ser mostrada de una manera clara y precisa ya que el tiempo que usualmente invierte un usuario en ver una pieza en la web es de segundos. Se deben realizar piezas contando con ciertos lineamientos cruciales para su correcta apreciación. PIEZAS PARA REDES SOCIALES Su información debe estar contenida en el espacio que la publicación brinda para esto, es decir, dichas piezas no deberán tener contenido escrito extenso dispuesto para ser leído, dado que de esta forma los buscadores no podrán indexar dicha información. Es posible hacer excepciones pero solo con frases, encabezados, títulos y/o subtítulos y estos deben tener un tamaño de letra legible. Pieza ejemplo

72 COMPORTAMIENTO DE LA MARCA EN REDES SOCIALES Se diseñó una imagen de perfil simple y homogénea para adoptar este espacio en cada una de las redes sociales. En las redes sociales que lo permitan, los links, hovers y elementos visuales de la página deben adoptar el color rojo del logotipo (#D72B32)

73 Cualquier pieza no contemplada en este Manual, deberá tener una aprobación de uso de marca por parte de la Dirección de Comunicaciones y Relaciones Públicas, responsable del diseño y administración de la imagen institucional. 26 de Septiembre de 2014

74 Plantillas PPT institucionales

75 Plantillas PPT, aplicación pre-grados