Sounds of Protest is an interactive website about protest music and its social significance. The project is aimed at people of all ages with an interest in music and culture, as well as those who have lived through these times.
Users can explore different eras of music history from 1940s to the present and learn more about songs that emerged as expressions of protest and social criticism. The goal was to bring history and music to life in an immersive way and to combine information with an interactive user experience.
Interactive 360° views allow users to immerse themselves directly in each historical period, while historical figures provide additional insights into the social and musical developments of their time. The website was developed as a mobile app for the iPad. The interactive 360° experiences were created using A-Frame and Code and supplemented with 3D models, some of which were created by myself. Historical black-and-white photographs, a timeless design, and navigation via a timeline create a cohesive and atmospheric user experience.
First, I thought about which media would be best suited to presenting the topic in an interesting way. In the end, I settled on the idea of making the topic an interactive experience.
I began experimenting with modeling 3D objects in Blender that represent this era. These objects move and create a sense of tension. The remaining elements are rendered in a cut-out style and include speech bubbles.
I experimented with various methods to virtually recreate the historical setting in the room. Using real-world imagery, I created 360-degree scenes with Midjourney and Adobe Firefly that were appropriate for the corresponding time period.
To test the website's functionality, I created a user flow.
For the mood board, I chose a simple, minimalist design with a bold contrasting color. The lines are inspired by sound waves on the one hand, and by radio controls and a timeline on the other.
I implemented the final design and functionality in Webflow as a mobile-optimized website for tablets. The 360-degree views with interactive elements are integrated directly into the website using A-Frame. The website can be expanded to include additional time periods.
