En el primer sitio web, la Universidad Externado, trasladó lo que por más de un siglo le había funcionado del mundo análogo al mundo digital. Sin embargo, años de intentar dar abasto con un sitio web poco funcional, hizo evidente la necesidad de un rediseño completo del portal.
Antes:
Objetivos:
- Organizar, estructura y jerarquizar la amplia cantidad de información que albergaba el sitio web de manera estética y sobretodo funcional.
- Hacer un rediseño, que si bien mantuviera la identidad gráfica de la universidad, propusiera nuevos patrones y estilos que se pudieran implementar en el mundo digital.
- Plantear una arquitectura de la información intuitiva, centrada en el usuario.
Benchmark y arquitectura de la información:
Dentro del equipo de comunicaciones de la universidad, analizamos más de 40 universidades tanto nacionales como internacionales, para encontrar las mejores prácticas UI y sus contenidos primordiales en el sector educativo. De forma paralela revisamos el mapa de navegación que tenía el sitio web de la universidad y replanteamos para que fuera intuitiva.
Rediseño:
Se planteó el rediseño web responsive y se le dió relevancia al uso de recursos gráficos. Se tuvo en cuenta las necesidades de cada tipo de usuario: aspirantes, estudiantes, egresados, profesores, personal administrativo y otros
Se eligió una nueva tipografía con buena definición y lecturabilidad para medios digitales: Lato de la librería de Google Fonts
Se replantearon los colores de las facultades en función de las pantallas.
Atomic Design:
En el desarrollo front end se implementó la metodología Atomic Design. Gracias a esta, se generó una guía de estilo web o patternlab que ha permitido mantener la consistencia del sitio web a lo largo del tiempo. Esto ha permitido tener una visión global de los elementos disponibles, una base para los nuevos que se quieren crear y la garantía de una escritura limpia de código.
- Átomo:
Fotografía + icono + estilo tipográfico
- Molécula:
Botón destacado que contiene 3 átomos
- Organismo:
Se repite la misma molécula 3 veces, según su posición se comporta de manera diferente
- Plantillas:
Disposición de organismos, moléculas y átomos de cierta manera