Vaibhav Singh
Penultimate Year MEng Design Engineer at Imperial College London. Portfolio displaying Interaction Design, Software Development and Motion Design.
(Made with HTML,CSS, JS in 2024)
Other Projects
Penultimate Year MEng Design Engineer at Imperial College London. Portfolio displaying Interaction Design, Software Development and Motion Design.
(Made with HTML,CSS, JS in 2024)
(in development)
Beta Stage - Used by 200 people
Format: Website
Location: London
HTML, CSS, React.Js, AWS Cloud, Figma
Year: 2024
Being inspired by the likes of Letterboxd and Are.na, I wanted to build a platform that:
- Allows people to explore music digitally
- Allows people to recommend music daily
- Allows people to review music critcally
- Connects cross-platform content onto one website to have users create collections
Swiper.Js used for swiping through daily recommendations given by a customer’s network. A user can add it to their listens if they have heard the track. Users can find swipe up as well to add it to their wishlist, or log the same to their profile.
Inspiration - My Are.na channel
Home Page
As part of the website, there would be different components that are common across pages. One of them is ‘collections’. Collections are essentially playlists of albums and tracks curated by users together. They can then export these directly to Spotify and listen.
Another component is Reviews. Reviews allow users to rate and review albums, highlight favourite tracks, etc. People can then like, comment and share these reviews. These would be kept common across pages.
Activity Feed: The activity feed is a carousel of recently logged and liked songs by your connections. They would make entries, as they would with a diary, and then users would get to follow on the activity.
Figma Spread of development, design, inspirations, etc
Shows development of project from Aug 2024-Jan 2025.
UI elements were designed and exported to HTML, CSS.
Page flow was achieved using Figma Prototype.
The figma spread shows different designs for mobile, desktop website formatting, universal elements, image carousels, etc. Sections were created for different timelines, and iterations were made for each button, motion graphics/animation was also prototyped in After Effects.