Netlify site = https://playful-bavarois-999456.netlify.app/
Figma Design = https://www.figma.com/file/oyK82Qx7LGajuKf46VUmMz/GameHub?node-id=0%3A1&t=SNvncvGN87hUsK1x-0
First off I must say that the design I coded doesn’t look anything like my Figma design. This is partially because I wasn’t happy with my original design and also that I wanted to test myself and try to design something new. My new design uses a more black/green pallet rather than black/gray. I did this to try differentiate it from other competitors and also give it a more appealing look for the customers.
For the main product I wanted it to take up all the space on the main page to really sell it to the customer as a new must-have product. I also wanted it to be clean with as little text as possible and a video highlighting the gameplay. I am not very happy with the product cards. the font and the color doesnt fit very well with the rest of the design in my opinion.
On the product page there is a lot I would have liked to have added. Like a video showing gameplay, ratings, and what friends play this game. The Animation on the text and hero image was more a fun coding test for me rather than a design choice I would have necesserely used here. Maybe only animate the hero image.
The checkout page I wanted to be as simple and clean as possible with a progress bar to trac where in the process you are and where you are headed.
The nav-bar I am not a fan of. If i were to design it again I would have put it on top with the color of the header. The hover effects again was a test for me rather than something that fit the design.
Overall I am very happy with the project. Not necesseserely for my design or code but because of how much I have learned this week. It really pushed me to learn more about coding than I would have otherwise and I understand a lot more of HTMl and CSS. and I can proudly say that I have coded my first webpage!
Sources for some of my desig choices:
- header background = https://www.magicpattern.design/tools/css-backgrounds
- nav-bar hover effect = https://www.youtube.com/watch?v=Fx_NpAPM-iU&t=3s&ab_channel=EasyTutorials
- product page animation = https://www.youtube.com/watch?v=YszONjKpgg4&ab_channel=WebDevSimplified