Key Visual
Concepto: Huella Digital
Históricamente, hemos pasado del clic tradicional a la acción digital de un solo toque. Esta transición es la muestra tangible de nuestra evolución: pasamos de aquel cursor inicial a una forma circular orgánica generada por nuestra huella. Utel ha evolucionado junto con la tecnología misma.
Nuestra huella digital en la navegación —única e irrepetible— y el poder táctil han inspirado nuestras formas redondeadas. Sin ángulos ni perfilados, estas figuras evocan emociones empáticas y cercanas; son amigables, memorables e integradoras.
Universo
Estas formas poseen un valor de colectividad. Interactúan y forman un "algoritmo de variaciones" partiendo de una misma base. Cada forma es tan única como cada uno de nuestros estudiantes.
Usos y Contenedores
Gráficamente, la Huella Digital es nuestro elemento más poderoso. Puede utilizarse con color sólido, degradado, transparencias o solo su contorno. Sin embargo, su versatilidad va más allá de lo decorativo:
- Encuadres y Máscaras: La Huella funciona como un contenedor orgánico para fotografías o elementos de diseño. Al utilizarla como máscara de recorte, permitimos que la realidad del estudiante "viva" dentro de nuestra identidad, creando composiciones donde la imagen y la marca son una misma cosa.
- Composición: Pueden situarse sobre una foto (sin cubrir rostros), formar fondos o girarse para equilibrar el soporte.
- Dualidad: La unión de dos formas simboliza el vínculo entre Utel y el estudiante: dos elementos únicos que conviven en un mismo espacio.
Formas en ambiente
Utiliza las formas como encuadres para generar mensajes consistentes. Al integrar fotografías dentro de estas figuras orgánicas, logramos una comunicación dinámica que se aleja de los marcos rígidos tradicionales. Esta técnica permite que la tipografía y la imagen interactúen de forma fluida, manteniendo siempre el movimiento y la vanguardia.
Concepto: el Sello de Identidad y Excelencia
La "U" en formato outline es mucho más que la inicial de nuestra universidad; es nuestro sello de respaldo. Representa el estándar más alto de calidad en educación en línea y funciona como una garantía de excelencia en cada pieza de comunicación donde aparece.
Este elemento gráfico simboliza el acompañamiento institucional en todo el ecosistema educativo. No es un gráfico aislado: es el hilo conductor que une a nuestros estudiantes, docentes y actividades. Su estructura abierta y lineal comunica modernidad, transparencia y la infraestructura digital que sostiene el aprendizaje.
En resumen: Donde veas la "U", está presente la esencia y el prestigio de la universidad.
Universo: Dinámica y Propósito Visual
El universo de la "U" outline se define por su capacidad de impulsar. No es un elemento estático; es un motor visual que acompaña el camino de transformación de nuestros estudiantes y docentes. Su presencia en una pieza gráfica indica que lo que se está viendo cuenta con el respaldo y la excelencia de la universidad.
Para asegurar su correcta implementación, nos guiamos por estos principios:
- Jerarquía de Respaldo: La "U" no busca sustituir al logotipo, sino certificar la pieza. Su ubicación debe ser estratégica para "coronar" la composición, actuando como el sello final que valida el mensaje o la imagen.
- Acompañante en la Transformación: Este elemento debe aparecer junto a las personas que están cambiando su futuro. Es el marco que rodea al éxito, el esfuerzo y el crecimiento académico.
- Presencia en Herramientas de Cambio: La "U" tiene la flexibilidad de vivir no solo en artes digitales, sino en objetos físicos que facilitan el aprendizaje (laptops, libretas, dispositivos, etc.). En estos casos, funciona como un recordatorio constante de que la institución es la plataforma que hace posible el éxito del usuario.
- Símbolo de Apertura: Al ser un outline (contorno), permite que el contenido "respire" a través de ella, integrándose con el fondo y demostrando que la educación en línea no tiene barreras.
3.1 Orientación: Dinamismo y Estabilidad
La "U" es el eje de nuestra identidad. Su posición debe reflejar equilibrio, permitiendo excepciones sólo cuando el mensaje lo justifique:
- Regla General: En artes estáticos y de comunicación institucional, la "U" se mantiene siempre en vertical a 0°.
- Excepción por Movimiento: Se permite una rotación solo de 25° y –25° exclusivamente en dos casos:
a. Cuando el concepto del arte sea explícitamente "evolución" o "moverse hacia el futuro".
b. En piezas audiovisuales o animadas que requieran dinamismo.
- Restricción: Si el arte no comunica movimiento o no es un formato de vídeo, la rotación debe evitarse.
3.2 Color y Jerarquía Visual: El Equilibrio de Elementos
La "U" debe resaltar en cada pieza sin comprometer la legibilidad del mensaje. El éxito del arte depende del equilibrio entre el impacto visual del color y la fuerza del contenido escrito.
A. Jerarquía Cromática
Se utilizarán exclusivamente los colores de la paleta oficial, priorizando el contraste según el fondo:
- Verde Lima (#9FE76F): Prioridad alta. Ideal para resaltar sobre fondos oscuros o imágenes con poca luz.
- Verde Utel (#06B706): Color base de marca.
- Verde Oscuro (#1C2D1A): Uso preferente sobre fondos muy claros.
- Blanco (#FFFFFF): Uso exclusivo cuando el contraste con los verdes no sea suficiente para garantizar la legibilidad.
B. Jerarquía de Elementos (Copy vs. Gráfico)
Para que el elemento gráfico no opaque la información, debemos aplicar reglas de peso visual en el texto:
- Refuerzo mediante Negritas: En los encabezados o ideas fuerza del copy, es obligatorio el uso de tipografía en negritas (Bold). Esto asegura que el mensaje central mantenga su relevancia y protagonismo frente a la presencia de la "U".
3.3 Grosor de Línea (Stroke): Sutileza y Consistencia
Para mantener esa sensación de "abrazo" ligero y moderno que caracteriza a Utel, el grosor de la línea debe ser constante y uniforme dentro de una misma composición. Buscamos una estética que se sienta técnica pero humana, evitando cualquier trazo que sature la pieza.
- Criterio Óptico: En lugar de un valor fijo, buscamos la percepción de sutileza. El grosor debe ser lo suficientemente fino para evocar elegancia y lo suficientemente presente para ser legible. La línea nunca debe verse tosca, pesada o con rellenos que compitan con el contenido.
- Uniformidad: Una vez definido el peso visual para una pieza, todas las líneas de esa composición deben mantener el mismo grosor. No mezcles diferentes "strokes" en un mismo arte; la consistencia es lo que genera la sensación de sistema.
Advertencia: Gran Formato (Espectaculares y Valla)
Cuando diseñes para soportes de gran escala, el grosor debe ajustarse proporcionalmente. Una línea que se percibe "fina" en una pantalla puede desaparecer por completo a la distancia en un espectacular.
La regla de oro: Escala el grosor de manera que, a la distancia de visualización del soporte, se siga percibiendo como un trazo sutil y elegante, pero nunca invisible. Realiza pruebas de legibilidad antes de la impresión final.
Para mantener esa sensación de "abrazo" ligero y moderno, el grosor de la línea debe ser constante y uniforme.
- Medida Única: El grosor permitido es de 2 px o .5 pt (dependiendo del software de diseño).
- Evitar: No se permite aumentar ni disminuir este grosor. La línea nunca debe verse tosca o pesada. Mantener la misma medida en todas las aplicaciones asegura la elegancia y coherencia del sello.
3.4 Sangría y Recorte: Composición Dinámica
Aunque la prioridad es mostrar la "U" completa, permitimos el uso de sangrías (que el elemento se salga del lienzo) para crear composiciones más modernas y dinámicas.
- Uso Permitido: Se puede recortar la "U" siempre que se identifique claramente la letra. Para ello, es obligatorio que se visualice: Una de las astas completa, el arco inferior y el inicio de la segunda asta.
- Usos a evitar:
· No se permite mostrar solo el arco (la base).
· No se permite mostrar solo una de las astas.
· No se permiten cortes que dejen el elemento irreconocible.
3.5 Aplicación en Fondos y Contextos
La "U" es un elemento versátil que se integra tanto en escenarios reales como en composiciones gráficas abstractas. Su uso está permitido bajo las siguientes condiciones:
- Uso en Fotografía: La "U" puede aplicarse sobre imágenes que muestren a personas u objetos en situaciones cotidianas de estudio o trabajo (oficinas, aulas, cafeterías, hogares, etc.). No importa el entorno, siempre que la escena represente el ecosistema de aprendizaje del estudiante.
- Artes Tipográficos: En piezas donde el protagonista sea el texto, la "U" puede aplicarse sobre fondos de color sólido (utilizando la paleta institucional). En este caso, funciona como un marco que da estructura y respaldo al mensaje escrito.
- Criterio de Aplicación: En ambos casos, la "U" debe ser claramente visible. Si el fondo es muy complejo o tiene muchos detalles, se debe priorizar el uso del color que genere mayor contraste. En todas sus aplicaciones, la "U" debe ser nítida y claramente visible. Sin embargo, el uso de este elemento gráfico no es obligatorio.
- NOTA IMPORTANTE: La "U" es una herramienta de refuerzo de identidad, no un requisito de presencia forzosa en cada pieza.
3.6 El "Efecto Abrazo" y Proporción
Este uso define la interacción física entre la marca y el protagonista (persona, objeto o texto). Es lo que genera la sensación de que la universidad "respalda" y "acompaña" activamente.
- Técnica de Enmarcado (Atrás/Adelante): Para lograr el "Efecto Abrazo" de forma correcta, una parte de la "U" debe pasar por detrás del personaje o elemento principal, mientras que la otra parte debe situarse por delante. Esto crea una sensación de tridimensionalidad, integrando la marca con el sujeto en un mismo espacio.
- Respeto al Rostro: Es una regla estricta que la línea del contorno nunca debe cruzar, tapar o interferir con el rostro de las personas. La cara siempre debe estar libre de elementos gráficos.
- Regla de Tamaño: El tamaño de la "U" debe ser siempre proporcional, igual o mayor al tamaño del objeto, persona o bloque de texto que está acompañando. Nunca debe aplicarse en un tamaño menor al del protagonista, ya que perdería su valor como "sello de respaldo" y se percibiría como un accesorio pequeño.
Estilo de imagen
Las imágenes dan vida a nuestra love brand: Retratan nuestra personalidad y evocan emociones; son el reflejo tangible de nuestra diversidad e inclusión como universidad.
Esta guía proporciona una descripción general simple del estilo de imágenes de Utel.
Incluye los usos permitidos y no permitidos cuando se integran fotografías:
Utilizamos imágenes para comunicar cercanía y empatía, reflejando en un estilo específico, un lenguaje visual cercano, emocional y donde la gente real puede identificarse con él (B).
Nos enfocamos en personas en situaciones de la vida real y compartimos experiencias positivas (A).
Nuestro estilo es ligero y natural: personas sin poses ni forzadas a estar en situaciones fuera de la realidad. Buscamos colores neutros en su vestimenta o en el fondo, sin distracciones por ropa o ambientes muy saturados de colores o elementos.
Buscamos el uso de fotos con luz natural siempre que sea posible, con contrastes naturales y profundidad de enfoque resaltando los elementos o las personas importantes (C/D). La luz es también utilizada como elemento activo en nuestra fotografía, a veces hasta el punto de una ligera sobreexposición. En ocasiones podremos utilizar el verde en algún elemento o fondo para dar presencia a nuestra marca. (C en el lápiz damos un poco de tono verde /F)
Personas
Las personas juegan un papel clave en Utel: agregan el lado humano y cálido mientras proveen de energía, diversidad y espíritu (E).
Encontrar la humanidad en nuestras historias nos ayuda a conectarnos con nuestra audiencia de una manera poderosa.
Persona Utel
– Activo y comprometido.
– Social e interactivo.
– Amable, simpático y seguro de sí mismo.
– Abierto, accesible y conectado.
– Empoderado y con confianza.
Tonos
Aspectos clave:
Colores claros y naturales. Evitar las fotografías exageradamente contrastadas pues tienden a ser menos naturales (G/G1), opta por utilizar luz natural, enfatizada con reflejos auténticos. El brillo enfoca la vista en el contenido y separa el primer plano y el fondo.
Tenemos que cuidar mucho la imagen y debemos estar seguros de que la fotografía no es fría pero tampoco debe dar la impresión de ser o lucir vieja.
El verde Utel es nuestro color favorito y podemos usarlo en distintos elementos para tener un dominio de color; nuestra paleta ya posee un dominio de dicho color verde, por ello, en las fotografías, se debe utilizar de manera moderada y cuidar el no saturar el espacio o el color con el que se usa en contexto (F).
Corrección de color
Evita la saturación de color, el exceso de luces o mucho espacios oscuros en contraste. Busca siempre una foto que se vea real o, bien, puedes corregirla.
Aplicar un tono uniforme a la fotografía a través de la corrección de color puede ayudar a unificar nuestra librería fotográfica y, al mismo tiempo, darle calidez y naturalidad. Busca siempre alinearte a tonos más cálidos en lugar de fríos (G/G1), aunque finalmente, debes mantenerte lo más cercano a la vista real.
Filtraciones de luz y sobre exposición
Las fugas de luz se crean cuando esta se filtra en la imagen y, al igual que la sobre exposición, normalmente esto es un efecto no deseado, pero usado correctamente puede agregar carácter a la fotografía. En estas imágenes podemos agregar un efecto un tono verde.
Coloca una fuga de luz sobre una imagen y establece la pantalla en la paleta de efectos (recomendamos screen aunque cada foto es diferente y puedes hacer uso de la herramienta y efecto que mas convenga). La técnica puede ir desde intensos y obvios, hasta una luz sutil, pero evita siempre oscurecer un tema importante o emplastarlo. Ten mucho cuidado con este uso y no aplicarlo sobre rostros.
La sobre exposición tiende a mostrar un efecto con mucha luz en la fotografía, por ello, debemos tener especial cuidado en seleccionar fotos que no se vean fuera de época.
Enfoques
Desenfoca primer plano y/o fondo (I/K/L). El brillo es un medio para poner el foco en el contenido y separar el primer plano y el fondo (J). El desenfoque de primer plano ayuda a centrar la atención en las partes más importantes de la imagen (K).
Perspectivas interesantes, contrastes y secciones de imágenes llamativas. Ángulos interesantes, juego con el primer plano y el fondo. Las perspectivas inusuales proporcionan líneas que apuntan al foco de la imagen (L/M).
Recorte
Recorta cuidadosamente las imágenes para enfocarlas a un tema y comunicarse con la audiencia de manera más efectiva (J).
Device
Los devices son parte de nuestra esencia nativa digital al ser herramientas con las que aprendemos y nos conectamos en nuestro campus, es por ello que en múltiples ocasiones serán parte de nuestras fotografías o imágenes, no obstante, nunca serán el protagonista de la foto sea el estudiante y no su tableta, teléfono, laptop o computadora; estas son solo sus herramientas (E/F).
Los devices solo aparecerán en primer plano o al centro cuando se trate de un enfoque macro o no tengamos en el encuadre a una persona como tal, pero siempre prioriza a la persona como lo más importante de tu composición (P).
Categorías Utel:
Personas al frente y fondo plasta
Las personas en fondo claro o verde estarán utilizando el más poderoso de los mensajes, siempre al frente con una actitud positiva y que empodere. Al lado de estas fotografías siempre debe utilizarse la marca y nuestro isotipo en alguna de sus maneras (ver elementos gráficos). Si es parte de un díptico no será necesario que tenga el logo (P).s
Personas en contexto
Las personas deberán estar en un contexto real y de manera natural, con un enfoque cerrado, hasta donde sea posible, pues entendemos que muchas veces la cantidad de información nos pide un contexto más abierto. Estas fotos se utilizarán para hablar directamente al interlocutor con mensajes poderosos y directos en espera de respuesta.
Macro
Más es menos. Se puede comunicar de manera muy poderosa al hacer uso del macro y centrarse en un cuadro muy específico de la foto donde, con una pequeña parte, se pueda comunicar mucho. En esta opción se puede permitir el uso de blanco y negro siempre y cuando la imagen este en un contexto donde el verde este presente (J/P).
Díptico
Se podrán combinar dos fotografías complementarias a los macros y a los ángulos más abiertos para contar una historia. Se debe cuidar que se vea claramente la diferencia de ambas fotografías al juntarlas (P/Q).
Apoyo
Tomas de objetos, de proyectos y de actividades específicas o entornos pueden y deben ser utilizadas en función de apoyo a un tema mencionado y, de preferencia, deben contener personas. Estas fotos son específicas —deben estar relacionadas directamente al contenido que está siendo comunicado (L).
Región geográfica
Es importante para Utel que las personas en su comunicación estén seleccionadas de acuerdo a su zona geográfica, que se vean pertenecientes al lugar al que se les asocia. (R1/R2/R3)
Usos permitidos y no permitidos:
Sistema de iconografía
Concepto
El uso estratégico del estilo outline con trazos abiertos se convierte en el lenguaje visual perfecto para 'ir un paso adelante'. Esta apertura en la línea no representa una pausa, sino una invitación a la continuidad y al movimiento constante. Al aplicar este principio a toda la familia de iconos, construimos un sistema donde cada elemento gráfico refleja la esencia de Utel: un progreso infinito, dinámico y siempre proyectado hacia el futuro.
Estructura del ícono
La iconografía de Utel se define por una estructura de trazo limpio y minimalista que prioriza la ligereza y la versatilidad. Para evitar la saturación visual y permitir una integración orgánica sobre cualquier soporte —ya sean fondos sólidos, plecas o fotografías— se evita el uso de contenedores o plastas de fondo, permitiendo que el icono respire y mantenga su claridad en todo momento.
La Regla del Trazo Seccionado
El ADN gráfico de nuestra marca se manifiesta a través de un estilo outline (línea de contorno) con interrupciones estratégicas. Estas secciones abiertas simbolizan el concepto de "ir un paso adelante", aportando una sensación de fluidez, dinamismo y avance ininterrumpido.
Para la construcción de estas aperturas, se aplican los siguientes criterios:
- Ubicación estratégica: La posición de la sección abierta no es fija. Se determina de forma individual según la morfología y estructura de cada símbolo.
- Prioridad a la legibilidad: La interrupción del trazo se sitúa siempre en zonas donde afecta mínimamente el reconocimiento visual del objeto. El objetivo es permitir que el ojo del usuario complete la forma de manera natural e intuitiva.
- Integridad del símbolo: El corte se realiza de tal manera que el concepto representado (un reloj, un birrete, etc.) sea identificable al primer golpe de vista, asegurando que la esencia del mensaje sea clara y directa.
Aplicación de Color
La ausencia de fondos permite que la línea del icono adopte directamente cualquiera de los colores de la paleta complementaria (verde lima, amarillo o morado) y colores de soporte (blanco, negro o gris). Esto facilita una codificación visual flexible y una legibilidad óptima, adaptándose con facilidad a las necesidades de contraste de cada pieza de comunicación.
Criterios de construcción
Regla de legibilidad
La lectura del símbolo es prioritaria. Antes de aprobar un icono, validar:
Checklist:
- ¿Se entiende en menos de 1 segundo?
- ¿Es reconocible en tamaños pequeños?
- ¿La apertura no compromete la lectura?
Si genera duda, debe simplificarse.
Regla de oro
el ícono no se cierra, para generar la percepción de construcción continua.
Colección de íconos
Cada elemento de esta familia gráfica se construye bajo nuestro sistema de "avance continuo", definido por un estilo outline seccionado que aporta dinamismo y ligereza visual. Esta biblioteca estandariza la comunicación de las virtudes de nuestra universidad, garantizando una integración limpia, versátil y de rápida identificación en cualquier soporte de comunicación.
Los favoritos
Media y contenido
Redes sociales
Comunicación
Trámites y servicios
Oferta académica
Composiciones complementarias
Inspirados en el patrón visual que posee una huella digital real, hemos creado una serie de formas complementarias basadas en ello. Integra los siguientes patrones en otras aplicaciones gráficas donde sea necesario o útil.
Texturas descargables:
Estos son algunos ejemplos permitidos del uso de las distintas versiones de nuestras formas en fondos de color
