diff --git a/README.md b/README.md index f4a4f261..3d991fc5 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ * [4. Investigacion UX](#4-Investigacion-UX) * [5. Diseño de la Interfaz de Usuario](#5-objetivos-de-aprendizaje) * [6. Implementación de la Interfaz de Usuario](#6-implementacion-de-la-interfaz-de-usuario) -* [7. Resultado del proyecto](#5-Resultado-del-proyecto)Resultado del proyecto +* [7. Resultado del proyecto](#5-Resultado-del-proyecto) *** # 1. Preámbulo @@ -27,9 +27,8 @@ El proyecto se ha desarrollado utilizando HTML puro, CSS y Javascript basada en Realizar una interfaz que me permita visualizar los posters con informacion de los films de Studios Ghibli desde cualquier dispositivo. **3.2 Objetivos específicos:** -* Reconocimiento del tipo de usuario regular. * Definir las necesidades del usuario para poder determinar los componentes que contendrá la interfaz. -* Maquetación de la página web, definiendo sus componentes. +* Maquetación de la página web. * Creación de Historias de Usuario. * Revisión de Objetivos de aprendizaje. @@ -38,7 +37,7 @@ Realizar una interfaz que me permita visualizar los posters con informacion de l ![screen1](src/img/portada.png) *** -# 4.Investigacion UX +# 4.Investigación UX Nuestro proceso creativo consta principalmente de 4 etapas fundamentales: * Historias de usuario * Prototipado en baja y alta fidelidad @@ -68,7 +67,6 @@ se ha identificado las siguientes necesidades y requerimientos de los usuarios, En caso del filtrado por productor solo se mostrará lo seleccionado. * Definición de terminado: - El buscador arrojará las coincidencias. La galería debe mostrar los posters según la búsqueda. Hacer el test para comprobar si llama a todos los posters. @@ -77,14 +75,12 @@ La historia se testeó en usuarios reales y se hicieron los cambios resultantes ### Historia N°3: "Yo como usuario, quiero revisar el listado de películas por orden alfabético" * Definición de terminado: - Al dar clic al botón "order" debe mostrar las opciones de orden de la A-Z y Z-A. Los posters del film que se muestren debe ordenarse según A-Z o Z-A. Hacer el test para comprobar si ordena correctamente. Se testeó en usuarios reales y se hicieron los cambios resultantes del testeo. * Criterios de aceptación: - Los y las usuarias verán un menú desplegable para ordenar los posters alfabéticamente. Al dar clic, el menú desplegable muestra las opciones A-Z y Z-A. Podrán escoger entre las 2 opciones. Según la opción escogida, la galería se actualizarán para encontrar al poster del film deseado. @@ -105,22 +101,16 @@ Fotos del prototipo de baja fidelidad📱: ![Idea en papel](src/img/baja_fidelidad.png) -### Prototipo de alta fidelidad +### Prototipo de alta fidelidad Nos dividimos los prototipos de alta fidelidad: una trabajó la versión de escritorio y la otra trabajó la versión mobile. Después del Test de Usuario como dupla decidimos modificar algunos elementos a partir del feedback recibido. Finalmente nos basamos en el prototipo ya modificado para dar paso a la estructura del HTML y CSS. -
Link a Figma

- - * [link a Figma]:https://www.figma.com/file/Zv5CarpyCWkcvg3Ese635O/DATA-LOVERS?type=design&node-id=0-1&t=Urm0epjSQSbc95li-0 - -#### Prototipo en alta fidelidad versión escritorio +### Prototipo en alta fidelidad versión escritorio +Fotos del prototipo de alta fidelidad📱: ![Idea en Figma](src/img/figma_escritorio.png) - - *** -#### Prototipo en alta fidelidad versión para móvil +### Prototipo en alta fidelidad versión para móvil ![screen1](src/img/prototipo_movil.png) - Link Figma:https://www.figma.com/file/ITTasGXv8iISzWN2ButKI7/Untitled?type=design&node-id=0-1&t=lIEItjVIVmnWdYRW-0 **** ### Testeo en usuarios @@ -348,3 +338,4 @@ La página web deberá ser amigable a la percepción visual del usuario, por lo * Se hizo responsive para múltiples dispositivos. ** Link de página:** +