The History of Synths

A vibrant world of knobs and sounds

My classmate Anna Atiagina and I created a playful website that explores the evolution of synthesizers. We set out to offer a delightful experience for the user as they navigate the dense history of these dynamic machines.

The site is currently live and can be visited through this link. History of Synths!

History of Synths section on the Roland Revolution and the instruments of techno, hip hop, and electronic music

Web Design

My role in this project was primarily web layout, research, and directing the overall tone of the site, while my partner was responsible for the illustrations and animations. Through this project and the guidance of my classmate, I learned a great deal about coding and web design.

The website is laid out in a long format and scrolls down through the history of the synthesizers we covered. As the user scrolls down, new synths appear on their left and right. Each one is accompanied by a sound sample demonstrating the machine's capabilities. We focused on what made each machine interesting and unique.

History of Synths section on the east and west coast theories behind synthesis History of Synths section on the east and west coast theories behind synthesis

Several synths are examined in greater detail for their historical significance. A "sticky element" is used to pause the viewer on these synths, as facts and information on the synths roll past.

History of Synths section explaining the TB-303 History of Synths section explaining the DX7
History of Synths section explaining the Minimoog History of Synths section with larger synthesizer illustrations going through and explaining the special dynamics of specific synths

Interactive Design

It was crucial to us that the site be fun, friendly, and delightful to navigate. We edited sound samples of each synthesizer and created buttons that are playable upon click. We chose a unique side navbar to keep the experience funky.

History of Synths has interactive buttons allowing the user to hear samples of these classic synths and instruments

Ultimately, we wanted to make a website that felt like both a resource and an experience. We went through many iterations as to how the site should function and feel, ultimately deciding on blocky illustrations and brief but descriptive explanations. In the process, I learned a great deal about workflow, collaboration, and ways that I like to code.

History of Synths section on the Microkorg

Visit Our Live Site Here