This is a fictional band website created for ID assignment 1 project
Before I begin wireframing the website, I looked for multiple inspirations on the internet for idea on how to design a band website.
I also thought about the different stakeholder's goal:
- As a Fan, I want to go to their website, so that book concert, buy merch, listen to some of their music and learn more about their history
- As a Other Band, I want to contact them to collaberate with them in the future
- As a musician, I want to contact them to join their band
- As a Site Owner, I want to get more traffic to the website, so that more users can buy our merch and book for concerts, so that I can generate more revenue
- As a SEO Engineer, I want to make the website as search engine optimized as possible, so that the ranking of the website will be higher on all the search engine and get more users
- As a Web Deigner, I want to design the website with good UI & UX, so that the website is easy to navigate and not lose user due to poor design
- As a Front-end Web Developer, I want to create website almost exactly like the deisgn while making it compatable and respoinsive to all the browser and differnet screen size, so that it can reach more users
- As a Front-end Web Developer, I want to optimize the website as much as possible, so that users will not leave due to the long waiting time
Link to the wireframe: https://xd.adobe.com/view/1a47f761-2a84-4e81-91d5-72511e237538-4f14/
- List of songs
- Custom music player made from scratch
- Photos of the members
- Publised concert, concert information and allow user to book ticket through this websute
- Showing history of the band
- Shop page with items
- items added to card will still remain after refresh
- Shopping cart page to checkout the items
- Responsive website
- Microinteractions
- Animation on scroll
- Filter button to further filter the items based on the category
- Lazy loading for images to speed up page loading speed
- In the shop section able to click on the item for a new page to see all its detials
- Unique page for each band members to know more about them
- HTML, CSS & JS
- SCSS
- This project uses SCSS to make writing css more organized and less painful to write
- https://sass-lang.com/
- Passes the W3C Markup Validation Service Without any error
- Passes the W3C CSS Validation Service Without any error
- In the cart section, the line on top of the total price jitters when the price changes.
- The audio player is a bit buggy
- The Search bar and the sort by dropdown does not filter together
Icons:
- https://fonts.google.com/icons?selected=Material+Icons+Outlined:assignment_returned
- https://iconmonstr.com/
Images:
- https://unsplash.com/photos/YZpuFugdy8Q
- https://unsplash.com/photos/XYJ-huzNby4
- https://www.pexels.com/photo/woman-holding-guitar-while-sitting-2118046/
- https://unsplash.com/photos/Wr0TpKqf26s
- https://unsplash.com/photos/6Nub980bI3I
- https://unsplash.com/photos/qeDcKFADdp8
- https://unsplash.com/photos/fEt6Wd4t4j0
- https://unsplash.com/photos/c_GmwfHBDzk
- https://unsplash.com/photos/QXevDflbl8A
- https://unsplash.com/photos/9y1cTVKe1IY
- https://unsplash.com/photos/07eCb8SVGus
Videos:
Text:
- The text for history of the dummy band as copied from: https://en.wikipedia.org/wiki/Genshin_Impact
Inspirations:
- https://dribbble.com/shots/15220200-Moon-Discography-Page
- https://dribbble.com/shots/7598609-Parcels-Album-Vinyl-shop-release-concept
- https://dribbble.com/shots/13866033-Fallgrapp-One-page
- https://dribbble.com/shots/14382636-Shop-Page-Music-WordPress-Theme
- https://dribbble.com/shots/10345636-Shopping-Product-Page-UI/attachments/2205978?mode=media
Song Credits:
- https://www.youtube.com/channel/UCXj8C5C3jMIQJMsyOJk3U8A/videos (My friend's channel with his permission)
Code:
Some portion of the css layout are inspired by bootstrap (Note: I do not download any templates) https://getbootstrap.com/
Note: All css code are build from scratch. No templates has been used
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
