Skip to content

POKEWEB es una aplicación web responsive pensada para jugadores novatos y activos de Pokémon que quieran conocer información y/o características de los Pokémon que ofrece el juego para propósitos personales.

Notifications You must be signed in to change notification settings

Liz-14/BOG003-data-lovers

 
 

Repository files navigation

POKEWEB

Idea

Nuestra POKEWEB esta pensada para niños entre 9 y 15 años, estratos 3 a 6 jugadores novatos y activos de pokemon go, que quieran conocer información y/o características de los pokemon que ofrece el juego para propósitos personales. Dichos niños deben poder acceder a un computador con internet y deben sabe cómo usar tanto el computador como navegar por la web.

Realizamos preguntas a jugadores reales, de los cuales encontramos los siguientes hallazgos:

  • Los usuarios quieren poder ver las imágenes de los Pokémon con sus respectivos nombres y tipo/elemento. para poder reconocerlos con mayor facilidad.

  • Ver características de los Pokémon, tales como: ataques, fuerza de ataque, debilidades etc. para poder decidir su estilo de pelea.

  • Ordenarlos alfabéticamente los nombres de los Pokémon.

  • Ordenar los Pokémon de acuerdo a sus estadísticas base, para decidir su estrategia de combate.

  • Filtrar los Pokémon de acuerdo a su tipo/elemento para poder diferenciar y escoger algún Pokémon que necesite de acuerdo a la situación.

Consideraciones generales

1- Basamos nuestra interfaz en el pokedex, en el sentido que muestra el listado de pokemones en la pagina principal, sin tener que navegar por otras vistas.

2- Muestra los filtros principales en la misma vista.

3- Mantiene la estética dentro de todo el concepto y no sólo en la pagina principal, manteniendo una gama de colores que va acorde con pokemon Go.

4- Tiene liks de acceso rapido al fanspage de facebook, instagram y al pokemon Go.

Ideas a la obra (Prototipo)

Sketch

Se desarrollo la idea principal en balsamic para poder maquetear la base de nuestro proyecto.

prototipo de baja fidelidad

Mockup PC y Laptop

Se desarrolló en Illustrator y Figma, teniendo como base los colores usados en el juego de pokemon rojo fuego; el remake del primer juego creado de pokemon para game boy.

mockup pag1 mockup modal

Mockup Tablet y Mobile

mockup responsiveTablet mockup responsibeMobile1 mockup responsibeMobile2 mockup responsibeMobile3

Resultado

Funcionalidad

La página permite ver en una galería de imágenes toda la lista de pokémon que se pueden atrapar en pokemon Go. Se puede ver en la página principal un header que contiene el logo de la página, una barra de navegación que permite escoger entre grupos de búsqueda alfabéticos para la visualización de los pokémon por nombre. Igualmente, por medio de un campo de búsqueda por nombre, se puede encontrar una serie de pokemon que contengan la palabra escrita en el campo. También permite el filtrado de pokémon por medio de la suma de sus estadísticas principales, como son: ataque, defensa y fortaleza; así mismo permite filtrar por promedio de las mismas estadísticas, mostrando así el listado de pokémon organizado de mayor a menor respectivamente.

Cómo main, podrás encontrar una explicación breve de lo que se visualizará en la página; además de la galería pokemon, que contendrá las cards de cada pokémon individual con sus respectivas características básicas, como son: número de pokédex, tipo o elemento al que pertenece, imagen y nombre del pokemon. Si se hace clic sobre un pokémon específico, este mostrará una ventana modal con las características más específicas de dicho pokémon, las cuales son: valores de ataque, defensa, fortaleza, CP, HP y por último, los elementos a los cuales el pokémon tiene debilidad y resistencia.

Por último se le presenta al usuario un footer que lo redirige a las redes sociales y página principal de Pokémon Go.

Las características mostradas a los usuarios mediante esta página web, les permitirá tomar decisiones al momento de entrar en una incursión, además de facilitar su búsqueda por medio de diferentes opciones que se les presenta.

Pantalla 1920 x 1080

Final PC

Laptop 1366 x 768

Final Laptop

Mobile

mobile1

Test

Test1 Test1

About

POKEWEB es una aplicación web responsive pensada para jugadores novatos y activos de Pokémon que quieran conocer información y/o características de los Pokémon que ofrece el juego para propósitos personales.

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 97.1%
  • CSS 2.2%
  • HTML 0.7%