Pokemon Items/Moves page design
Hello everyone, i need a little bit of help on how to display the item/move information on their respective pages.
I've followed a design i found on dribble but it only has the pokedex part. Since i'm making this to add to my portfolio to showcase my ability code, i decided to increase the size of the project.
In the Items page, im using the pokemon card to display but i have some doubts since the images im provided from the api are very small.
In the Moves page, i tried using a more concise approach and made a list to display the pokemon moves.
On both pages, since the additional information (the panel on the right) is just text, i really have no idea on how to display them..
Link: https://pokemon-info-lac.vercel.app/
Ps: flashbang warning
5 Replies
items page
I think you just need a few tweaks and you'll be there!
Personally, I feel like the first picture (pokedex) is extremely busy. The information in the right panel is dense and it's hard for the user, at first glance, to decipher what information is important without spending some effort. So I would start with that. I'd try to increase the whitespace between the elements and see how that looks, and gradually try to decrease the complexity of the design (fine balance though; you want to keep it interesting too, just not too busy).
Second and third images: it's kind of a shame you don't have bigger images for them. But I think you just need to work on the hierarchy and whitespace of the elements in the right panel. Try to align the text in the right panel of the second picture to the left and see how that looks; center align looks kinda weird here imo
Oh nice you changed the first picture's right panel; I think your current version looks much better
Side note: looking at your html, for the right panel, I'd see if
aside is a better choice here instead of divHi @vince thanks for helping! The first image is the design i found on dribble (should've said so my bad).
For the images (items, ex: pokeballs) i'm trying to get a workaround and try and get some bigger hd images.
With bigger images, would the cards still be fine? Or would you change it?
In the moves pages (2nd here), what do you mean by aligning the text to the left?
about the div, yeah i still need improve on semantic code
Yea I think the cards are fine. And for aligning text I mean aligning mostly everything in the right card to the left or right and see how that looks
Hi vince, did some recoloring of the website. Made the item card more concise (one with pokemon held items and the other without). And in the move aside, removed some spacing from bwetween text and added the "boxes" to the values
