Informe de Proceso

DGPC – Cátedra Ocampo – FADU – UBA

Punto de partida

El desarrollo de este sitio web comenzó sin una etapa previa de referencias visuales ni prototipos. A diferencia de un proceso tradicional, se decidió iniciar directamente desde la programación, utilizando HTML y CSS como herramientas principales. Este enfoque implicó diseñar y estructurar el sitio de forma simultánea, resolviendo cada decisión visual directamente en el código.

Construcción inicial

En una primera instancia, se desarrolló la estructura base del sitio organizando los contenidos en secciones claras:

  • Header
  • Presentación
  • Contenido principal
  • Footer

El objetivo fue lograr una web funcional, priorizando la jerarquía de la información por sobre lo estético.

Apoyo en la IA

Una vez construidos los elementos básicos, se utilizó la inteligencia artificial para generar sugerencias de diseño y organización del contenido. Se le proporcionó información sobre el proyecto y se solicitaron recomendaciones para mejorar la estructura, la estética y la experiencia de usuario.

Las IA que se utilizaron fueron ChatGPT y Claude.

Diseño desde código

El diseño visual se desarrolló directamente en CSS mediante un proceso iterativo de prueba y error. Se trabajó sobre tipografía, tamaños, espaciados y color.

Al no partir de referencias externas, la identidad visual se construyó progresivamente a partir de decisiones propias.

Creación de Portfolio

Además de la página principal del estudiante, se creo una página de portfolio para mostrar los trabajos reales desarrolados.

Para llevar a cabo esta tarea, se utilizó una estructura de diseño flexible de la página principal, diseñada con los códigos que se aprendieron durante el desarrollo de las clses..

Ajustes y mejoras

Durante el desarrollo se realizaron múltiples correcciones vinculadas a alineación, legibilidad y navegación.

Se optimizaron proporciones, espaciados y organización del contenido para mejorar la experiencia de usuario.

Finalización

En la etapa final se revisó la coherencia visual, el funcionamiento general y la limpieza del código.

Se realizaron ajustes de detalle hasta alcanzar una versión estable para su publicación.

Conclusiones

El proceso se caracterizó por un enfoque directo, donde diseño y programación se desarrollaron en paralelo.

Este método permitió entender el comportamiento real del código y tomar decisiones en contexto, aunque implicó una mayor cantidad de iteraciones.