Mesh

Descripción general

Mi papel

Me centré en definir un sistema visual distintivo y reconocible capaz de representar los valores del aprendizaje permanente, la educación STEAM y el carácter abierto y experimental de la cultura maker. El sistema debía ser flexible y escalable, adaptable a una amplia variedad de formatos y entornos, desde plataformas digitales hasta materiales educativos impresos, manteniendo al mismo tiempo la coherencia y consistencia de la identidad.

El reto

Crear una identidad para la nueva generación de educadores

El proyecto MESH se concibió como una nueva iniciativa sin referencias previas en el contexto de Barcelona. No existía un lenguaje visual ni un marco comparable sobre el que construir; la identidad visual debía desarrollarse completamente desde cero.

• Crear una identidad reconocible.
• Construir un sistema de lenguaje visual escalable y adaptable.
• Traducir los valores educativos en comunicación visual.

Comprensión

Exploración de iniciativas similares

Como primer paso del proceso de desarrollo, realicé una investigación sobre programas e iniciativas educativas con objetivos similares. El objetivo era recopilar insights e inspiración a partir de identidades, sistemas de comunicación y lenguajes visuales existentes. Esta investigación ayudó a definir los valores fundamentales y los principios que guiarían el desarrollo de la identidad visual.

Recopilé referencias visuales de diferentes proyectos, entre ellos:

• Programas educativos centrados en la inclusión social y la participación comunitaria.
• Iniciativas centradas en STEAM y programas de educación maker.
• Plataformas de código abierto y de aprendizaje permanente.

Esta investigación ayudó a identificar patrones, estrategias de diseño y oportunidades de diferenciación mediante el análisis de tipografías, paletas de color, composiciones, iconografía y enfoques de branding.

Desarrollo

Definición del sistema tipográfico

El objetivo del primer paso era establecer un sistema que equilibrara expresión y funcionalidad, reflejando el carácter tecnológico de la educación STEAM y de la comunidad de código abierto, y priorizando la legibilidad y la accesibilidad.

• Debía cumplir con los requisitos de accesibilidad.
• Filosofía de código abierto.
• Compatibilidad digital y física.

Seleccioné una combinación de Montserrat, una tipografía geométrica sans-serif, utilizada para los títulos con el objetivo de establecer estructura, jerarquía y presencia visual, y Open Sans, una tipografía sans-serif humanista, elegida para el texto principal por su alta legibilidad y comodidad en lecturas extensas, ya que fue diseñada específicamente para interfaces digitales y para ofrecer una buena legibilidad en entornos web.

Los colores de MESH

Seleccioné una paleta de colores que reforzara la identidad y reflejara los valores fundamentales del programa: aprendizaje permanente, educación STEAM, inclusión y apertura. Fue diseñada para funcionar tanto en aplicaciones digitales como impresas.

¿Por qué seleccioné estos colores?

• Creatividad: acentos vibrantes para captar la atención y conectar con educadores y jóvenes.
• Claridad: tonos neutros para garantizar la legibilidad y facilitar aplicaciones de carácter profesional.
• Accesibilidad: contrastes equilibrados para garantizar una experiencia visual accesible para todas las audiencias.

Sistema principal (Fundacional)

Para el sistema fundacional principal, definí colores que garantizan la coherencia en todas las aplicaciones, cubriendo fondos, elevaciones, paneles, textos y bordes.

Sistema STEAM (Semántica de marca)

Definí un sistema de color semántico, en el que cada disciplina está representada por un color distintivo que refleja sus valores y propósito:

• Azul: Ciencia
• Cian: Tecnología
• Naranja: Ingeniería
• Morado: Artes
• Verde: Matemáticas

Notificaciones (Semántica del sistema)

Para los colores de las notificaciones, decidí seguir la paleta tradicional de estados y feedback utilizada habitualmente en la mayoría de los sistemas, con el objetivo de garantizar la coherencia entre aplicaciones:

• Verde: Éxito
• Amarillo: Advertencia
• Rojo: Alerta
• Azul: Notificación

Accesibilidad

Para este requisito fundamental, me centré principalmente en la legibilidad, mediante un contraste claro y una tipografía fácilmente legible. Realicé comparaciones sencillas de contraste para validar estas decisiones: se utiliza texto oscuro sobre fondos claros y texto claro sobre fondos oscuros para garantizar una claridad óptima tanto en materiales digitales como impresos.

Diseño del logotipo e identidad visual

El objetivo era desarrollar un elemento gráfico flexible y reconocible que pudiera aplicarse de forma consistente tanto en materiales digitales como impresos.

• El logotipo debía funcionar en diferentes tamaños, desde pequeños iconos web hasta grandes carteles impresos.
• Variaciones para aplicaciones digitales, impresas y materiales para talleres.
• Alineación con el sistema tipográfico y de color.

Concepto del logotipo

El diseño del logotipo gira en torno a un enfoque tipográfico contundente que enfatiza la claridad, la fuerza y la flexibilidad de aplicación. Utilicé formas geométricas para transmitir una sensación de estructura y precisión, combinadas con sutiles irregularidades y bordes suavizados que aportan una cualidad humana y artesanal, reflejando el carácter experimental y práctico del movimiento maker.

Flexibilidad y escalabilidad

Diseñé el logotipo con el objetivo de garantizar un reconocimiento coherente en aplicaciones digitales e impresas. Sus formas geométricas permiten que funcione igual de bien en tamaños pequeños, como iconos digitales o avatares para redes sociales, que a gran escala, como en la señalética de los talleres o en banners impresos.

Variaciones del logotipo

Creé un sistema flexible de variaciones para garantizar un uso consistente en diferentes contextos. Además de las versiones principales, las variantes opcionales permiten adaptar el logotipo a diferentes tamaños, fondos y formatos.

Coherencia dentro de la identidad

El logotipo funciona de forma armónica con la tipografía (Montserrat + Open Sans) y la paleta de colores, creando un sistema de identidad cohesionado. Su forma adaptable garantiza una visibilidad clara.

La solución

La identidad de marca de MESH

Una vez definida la identidad visual, me centré en aplicarla a una variedad de contextos y soportes reales. Cada aplicación se diseñó cuidadosamente para mantener la coherencia visual, adaptando los elementos a las características de cada formato y a las necesidades de su público. El sistema garantizaba que los materiales de MESH siguieran siendo legibles, atractivos y reconocibles tanto en entornos digitales como físicos.

Carteles y banners para eventos, recursos digitales y plantillas web

Plantillas digitales

Materiales para talleres

El resultado

La identidad visual que desarrollé para MESH desempeñó un papel clave en el refuerzo del reconocimiento, la participación y la escalabilidad del programa, proporcionando un sistema de diseño coherente, accesible y flexible.

La identidad visual que desarrollé reforzó los valores de la cultura maker del proyecto MESH, haciendo que los materiales fueran accesibles para públicos diversos y fomentando su participación en el programa.