FED_10270399D_AngShunXiang_Assg1_website

Link to Website: https://shunxiangg.github.io/FED_10270399D_AngShunXiang_Assg1_website/

Retro Inspired Website

Welcome to my imaginative retro-inspired website! This project brings to life the classic web design of the late '90s and early 2000s, showcasing vibrant colors and nostalgic, old-school elements.

Table of Contents

• Design Process
• User Audience, Intent & Purpose
• My Story
• Wireframes
• Features
  • Existing Features
  • Features Left to Implement
• Technologies Used
• Installation
• Testing
  • Contact Form Testing
  • Browser and Device Testing
  • functional payment page
  • Music play upon clicked
  • Filter
• Credits References -Acknoledgements

Design Process

This retro-inspired website is designed for users who appreciate nostalgia and vintage design. The target audience includes individuals seeking a trip down memory lane through classic web elements, old fonts, and vibrant color schemes.

User Audience, Intent, and Purpose

• User Audience: The target audience for this website includes fans and potential fans of the band who want to explore the band's history, learn about its members, and keep up to date with upcoming shows. Additionally, it appeals to event organizers or individuals interested in booking the band for live performances.
• Intent: The website's primary intent is to provide a comprehensive platform where users can engage with the band's content, such as listening to their music, viewing their photos and videos, and discovering their latest news or shows. Fans can also use the website to access social media profiles or external resources related to the band.
• Purpose: The site aims to support the band's growth by increasing exposure, selling merchandise, and booking more performances. It serves as a promotional tool for showcasing the band's talents while offering opportunities to engage with their audience and secure more gigs. The addition of interactive elements, such as filtering media and engaging micro-interactions, enhances user experience and keeps the audience engaged.

My Story

• As Retro lover, I want to explore a website that mimics the aesthetics of the early '80s and 2000s, so that I can experience the visual nostalgia of that era.
• As a user, I want interactive buttons and eye catching animations(the bands logo), so that I can engage with the site in a fun, immersive way.
• As a collector of vintage items, I want to browse a gallery of retro products, so that I can view items.

Wireframes

The design process included the creation of wireframes and mockups in Figma to map out the layout of the website before creating this website. Figma Link: [(https://www.figma.com/design/mVbceNVO3Hkt7LkwaJXwlS/FED_AngShunXiang?t=PFJn94sFUJRxUmaA-1)]

Features

Existing Features

• Vintage Color Scheme - Brings out the feeling of old-school design with bold and vibrant hues.
• Retro Fonts - Uses vintage typography that evokes nostalgia, creating a cohesive retro look.
• Interactive Elements - Includes engaging buttons, animations and a spinning retro disk.
• Vintage items: Old items, Music, img, etc
• Retro Fonts: Classic fonts that give the website an authentic retro feel.
• Vintage Color Scheme: Some vintage colors.
• Interactive Elements: Fun and engaging interactive elements.
• Animation Emelemts: Fun animations.
• Add to Cart: Total amount increases when item is added to cart
• Background Music: ALERT - music may be loud
• Volume Slider: Adjust volume to user liking
• Clickable Gallery: When songs in the gallery are clicked song will be played
• Responsive Design - Currently, the design is optimized for desktop. Future versions will include responsiveness for mobile devices.
• Songs & Videos - Short songs and videos are able to be pushed

Features Left to Implement

• Long Songs & Videos - Currently facing difficulties uploading songs and videos to git hub ERROR:[file size too big]
• User Login System - Plan to implement user authentication for a personalized experience.
• More Items - Expand the gallery to include more retro collectibles from the '80s and '90s.
• Payment page - A payment page where users can add up the total amount for items bought and display them in the store, you would follow these steps using JavaScript and DOM manipulation methods like getElementById or querySelector.

Technologies Used

This project uses technologies as given bellow:

• HTML5 - Structure of the website.
• CSS3 - For styling, animations, and retro visual effects.
• JavaScript - To create interactivity and enhance the user experience.

Installation

To run this project locally, follow these steps:

1. Clone the repository:
2. Navigate to the project directory:
3. Open index.html in your preferred web browser (Go Live).

Testing

Contact Form Testing

1. Go to the "Contact Us" page.
2. Attempt to submit the empty form to ensure an error message appears for required fields.
3. Enter an invalid email address to ensure appropriate error handling.
4. Complete the form with valid inputs and verify that a success message is displayed.

Browser and Device Testing

The website has been tested on modern web browsers (Chrome, Firefox, Edge) and performs as expected. However, it has not yet been fully optimized for television size screens, which is a planned future improvement.

functional payment page

The website has a cart checkout page but not a fully functional payment page where users are able to input their card into the website.

Music play upon clicked

The website has a gallery page where all the songs of the band are placed there and upon clicked song will start playing

Filter

The buy buttons on the store page are all align but when user press on the filter the buttons are not align anymore. - to solve this i need some js script to calculate the layout after filtering

Credits References

• The text for the "Vintage Items" section was inspired by various retro catalogs from the '90s.
• All images used in this project were sourced from the internet and online archives : [https://www.pinterest.com/search/pins/?q=retro+song+covers&rs=typed, https://www.lazada.sg/products/avhdmi-nes-mini-classic-edition-retro-video-games-console-with-2-controllers-built-in-600-classic-nintendo-games-i2828969481-s19505448890.html?from_gmc=1&fl_tag=1]
• Spinning disk : [https://www.youtube.com/watch?v=-FNm58Z9GHM&list=PLQBdl5WgVX_V-GhTtenRU9oBt-6Mh54rk&index=1]
• Hover effects: [https://www.w3schools.com/css/css3_transitions.asp]
• Animations : [https://www.youtube.com/watch?v=Nloq6uzF8RQ], [https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes]
• ChatGPT : [https://chatgpt.com/]
• W3Schools : [https://www.w3schools.com/html/default.asp]
• freecodecamp : [https://www.freecodecamp.org/learn/2022/responsive-web-design/]
• [https://www.youtube.com/watch?v=56KEwU-IcVM, https://www.youtube.com/watch?v=icXQxumuHAE, ]

Acknowledgements

• I drew design inspiration from a variety of retro-themed websites and tutorials, which helped me craft the overall aesthetic for this project. My interest for the music beats from the early 2000s inspired me to create something that captures the nostalgic vibe of that time. I decided to base my project on a legitimate band, The Smiths, although they have already broken up. Through this project, I'm reimagining and recreating something that brings their legacy back to life in a modern, retro-inspired way.

---Enjoy your trip down memory lane with this retro inspired website!---