History of Synths

Illustrated interactive website about the history of synthesizers.

The project that started as a brief school assignment and turned into a passion project and a real website. HistoryOfSynths changed its face several time and has a year-long history of continuous improvement. I worked on illustrations, CSS animations, JavaScript interactions.

Roles: Illustration, animation, front-end development
Skills: Adobe Illustrator, HTML5/CSS3, JavaScript
Timeframe: 8 weeks
Collaborator: Scott Sanders
Live Website: HistoryOfSynths.com

01. Description

History of synthesizers is a long-scroll story of how the synthesizers were changing and developing over the last decades. It is created for children, young adults and anyone who wants to learn about synthesizers in a fun simple way. To create a delightful experience for a viewer, I have added more color to my illustrations to make each synth have its own visual voice, just as it does in music.

Image of scrolling trhough the top of the website
Image grid of synths illustrations

02. Challenge and objectives

Challenge/Problem: Create an interactive long-scroll page that has a storytelling component to it.

Project Goals and Objectives: We had to choose any topic and create an interactive web page around the chosen topic. The process included the whole cycle, starting from concept creationg, copywriting to working on design system and final coded product.

Deliverables: concept; design system; copy; illustrations; interactions; CSS animation; audio samples; webpage coded using HTML/CSS/JavaScript.

Project Background and Description: History of synthesizers is a long-scroll story of how the synthesizers were changing and developing over the last decades. It is geared towards children and anyone who wants to learn about synthesizers in a fun simple way. It has a main character., robot Bob, who travels through time with the user and shows how synth culture changed. It also has an interactive component to it: you can click on each synth and listen to a sample music made with it.

History of Synths Website - Scroll Through

03. Process

Our website changed its face a lot during the last year, and was very different from what you can see now at historyofsynths.com. There is a couple technical changes that I plan to implement during the summer 2018, so it is in constant progress and it was a great learning experience throughout two school years.

Step 1. Concept and storytelling.

When we started the project, we decided to go with what was interesting for us. We both like music a lot, and Scott has several synthesizers, so we decided to make a fun website about synths. We took a couple of websites that had storytelling on scroll as an inspiration. Scott made a timeline and wrote short paragraphs for the history. From the beginning he had a better understanding of the history of synthesizers, so he became a creative director on the project as well as a copywriter.

Step 2. Illustration system.

First version of History of Synths had Bob, a robot who was changing its image on scroll depending on the era he was introducing to user. The idea of the robot that changes his appearance on scroll was born when we were brainstorming the concept and tried to solve how to connect different periods into one story. Based on Scott’s copywriting, I have added distinctive elements of each era to Bob’s looks.

Image of different Bob's personalities

The goal was to make each synth individual, like a person. To create a delightful experience for a viewer, I have added colors to make each synth have its own visual voice, just as it does in music.

Illustration of Fairlight synthesizer
Illustration of Doepfer synth

All Bob’s illustrations were exported as svgs and animated them using CSS3 animation techniques. I also illustrated three major synthesizers – Roland TR-303, Yamaha DX7 and Minimoog. They were also illustrated using CSS-3 techniques and I’m currently working on adding comments of different synths feature that would be visible when you hover over different areas of the synth.

Animated gif of Roland TR303

Step 3. Front-end development.

The structure of our page was coded by Scott Sanders using Bootstrap template. As of now, I think Flexbox would be perfect for our purposes, and I’m considering re-writing the code later because I want this page to stay relevant in the future.

I added svgs and animated them with CSS. I took a lot of time and cross-browser testing to figure which animations are worth keeping. Apart from different rendering of the same CSS animation keyframes in different browsers (sometimes dramatically different), I was worried a lot about the CPU load. My computer was constantly overheated, and even though I tried to use all recommended approaches, I had to get rid of the most of the CSS animation that we had.

Here is an example of a simplified Bob animation after I had to get rid of more complex animations for the sake of CPU.

Step 4. Adding interactions.

History of Synths is a website about music in the first place, so we just had to have sound on! Scott prepared a set of audio samples – one for each synth – and I have coded a JavaScript function that was toggling sound of each synths on and off. At first we had an icon of volume that changed on hover, but after user testing I have created another JavaScript function that was also toggling Play/Stop. This helped to make it clear for user that the music had started even if it was very quiet or their sound was off.

Gif of Roland Synth Section Scroll

Step 5. Long Scroll.

My biggest challenge with this project was to figure how to make Bob change on scroll. At first, I have written a JavaScript function that was changing Bob’s svg depending on the number of pixels scrolled from the top of the page but it was not responsive it all. Basically, the website only worked on the screens around 1500-1600px wide). This old version of website still lives at synths. atiagina.com.

A few weeks later, in summer 2017, I went back to the website because it was bothering me that such a lovely project cannot go live because of these constraints. After a couple of nights I wrote another JavaScript function that was changing Bob’s appearance based on the height of the container of each era. It made the whole page responsive and that’s when the domain historyofsynths.com was happily purchased.

Robot Travels Through The History of Synths - Scroll Through

Step 6. Revisions and sacrifices.

Year later we decided to go back and look at the History of Synths again. After showing to a couple dozens people and testing it with different audiences, Scott and I decided to change our focus from children to young adults.

We also realized that we had several issues with Bob: sometimes Bob seemed to confuse users instead of helping them understand the story. Also, Bob was an obstacle in mobile experience. At the same time, all people liked synths illustrations, sound interaction and big detailed images of three major synths. So, after some discussion we decided to leave out Bob. We also slightly redesigned the website, to make type less colorful and to give more space and focus to illustrations.

See how History of Synths look now.

See the version with Bob in it.

Curious even more? See the first (desktop-only) version of History of Synths.

04. Solution

History of Synths is an illustrated interactive website that tells a story of synths in different eras in a fun colorful way. Personally for me it became a great lesson both im illustration, JavaScript and CSS animation, and interaction design. This project is currently still in progress and I’m building the hover interactions with major synths, so users can learn more about the specific features and where they are actually located.