Proceso
- Organizar, estructurar y jerarquizar la amplia cantidad de información que albergaba el sitio web de manera estética y sobretodo funcional.
- Hacer el rediseño centrado en el usuario manteniendo la identidad de la universidad, proponiendo nuevos estilos y patrones.
- Plantear la arquitectura de la información intuitiva y facil e de navegar
Benchmark y arquitectura de la información:
Se analizó 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.
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
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
Antes:
Después: