Story Overview
Story Overview
Introducing Grim Retro, an e-commerce website where you can find all aspects of nostalgic and retro, bringing the vintage charm of the past to life. I spent approximately three weeks developing this MVP.
Introducing Grim Retro, an e-commerce website where you can find all aspects of nostalgic and retro, bringing the vintage charm of the past to life. I spent approximately three weeks developing this MVP.
Timeline
Timeline
Nov 25 2023 - Dec 18 2023
Nov 25 2023 - Dec 18 2023
Project
Project
Relevant Coursework
Relevant Coursework
Role
Role
Web Developer
Web Developer
Tool
Tool
VS Code
VS Code
Photoshop
Photoshop
Skills
Skills
Web Development (HTML + CSS)
Web Development (HTML + CSS)
What is Grim Retro?
"Strange Things, Happy Things!"
"Strange Things, Happy Things!"
Explore the era of self-expression, vibrant and vivid times. At Grim Retro, we are dedicated to bringing the retro spirit and nostalgia of the past to life.
Research
Research
Moodboard
Moodboard
The 80s were full of style and strong character, so I have to ensure my design captures the essence of nostalgia. Drawing inspiration from similar websites that had tons of retro elements would be a good starting point.
The 80s were full of style and strong character, so I have to ensure my design captures the essence of nostalgia. Drawing inspiration from similar websites that had tons of retro elements would be a good starting point.
Ideation
Ideation
Wireframe
Wireframe
Since this is an e-commerce website, each product category page needs to stand out on its own. Both the banner and the products must capture the viewer's immediate attention.
Since this is an e-commerce website, each product category page needs to stand out on its own. Both the banner and the products must capture the viewer's immediate attention.
Final Product
Final Product
Homepage
Homepage
On the homepage, a large "Hello" text will gradually appear, with the Grim Retro mascot standing right beside it.
On the homepage, a large "Hello" text will gradually appear, with the Grim Retro mascot standing right beside it.
games page
games page
This page is trying to capture the original feel of retro gaming consoles, such as the Game Boy. The hero section of the console screen will continuously loop footage of classic gaming moments.
This page is trying to capture the original feel of retro gaming consoles, such as the Game Boy. The hero section of the console screen will continuously loop footage of classic gaming moments.
Gadgets page
Gadgets page
The banner in the middle of the page will function as a slideshow, displaying a variety of trending items.
The banner in the middle of the page will function as a slideshow, displaying a variety of trending items.
Music Page
Music Page
The music vinyl on top of the album will spin according to the current recommendations, while the retro TV will play footage of old music videos.
The music vinyl on top of the album will spin according to the current recommendations, while the retro TV will play footage of old music videos.
Photography Page
Photography Page
Viewers can read the story behind Grim Retro's team.
Viewers can read the story behind Grim Retro's team.
Product Items Page
Product Items Page
The main section of the page will play retro photos captured by street photographers.
The main section of the page will play retro photos captured by street photographers.
Overview
Overview
Production
Production
Building the MVP
Building the MVP
During development, I encountered many difficulties, but I’m glad that I was able to overcome them and complete the MVP of this project. However, there are still places where I wish I could have spent more time polishing.
During development, I encountered many difficulties, but I’m glad that I was able to overcome them and complete the MVP of this project. However, there are still places where I wish I could have spent more time polishing.
Reflection
Reflection
Summary
Summary
Overall, this has been a great learning experience. Building a responsive e-commerce site is not an easy task, especially this is my second web development project. I will definitely take some time to review the project and look for ways to continue improving in areas where I’m lacking.
Overall, this has been a great learning experience. Building a responsive e-commerce site is not an easy task, especially this is my second web development project. I will definitely take some time to review the project and look for ways to continue improving in areas where I’m lacking.
Next Project
Next Project
MyTripster
Your go-to platform for trip planning and finding the best deal, your all-in-one travel solution!
MyTripster
Your go-to platform for trip planning and finding the best deal, your all-in-one travel solution!
MyTripster
Your go-to platform for trip planning and finding the best deal, your all-in-one travel solution!