Giter Club home page Giter Club logo

dev002-data-lovers's Introduction

Definición del producto

Pokémon GO es un video juego de realidad aumentada para teléfonos móviles badado en la saga Pokémon. Las jugadoras y jugadores son entrenadores cuyo objetivo es capturar pokémon para usos distintos: coleccionarlos, usarlos para enfrentarse al Team Go Rocket, batallar en torneos y copas, obtener desafíos de colección, obtener caramelos para evolución o energía para megaevolución, etc. Jhoale Pokédex es una web que contiene información sobre los pokémon de las regiones de Kanto y Jhoto dentro del juego Pokémon Go, información que filtra con diferentes funciones de manera que sea útil, identificable y digerible para las jugadoras y jugadores. Los filtros fueron diseñados para que usuarias y usuarios puedan tomar mejores decisiones en el juego, lo que les permitirá subir de nivel y conseguir diferentes objetivos mientras se divierten en el mundo real. Para ello, concluimos la necesidad de integrar los siguientes filtros básicos:

  • Filtro por nombre de pokémon
  • Filtro por tipos
  • Filtro de pokémon legendarios Documenta brevemente tu trabajo en el archivo README.md de tu repositorio, contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve el problema (o problemas) que tiene tu usuario. Pokémon GO es un video juego de realidad aumentada para teléfonos móviles badado en la saga Pokémon. Las jugadoras y jugadores son entrenadores cuyo objetivo es capturar pokémon para usos distintos: coleccionarlos, usarlos para enfrentarse al Team Go Rocket, batallar en torneos y copas, obtener desafíos de colección, obtener caramelos para evolución o energía para megaevolución, etc. Jhoale Pokédex es una web que contiene información sobre los pokémon de las regiones de Kanto y Jhoto dentro del juego Pokémon Go, información que filtra con diferentes funciones de manera que sea útil, identificable y digerible para las jugadoras y jugadores. Los filtros fueron diseñados para que usuarias y usuarios puedan tomar mejores decisiones en el juego, lo que les permitirá subir de nivel y conseguir diferentes objetivos mientras se divierten en el mundo real. Para ello, concluimos la necesidad de integrar los siguientes filtros básicos:
  • Filtro por nombre de pokémon
  • Filtro por tipo de pokémon
  • Filtro de pokémon legendarios Además, implementamos funciones que permiten al usuario ordenar la data por orden alfabético y alfabético inverso según los nombres de los pokémon.

El uso de ellos se definió más ampliamente en las historias de usuario.

Historias de usuario

Como parte del proceso de diseño UX/UI realizamos las siguientes historias de usuario para Jhoale Pokédex, las cuales nos ayudaron a clarificar cómo resolveríamos las necesidades de nuestros usuarios en la web.

Image text Image text Image text Image text Image text Image text Image text Image text

Diseño de Interfaz de usuario

Una vez que tuvimos claras las necesidades de nuestros usuarios y lo que necesitaría nuestra web para cubrirlas, procedimos a diseñar nuestra interfaz de usuario (UI.

  • Prototipo de baja fidelidad El primer paso fue concretar nuestras ideas en formatos de baja calidad, iniciando con unos bocetos en papel bastante básicos.

Image text

Image text

Image text

A partir de estos bocetos solicitamos feedback a compañeras y coaches, con lo que pudimos iterar un nuevo bocetos de las soluciones planteadas. En esta ocasión nos decidimos por utilizar la aplicación miro para poder priorizar la colaboración remota. El resultado fue el siguiente:

Image text

https://miro.com/app/board/uXjVPB82E2Q=/

  • Prototipo de alta fidelidad

Después de iterar nuestro prototipo de baja calidad en diferentes formatos, dimos el siguiente paso y definimos un diseño de alta fidelidad en figma. El resultado fue el que se muestra en las siguientes imágenes: Image text Image text

Nuestro prototipo final modifica un poco la estructura de los prototipos anteriores para adaptarse mejor a nuestras historias de usuario. En cuanto al diseño, definimos la paleta de colores que utilizaríamos e incluimos un logo en el header para darle identidad a nuestra página. Utilizamos también un degradado basado en la paleta original para dar un efecto distinto a las ventanas modales.

La herramienta principal que utilizamos fue figma, y el prototipo completo puede observarse en el siguiente enlace: https://www.figma.com/file/gFOaVYvgKHxAPs0h0FPdc3/Prototipo-de-Alta-calidad-Data-Lovers-Ale-y-Jhoa?node-id=0%3A1

El resultado final del proyecto es una página desplegada en github pages, a la que puedes acceder desde este link: https://alerileri.github.io/DEV002-data-lovers/

dev002-data-lovers's People

Contributors

alerileri avatar jhoannar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.