The Triowave Plaza Station
Welcome to the Triowave Plaza Station. Harness the power of machine learning and create random trio's from bass, melody, and drum samples. The juxtaposition of the nostalgic windows 98 aesthetic draws the user to similarities and differences between the elements. Here, the sound of the trio's sound very retro, almost arcade-game-like. But in reality, new and modern technology like machine learning is embedded in order to create this 'Triowave Plaza Station'. These samples of trios can be manipulated by the user, altering the tempos from 40bpm to 120bpm.
HTML: Building blocks and structure of the webpage
CSS: Create the style and layout of the UX/UI
Magenta: An open source research project exploring the role of machine learning as a tool in the creative process.
I created a timeline for myself to ensure that I would have enough time to plan, iterate, build, and re-code the project after receiving feedback from Cale in the labs.
First, I wanted to establish what UX/UI design would be appropriate for my trio plaza web app. I thought the juxtaposition of the nostalgic windows 98 aesthetic draws the user to similarities and differences between the elements. I loved the idea of having new technology disguised as old, creating tension for the audience users.
I built out the foundational windows 98 desktop screen in HTML + CSS. I started off with the basic windows pop up and start bar.
After receiving feedback from Cale in lab, he told me that this could be very ambitious and I should start building the basic functionality of my concept. I started with the main buttons I wanted to have in my Trio Plaza audio player.
- Faster Trio
- Slower Trio
- # of speed in bpm
This was the version I presented in labs for our presentations. Cale had some good feedback, wanted to see if I could incorporate other elements that would allow the user to manipulate the sound trio further. I only had a week left though until the final sound project was due so he told me it was okay if I could just clean it up and make it less glitchy.
Here, I added a little photo to be 'cover art' for the trio that was being played. Added a visual element that was much needed on this interface. Also made the buttons more spaced out. I added windows for the 'About' and 'Settings' so the user would have no confusion going about it.
As a result, I decided to do an array for the cover art to help compliment the audio trios being created/played. Now, as users would move to the next trio, a new gif/ cover art would show. I also finished all of the copy for the About and Settings window. The major glitches were fixed and I was really happy of the final product.