4.1.- Producto interactivo básico

Esta práctica consistía en realizar un producto interactivo usando la herramienta Adobe XD.

Era necesario realizar una estructura sencilla con al menos 3 mesas de trabajo con elementos interactivos como botones, textos, imágenes, elementos geométricos, etc.

Este es el resultado final:

https://www.youtube.com/watch?v=5GOCd9CTbZ8

Proceso:

Para empezar necesito una base, la página de inicio o home. Mi idea es mostrar los personajes de uno de mis juegos favoritos así que una vez tenía las imágenes necesarias y las fuentes propias del juego me puse a hacer la página de inicio.

Para cada elemento distinto decidí dividirlo y agruparlo en carpetas para trabajar mejor.

Después de tener la base terminada me puse con los botones y los menús que traerían cada uno de ellos. Como dije antes, los separé en grupos para trabajar mejor con ellos.

Dentro de cada grupo hay otro grupo que es uniendo el rectángulo de fondo detrás del texto de cada grupo de clases más el texto para usarlo como botón ya que si no me daba errores. Hice lo mismo con otro botón en la zona izquierda superior para tener algún botón para volver al inicio.

Una vez terminado todo dupliqué la página de inicio tres veces y moví en cada una la parte que fuera necesaria. Uní todos los botones con las mesas de trabajos y usé la transición de animación automática con inicio y fin suaves con una duración de 1 segundo cada una.

Hice lo mismo con los botones con las flechas para volver al inicio.

Conclusión:

Si es cierto que en el primer año hicimos algo parecido pero no nos decidimos complicar mucho con las animaciones o la interactividad en sí. Ver que esto es la primera práctica y ya hemos hecho más que el año pasado hace que me pregunte que toca después y como poder implementar este tipo de cosas a la página web de obra final ya que creo que queda muy interesante darle movimiento a cada interacción de la página.