La página tiene como objetivo brindar información a los visitantes sobre las películas realizadas por Estudio Ghibli a través de los años, desde su fundación en 1985.
Para la construcción de la página web 'Ghibli Lovers' realizamos un bosquejo inicial para entender cómo organizar y delimitar la información que mostraríamos en ella, además de tomar decisiones de diseño en cuanto a disposición de los espacios de caja, tipo de letra, íconos, paleta de colores, y en general, el diseño visual.
Posteriormente utilizamos la tecnología de la plataforma Figma para realizar un prototipo que se acercara más a la propuesta, donde además pudieramos evidenciar un diseño responsive, a partir de dos tamaños básicos (mobil y desktop).
Una vez realizados los prototipos procedimos a escribir el código base en HTML y CSS respondiendo a las ideas plasmadas en ellos. A partir de las pruebas de usabilidad realizadas a 6 usuarios de diferentes características, realizamos iteraciones a la propuesta inicial, hasta conseguir el resultado actual de la página.
YO COMO visitante de la web GHIBLI Lovers QUIERO un menú intuitivo PARA acceder a links de mi interés dentro y fuera de la página, en diferentes dispositivos.
Decidimos enfocar esta primera historia de usuario en algunos objetivos transversales que ambas teníamos pendientes desde el proyecto anterior, relacionados con CSS e interacción con el DOM. Adicionalmente, abordamos el manejo de GIT, creando las llaves SSH.
- El diseño del menú es responsive y difiere entre tamaños de pantalla.
- El menú es de fácil acceso visual.
- El menú se despliega y permite enlazarse a diferentes luegares web dentro de la web.
- Se aplicó test de usabilidad con 3 personas diferentes.
- La página en general y el menú en particular responden a buenas prácticas de diseño visual.
YO COMO visitante de la web Ghibli Lovers QUIERO visualizar unas tarjetas con información de las películas PARA obtener datos básicos sobre ellas.
- Las tarjetas están ubicadas en el home de la página y muestran información básica sobre las películas.
- El link de películas del menú de la web Ghibli Lovers se conecta con la información de la API representada en tarjetas.
- Las tarjetas contienen información de la película: Director, año de lanzamiento, personajes principales.
- Las tarjetas tienen un estilo visual acorde al estilo definido en la página principal de Ghibli Lovers
YO COMO visitante de la web Ghibli Lovers QUIERO un selector PARA obtener en pantalla las películas en orden alfabético.
- La página tiene un selector donde el usuario puede escojer el titulo de las peliculas y ordenarlas segun su orden alfabetico.
- El selector permite escoger el orden en el que se quieren ordenar las películas, si comenzando por la A o por la Z
YO COMO visitante de la web Ghibli Lovers QUIERO un cálculo con los datos PARA obtener en pantalla el porcentaje de películas dirigidas por el director de mi elección.
- La página muestra el porcentaje de películas dirigidas por un director.
- Al elegir un director, el porcentaje se visualizará en una sección del DOM.
- La información del porcentaje se mostrará al elegir el filtrado por director.
- La visualización del porcentaje estará acorde al estilo visual de la página.
- El código está respaldado en GitHub
- La página es completamente responsive
- La página se conecta a la API pública de Estudio Ghibli
- En la página pueden filtrarse datos de interés, como el director y el productor.
- En la página pueden ordenarse las películas alfabéticamente, en orden ascendente y descendente.
Realizamos tests de usabilidad con tres usuarios distintos, en las diferentes fases de desarrollo y con base en los resultados, iteramos el diseño. En los test encontramos algunos problemas relacionados con la estructura y disposición de las diferentes secciones de la página, los colores y tamaños de letra para una mejor visualización y la falta de labels que dieran cuenta de la función de los selectores. Pensábamos agregar links que llevaran a otras páginas, pero nos hicieron caer en la cuenta que no es lo óptimo.
