- 1. Preámbulo
- 2. Historias de Usuario
- 3. Diseños de prototipos de baja y alta fidelidad
- 4. Presentación del proyecto
- 7. Tecnologías utilizadas
- 8. Colaboraciones
El proyecto Ghiblipedia es un página web desarrollada para usuarios de occidente que aman? disfrutan? las producciones de Studio Ghibli, ya sea por sus historias, animaciones, lecciones de vida, música entre otros ámbitos. En esta página el usuario podrá vivir la experiencia Ghiblipedia al encontrar información más detallada sobre sus películas favoritas, incluyendo sus personajes y localidades, acompañado de una de las composiciones musicales más icónicas del estudio .
Con el fin de recabar información respecto a lo que los usuarios podrían necesitar de una web con temática del Studio Ghibli, se plantearon las siguientes preguntas orientadas a aquellas personas que disfruten de sus producciones. Las pregunta y sus respuestas y estadísticas son las siguientes:
Para satisfacer las necesidades del usuario se han planteado sus historias de la siguiente manera:
Título: Ver la lista de películas del Estudio Descripción: Como usuario que le gustan las películas de Ghibli quiero visualizar todas las películas que este estudio ha producido para poder conocer cuáles son.
Título: Información sobre un personaje favorito Descripción: Como usuario latinoamericano fan de animación japonesa, quiero visualizar información característica de mi personaje favorito para obtener más información sobre él.
Título: Información sobre las localidades de las películas Descripción: Como usuario interesado en la cultura japonesa, quiero ver las localidades de las películas para disfrutar con sus bellos paisajes.
Título: Ordenar data alfabéticamente Descripción: Como usuario que busca películas de Ghibli quiero ordenar la data alfabéticamente para facilitar la búsqueda de lo que estoy buscando en la lista
Título: Ordenar películas por orden alfabético Descripción: Como usuario que busca información sobre películas de Ghibli, quiero ordenar por release date las películas para ver encontrarlas con más facilidad
Aquí se presenta el trabajo realizado en figma
Prototipo welcome page de baja fidelidad y prototipo movies page de baja fidelidad
Se escogió esta paleta de colores de la película Spirited Away por ser una de las más conocidas y aclamadas por la audiencia, por sus tonos cálidos y amigabilidad y por ser de las más representativas del estudio, ya que esta gama de son los que se repiten a lo largo de sus producciones.
EL USUARIO APRUEBA Respecto a la página de entrada, quizá yo pondría ese mismo mensaje pero dando acceso desde ya al buscador y a la barra lateral y todo eso... Para que esté todo ahí mismo y no sea hacer un clic extra para acceder al contenido. Mensaje de bienvenida correcto. Buen tamaño. Paleta correlacionada con las películas. Se ve intuitivo y lindos colores
EL USUARIO SOLICITA MODIFICACIÓN Ese diseño está genial, solo que las miniaturas se ven muy miniaturas. La página me molesta a la vista porque tiene mucha información (imágen de fondo). Quizás el color café con letras blancas no porque hay gente con visión más limitada, entonces se pierde un poco su contenido. Sí, yo quiero ver todos los paisajes de las películas ghibli.
SOLUCIÓN DE DISEÑO En base a los anteriores testimonios de los usuarios se decide aumentar el tamaño de los contenedores, imágenes y títulos, reemplazar el color de la tipografía del mensaje de inicio reemplazando blanco por café oscuro con un poco de opacidades.
Aquí se puede ver el proceso:
Finalmente estos fueron los prototipos de alta fidelidad a los que llegamos:
Prototipo welcome page de media fidelidad
Prototipo para celulares
Prototipo para tablet
Finalmente, la página desarrollada.
Cada botón lleva a las distintas secciones: muestra todas las películas desde el botón de películas, todos los personajes desde el botón de personajes, todas las localidades al apretar su respectivo botón y los directores que han trabajado con el estudio.
Este proyecto fué desarrollado exclusivamente con Vanilla Javascript, esto es, HTML para su estructura, CSS para su diseño, Javascript para sus funcionalidades.
Sus colaboradoras Javiera Gandarillas, encargada principalmente de guiar el diseño en CSS y Natalia Torrejón guiando las funcionalidades. Cabe mencionar que ambas partes colaboran activamente en cada uno de los procesos de construcción de esta web.
- [sí] Usa VanillaJS.
- [sí] Pasa linter (
npm run pretest) - [sí] Pasa tests (
npm test) - [sí] Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
- [sí] Incluye Definición del producto clara e informativa en
README.md. - [sí] Incluye historias de usuario en
README.md. - [sí] Incluye sketch de la solución (prototipo de baja fidelidad) en
README.md. - [sí] Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
en
README.md. - [sí] Incluye link a figma en
README.md. - [sí] Incluye el listado de problemas que detectaste a través de tests de
usabilidad en el
README.md. - [sí] UI: Muestra lista y/o tabla con datos y/o indicadores.
- [sí] UI: Permite ordenar data por uno o más campos (asc y desc).
- [sí] UI: Permite filtrar data en base a una condición.
- UI: Es responsive.