Parte 1: Análisis del proyecto y wireframes
Durante el primer ejercicio se me pidió que analizara webs de la competencia para conseguir ideas y usar sus buenas prácticas, creando un rediseño moderno, accesible, responsive y visualmente atractivo.
Después, realicé los primeros wireframes en las versiones desktop y mobile de las páginas home, contacto y agenda en figma.
Web original
Desktop home
Desktop contacto
Desktop agenda
Mobile nav
Mobile home
Mobile contaco
Mobile agenda
Parte 2: De wireframes a mockups
En esta fase realicé una guía de estilo donde anoté los colores, tipografías y logos (entre otros elementos) que forman parte del rediseño de la web.
Apliqué estos estilos a mis wireframes del home y de contacto y añadí más detalles como los textos e imágenes de la web original.
Guía de estilo
Desktop home
Desktop contaco
Mobile nav
Mobile home
Mobile contacto
Parte 3: Prototipos interactivos y entregables
Por último, modifiqué la guía de estilo y componentes, hice el prototipo de la página agenda, añadí interacción a los ya creados en la parte 2 y los evalué con una evaluación heurística.
Como entregable hice un vídeo explicativo para acompañar los prototipos.
Desktop agenda
Agenda desplegada
Mobile agenda
