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)
Client: Imperial College Radio
Format: Website
Location: London
HTML, CSS, React.Js, Next.Js, SQLite, Figma
Year: 2024
1. Adapting from inspiration
2. Building iterations for each page
3. Protoytyping scrolling and carousels
The motion between pages and scrolling was made smooth and parallax, with the background moving at a slower rate in comparision to the foreground elements. The image carousel was also looped.
Website motion graphics were also made for show visuals, committee members, 3D brand logos, etc. They were prototyped in various softwares, alongwith Blender for 3D modelling as well.
Other inspirations were taken from Rinse.fm, Vandelay.
Annotations were made on webspread using Procreate.
Scrolling and motion animations were converted from HTML
to Figma
1. Grid layout - Thumbnail and 2 carousels for shows under
2. Fixed header - Audio player and pages linked
3. Video & image balance - Videos attract more retention
Page Development
Developed first in Figma, and prototyped using HTML, CSS, JS.
First page: Home page
Second page: Archive page
Third page: Roster page
The page flow of the website was interpreted and prototyped on Figma as that was the easxiest way to map interactions between pages and motion design. In the time between 2023 - 2024, new designs were made and tested. These were the following pages and their developments. The changes were made to the home, archive & roster pages.
Website page flow from home to roster to archive. Layout of shows, committee members, archived shows, embedded videos from YouTube.
Figma Spread of development, design, inspirations, etc
Shows development of pages from Aug 2021-2024.
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.