Blog
 
10.06.16
|
Web Design & Development

Absurd Title!

Two summers ago, after my junior year of high school, I dove into a web programming internship with MGH that ultimately guided my academic trajectory and inspired me to be creative in a seemingly monotonous environment. Armed with spotty knowledge of web markup and an intense curiosity to understand front-end web design, I landed my first project on day one. The task was to create an internal wire framing utility so designers could easily transfer their designs to code and see the results in real time. I studied dynamic programming online at night, but my best efforts fell leagues short of a usable product, even with help from Chris, MGH’s lead developer. The ironically named “Supertool” has thankfully since been deleted from the servers, although the time spent on that code wasn’t in vain. As they say, I was bitten by the programming bug.

Before I left MGH that summer, I had already begun planning an independent study in cryptography and programming, and touring universities where computer science was in focus. I’m currently preparing for my sophomore year at Drexel University in Philadelphia, where I will be on co-op for the first six months with the water department’s public affairs team. I’ll be using all the coding and marketing lingo I’ve learned up to this point in my web design and production there, so I’m very excited to start with them this fall!

On a completely separate path, I began studying advanced music production in my spare time. With a background in theory and jazz piano, it felt like a natural way to express myself musically, without access to expensive equipment and band members at a moment’s notice. Despite the hours of homework and exam preparation required for my intense math and programming courses, I found some time to focus on that craft and make some friends in the industry. With a few commissioned works under my belt, I was at the crossroads of deciding how much time to apply to this hobby or how I could fit it into my global picture.

Around finals week, I was toying around with the idea of an interactive music site, to combine my coding and musical prowess, but I didn’t have the resources or motivation to attempt any remotely detailed designs. I put it to the back of my mind while I pursued more pressing projects. Upon my return to MGH this past summer, I found myself with just enough free time to reconsider the site. The idea started to take shape when I stumbled on a Javascript library dedicated to super simple web audio, called Tone.js. Like a kid in a candy store, I spent a few days flying through the documentation and example code, and hacked together a quick proof of concept.

The Mixer design rested on the idea that music should be experienced rather than consumed. Spotify’s and Soundcloud’s catalogues stretch so deep that it has been mathematically proven that one person can never listen to all the music in the world (I don’t remember where I read it), so the concept that musical experiences should be unique, personal and memorable resonated with me. The essence of the site is a pitch/frequency analyzer that users can drag around to filter out the audible pitches in the currently playing song. By clicking around the background of the screen, users can distort selected tracks in the music, giving them even more control over the audible pitches present. At the bottom left of the screen is a scene changer that changes between four different songs and visual designs to show off dynamic capability (and three other instrumentals I made).

With outstanding direction from Chris, and a spiffy outsourced design, the project was building itself as fast as I could learn the required technology. The exceptionally daunting Adobe Photoshop, which I had to use for this project, scared me a bit less after sizing it down to the handful of tools and windows I actually needed. The infinite options in dynamic styling felt less overbearing upon narrowing them down to the simplest possible solutions. I was on a roll and wrote the core functions quicker than I could save the changes. By the time we sanded the edges and applied the final coat of paint, I had packed away some fantastic coding and design tricks. I really enjoyed working on such a unique website, and I hope have the opportunity to create a similar one soon. This project would not have been possible without MGH, and I’d like to thank everyone involved that could help make this project a reality!

Related Posts

11.23.16
|
Web Design & Development
It’s that time of year again…retailers are hitting consumers hard with every kind of marketing medium available. My ...
10.13.16
|
Web Design & Development
Who doesn’t love getting mail? Email from your subscribers has finally become easier on the eyes. Last month, Google a...
08.10.16
|
Web Design & Development
If you’re a digital marketer who spends your days designing or building sites, testing website responsiveness, creatin...

This website uses cookies to ensure you get the best experience on our website.

Click here for more information

Accept All Cookies