4.3. - PROYECTO INTERACTIVO FINAL

El proyecto está concebido como un resumen de todo lo aprendido a lo largo del curso.

Incluirá todas las tareas así como una breve explicación de los objetivos propuestos en cada una de ellas.

Partes de la tarea:

- Ideación.

- Bocetado de las composiciones y de la interacción.

- Producto interactivo + todas las tareas anteriores y sus explicaciones.

1. El producto interactivo constará de una serie de interfaces (5-10). 

Realizaremos una presentación personal 

Constará de imagen, iconos, textos y videos.

- Crear diseño con las herramientas de la sección Diseño de XD.

- Trabajar con diferentes mesas de trabajo.

1.1. - Diseño interfaz.

- ESTÉTICA( composición, color, legibilidad, usabilidad, impacto visual).

- CREATIVIDAD - ORIGINALIDAD.

1.2. - Diseño interacción. (Mapa de interacción)

- Integración entre el dinamismo de las partes interactivas y la animación de los elementos de vídeo.

- Establecer una navegación real entre las mesas de trabajo.

- Crear menús interactivos y pestañas para la navegación.

Ideación

Desde el principio tuve la idea de hacer una infografía de Spiderman into the spider verse. Esta es la inspiración que cogí de Pinterest

Proceso

Empecé a bocetar la intro y como iba a organizar la información.

Al pasarlo a xd no me gusto asi que lo cambié. Y la intro era demasiado complicada y iba a pesar mucho para ponerla en xd asi que luego también la cambié

Me costo bastante hacer la parte de la intro, pero al final lo conseguí.

Lo primero que hice fue la parte de la introducción, donde explica de lo que va y lo que se va explicar.

Puse una imagen de Spider-Man y después con la pluma hice esas formas, como si fuera el spider sense, tambien puse imágenes de la película en blanco y negro.

Busque todas las imágenes en Pinterest, y después les fui quitando el fondo en Photoshop. Además las edité para que tuvieran un efecto de glitch.

Después de quitarle el fondo, duplique la imagen dos veces y le di clic. derecho, opciones de fusión y desactive la R de RGB. En la segunda copia hice lo mismo, pero desactive la G.

En Xd convertí la imagen en un componente, estado predeterminado y esta con cursor encima, en el segundo estado hice lo de el efecto de glitch e hice la imagen más grande. Todo esto lo repetí en todos los personajes, y he hecho el mismo efecto de glitch para el miles del principio, para darle más unidad al diseño.

Por último hice la intro en Premiere, que lo único que hice fue cortar el video, y exportarlo en mp4. Iba ha hacer una intro más larga, pero se me ocurrió la idea del Spiderman que bajaba, le pinchas y entonces aparecen las letras de la película. Quedaba mejor y era más interactivo.

En si la navegación es sencilla, lo que más me costo fue cuadrar los tiempos. Y que cuando iba ya a terminar el trabajo, descubrí el efecto de rebote, asi que tuve que cambiarlos todos.

Resultado final

Conclusión

Este trabajo me ha gustado bastante, aunque me ha costado un poco. He utilizado varios programas para hacerlo, Photoshop, Premiere,...El resultado me ha gustado, pero no del todo, creo que puedo desarrollarlo más, sobre todo en el tema de la interactividad, porque en si la estética esta bien y los colores van acorde a la película. en general le falta algo, en mi opinión.