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
Nov 25 2023 - Dec 18 2023
Nov 25 2023 - Dec 18 2023
Project Team
Relevant Coursework
Relevant Coursework
Role
Web Developer
Web Developer
Tool
VS Code
VS Code
Photoshop
Photoshop
Premiere Pro
Premiere Pro
Skills
Web Development (HTML + CSS)
Web Development (HTML + CSS)
What is Grim Retro?
"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.
What is Grim Retro?
"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.
Design
Design
Logo design
Logo design
I really love Pac-Man; it holds tons of memories for many people. Plus, it adds a sense of playfulness and joy to the brand.
I really love Pac-Man; it holds tons of memories for many people. Plus, it adds a sense of playfulness and joy to the brand.
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.
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.
Try Dragging it
Try Dragging it
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.
On the homepage, a large "Hello" text will gradually appear, with the Grim Retro mascot standing right beside it.
Final Design
Final Design
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.
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.
Final Design
Final Design
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.
The banner in the middle of the page will function as a slideshow, displaying a variety of trending items.
Final Design
Final Design
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.
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.
Final Design
Final Design
Photography Page
Photography 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.
The main section of the page will play retro photos captured by street photographers.
Final Design
Final Design
Product Items Page
Product Items Page
Once viewers click on a categories, they'll be directed to a page with related products. From there, they can add items to their cart and proceed to purchase.
Once viewers click on a categories, they'll be directed to a page with related products. From there, they can add items to their cart and proceed to purchase.
Once viewers click on a categories, they'll be directed to a page with related products. From there, they can add items to their cart and proceed to purchase.
Final Design
Final Design
About us
About us
Viewers can read the story behind Grim Retro's team.
Viewers can read the story behind Grim Retro's team.
Viewers can read the story behind Grim Retro's team.
Final Design
Overview
Overview
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.
Outcomes
Outcomes
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.
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.
Thankyou for your time!
Thankyou for your time!
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.