Kanto Region Pokédex Updated
Coding/Programming
Project type
Coding/Programming
Project year
2022
Working Pokédex by connecting API's using JavaScript, HTML, and CSS.
The goal of this project was to work off the first Pokédex to create a usable Pokédex. The first project just listed the Pokémon's names and connected them with GIFS using the POKI API. For this project I wanted to fetch more then one API endpoint to create a dynamic page that displays the Pokémon Info on selection using JavaScript, HTML, and CSS.
Start
On this iteration of creating the Pokédex I wanted to display the Pokémon on a grid layout rather then the single column used in the first project. Using the POKI API I wanted to display more information then just the Pokémon names. I wanted to create a usable app in a sense where you would have all the normal features found on polished apps today.
Style Tile
The style tile consist of fonts, colors and the interface elements that communicate the essence of the visual Pokédex. The style tile helped form a common visual language and provide a preference of visual goals I had to achieve. For the headings, "Pokémon Solid" at 50 px was used. The sub headings would use either "Pokémon Classic" or "Lemon Milk". The Pokémon font would be used at 25 px and the other at 20 px. For paragraph text, which can be seen for Pokémon descriptions I chose "Pokémon X & Y" at 18 px since this font has more vertical length.
Diagrams
The User Activity Diagram is the detailed process of activities a user can make on the Pokédex we are developing. The Pokédex must allow a user to scroll to find the Pokémon the want, then click on the Pokémon to be presented with more information. Followed with a close button to either scroll for more Pokémon be satisfied. This diagram reflects that process.
This UML use case scenario displays the back end to the Pokémon Project and what it uses to function. This diagram is an overview on what the user sees, what the browser shows, and where the information is coming from.
Wire-frames Low-fidelity
When creating wireframes I first wanted to go with a traditional Pokédex look. These were the LOFI wireframes designed to accomplish this. A landscape and portrait mode was created. The main focus of these LOFI wireframes was to create a layout mapped all the Pokémon and their abilities, stats, and type.
Wire-frames Mid-fidelity
After some consideration I decided to create new wireframes that had a focus on looking more modern. Using a grid layout of maximum 5 Pokémon. Rather then having a list of the Pokémon names and then the user scrolling I wanted the main layout to display all the Pokémon in GIFS. This allows the user to visually see a Pokémon and the name of the Pokémon together.
Wire-frames High-fidelity
This set of wireframes allows the user to scroll a grid where they can see all 151 Pokémon. When the user clicks on a Pokémon card they will then be presented with a pop-up of the Pokémon information. The information presented will be the Pokémon's; name, base stats (attack, defense, speed etc...), abilities, type, height, and weight.
Replit Coding
To start of coding in Replit I took multiple approaches for how to create the Pokédex. In the first approach I tired to create the original layout for the Pokédex. With little styling done this is what the Pokédex looked like. The main focus was the JavaScript.
I went back to the original plan of creating the grid system to display the Pokémon and their information. Even though I did not end up using any of the code from the first try it was still a valuable learning process in how to use Javascript to dynamically display information on the HTML.
Cursor
To really fit the theme of Pokémon we wanted to change the cursor to a Pokémon. Using the internet we found this Eevee cursor. We did not make this cursor and take no credit. The cursor can be created by Max Castell. This is the link to the website where the cursor can be found.
Chocolate Liner
On this iteration of creating the Pokédex I wanted to display the Pokémon on a grid layout rather then the single column used in the first project. Using the POKI API I wanted to display more information then just the Pokémon names. I wanted to create a usable app in a sense where you would have all the normal features found on polished apps today.
Chocolate Finish
After implementing the silk liner in the hood, I then began to add the brand text which is "Hybrid Garbs" in the center of the sweater. To make the text stand out and create dimension, I added highlights by using the Curve and Level adjustments in Photoshop. To add shading, I used the Drop Shadows adjustment. Lastly, I added the "Hybrid Garbs" logo on the left sleeve and once again added Curve, Level, and Drop Shadow adjustments.
Font Creation
Font was created by taking inspiration from the Y2K style.
Shapes Creation
For the client I created a wide variety of shapes In Adobe Illustrator that can be used for a Y2K style. Many of the shapes are plays of hearts or stars. The client then picked which shapes would be used to create rough designs.
Rough Designs
I created a total of 7 rough designs for the client with the generic black shapes. The next step was to chose three and refine them.
Refined Designs
For the refined designs the color pallet was changed to a more simple pallet. This was done to reduce the cost of printing.
Chosen Final
Clients favorite chosen design. The client had a strong connection with the starts and hearts used in this design.
Photoshop Embroidery
I took the final design to Adobe Photoshop and turned it into an embroidered design. I did this by adding; Texture, Bevel & Emboss, Inner Shadow, Gradient Overlay, and Drop Shadows.
Royal Blue Liner
When creating wireframes I first wanted to go with a traditional Pokédex look. These were the LOFI wireframes designed to accomplish this. A landscape and portrait mode was created. The main focus of these LOFI wireframes was to create a layout mapped all the Pokémon and their abilities, stats, and type.
Royal Blue Finish
After some consideration I decided to create new wireframes that had a focus on looking more modern. Using a grid layout of maximum 5 Pokémon. Rather then having a list of the Pokémon names and then the user scrolling I wanted the main layout to display all the Pokémon in GIFS. This allows the user to visually see a Pokémon and the name of the Pokémon together.
