ESU
Manual de Identidad & Diseño Gráfico
ElSancarlistaU www.elsancarlistau.com
Todo el material utilizado y analizado en este folleto está adjunto en el disco que viene consigo. Cada archivo se encuentra en una subcarpeta según su clasificación (ver el Índice del Manual), y podrá ser encontrado en todas las páginas, cercano a cada recurso, por ejemplo: (ArchivoDeEjemplo.psd) PROGRAMAS NECESARIOS
Diseño del folleto: Bernal Rodríguez Ramírez Textos: Bernal Rodríguez Ramírez Creación de la línea gráfica: Bernal Rodríguez Ramírez Todos los derechos de autor de esta línea gráfica y creaciones para la Agencia de Noticias y Diario Digital “ElSancarlistaU” son propiedad de ElSancarlistaU y quedan como archivos abiertos sin atribución al autor para su reproducción parcial o total, sin necesidad de autorizaciones previas. Guatemala, noviembre de 2017
ÍNDICE
INTRODUCCIÓN..................3 INDENTIDAD DEL MEDIO.....4 Logo....................................5 Tipografía............................6 Colores................................6 REDES SOCIALES..................7 Fotos de Perfil.....................8 Fotos de Portada.................9 MAQUETAS........................10 Último Minuto....................11 Editorial............................12 Información/Encuesta.......13 CINTILLOS.........................14 De Autor............................15 De Columna.......................16 De Fotografía.....................17 De Video............................18 EVENTOS...........................19 Invitaciones.......................20 Afiches...............................21 Banners.............................22 Redes Sociales...................23 OTROS..............................24 Back..................................25 Tarjetas.............................26 Talonario/Catálogo............27 RadioESU...........................28
INTRODUCCIÓN
Con la visión de constituirse en una sólida Agencia de Noticias que sirva de plataforma práctica para los estudiantes y como voz de la Escuela de Ciencias de la Comunicación, ElSancarlistaU es una realidad hoy. ESU ha crecido hasta convertirse en un medio digital y de redes sociales sin precedentes para dicha institución. Esta línea gráfica es un producto que conllevó gran esfuerzo para que se consolidara como la identidad visual de este medio de comunicación. En el proceso de su creación se emplearon muchos colores y formas, se esbozaron varias propuestas, se trabajaron tantos archivos… pero el esfuerzo constante bajo las exigencias de la directiva del medio conllevó a su consolidación final. ESU es transparencia, veracidad, innovación, servicio y conciencia social. La línea gráfica desea transmitir con frescura estos valores, con base a la línea de la Escuela de Ciencias de la Comunicación para reinventar el concepto de sencillez. Transmitir formalidad, claridad, seriedad y academia. Así se construyó la cara de ESU... pensando en que la noticia es efímera pero su diseño será perenne, hasta que lleguen más y deseen brindar ese toque de frescura y actualidad que caracteriza a ElSancarlistaU. Bernal Rodríguez Ramírez WebMaster & WebDesigner - 2017
3
INDENTIDAD
DEL MEDIO
LOGO
ARCHIVOS: (ESU LOGO Blanco.png), (ESU LOGO Rojo.png), (ESU LOGO2 Blanco.png), (ESU LOGO2 Rojo.png) ESU utiliza dos logos: uno cuadrado/corto y otro rectangular/largo. Ambos pueden ser empleados en cualquier documento y su variación se debe a motivos de espacios que en ocasiones generan las plantillas con las que se debe trabajar. Sin embargo, el Logo No.2 es empleado para situaciones de más formalidad. La variación de colores puede ser empleada según el contraste con el fondo del documento sobre el que se trabaje, pero es más usual emplear el logo blanco con fondo rojo.
LOGO NO. 1 - CUADRADO/CORTO (VERSIÓN BLANCA Y VERSIÓN ROJA) - Relación de Aspecto 89:70 -
Más formal, frecuentemente utilizado para trabajar en las imágenes para Redes Sociales.
Frecuentemente utilizado para acompañar a los encabezados de los documentos impresos (fondos blancos).
LOGO NO. 2 - RECTANGULAR/LARGO (VERSIÓN BLANCA Y VERSIÓN ROJA) - Relación de Aspecto 95:16 -
Empleado en las portadas de redes sociales y para documentos de fondo rojo de carácter formal
Es el menos utilizado. Empleado para documentos digitales como en los encabezados de este manual.
5
TIPOGRAFÍA La tipografía de ESU proviene de la subfamilia tipográfica básica (que viene instalada por defecto en todos los paquetes de Windows en formato OpenType Font) Tw Cen Mt Condensed. Es una tipografía de clasificación Grotesca, sin serifa y de anatomía cerrada, recta y como lo indica su nombre, de variación condensada.
Tw Cen MT Condensed Regular
Tw Cen MT Condensed Bold
Tw Cen MT Condensed Extra Bold
PALETA DE COLORES La paleta de colores de ESU, está conformada por tres colores básicos en diversas tonalidades. Estos provienen de los colores empleados por la Escuela de Ciencias de la Comunicación de la USAC. Busca transmitir seriedad, análisis, profundidad, elegancia, innovación y representa la pasión periodística y la formalidad de un medio.
6
BLANCO AL 100% HSB: 0, 0, 100 RGB: 255, 255, 255 Lab: 100, 0, 0 CMYK: 0, 0, 0, 0 HEX: #ffffff
BLANCO TIPOGRAFÍA
HSB: 45, 10, 98 RGB: 251, 245, 227 Lab: 97, 1, 10 CMYK: 2, 6, 15, 0 HEX: #fbf5e3
BEIGE DOCUMENTO HSB: 39, 12, 87 RGB: 222, 213, 196 Lab: 86, 2, 10 CMYK: 14, 17, 25, 0 HEX: #ded5c4
ROJO CONTRASTE ALTO
ROJO
CONTRASTE MEDIO
HSB: 357, 85, 87 RGB: 223, 34, 43 Lab: 56, 80, 58 CMYK: 0, 96, 81, 0 HEX: #df222b
HSB: 0, 100, 58 RGB: 148, 0, 0 Lab: 31, 54, 45
ROJO OFICIAL
ROJO CONTRASTE BAJO
HSB: 0, 100, 75 RGB: 190, 0, 0 Lab: 47, 73, 63 CMYK: 12, 99, 100, 0 HEX: #be0000
ROJO VARIACIÓN HSB: 0, 87, 75 RGB: 190, 24, 24 Lab: 48, 71, 58 CMYK: 12, 98, 97, 0 HEX: #be1818
CMYK: 39, 100, 100, 17
HEX: #940000
HSB: 356, 75, 40 RGB: 102, 25, 30 Lab: 26, 43, 26 CMYK: 46, 100, 97, 30
HEX: #66191e
NEGRO AL 100% HSB: 0, 0, RGB: 0, 0, 0 Lab: 0, 0, 0 CMYK: 84, 83, 73, 80 HEX: #000000
Los colores oficiales son Blanco al 100%, Rojo Oficial (O Rojo Variación, en su defecto) y Negro al 100%. El color blanco tipografía se utiliza en toda fuente que sirva de apoyo a una imagen. El Beige documento es empleado en todo documento institucional de ESU. Los colores Contraste pueden ser utilizados para degradados o para más variedad en un diseño.
REDES SOCIALES
FOTO DE PERFIL
ARCHIVOS: (Perfil 0 Oficial.psd), (Perfil 1Hashtag.psd), (Perfil 2 Hashtag.psd), (Perfil 3 Hashtag.psd) En los últimos meses, las imágenes de perfil para redes sociales han variado sus estilos para ajustarse a un solo formato: la imagen cuadrada que posteriormente es visualizada como un círculo. Todos los archivos editables adjuntos a este manual, están disponibles para su edición libre en caso de que sea necesario. Sin embargo, se recomienda encarecidamente que se siga el patrón ya
establecido pues es el que mejor se adapta a las plataformas actuales. Sin embargo, hay unas condiciones de exportación de archivos que se deben cumplir: • Facebook: PNG • Twitter: JPG • Instagram: JPG • WordPress: PNG Si no se exporta en estos formatos, las imágenes perderán su definición y pueden ser mal visualizadas.
Archivo: “Perfil 0 Oficial.psd” (3550x3600)
FOTO DE PERFIL - COBERTURAS Estas son las variantes de diseño para fotos de perfil en caso de coberturas especiales. Seguir las instrucciones de arriba. Por estética es mejor emplear la imagen de perfil con un solo hashtag, pero todos son diseños válidos.
8
Archivo: “Perfil 1 Hashtag.psd” (3550x3600)
Archivo: “Perfil 1 Hashtag.psd” (3550x3600)
Archivo: “Perfil 1 Hashtag.psd” (3550x3600)
FOTO DE PORTADA
ARCHIVOS: (Portada 0 Oficial.psd), (Portada 1Hashtag.psd), (Portada 2 Hashtag.psd), (Portada 3 Hashtag) Las imágenes de portada destacan por su tamaño y anchura. Los archivos editables para ESU son muy pesados, pero de gran calidad para evitar la pérdida de resolución. Aunque, pueden ser modificados, se recomienda encarecidamente que se siga el patrón ya establecido pues es el que mejor se adapta a las plataformas actuales. Sin embargo, hay unas condiciones de exportación de archivos que se deben cumplir: Facebook: PNG, Twitter: JPG, Instagram: JPG y WordPress: PNG. Si no se exporta en estos formatos, las imágenes perderán su definición y pueden ser mal visualizadas.
Archivo: “Portada 0 Oficial.psd” (8027x1720)
FOTO DE PORTADA - COBERTURAS LOGOS DE Estas son las variantes de diseño para fotos de portada en caso de coberturas especiales. Seguir las instrucciones de arriba. Por estética es mejor emplear la imagen de portada con un solo hashtag, pero todos son diseños válidos. Es recomendable no reducir el tamaño de la imagen por problemas con las plataformas.
REDES SOCIALES
Archivo: “Portada 1 Hashtag.psd” (8027x1720)
Logos en PNG de acuerdo a la línea gráfica de ESU para emplearlos en cualquier diseño, en variantes Rojo Oficial y Blanco para mejorar los contrastes.
Archivo: “Portada 2 Hashtag.psd” (8027x1720)
Archivo: “Portada 3 Hashtag.psd” (8027x1720)
Archivos: Ver Carpeta REDES SOCIALES
9
MAQUETAS
ÚLTIMO
MINUTO Las imágenes de Último Minuto son empleadas en las redes sociales Facebook y Twitter como sustituto a una imagen para una publicación o directamente como la publicación en sí.
Archivo: “Último Minuto 1 ESU.psd” (6439x3456)
Para ello se poseen tres formatos que se pueden observar al lado de este texto. La primera imagen es una maqueta de Último Minuto con texto (de un máximo de 100 caracteres), esta sirve para indicar una situación corta y clara, en la que se disponga de tiempo para ditar el formato y exportarlo. Exportar según las reglas de cada red social.
Archivo: “Último Minuto 2 ESU.psd” (6439x3456)
Por otro lado, las dos imágenes restantes son acompañamiento de una información urgente, en la que no se dispone de tiempo para editar la primera imagen. El formato No.2 es para Facebook (PNG) y el formato No.3 (JPG) es para Twitter. Recuerde siempre cuidar su ortografía.
Archivo: “Último Minuto 3 ESU.psd” (9415x3456)
11
FOTO DE EDITORIAL ARCHIVOS: (Editorial ESU.psd), (Editorial 2 ESU.psd)
Las imágenes de editorial son maquetas más sencillas y de una distribución más espaciada. Como su nombre lo indica, acompañan al Editorial que corresponde a la sección de Opinión.
Archivo: “Editorial ESU.psd” (4292x2439)
En este caso también existen dos formatos que pueden ser empleados sin distinción de una red social en específico, siempre guardando las características de exportación respectivas. La primera opción nos presenta una imagen estática e inalterable que sirve como añadido estético a un Editorial.
Archivo: “Editorial 2 ESU.psd” (4292x2439)
12
En cambio, la segunda es una imagen editable a la que puede añadirse el Titular del Editorial si se considera necesario. La selección es personal y a decisión del editorialista.
FOTO DE INFORMACIÓN ARCHIVO: (Información ESU.psd)
Las maquetas de información son muy poco utilizadas. Sin embargo, cumplen una función muy importante dentro del medio: establecer una vía de comunicación más estética entre público-medio o entre la directiva-secciones de ESU.
Navidad! o ¡Pase usted un buen 15 de septiembre!) para generar cercanía con la audiencia. O para dar un pequeño comunicado a los integrantes del equipo de ESU.
Poseen un diseño básico e inalterable que variará solo por un texto (máximo Por ejemplo, puede ser de 250 caracteres) y que utilizado para comunicar debe distribuirse de una una frase al público (¡Feliz forma simétrica.
Archivo: “Información ESU.psd” (3500x3600)
FOTO DE ENCUESTA ARCHIVO: (Encuesta ESU.psd)
Archivo: “Encuesta ESU.psd” (2352x2538)
Las encuestas ESU son otra forma de generar cercanía entre el público y el medio de comunicación, a través de la interacción y la creación de espacios de expresión.
gama booleana (Sí/No) o una pregunta cerrada con una selección múltiple de respuestas. La pregunta y sus respuestas no deben excederse de los 250 caracteres.
El formato es simple y puede ser adaptable para cualquier tipo de encuesta. Por ejemplo, se puede realizar una pregunta de análisis abierta, una pregunta cerrada con una
Es recomendable que después se arrojen los resultados de la encuesta (si es cerrada) en una gráfica sobre este mismo formato gráfico y así generar más interacción.
13
CINTILLOS
CINTILLO DE AUTOR ARCHIVOS: (Cintillo de Autor.psd)
Los cintillos de autor son los elementos gráficos más importantes de la página web y tienen como función identificar las publicaciones realizadas. Los cintillos de autor están constituidos por una fotografía (Relación de Aspecto 8:10), el nombre completo del autor, el twitter personal del autor (opcional), un correo electrónico del autor (obligatorio), el logotipo cuadrado de ESU y una descripción realizada por el autor (que debe estar contenida entre 150 caracteres y 250 caracteres). Si se realizaran los cintillos de autor de todo un equipo o clase, lo más óptimo es acordar una sesión de fotografía para que todas las imágenes cuenten con un mismo aspecto (plano medio corto, buena iluminación, buen contraste, fondo blanco) y se vean más uniformes. El tamaño de la fuente puede modificarse en caso de que se necesite más espacio para texto. La descripción es obligatoria, debe ser una proyección del autor hacia sus lectores y puede contener en su interior: cualidades, gustos, intereses, sueños, aspiraciones, realidades, una breve hoja de vida, citas literarias, entre otros elementos creativos).
Archivo: “Cintillo de Autor.psd” (5000x1289)
15
CINTILLO DE COLUMNA ARCHIVOS: (Cintillo de Columna.psd)
El diseño de cintillos para columnistas difiere de uno de autor. Es más grande, espacioso y tiene por objeto destacar más la fotografía de la persona.
Archivo: “Cintillo de Columna.psd” (4292x2439)
El cintillo contiene la fotografía del columnista (Relación de Aspecto 29:12) nombre de la columna, el nombre del columnista, el twitter personal del autor (opcional), un correo electrónico del autor (obligatorio) y el logotipo cuadrado de ESU. La fotografía de autor debe ser horizontal, de preferencia con fondo blanco y en un plano medio corto o primer plano, donde sea claramente distinguible el rostro del individuo. El cintillo dispone de espacio hacia los lados, en caso de que los textos (alineación centrada) puedan desbordarse.
16
CINTILLO DE FOTOGRAFÍA ARCHIVOS: (Cintillo de Fotografía.psd)
Una de las principales exigencias en ESU es mantener y realizar un contenido original que se diferencie de otros medios de comunicación. Uno de los principales materiales que puede servir como “diferencial creativo” del medio de comunicación es el trabajo fotográfico. Por ello debe procurarse que se realicen variedad de trabajos fotográficos que documenten hechos determinados. Tener material único y de calidad puede dar origen a problemas de robo de material y derechos de autor, para lo cual es necesario que se añadan cintillos de fotografía a todas las imágenes que sean propias del medio y que pertenezcan a una galería específica. Está pensado originalmente para la red social Facebook, pero puede modificarse para las otras redes sociales. El cintillo de fotografías es básico, consta de dos logos cuadrados a los lados y de las redes sociales (exceptuando en la que se está publicando la fotografía). Puede ser añadido en una imagen horizontal o vertical, siempre en la parte inferior y nunca cubriendo ninguna sección del material fotográfico.
17
CINTILLO DE VIDEO ARCHIVOS: (Cintillo de Video.psd), (Pantalla de Video.psd)
Archivo: “Cintillo de Video.psd” (900x200)
PANTALLAS DE VIDEO
Las pantallas de video, son imágenes pre generadas para su inserción en el inicio y final de TODO video. Este formato está unificado para que todo video lleve consigo este material. Debe cuidarse que los videos sean trabajados en una relación de aspecto 16:9 para aprovechar al máximo su calidad. Esta imagen puede servir también para insertarse como fondo de pantalla si se desea.
18
Otro contenido especial, frecuentemente empleado en ESU es el video y una parte muy importante de los mismos son las entrevistas. Para identificar al entrevistado y al entrevistador se debe emplear este cintillo de video. Utilizar preferentemente un nombre y uno o dos apellidos. La imagen de la izquierda puede ser sustituida por la imagen de perfil de una cobertura.
Archivo: “Cintillo de Video.psd” (2500x1404)
EVENTOS
INVITACIONES ARCHIVOS: (Invitación ESU.psd)
Las invitaciones para eventos siguen la línea gráfica de la Escuela de Ciencias de la Comunicación. Están trabajadas sobre un fondo blanco para que puedan ser impresas en papel bond grueso o papel lino a un tamaño de 1/4 de carta.
Archivo: “Invitación ESU.psd” (1950x1290)
Constan de una parte superior en la que se coloca el grupo que invita, de una parte central en letras rojas que indica el nombre del evento y de una parte inferior en la que se colocan los datos de la actividad (fecha, hora y lugar). Además posee un cintillo inferior en el que se colocan el escudo de la USAC, el logo de ESU y el escudo de la ECC. Además de una parte en la que se indican los hashtag de la actividad. Las invitaciones para evento también requieren de la tipografía “Adobe Arabic”, oficial de la Escuela de Ciencias de la Comunicación. El formato es rígido y es mejor que no sea alterado, a menos que sea necesario, así se mantiene la estética de la línea gráfica.
20
AFICHES DE EVENTO ARCHIVOS: (Afiche ESU.psd)
El afiche de promoción de eventos es una variación del diseño de las invitaciones. Aunque cuenta con dos filetes gruesos en la parte superior e inferior. Nuevamente, se recomienda no alterar este diseño para mantener la uniformidad.
Archivo: “Afiche ESU.psd” (2550x4200)
21
BANNERS ARCHIVOS: (Banners ESU.psd)
Los banners de evento de ESU están trabajados en un formato CMYK (Relación de Aspecto 13:55). Poseen los escudos institucionales de la USAC y ECC, el logo cuadrado de ESU, los logotipos de las redes sociales y el usuario @ElSancarlistaU. Tienen como finalidad servir de elementos estéticos colocados a los lados de la entrada a todo tipo de eventos que se realizan para ElSancarlistaU. Hay dos variantes de este banner, fondo rojo con letras blancas y fondo blanco con letras rojas. Estos formatos carecen de hashtag para que puedan ser empleados en diferentes eventos.
Archivo: “Banners ESU.psd” (354x945)
22
Actualmente, la Escuela ya cuenta con un banner de cada tipo, pero se dejan estos formatos en caso de que sean necesarios. Se recomienda no alterar su diseño para mayor uniformidad.
Archivo: “Banners ESU.psd” (354x945)
REDES SOCIALES
ARCHIVOS: (Evento Twitter ESU.psd), (Evento Facebook ESU.psd)
TWITTER Esta es una imagen de Archivo: “Evento Twitter ESU.psd” (2698x632)
potada para Twitter de un evento de ESU. Las dimensiones están adaptadas para que la imagen pueda ser correctamente visualizada en la red social. Recordar exportar la imagen en JPG y no alterar el tamaño de ningún elemento del diseño.
PORTADA DE FACEBOOK Las imágenes de portada de Facebook poseen unas dimensiones únicas (Relación de Aspecto 300:157) que solo pueden ser colocadas en las herramientas de “Evento” de toda página. También puede ser utilizada como imagen de portada para la página de Facebook. Recordar exportar en PNG.
Archivo: “Evento Facebook ESU.psd” (1200x628)
23
OTROS DISEÑOS
BACK PRESS ARCHIVOS: (Back Press ESU.psd)
Archivo: “Back Press ESU.psd” (8646x8646)
El Back Press de ESU es un archivo multilogo de fondo blanco con los logos cuadrado y rectangular en color rojo y una relación de aspecto 1:1. El archivo está trabajado para poder ser impreso en grandes mantas vinílicas que pueden alcanzar el tamaño de 3 metros x 3 metros. Su finalidad es servir como un panel fotográfico como fondo para eventos, conferencias o presentaciones oficiales de ESU.
25
TARJETAS DE PRESENTACIÓN ARCHIVOS: (Tarjeta ESU.psd)
Las tarjetas de presentación de ESU son un diseño opcional, creado para servir como ligeros diseños impresos que puedan entregarse a fuentes, amigos o conocidos con la finalidad de mantener un contacto adecuado.
Archivo: “Tarjeta ESU.psd” (945x588)
Poseen un diseño simple, de fácil impresión, ajustable para todo tipo de papel y con una libertad abierta en la utilización de colores. Contiene el logo de ESU, el nombre completo de la persona, su cargo, su número telefónico, un correo electrónico y su dirección. Este diseño es tentativo y ha sido creado como un elemento de presentación formal. Su diseño es básico, simple y sencillo con la finalidad que puede emplearse a gusto del portador. Es recomendable colocar el nombre completo y no alterar demasiado el diseño original para dar uniformidad.
26
TALONARIO/CATÁLOGO ARCHIVOS: (Talonario ElSancarlistaU.ai)
Archivo
“Talonario ElSancarlistaU.ai”
(3300x2550)
El Talonario/Catálogo de ESU es un folleto corto, con las características básicas de la línea gráfica de ESU y de formato cambiante y expansivo. Su objetivo es servir de proyección para interesados en el proyecto, desde nuevos miembros del equipo hasta potenciales clientes. En sus páginas se puede encontrar: la misión, la visión, la historia, los valores, el público objetivo, el área de acción, el tiraje del impreso, la circulación estimada del medio, la distribución en páginas del impreso y el catálogo de pautas publicitarias para el impreso. Los colores básicos que emplea son el Rojo Contraste Bajo y Beige Documento. Es recomendable que en caso de que sea necesario añadir nuevas páginas para hacerlo más completo, se emplee constantemente el uso de vectores para que sea más ilustrativo y no tan pesado a la lectura. Todos los elementos contenidos en este folleto están sujetos a cambios y deben someterse a revisión cada cierto tiempo para permanecer actualizados.
27
IDENTIDAD DE RADIOESU ARCHIVOS: (Logo RADIOESU.psd), (Fondo RADIOESU.psd)
Archivo: “Portada RADIOESU.psd” (4876x2821)
RadioESU es un proyecto en desarrollo de la Escuela de Ciencias de la Comunicación. Sin embargo, su línea gráfica ya se ha establecido y aprobado en caso de que sea necesario implementarla en un futuro próximo.
Archivo: “Logo RADIOESU.psd” (3600x3600)
28
Esta línea sigue las características de la línea gráfica formal de las fotografías institucionales de ESU a las que se añaden nuevos elementos tipográficos como “Radio” y “ECC-USAC”. Esta línea puede estar sujeta a muchos cambios en el futuro y no está completamente definida. Es recomendable que de cambiarse este diseño, se altere a uno que continúe los elementos tipográficos y de colores para mantengan una continuidad con la línea gráfica original, con el objetivo de generar más identificación entre ambos medios de comunicación.
MANUAL DE ESTILO & DISEÑO - Guatemala, noviembre de 2017
