Un lenguaje visual unificado para toda la comunidad
El Colegio Nacional de Monserrat es una de las instituciones educativas más prestigiosas y antiguas de Córdoba. Nos contactaron para rediseñar su sitio web. Por la magnitud del proyecto y los problemas que presentaba la versión actual, decidimos que el primer paso fuera crear un sistema de diseño.
Problema
Con los años, el sitio pasó de ser institucional a convertirse en una plataforma para ingresantes, estudiantes y docentes. Ese crecimiento por parches generó inconsistencias visuales que no reflejaban la seriedad de la institución y que, además, provocaron problemas de usabilidad.
Solución
Propuse crear un sistema de diseño para que el sitio pueda crecer de forma ordenada, con reglas claras y componentes consistentes.
Definí los principios
de diseño
Atemporal
Evitar usar elementos visuales solo por tendencia.
Práctico
Cada elemento que se diseñe debe responder a una necesidad.
Cercano
Es importante hablar con los usuarios y conocer sus necesidades.
Senté las bases a partir de las foundations
Creé la paleta a partir de los colores institucionales. El color primario se va a usar para los elementos interactivos y el secundario funciona como acento.
Los neutros acompañan en textos y fondos.
Cree un sistema tipográfico que aporta flexibilidad y claridad a la hora de jerarquizar el contenido.
Usé un módulo base de 8px para definir todos los espaciados y tamaños de los elementos de la interfaz.
Elegí íconos simples y de trazo fino, coherentes con la personalidad que quería transmitir.
Construí la libreria
Partí de elementos simples para construir componentes más complejos y funcionales.
Documentación
y handoff
Creé una guía que reúne los principios, estilos y componentes del sistema, explicando su anatomía y las variantes para cada caso.
El sistema de diseño en acción
Volver a la home