01
Referencias visuales
El sistema visual se construyó a partir de referencias de portfolios personales, interfaces minimalistas y páginas con mucho espacio en blanco. Me interesó trabajar con una estética clara, ordenada y profesional, donde la jerarquía tipográfica tuviera un rol principal.
También tomé como referencia composiciones con cards amplias, bordes suaves, secciones centradas y una paleta reducida. La idea fue que el sitio se sintiera académico, pero no rígido: una pieza visual simple, contemporánea y fácil de recorrer.
02
Proceso de diseño
El proceso comenzó con una estructura básica en HTML y fue evolucionando sección por sección. Primero se trabajó el hero y el navbar, luego el progreso académico, el equipo, los trabajos seleccionados, los datos institucionales y finalmente esta documentación de decisiones.
Cada cambio buscó mejorar la lectura, el ritmo visual y la relación entre secciones. Se ajustaron colores, tamaños, márgenes, estados hover, comportamiento del navbar y componentes interactivos como el acordeón de materias.
03
Uso de IA
La IA fue utilizada como herramienta de apoyo durante el desarrollo. Me ayudó a iterar ideas, ordenar el código, resolver problemas de CSS y pensar alternativas de estructura sin perder de vista el objetivo visual del sitio.
No funcionó como reemplazo del criterio de diseño, sino como asistente para acelerar pruebas, detectar inconsistencias y convertir decisiones visuales en implementación concreta. Su uso fue frecuente, especialmente en ajustes de layout, interacción y documentación.
04
Decisiones finales
La paleta se redujo a crema, negro, gris y naranja para sostener una identidad consistente. El naranja se usa como acento para acciones, estados activos y elementos destacados. La tipografía Open Sans permite una lectura clara y flexible en distintos tamaños.
El resultado busca mostrar el recorrido académico y el trabajo de equipo con una interfaz simple, ordenada y expresiva, evitando elementos decorativos innecesarios y priorizando la claridad de la información.