Nuestra DataDex fue pensaba en ser amigable e intuitiva con los usuarios fanáticos de Pokémon Go, dándoles una experiencia similar a la de los personajes en la serie de Pokémon.
Para poder trabajar de manera más transparente se hizo una recolección de datos y opiniones de donde rescatamos el concepto general de trabajo. La idea principal fue desarrollar una "Pokedex" y mantener la experiencia de los mismos personajes de la serie. Este catastro de datos fue respondido por un aproximado de 100 personas fanáticas del Pokémon.
- -Basar la interfaz en el diseño de la Pokedex para mantener la experiencia dentro del juego.
- -Que el interfaz sea completo, todo se muestre dentro de la misma página sin tener que estar navegando de manera exhaustiva.
- -Habilitar un modo de experiencia online que se actualice a tiempo real como "Eventos".
- -Que se mantenga la estética dentro de todo el concepto y no sólo en la portada, manteniendo una gama de colores.
Se desarrollo la idea principal en papel y luego en Figma para poder maquetear la base de nuestro proyecto.
_Posibles pantallas de trabajo dentro de nuestra Pokédex. Bajo un orden general todas las rutas nacen desde HOME para llegar a las pestañas superiores con información adicional, a la búsqueda particular por Pokémon o a la data general donde poder filtrar.
Para facilitar la experiencia del se agregaron algunos elementos visuales respetando el diseño de Figma inicial lo máximo posible. Al ser una página para distintos tipos de usuario se busca que sea intuitiva.
Implementación de Slider y Scroll para los contenedores de información. Se busca que la página sea más interactiva a través de cambio de página. También se implementa un botón de "back" utilizando la misma imagen de la Pokedex contenedora para hacerla más funcional.
Se trabajo toda la diagramación en HTML, aunque se puede encontrar adjunta la Página HOME trabajada en Javascript a modo de práctica. Hay jerarquía de contenedores para poder diagramar sobre las imágenes base. Contenedor de imagen de fondo general, contenedor de imagen de la Pokédex y contenedor del orden interno de los elementos de la Pokedex. Esto con el fin de poder desplazar los elementos en la página con total comodidad.
Lo primero que se trabajo en JS fue la vinculación de las páginas a través de apagar y encender secciones del código.
En el documento Data podemos encontrar las funciones que ayudan a filtrar nuestra data principal, las cuales luego exportamos a Main.
Diseño final del proyecto. En aspectos generales, es una copia casi fiel de nuestro protótipo de Figma. No pudimos habilitar la ventana de búsqueda por nombre y/o número debido a la dificultad de diagramación que tenía el proyecto, pero estamos conformes con las demás funcionalidades. Tenemos 5 tipos de filtro dentro de nuestra data general. También tenemos 3 pestañas de información adicional las cuales cumplen con nuestra necesidad de informar y mantener el proyecto "actualizado".
Diágrama de flujo principal desde HOME a la DataDex general. Las fichas que contienen la información básica del Pokémon se voltean al contacto, dejando así a la vista la información adicional del mismo.
Pantallas secundarias de información para que los usuarios puedan sacar el máximo provecho de la plataforma.